ďťż

[CSS] Problem z wysokością elementu. height:100% potrzebuje chyba jakiegoś odniesienia ;(

Podstrony

telcocafe

Cześć.
Miałem problem z częścią główną strony 'MainContent' ponieważ po wygenerowaniu strony treść główna wychodziła mi poza div'a usunęłem atrybut height z Content które stanowi główną warstwe strony.
Jest to warstwa znajdująca się pod menu górnym. Ale teraz marginesy (obramowania) które zrobiłem
nie chcą się wyświetlać przy atrybucie height:100%;
http://img207.images...ginesamidz0.jpg
Niestety owe obramowanią muszą być do samego dołu strony czyli odpada definiowanie im wysokości na stałe.
krótko mówiąc :help:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/HTMLlat1.ent"> <html> <head> <title>{pageTitle}</title> <link href="http://localhost/Templates/default/style.css" rel="stylesheet" type="text/css" media="all"> <link href="http://localhost/Templates/default/images/ikona.ico" rel="SHORTCUT ICON"> <meta http-equiv="Content-type" content="text/html; charset={charset}" /> <base href="http://localhost/" /> <script language="Javascript" type="text/javascript" src="http://localhost/Templates/default/script.js"></script> </head> <body> <div id="glowny_0"> <div id="logo_1"> <img id="mg" src="http://localhost/Templates/default/images/Gorne.gif"> <div id="margin" style="height:125px;"></div> <img id="mg" src="http://localhost/Templates/default/images/logo.png"> <div id="margin" style="height:125px;"></div> <div id="margin" style="height:25px; width:3px;"></div> <a href="?p=news"><img id="mg" border="0" src="http://localhost/Templates/default/images/MenuGorne/News-1_1.gif"></a> <a onmouseover="pokaz('t1')" href="#"><img id="mg" border="0" src="http://localhost/Templates/default/images/MenuGorne/Team-1_1.gif"></a> <a onmouseover="pokaz('t2')" href="#"><img id="mg" border="0" src="http://localhost/Templates/default/images/MenuGorne/Servers-1_1.gif"></a> <a onmouseover="pokaz('t3')" href="#"><img id="mg" border="0" src="http://localhost/Templates/default/images/MenuGorne/Sponsors-1_1.gif"></a> <a onmouseover="pokaz('t4')" href="#"><img id="mg" border="0" src="http://localhost/Templates/default/images/MenuGorne/IRC-1_1.gif"></a> <a onmouseover="pokaz('t5')" target="_blank" href="/forum/"><img id="mg" border="0" src="http://localhost/Templates/default/images/MenuGorne/Board-1_1.gif"></a> <a onmouseover="pokaz('t6')" href="#"><img id="mg" border="0" src="http://localhost/Templates/default/images/MenuGorne/FAQ-1_1.gif"></a> <a onmouseover="pokaz('t7')" href="?p=download"><img id="mg" border="0" src="http://localhost/Templates/default/images/MenuGorne/Download-1_1.gif"></a> <div id="margin" style="height:25px; width:3px; background:url(http://localhost/Templates/default/images/margin.gif) repeat-y top right;"></div> <div id="subMenu"> <div class="opcje1" id="t1" style="display:none;"> | <a id="mg" href="">Załoga</a> | <a id="mg" href="">Gry</a> | <a id="mg" href="">Imprezy</a> | </div> <div class="opcje2" id="t2" style="display:none;"> | <a id="mg" href="">Główne Serwery</a> | <a id="mg" href="">Lista</a> | <a id="mg" href="">Dodaj Serwer</a> | </div> <div class="opcje3" id="t3" style="display:none;"> | <a id="mg" href="#">Jak zostac sponsorem</a> | <a id="mg" href="#">Co otrzymuje sponsor</a> | </div> <div class="opcje4" id="t4" style="display:none;"> | <a id="mg" href="">Czym jest IRC</a> | <a id="mg" href="">Artykuły</a> | <a id="mg" href="">IRC Web</a> | </div> <div class="opcje5" id="t5" style="display:none;"> </div> <div class="opcje6" id="t6" style="display:none;"> | <a id="mg" href="">Najczesciej zadawane pytania</a> | </div> <div class="opcje7" id="t7" style="display:none;"> | <a id="mg" href="">Wszystkie</a> | <a id="mg" href="">Mapy</a> | <a id="mg" href="">Map Packi</a> | <a id="mg" href="">Zgłoś Plik</a> | </div> <div class="opcje8" id="t8" style="display:none;"> | <a id="mg" href="">Wszystkie</a> | <a id="mg" href="">Mapy</a> | <a id="mg" href="">Map Packi</a> | <a id="mg" href="">Zgłoś Plik</a> | </div> </div> </div> <div id="Content"> <div id="MenuLewe"> <img src="http://localhost/Templates/default/images/c_menu.gif" style="float:right;"> <div style="margin-left:5px; float:right;"> <div class="MenuL1"><a href="?p=articles" onmouseover="menu('m1')" onmouseout="koniec()" class="MenuL2">Artykuły</a></div> <div class="MenuL1"><a href="#" onmouseover="menu('m2')" onmouseout="koniec()" class="MenuL2">Statystyki</a></div> <div class="MenuL1"><a href="#" onmouseover="menu('m3')" onmouseout="koniec()" class="MenuL2">Wydarzenia</a></div> <div class="MenuL1"><a href="#" onmouseover="menu('m4')" onmouseout="koniec()" class="MenuL2">Nagrody</a></div> <div class="MenuL1"><a href="#" onmouseover="menu('m5')" onmouseout="koniec()" class="MenuL2">CS:1.6</a></div> <div class="MenuL1"><a href="#" onmouseover="menu('m6')" onmouseout="koniec()" class="MenuL2">CS:Source</a></div> <div class="MenuL1"><a href="#" onmouseover="menu('m7')" onmouseout="koniec()" class="MenuL2">Warcraft3FT</a></div> <div class="MenuL1"><a href="#" onmouseover="menu('m8')" onmouseout="koniec()" class="MenuL2">WoW</a></div> <div class="MenuL1"><a href="#" onmouseover="menu('m9')" onmouseout="koniec()" class="MenuL2">MuOnline</a></div> </div> </div> <div id="margin" style="height:100%;"><img src="http://localhost/Templates/default/images/c_5menu.gif" style="float:left;"></div> <div id="MainContent"> {errorMsg} {mainContent} </div> <div id="margin" style="height:250px;"><img src="http://localhost/Templates/default/images/c_5login.gif" style="float:left;"><img src="http://localhost/Templates/default/images/c_5sponsors.gif" style="float:left; position:relative; top:{SponsorsMarginTop}px;"></div> <div id="MenuPrawe"> <img src="http://localhost/Templates/default/images/c_login.gif" style="float:right;"> <div id="userPanel"> {userPanel} </div> <img src="http://localhost/Templates/default/images/c_sponsors.gif" style="float:right;"> </div> </div> </body> </html>

div#Content { float:left; width:990px; height:100%; border:1px black solid; } div#MainContent { background:#5c1a06; display:inline; float:left; width:710px; height:100%; } div#margin { background:url(http://localhost/Templates/default/images/margin.gif) repeat-y top left; float:left; height:100%; width:5px; } div#MenuLewe { width:100px; padding:0; margin:0; float:left; background:url(http://localhost/Templates/default/images/margin.gif) repeat-y top left; } div#MenuPrawe { width:170px; padding:0; margin:0; float:right; background:url(http://localhost/Templates/default/images/margin.gif) repeat-y top right; } div#userPanel { width:170px; padding:0; margin:0; float:left; background:#4b1606 url(http://localhost/Templates/default/images/margin.gif) repeat-y top right; }

edit >
Jeśli będzie potrzebne szersze info na temat strony piszcze bo bardzo bym chciał jakoś rozwiązać ten problem a nie mam specjalnie pomysłu jak.
Użytkownik orglee edytował ten post 24 sierpień 2006, 11:55

Wiesz nie zagwarantuje, że się uda bo trudno mi coś spradzić jak nie mam wszystkich grafik :), ale spróbuj przed końcem diva Content dać pustego diva z zatrybutami:div#backgroundhack{ clear: both; height: 1px; font-size: 1px }
Przy korzystaniu z float zawsze są problemy z przedłużaniem tła divów. Ta metoda je rozwiazuje. Z tym, że ja zreguły nie ustalam na stałe wysokości w takich divach, ale przy 100% powinno dział.
Użytkownik reVis edytował ten post 24 sierpień 2006, 11:59

Wiesz nie zagwarantuje, że się uda bo trudno mi coś spradzić jak nie mam wszystkich grafik :), ale spróbuj przed końcem diva Content dać pustego diva z zatrybutami:div#backgroundhack{ clear: both; height: 1px; font-size: 1px }
Przy korzystaniu z float zawsze są problemy z przedłużaniem tła divów. Ta metoda je rozwiazuje. Z tym, że ja zreguły nie ustalam na stałe wysokości w takich divach, ale przy 100% powinno dział.

reVis możesz mi wkleić ten kawałek kodu gdzie ja mam to wstawić?
bo chyba źle wstawiam i nie działa.

Przed divem kończącym Content wklej:<div style="clear: both; height: 1px; font-size: 1px;"></div>Jeżeli nie zadziała to spróbuj przed końcami MenuLewe i Menu Prawe. Właśnie nie jestem pewien czy to zadziała bo sam strony układam trochę inaczej i u mnie działa ;)
Użytkownik reVis edytował ten post 24 sierpień 2006, 12:16

Przed divem kończącym Content wklej:<div style="clear: both; height: 1px; font-size: 1px;"></div>Jeżeli nie zadziała to spróbuj przed końcami MenuLewe i Menu Prawe. Właśnie nie jestem pewien czy to zadziała bo sam strony układam trochę inaczej i u mnie działa ;)

Nie działa albo ja nadal coś źle robie ;(
Pomógłbyś mi ?
Spakować pliki strony ?

Spakuj, spakuj. Wieczorem się pobawię i może coś z tego będzie.

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL