Autor | Zpráva | ||
---|---|---|---|
vaschez Profil * |
Dobrý den,
měla bych prosbu. Mám stránku s 3 sloupci s různou šířkou. Nad prostředním sloupcem chci horizontální menu,nad ostatníma je ve stejné úrovni stejně široký pruh. Menu řeším klasicky jako ul, li, celé menu má svůj div(div#hornimenu) stejně jako sousedící dva pruhy ( div#pred, div#za). a to celé jsem opět dala do divu (div#hornilista). Tím sjem myslela, že je všem prohlížečům jasné, jak to zobrazovat. IE mi rozumí a zobrazuje vše správně, ovšem Moz Fir si dělá co chce a když mám vše xkrát přepočítané, tak odmítá řadit menu a pruhy do stejné úrovně. A ještě mi přijde, že Moz Fir nerespektuje výšku pruhu zadanou v px a text mi háže pod. Díky moc za pomoc. Veronika div#hornilista { wid th: 989px; height: 20px; border-bottom: 4px solid white; margin: 0px; padding: 0px; } div#pred { width: 150px; height: 20px; background-color: rgb(229,229,229); float: left; margin: 0px; } div#hornimenu { height: 20px; widt h: 582px; text-align: center; display: block; border-left: 7px solid white; float: left; margin: 0px; padding: 0px; } div#hornimenu a { display: inline-block; width: 108px; height: 20px; text-align: center; paddi ng-top: 7px; text-decoration: none; font-size: 11px; text-align: center; color: white; } div#hornimenu a#kuchyne { background: rgb(153,255,51); borde r-left: 7px solid white; } div#hornimenu a#satniskrine { background: rgb(255,144,0); } div#hornimenu a#loznice { background: rgb(255,0,0) } div#hornimenu a#dvere { background: rgb(51,102,255); } div#hornimenu a#ostatni { background:rgb(153,51,153) ; } div#hornimenu a:hover { background-color: red; text-decoration: underline; color: black; width: 108px; font-size: 10px; height: 20px; text-decoration: none; } div#za { width: 250px; height: 20px; background-color: rgb(229,229,229); float: right; } Moderátor Davex: Vkládej prosím kódy mezi značky [>pre] a [>/pre] (stačí kliknout na
![]() |
||
margin Profil * |
#2 · Zasláno: 16. 1. 2011, 19:50:44
Vidím tu float, ale nikde žádný clear, více Jak funguje „float“ a „clear“.
Navíc mám malou představivost, tak si nedokáži z tvého CSS odvodit HTML, chtělo by to odkaz na živou ukázku. |
||
vaschez Profil * |
#3 · Zasláno: 16. 1. 2011, 20:42:31
Tak Váš odkaz pečlivě studuji, doplnila jsem si i hr čistič, nicméně mi přijde, že problém je v tom, že mozilla svéhlavě centruje menu doprostřed stránky - i když se o to nikdo neprosí.:) Nějaká rada?
|
||
panther Profil |
#4 · Zasláno: 16. 1. 2011, 20:44:31
vaschez:
pleteš se, prohlížeč nikdy nedělá to, co mu není předepsáno ve stylopisu. „Nějaká rada?“ bez odkazu na web těžko. Nedává dostatek informací a tunami kódu se prohrabovat nebudu. |
||
zvěřiňák Profil |
#5 · Zasláno: 16. 1. 2011, 21:22:21
vaschez:
Pro začátek by asi stačilo opravit ty chyby v kódu a Firefox už to bude (pravděpodobně) zobrazovat jako IE. div#hornilista { wid th: 989px; height: 20px; border-bottom: 4px solid white; margin: 0px; padding: 0px; } div#hornimenu { height: 20px; widt h: 582px; text-align: center; display: block; border-left: 7px solid white; float: left; margin: 0px; padding: 0px; } div#hornimenu a { display: inline-block; width: 108px; height: 20px; text-align: center; paddi ng-top: 7px; text-decoration: none; font-size: 11px; text-align: center; color: white; } div#hornimenu a#kuchyne { background: rgb(153,255,51); borde r-left: 7px solid white; } |
||
vaschez Profil * |
#6 · Zasláno: 16. 1. 2011, 21:38:10
To tam mám schválně, funguje to blbě i s tím.
jinak zde odkaz: www.nabytek-homer.cz. Dala jsem tam jen nezbytný základ, snad nevadí. Myslím, že chyba je opravdu v tom, že to sveřepě centruje menu na střed. zkusila jsem si hrát s position, ale očividně blbě. |
||
panther Profil |
#7 · Zasláno: 16. 1. 2011, 22:03:30 · Upravil/a: panther
vaschez:
„Dala jsem tam jen nezbytný základ, snad nevadí.“ pokud se závada projevuje, stačí osekaná verze. Web jako takový nás nezajímá. Příště upřesni i verzi IE - osmička se chová jako FF. Problém je v položkách menu a odkazech. na 103. řádku nahraď display: inline za float: left - položky je lépe floatovat, mají-li být vedle sebe (stejně tak ul {display: inline} - deklarovat blokové jako řádkové nebývá potřeba, většinou to je za účelem srovnání na řádek -> float)
na 113. řádku nahraď display: inline-block za display: block
k odkazům přidej i line-height: 20px , pokud v nich chceš text centrovat vertikálně
zvěřiňák: tyto chyby prohlížeče ignorují, takové vlastnosti neznají. Dělá se to poměrně normálně během debugování, že se jednotlivé vlastnosti rozbíjejí (je to snazší, než jí dávat do komentáře a smazání není vhodné z důvodu navrácení do stylopisu). |
||
vaschez Profil * |
#8 · Zasláno: 16. 1. 2011, 22:56:19
Moc děkuju, báječně jste to vychytal.
|
||
Časová prodleva: 13 let
|
0