Diskuze: Stylování menu

Naučíme tě pracovat na home-office.

Zjistit více...

Aktivity

tbartolen

Člen

tbartolen:17.2.2015 16:36

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

Jan Lupčík

Tvůrce

Jan Lupčík:17.2.2015 16:42

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

17.2.2015 16:42

TruckersMP vývojář

tbartolen

Člen

tbartolen:17.2.2015 16:48

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

tbartolen

Člen

tbartolen:17.2.2015 16:52

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

Nahoru Odpovědět

17.2.2015 16:52

Navštiv www.fb.com/skkelticz

tbartolen

Člen

tbartolen:17.2.2015 17:07

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

Vojtěch Mašek (Woyta)

Tvůrce

Vojtěch Mašek (Woyta):18.2.2015 17:14

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í
+2,50 Kč

Nahoru Odpovědět

18.2.2015 17:14

Výraz "to nejde" není v mém slovníku

Tomáš123

Člen

Tomáš123:27.2.2015 18:34

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.