| Autor | Zpráva | ||
|---|---|---|---|
| Dave23 Profil |
#1 · Zasláno: 25. 5. 2009, 22:39:45 · Upravil/a: Dave23
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 |
#2 · Zasláno: 25. 5. 2009, 23:23:11
Pro #hlavicka zruš width: 100%, aby se neroztahovala, #matroska má margin-right v pořádku, možná máš na mysli padding
|
||
| Dave23 Profil |
#3 · Zasláno: 25. 5. 2009, 23:46:33
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 |
#4 · Zasláno: 26. 5. 2009, 00:04:01
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 |
#5 · Zasláno: 26. 5. 2009, 08:04:38
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 |
#6 · Zasláno: 26. 5. 2009, 08:30:15
Tak jsem vynalezl kolo :) margin vyřešilo prosté přidání <div id="matroska_vnejsi"> před <div id="matroska">.
|
||
| swah Profil |
#7 · Zasláno: 26. 5. 2009, 12:37:53
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 |
#8 · Zasláno: 26. 5. 2009, 12:55:01
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 |
#9 · Zasláno: 26. 5. 2009, 13:48:30
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ý.
|
||
|
Časová prodleva: 15 let
|
|||
0