CSS menu

6. 9. 2011 15:55:05

Zdravím,

potřeboval bych poradit s jedním menu, kdy potřebuju jednotlivé položky rovnoměrně roztáhnout po celé šířce bloku viz demonstrace:

http://knotdesign.cz/menu/index.html

Zkoušel jsem dát každé položce odsazení stejné z prava i leva - bohužel prohlížeče to nevzali (každý to zobrazoval jinak.)

kód

css

díky za radu

Lukáš Pavel

6. 9. 2011 15:55:05

https://webtrh.cz/diskuse/css-menu#reply674430

Ondřej Švec

6. 9. 2011 16:02:40

takto to nejde?

6. 9. 2011 16:02:40

https://webtrh.cz/diskuse/css-menu#reply674429

Firemniweb.com

(2 hodnocení)

6. 9. 2011 16:07:26

buhužel ne

6. 9. 2011 16:07:26

https://webtrh.cz/diskuse/css-menu#reply674428

Jaroslav Hrách

(14 hodnocení)

6. 9. 2011 16:15:43

Co přepsat číselnou hodnotu v menu?

.menu {width: auto;}

6. 9. 2011 16:15:43

https://webtrh.cz/diskuse/css-menu#reply674427

Ondřej Švec

6. 9. 2011 16:17:49

https://webtrh.cz/diskuse/css-menu#reply674426

Firemniweb.com

(2 hodnocení)

6. 9. 2011 16:23:26

izmy

Nefunguje

----------------------------------------------------------------------------------------

Napsal ondrej.svec;698054
.menu {width:970px;height:48px;background:black;color: white;padding:0px;margin:0px;}.menu ul {list-style-type: none;padding:0px;margin:0px;}.menu li {width: 11.1111%;white-space: nowrap;float:left;}.menu li a {white-space: no-wrap;text-align: center;display:block;color: #fff;background: blue;line-height:48px;text-decoration:none;}

Toto už vypadá dobře jen 2 a 3 se překrývají ( dal jsem to do demonstrace )

6. 9. 2011 16:23:26

https://webtrh.cz/diskuse/css-menu#reply674425

Ondřej Švec

6. 9. 2011 16:29:54

Ano, překrývají... buď zruš ten nowrap, zmenši písmo, nebo sniž line-height, aby se to tam vlezlo.

6. 9. 2011 16:29:54

https://webtrh.cz/diskuse/css-menu#reply674424

Firemniweb.com

(2 hodnocení)

6. 9. 2011 16:35:59

zmenšit písmo nemohu a menu musí být jednořádkové, při zrušení nowrap vzniknou 2 řádky

6. 9. 2011 16:35:59

https://webtrh.cz/diskuse/css-menu#reply674423

Ondřej Švec

6. 9. 2011 16:41:58

Tak zvolte moji 3. navrhovanou metodu: line-height: 20px; height: 100%; padding-top: 10px;

6. 9. 2011 16:41:58

https://webtrh.cz/diskuse/css-menu#reply674422

Firemniweb.com

(2 hodnocení)

6. 9. 2011 16:46:44

To stále neřeší ale to že vnikne druhá položka dvouřádková - což je chyba viz demonstrace

6. 9. 2011 16:46:44

https://webtrh.cz/diskuse/css-menu#reply674421

Jakub Hošek

(23 hodnocení)

6. 9. 2011 16:46:56

a co nastavit položkám li transparentní pozadí ( pozadí bloku) , nastavit je jako blokové elementy a šířku jim dát tolik procent, aby se to rovnoměrně roztáhlo ( 1 položka : 100%, 2 položky: 50% , atd )

6. 9. 2011 16:46:56

https://webtrh.cz/diskuse/css-menu#reply674420

Firemniweb.com

(2 hodnocení)

6. 9. 2011 16:50:26

Napsal Z3NTIVA;698073
a co nastavit položkám li transparentní pozadí ( pozadí bloku) , nastavit je jako blokové elementy a šířku jim dát tolik procent, aby se to rovnoměrně roztáhlo ( 1 položka : 100%, 2 položky: 50% , atd )

Již jsme zkoušeli

6. 9. 2011 16:50:26

https://webtrh.cz/diskuse/css-menu#reply674419

Ondřej Švec

6. 9. 2011 17:04:43

Aha už vím, co chceš. Tak to CSS zkus nastavit, aby se chovalo jako tabulka. Z paměti si tyto hodnoty nepamatuju, hledej "display: table-cell".

6. 9. 2011 17:04:43

https://webtrh.cz/diskuse/css-menu#reply674418

Jakub Hošek

(23 hodnocení)

6. 9. 2011 17:12:02

Již jsme zkoušeli

A Jakto, že to nefungovalo ? :) Třeba je chyba jinde....

6. 9. 2011 17:12:02

https://webtrh.cz/diskuse/css-menu#reply674417

Firemniweb.com

(2 hodnocení)

6. 9. 2011 17:18:59

Napsal ondrej.svec;698085
Aha už vím, co chceš. Tak to CSS zkus nastavit, aby se chovalo jako tabulka. Z paměti si tyto hodnoty nepamatuju, hledej "display: table-cell".

Zkusím, ale pokud vím IE 6 , 7 toto neseberou

---------- Příspěvek doplněn 06.09.2011 v 17:19 ----------