Chyba v css

Creator13

(49 hodnocení)

1. 4. 2014 13:32:39

Snazim sa vytvorit inline menu. Ukazka je tu http://www.predaj-psov.eu/menu/

Medzi jednotlivymi odkazmi je vsak medzera 1 alebo 2px siroka a neviem ju odstranit. V com by mohla byt chyba?

HTML

Odkaz 1

Širší Odkaz 2

Odkaz 3

Odkaz 4

Odkaz 5

Odkaz 6

CSS

ul.dva {
border:1px solid #000000;
width:700px;
margin:0;
padding:0;
box-shadow:2px 2px 10px #000000;
background:#990000;
height:30px;
}
ul.dva li{
display:inline;
list-style:none;
background:#990000;
text-align:center;
padding:5px 0px 6px;
margin:0px;
}

ul.dva li:after{
content:"";
position:relative;
width:1x;
border:1px solid #731616;
}

ul li.no-border-right:after{
border:none;
}

ul.dva li:last-child{
border:none;
}
ul.dva li:hover{
background:#3a0c0c;
}

ul.dva li a{
line-height:30px;
text-decoration:none;
color:#ffffff;
font-size:14px;
font-weight:bold;
padding:5px 20px 6px;

}

1. 4. 2014 13:32:39

https://webtrh.cz/diskuse/chyba-v-css/#reply1011400

Miloslav Lešetický

(10 hodnocení)

1. 4. 2014 13:40:30

Creator13

Máš v zásadě dvě možnosti:

1. Jednotlivé položky LI neodsazuj - jinak řečeno - dej je na jednu řádku bez jakékoliv mezery mezi sebou

2. Druhé řešení je možná vhodnější - použij vlastnost float a nechej položky plavat (pokud je tedy nepotřebuješ celé horizontálně vycentrovat). Viz rychlá ukázka s komentářem: http://klient.plavacek.net/menuli.html

Doplnění: Pokud potřebuješ položky horizontálně vycentrovat, i když jsou plovoucí, řešení najdeš v této ukázce: http://pokusy.1-webdesign.cz/centrovany-float.html

1. 4. 2014 13:40:30

https://webtrh.cz/diskuse/chyba-v-css/#reply1011399

bof

1. 4. 2014 14:26:09

Napsal Plaváček;1074193
Creator13

Máš v zásadě dvě možnosti:

1. Jednotlivé položky LI neodsazuj - jinak řečeno - dej je na jednu řádku bez jakékoliv mezery mezi sebou
2. Druhé řešení je možná vhodnější - použij vlastnost float a nechej položky plavat (pokud je tedy nepotřebuješ celé horizontálně vycentrovat). Viz rychlá ukázka s komentářem: http://klient.plavacek.net/menuli.html

Doplnění: Pokud potřebuješ položky horizontálně vycentrovat, i když jsou plovoucí, řešení najdeš v této ukázce: http://pokusy.1-webdesign.cz/centrovany-float.html

Nepopisuješ úplně špatně, ale existuje daleko jednoduší řešení.

css:

a mame hotovo :)

Pokud pvky nastavujeme, na odkaz tak cast padding-left, right presuneme do polozky odkazu a nastavime mu taktez float: left;

A tady úplný příklad i s odkazama uvnitř.

Psal jsem to z hlavy takze muze byt nekde chybicka :)

1. 4. 2014 14:26:09

https://webtrh.cz/diskuse/chyba-v-css/#reply1011398

Creator13

(49 hodnocení)

1. 4. 2014 14:26:32

Diky Plavacku...

1. 4. 2014 14:26:32

https://webtrh.cz/diskuse/chyba-v-css/#reply1011397

Miloslav Lešetický

(10 hodnocení)

1. 4. 2014 14:29:20

bof

Padding je vždy vhodnější nastavovat odkazům, nikoliv položkám seznamu. Potřebujeme totiž, aby celá plocha byla klikatelná. Pokud se týká samotného stylu, převzal jsem ho od autora tématu a jen upravil. Jistě, že se dá napsat stručněji.

1. 4. 2014 14:29:20

https://webtrh.cz/diskuse/chyba-v-css/#reply1011396

bof

1. 4. 2014 14:30:28

Napsal Plaváček;1074213
bof
Padding je vždy vhodnější nastavovat odkazům, nikoliv položkám seznamu. Potřebujeme totiž, aby celá plocha byla klikatelná. Pokud se týká samotného stylu, převzal jsem ho od autora tématu a jen upravil. Jistě, že se dá napsat stručněji.

Kdybys nebyl netrpelivy :) dockal by jsi se i takoveho prikladu :) jeste nez jsi to odeslal tak jsem to pripravoval je to tam :)

1. 4. 2014 14:30:28

https://webtrh.cz/diskuse/chyba-v-css/#reply1011395

David Musil

(69 hodnocení)

1. 4. 2014 15:01:40

@Plaváček

Plaváčku, maličko OT - ale narazil jsem na jeden tvůj webík a odskakuje pátá položka na samostatný řádek, konkrétně Iphone S5 http://www.mobil-bar.cz/ (Novinky z naší nabídky)

1. 4. 2014 15:01:40

https://webtrh.cz/diskuse/chyba-v-css/#reply1011394

Pro odpověď se přihlašte.

Přihlásit