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 *
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 *
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
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
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 *
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
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 *
Moc děkuju, báječně jste to vychytal.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: