Avatar
tbartolen
Člen
Avatar
tbartolen:

Jsem perfekcionista, a rozhodl jsem se celé menu kompletně předělat. Ale zase narážim na problémy...

Mám CSS :

.main-navigation /* okolo navigace, nejsem si uplně jistý, font menu*/ {
        font-family: verdana;
    background: #ef981e;


}
.main-navigation:after {
        clear: both;
        content: "";
        display: block;
}
.main-navigation ul {
        list-style: none;
        margin: 0;
        background-color: #2fff00;



}
.main-navigation li {
    background-color: #880000;
        float: left;
        position: relative;


}
.main-navigation a /*barva pisma v navmenu*/{
        font-size: 1.4rem;
        font-size: 14px;
        color: #ffffff;
    display: block;
    font-weight: normal;


    padding: 15px;
    text-decoration: none;
        text-transform: uppercase;
        word-spacing: 4px;
    background-color: #66CCFF;
    width: 100%;

Nechápiu, proč je vpravo ta oranžová čára...a nemužu se jí zbavit ...poradil by někdo? Děkuji

Odpovědět 17.2.2015 16:36
Navštiv www.fb.com/skkelticz
Avatar
IT Man
Redaktor
Avatar
Odpovídá na tbartolen
IT Man:

Ta barva je z třídy .main-navigation. Dej tam tu modrou barvu, co máš na tlačítkách a zbavíš se jí. :)

Nahoru Odpovědět  +1 17.2.2015 16:42
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
tbartolen
Člen
Avatar
Odpovídá na IT Man
tbartolen:

Mno jasný, ale neřeší to moc problém, jak roztáhnout tlačítka na celou délku, a případně tohle...:

.main-navigation /* okolo navigace, nejsem si uplně jistý, font menu*/ {
        font-family: verdana;
    background: #ef981e;

}
.main-navigation:after {
        clear: both;
        content: "";
        display: block;
}
.main-navigation ul {
        list-style: none;
        margin: 0;
        background-color: #2fff00;
    width: inherit;


}
.main-navigation li {
    background-color: #ffffff;
        float: left;
        margin: 0px;
        position: relative;
    width: inherit;





}
.main-navigation a /*barva pisma v navmenu*/{
        font-size: 1.4rem;
        font-size: 14px;
        color: #ffffff;
    display: inline-block;
    font-weight: normal;
    padding: 15px;
    text-decoration: none;
        text-transform: uppercase;
        word-spacing: 4px;
    background-color: #66CCFF;
    width: 100%;
    border: solid 1px #000000;

}

Kde mi to zase bezdůvodně přetejká o jeden nebo dva pixely...:-/

Nahoru Odpovědět 17.2.2015 16:48
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
Odpovídá na IT Man
tbartolen:

Aha, ž chápu, tak ještě musím vyřešit, jak dostat ohraničení okolo tlačítek, děkuju

Nahoru Odpovědět  +1 17.2.2015 16:52
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
tbartolen:

Tak ještě jeden hloupý dotaz...pokud do toho kódu přidám border...takhle :

.main-navigation a /*barva pisma v navmenu*/{
    font-size: 1.4rem;
    font-size: 14px;
    color: #ffffff;
    display: block;
    font-weight: normal;
    border: 1px solid #ff0800;

    padding: 15px;
    text-decoration: none;
    text-transform: uppercase;
    word-spacing: 4px;
    background-color: #66CCFF;
    width: 96%;
}

Není těch 96% špatně? Nerozhází se mi to potom na jiných rozlišeních? Jak to případně vyřešit jinak ? Ten border mi přidá 4 px do délky a dva do výšky, a ty na délku jsou problém, protože to přečuhuje ...

Nahoru Odpovědět 17.2.2015 17:07
Navštiv www.fb.com/skkelticz
Avatar
Odpovídá na tbartolen
Vojtěch Mašek (Woyta):

To spraví vlastnost box-sizing

box-sizing: border-box;

Takhle se ti bude border a padding počítat do celkové šířky velikosti (width a height)

Editováno 18.2.2015 17:14
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět  +2 18.2.2015 17:14
Výraz "to nejde" není v mém slovníku
Avatar
Tomáš123
Člen
Avatar
Odpovídá na tbartolen
Tomáš123:

Alebo pridaj orámovanie odkazu <a> nie položke <li>. Poprípade neudávaj šírku 96% vôbec. Blokový prvok sa roztiahne aj sám a neudanie šírky zabezpečí, že nebude potrebný box-sizing. Navyše kombináciou percent a pixelov nikdy nedosiahneš optimálne riešenie pre všetky rozlíšenia.

Niektoré vlastnosti v CSS sa mi zdajú zbytočné (najmä to position: relative). Kód som ale neskúmal tak sa možno mýlim.

Nahoru Odpovědět 27.2.2015 18:34
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.