Div Höhe soll automatisch immer größer werden

Illidan · 4. Januar 2008, 18:18

Hallo,

ich habe seit einer längeren Zeit ein doofes Problem mit der Navigation.

Und zwar hat das Div "navi" eine Höhe von 88.9% - wenn der Content rechts allerdings ziemlich weit nach unten geht hört der Hintergrund in der Navigation ja in der mitte auf.

Wie kann ich es in Firefox hinkriegen das der Hintergrund von der Navigation immer weiter geht wenn die Seite länger wird?

Also folgender css code für die navi und der navi abschnitt (is so ne abtrennung zwischen der navi und dem Content) ist folgender:

Quellcode

.navi {
background-image: url('../images/navi_bg.png');
width: 218px;
height: 89.6%;
min-height: 100%;
float: left;
}
.navi_abschnitt {
background-image: url('../images/navi_abschnitt.png');
padding-left: 9px;
padding-top: 3px;
float: left;
height: 89.2%;
min-height: 99.6%
}

Alles anzeigen

Ich hoff mal da kann mir einer helfen

Im Internet Explorer wird es allerdings so richtig angezeigt komischerweise oô.

Edit: Ich bemerk grad das ich noch min-height drin hab eigentlich ist das ja völliger blödsinn wenn ich min-height und dann noch height benutze allerdings war das nur ein Test somit eigentlich nicht weiter zu beachten...

Torben Brodt · 4. Januar 2008, 19:19

ist dein body denn auf 100% ?
Ganz so einfach geht das nicht: xhtmlwiki.de/Seite_auf_100%25_H%C3%B6he

Illidan · 4. Januar 2008, 19:32

Hab jetzt in body height: 100%; stehen und padding und margin auf 0. In der .navi steht nur noch min-height: 100%; - allerdings kein Erfolg.

Woran kann das sonst noch liegen? An dem Doc Type? Hab ausprobiert ohne ein Doc Type und da geht es nur bis zum Ende des Inhaltes...

Torben Brodt · 4. Januar 2008, 19:37

Illidan schrieb:

Hab jetzt in body height: 100%;

Damit es im Firefox klappt, muss es body UND html sein. Damit es in anderen Browsern klappt, brauchst du den kompletten Workaround.

Illidan · 4. Januar 2008, 20:56

Hm komisch hab das auch hinzugefügt:

Quellcode

body {
background-color: #FFFFFF;
font-family: Verdana , Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
padding: 0;
margin: 0;
height: 100%;
}
html {
height: 100%;
}
.navi {
background-image: url('../images/navi_bg.png');
width: 218px;
min-height: 100%;
float: left;
}

Alles anzeigen

Es funktioniert allerdings nicht - acuh wenn man html und body zusammen tut...versteh ich nicht wirklich.

Hier ist mal da header.tpl Datei:

Quellcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Seite</title>
<link rel="stylesheet" type="text/css" href="templates/style.css" />
<link id="luna-tab-style-sheet" type="text/css" rel="stylesheet" href="templates/tabpane/tab.css" />
<link rel="stylesheet" type="text/css" media="all" href="templates/calendar-blue2.css" title="blue" />
<script type="text/javascript" src="templates/js/java.js" ></script>
<link type="text/css" rel="stylesheet" href="templates/dhtmlgoodies_calendar.css" media="screen" />
<script type="text/javascript" src="templates/js/dhtmlgoodies_calendar.js"></script>
<script type="text/javascript" src="templates/tabpane/tabpane.js"></script>
<script type="text/javascript">
function show(id)
{
if(document.getElementById('nav_'+id).style.display == 'none')
{
document.getElementById('nav_'+id).style.display = 'block';
document.getElementById('bild_'+id).src = 'images/icons/up.gif';
}
else
{
document.getElementById('nav_'+id).style.display = 'none';
document.getElementById('bild_'+id).src = 'images/icons/down.gif';
}
}
</script>
<!--[if IE]>
<script defer type="text/javascript" src="templates/js/pngfix.js"></script>
<link rel="stylesheet" type="text/css" href="templates/style_ie.css" />
<![endif]-->
</head>
<body>
<div class="header"><img src="images/logo_acp.png" width="331" height="81" border="0" alt=""></div>
<div class="header_abschnitt"></div>
<div class="navi">
<br />
<div align="center">
<div class="border_navi_box"><div class="navi_box_title"><span class="boldfont">Hauptmenü</span> <span onclick="show('1')"><img id="bild_1" src="images/icons/up.gif"></span></div></div>
<div id="nav_1" style="display:block;">
<div class="border_navi_box"><div class="navi_box_link"><img src="images/icons/world.gif" width="16" height="16" border="0" alt=""> <a href="admin.php?section=main">Übersicht</a></div> </div>
<div class="border_navi_box"><div class="navi_box_link"><img src="images/icons/wrench.gif" width="16" height="16" border="0" alt=""> <a href="admin.php?section=settings">Einstellungen</a></div></div>
<div class="border_navi_box"><div class="navi_box_link"><img src="images/icons/report.gif" width="16" height="16" border="0" alt=""> <a href="admin.php?section=log_overview">Letzten Vorgänge</a></div></div>
<div class="border_navi_box"><div class="navi_box_link"><img src="images/icons/chart_bar.gif" width="16" height="16" border="0" alt=""> <a href="admin.php?section=statistic">Statistik</a></div></div>
<div class="border_navi_box"><div class="navi_box_link"><img src="images/icons/cross.gif" width="16" height="16" border="0" alt=""> <a href="logout.php">Abmelden</a></div></div>
</div>
<br />
<div class="border_navi_box"><div class="navi_box_title"><span class="boldfont">Wareneingang</span> <span onclick="show('2')"><img id="bild_2" src="images/icons/up.gif"></span></div></div>
<div id="nav_2" style="display:block;">
<div class="border_navi_box"><div class="navi_box_link"><img src="images/icons/computer.gif" width="16" height="16" border="0" alt=""> <a href="admin.php?section=product_in_overview">Wareneingang Übersicht</a></div></div>
<div class="border_navi_box"><div class="navi_box_link"><img src="images/icons/computer_add.gif" width="16" height="16" border="0" alt=""> <a href="admin.php?section=product_in_add">Ware hinzufügen</a></div></div>
</div>
<br />
<div class="border_navi_box"><div class="navi_box_title"><span class="boldfont">Warenausgang</span> <span onclick="show('2')"><img id="bild_2" src="images/icons/up.gif"></span></div></div>
<div id="nav_2" style="display:block;">
<div class="border_navi_box"><div class="navi_box_link"><img src="images/icons/server.gif" width="16" height="16" border="0" alt=""> <a href="admin.php?section=product_out_overview">Warenausgang Übersicht</a></div></div>
<div class="border_navi_box"><div class="navi_box_link"><img src="images/icons/server_add.gif" width="16" height="16" border="0" alt=""> <a href="admin.php?section=product_out_add">Ware hinzufügen</a></div></div>
</div>
<br />
<div class="border_navi_box"><div class="navi_box_title"><span class="boldfont">Lieferanten</span> <span onclick="show('4')"><img id="bild_4" src="images/icons/up.gif"></span></div></div>
<div id="nav_4" style="display:block;">
<div class="border_navi_box"><div class="navi_box_link"><img src="images/icons/lorry.gif" width="16" height="16" border="0" alt=""> <a href="admin.php?section=distributor_overview">Lieferant Übersicht</a></div></div>
<div class="border_navi_box"><div class="navi_box_link"><img src="images/icons/lorry_add.gif" width="16" height="16" border="0" alt=""> <a href="admin.php?section=distributor_add">Lieferant hinzufügen</a></div></div>
</div>
<br />
<div class="border_navi_box"><div class="navi_box_title"><span class="boldfont">Kunden</span> <span onclick="show('5')"><img id="bild_5" src="images/icons/up.gif"></span></div></div>
<div id="nav_5" style="display:block;">
<div class="border_navi_box"><div class="navi_box_link"><img src="images/icons/user.gif" width="16" height="16" border="0" alt=""> <a href="admin.php?section=customer_overview">Kunden Übersicht</a></div></div>
<div class="border_navi_box"><div class="navi_box_link"><img src="images/icons/user_add.gif" width="16" height="16" border="0" alt=""> <a href="admin.php?section=customer_add">Kunde hinzufügen</a></div></div>
</div>
</div>
</div>
<div class="navi_abschnitt"></div>
<div class="content_acp">

Alles anzeigen

Torben Brodt · 4. Januar 2008, 21:27

das ist mir zu viel code, bring dein code mal aufs Wesentliche.
Das ist doch mal ein schönes Beispiel zum Unterschied zwischen height und min-height

Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
}
div {
float:left;
}
</style>
</head><body>
<div style="background-color:#afafaf;width:100px;min-height:15%;">
a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
</div>
<div style="background-color:#bfbfbf;width:100px;height:15%;">
a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
</div>
</body></html>

Alles anzeigen

Illidan · 4. Januar 2008, 21:45

Hier ist der Code:

Quellcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Seite</title>
<link rel="stylesheet" type="text/css" href="templates/style.css" />
</head>
<body>
<div class="header"><img src="images/logo_acp.png" width="331" height="81" border="0" alt=""></div>
<div class="header_abschnitt"></div>
<div class="navi">
<br />
<div align="center">
Hier ist die Navigation
</div>
</div>
<div class="navi_abschnitt"></div>
<div class="content_acp">

Alles anzeigen

Es hört ja miten drin auf weil der Inhalt jetzt includet wird von den anderen Dateien per PHP.

Für footer.tpl ist noch folgendes:

Quellcode

</div>
<br style="clear: both;" />
</body>
</html>

Ist ja lustig was alles ein min- ausmacht

Edit:

Also mir ist grad eingefallen das man auch für body das Hintergrund Bild nimmt und nur vertikal wiederholen lässt. Somit kommt am Ende genau das selbe raus.
Allerdings interessiert mich es immer noch warm das iwie nicht funktioniert - es muss doch iwie klappen?!

Div Höhe soll automatisch immer größer werden

Div Höhe soll automatisch immer größer werden

Quellcode

Illidan schrieb:

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Benutzer online 1

Tags