Autor Zpráva
Ondra_xx
Profil *
#1 · Zasláno: 6. 8. 2006, 14:00:59
Odpovědět Citovat
Zdravím. Mám dva menší problémy při pozicování pomocí CSS.
Mám klasický stránkový layout -> nejprve mám hlavní div v kterém mám vloženo div s menu, div s logem apod těmito dvěma divy se pokouším umístit dvousloupcový layout. Tento layout mám pomocí floatů. Mám však problém s tím, že pokud levému divu (který je float) dám height: 100% tak i přesto že má místo tak se odmítá roztáhnout až dolů.

Nevíte někdo jak na to ?

Další problém mám s patičkou. Opět pozicovanou pomocí floatu. U Opery a FF vše OK, u IE mi patička odskakuje příliš daleko od konce stránky.

Kod:


html

<body>

<div id="main">
<div id="top">
<div id="logo"></div>
<div id="menu">
</div>

</div>
<div id="logo2></div>


<div id="content">
<div id="left"><div class="news"></div></div>
<div id="right"></div>

<hr class="noscreen" />
</div>

<div id="footer"><div id="fleft"></div><a href="javascript:window.print();" title="Tisk"><img src="../../images/print.gif" alt="Tisk dokumentu" /></a> | <a href="#main" title="Nahoru"><img src="../../images/top.gif" alt="Nahoru" /></a></div>
</div>
</body>
habendorf
Profil
#2 · Zasláno: 6. 8. 2006, 14:07:59
Odpovědět Citovat
pokud levému divu (který je float) dám height: 100% tak i přesto že má místo tak se odmítá roztáhnout až dolů

No takhle to nefunguje, to se ti nenatáhne. Řeší se to pozadím nadřazeného prvku.
Ondra_xx
Profil *
#3 · Zasláno: 6. 8. 2006, 14:12:26
Odpovědět Citovat
to:habendorf:

Promiň, že zase otravuju, ale mohl by si mi hodit odkaz kde je k tomu něco víc ??? Díky :)
Ondra_xx
Profil *
#4 · Zasláno: 6. 8. 2006, 14:14:24
Odpovědět Citovat
Nebo to bylo myšleno tak, že pozadí levého divu bude transparentní takže pozadí bude stejné jako je pozadí nadřezeného bloku ?
habendorf
Profil
#5 · Zasláno: 6. 8. 2006, 14:22:35 · Upravil/a: habendorf
Odpovědět Citovat
Prostě si vytvoříš vhodný proužek a ten necháš opakovat v ose y a dáš ho na #content. Tím pádem se ti budou (ne skutečně, pouze opticky) dotahovat oba sloupce až dolů, nezávisle na tom, který bude delší.
Ale je potřeba to vyclearovat, nevím jestli ti to dělá ta hr, css jsi sem nedal.
Ondra_xx
Profil *
#6 · Zasláno: 6. 8. 2006, 14:54:29
Odpovědět Citovat
2 habendorf: Mno já to udělal trochu jinak. Ale nevím jestli to je OK. Mám div content....v tom mám dva divy - levý a pravý.
Levý mám float: left s určitou šířkou. Pravý div mám float" right.
Mezi tento div a (pravý) a obsahový div content jsem dal hr. Takže podle výšky pravého divu se natahuje obsahový div, který má určitou bravu. U levého divu jsem nedal barvu žádnou takže má barvu nadřazeného bloku (content). U pravého bloku jsem dal barvu, která vlastně překrývá barvu nadřazeného bloku (content).

Jediné s čím mám problém je zvláštní chování pokud použiju padding u pravého divu. Prostě ve FF se to rozhodí. O hodnotu paddingu se natáhne i šířka celého divu což mi příjde zvláštní. Samozřejmě takový div pak skočí pod levý div. Což už je logické chování.
habendorf
Profil
#7 · Zasláno: 6. 8. 2006, 15:20:42
Odpovědět Citovat
K tomu paddingu si přečti toto http://www.jakpsatweb.cz/css/mody-prohlizecu.html .
Ondra_xx
Profil *
#8 · Zasláno: 6. 8. 2006, 15:28:33
Odpovědět Citovat
2 habendorf:
Aha výborně. Mno osobně používám podtržítkový hack. Dokonce se tu dočítám, že je snad i valdiní ?? Wow.
Jde vůbec udělat stránka pomocí floatů bez hacků ??? :)
habendorf
Profil
#9 · Zasláno: 6. 8. 2006, 15:36:16
Odpovědět Citovat
Jde vůbec udělat stránka pomocí floatů bez hacků ???

Samozřejmě, mnoha způsoby

1) standardní mód pro všechny prohlížeče (bude zlobit IE<6)
2) sjednocení box-modelů pomocí proprietárních css vlastností
3) matrjoška
4) pdmíněné komentáře
5) využití kontextových selektorů

a asi další...
Ondra_xx
Profil *
#10 · Zasláno: 6. 8. 2006, 15:37:45
Odpovědět Citovat
2: habendorf:
Můžu ještě jednu věc ??
Slibuju že už nebudu víc otravovat je to poslední věc, která semi stává vlastně vždy při tvorbě stránky pomocí floatu a v které doteď nemám jasno proč vzniká.

Je to problém s patičkou. Mám hlavní div main. V něm mám div s logem. Pod ním je div content o kterém jsme se teď bavili. Div content mám jako float: left. Po něj chci umístit patičku. Takže mám div footer kterému dám logicky clear: both. Patička samozřejmě skočí pod div content. To je OK. Ale zde nastává problém. Ve FF a Opeře je vše OK. V IE je však mezi patičkou a divem content mezera....asi 15 px. Nevíš čím je to způsobeno ?? Jediné co částečně pomáhá je dát patičce záporná margin-top. Nevíš o nějakém elegantnějším řešení ?

Díky moc za fajn rady :)
habendorf
Profil
#11 · Zasláno: 6. 8. 2006, 15:46:29
Odpovědět Citovat
No, takže: floatovat content až tak nevadí, ale je to zbytečné (jsou zcela ojedinělé případy, kdy je to vhodné použít kvůli bugujícímu IE, ale jde to i jinak).

Možnosti řešení

1) vyhoď clear z patičky a mezi content a patičku dej <div class="cleaner">&nbsp;</div>, pro cleaner nastav font-size, line-height a height na nulu a clear:both.

nebo

2) mělo by pomoci i nastavení šířky (ač se to nezdá) pro patičku, případně i pro content. Pokud je to ještě celé obalené tím mainem, který má nastavenou šířku, tak bude stačit content a footer nastavit na 100%.
habendorf
Profil
#12 · Zasláno: 6. 8. 2006, 15:48:13
Odpovědět Citovat
bude stačit content a footer nastavit na 100%.

Ovšem zase se budeš muset nějak vyrovnat s boxmodelem. Nevím jak jsi to nakonec řešil.
Možná místo 100% bude lepší konkrétní hodnota v px, prostě mám od tebe málo informací.
Příště je nejlepší stránku dát na web a sem odkaz.
Ondra_xx
Profil *
#13 · Zasláno: 6. 8. 2006, 16:13:11
Odpovědět Citovat
Hmm mno už vím co způsobuje tu škvíru mezi contentem a patičkou. Jer to ten hr. Když ho oddělám tam problém zmizí, ale zase se logicky nastaví rodičovský prvek levého divu na height: 0 :)

Jinak kod:

html
<div id="main">
<div id="top">
<div id="logo"></div>
<div id="menu"></div>
</div>

<div id="logo2"></div>

<div id="content">
<div id="left">
</div>

<div id="right">
<div id="obal"></div>
</div>

<hr class="noscreen" />

</div>

<div id="footer">
</div>
</div>


css:

div#main {
position: relative;
text-align: left;
width: 718px;
margin: 20px 0 0 0;
border: 1px solid red;
}

div#logo {
width: 134px;
height: 50px;
background: url(./images/b.gif) center left no-repeat white;
}

div#logo2 {
position: relative;
background: url(./images/woman3.jpg) top left no-repeat;
width: 713px;
height: 167px;
margin: 3px 0 0px 2px;
}

div#menu {
position: absolute;
top: 0;
left: 133px;
z-index: 2;
}

div#left {
float: left;
width: 132px;
_width: 130px;
padding: 10px 0 0 0;
}

div#right {
float: left;
width: 575px;
background-color: white;
border: 1px solid red;
}

div#obal {
margin-top: 15px;
margin-left: 10px;
}

div#content {
width: 100%;
margin-left: 2px;
background: #edeef1;
border: 1px solid red;
}

div#footer {
clear: both;
width: 100%;
margin: 0px 0 0 2px;
text-align: right;
border-top: 2px solid #eeeff3;
border: 1px solid red;
}

.noscreen {
border: none;
height: 1px;
visibility: hidden;
clear: both;
margin: -1px;
}

Není to komplet CSS ale myslím, že tohle jsou ty podstatné věci.
Ondra_xx
Profil *
#14 · Zasláno: 6. 8. 2006, 16:17:21
Odpovědět Citovat
2 habendorf:
Jo jinak probl0m s patičkou byl vyřešen. Nahradil jsem svůj hr cleaner tím tvým s divem a vše funguje tak jak má. Takže chyba byla ve špatném definování hr který jsem používal pro zamezení height: 0 nadřazeného divu.
Dík
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0