Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)
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
IT Man
Redaktor
Avatar
Odpovídá na tbartolen
IT Man: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
Cokoliv a kdokoliv může jednou uspět.
Avatar
tbartolen
Člen
Avatar
Odpovídá na IT Man
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 IT Man
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
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í
+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: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.