NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Mezinárodní den IT společnosti je tady! Pouze nyní můžeš získat 90 % extra kreditů při nákupu od 1199 kreditů s promo kódem AJTACI90. Tak neváhej!

Diskuze: Stylování menu

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
tbartolen
Člen
Avatar
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
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na tbartolen
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
+1
17.2.2015 16:42
TruckersMP vývojář
Avatar
tbartolen
Člen
Avatar
Odpovídá na Jan Lupčík
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
Avatar
tbartolen
Člen
Avatar
Odpovídá na Jan Lupčík
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
+1
17.2.2015 16:52
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
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
Avatar
Vojtěch Mašek (Woyta)
Tvůrce
Avatar
Odpovídá na tbartolen
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č
Ř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: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.