Autor Zpráva
Dave23
Profil
Ahoj nedaří se mi nastylovat hlavičku tak, aby se zobrazovala stejně ve všech prohlížečích. FF i Opera zobrazí hlavičku stejně širokou jako je obsah ale IE7 a nižší ji roztahuje podle okna. Vadí mi to hlavně na malém rozlišení, protože hlavička je menší než obsah.
Pak mám ještě jeden malý problém, že se mi nedaří nastavit pravý margin matrosce.

<style type="text/css">
#matroska   { border: 1px solid #13547A; float: left; margin-right: 10px; }
#hlavicka   { height: 70px; background-color: #074C74; color: white; width: 100%;  }
#levy_text  { float: left; }
#pravy_text { float: right; }
</style>
</head>
<body>
<div id="matroska">
  <div id="hlavicka">
    <div id="levy_text">
      Levá
    </div>
    <div id="pravy_text">
      Pravá
    </div>
  </div>
  <img src="vychod.jpg">            
</div>


Ukázka: http://www.erudita.cz/tmp/hlavicka.htm

Díky za nápady
swah
Profil
Pro #hlavicka zruš width: 100%, aby se neroztahovala, #matroska má margin-right v pořádku, možná máš na mysli padding
Dave23
Profil
Zrušení šířky v hlavičce nepomůže, chová se to stejně. Mám na mysli opravdu margin - aby byla vpravo mezera mezi matroskou a oknem ale je možný, že to prohlížeče prostě nechápou.
swah
Profil
Jak na to tak koukám, tak vlasntě nevím, jak to má fungovat. Má-li být layout plovoucí, nechť má #matroska width: 100%;, pokud fixní, definuj pevnou šířku v absolutních jednotkách
Dave23
Profil
Je to plovoucí layout s proměnnou šířkou a logem firmy v hlavičce vpravo. To problém není, protože to funguje všude kromě IE7 a níž ale protože se zatím nedá spoléhat na IE8, potřeboval bych řešení.
Width: 100% to neřeší, protože pak se ta hlavičcka začne zmenšovat pod velikost obsahu ve všech prohlížečích. Pro větší názornost jsem do ukázky doplnil nějaký text.
Dave23
Profil
Tak jsem vynalezl kolo :) margin vyřešilo prosté přidání <div id="matroska_vnejsi"> před <div id="matroska">.
swah
Profil
To mě právě mate, pravíš, že má být layout plovoucí a nefunguje v IE a níže. Ale tam právě funguje, naopak v ostatních prohlížečích má layout fixní podobu. Nebudem to dále pitvat, pro #matroska zruš float: left;, které je tam zbytečné a půjde ti i margin-right: x;
Dave23
Profil
To byla moje chyba, že jsem použil příliš velký obrázek.
Plovoucí layout to je, protože se roztahuje do šířky a minimání velikost určuje šířka obsahu v matrosce - že se to nesmrskne právě způsobuje float: left, takže ho zrušit nemůžu.
swah
Profil
Nějak si nerozumíme. #matroska nemá šířku nijak definovanou, takže se automaticky natahuje po celé šířce - jedná se o div - blokový prvek. To, že je tam float: left; právě naopak způsobuje, že se layout v moderních prohlížečích smrskne. Aktuálně vložený text jen mate, protože roztahuje #matrosku, který by byl bez něj smrsklý.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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