09.06.2005, 16:30
|
|||
|
|||
Höhe des "wrappers"
Hallo,
ich würde den wrapper gerne exakt so hoch haben, wie der Anzeigebereich des IE bei einer Ausflösung von 1024 x 768 Pixel, d.h. das man nicht mehr im IE scrollen muss. Hier erstmal der Code Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>XxX</title>
<style type="text/css">
/* CSS Document */
body {
font-family:Verdana, sans-serif; /* immer generische Schriftfamilie mit angeben */
font-size:12px;
background-color:#000000;
text-align:center;
margin:0px;
padding:0px; /* damit Opera keinen Rand oben & unten erzeugt*/
}
/*Rahmen für die Boxen*/
#wrapper {
width:760px;
margin:0 auto;
text-align:left;
border:1px solid black;
}
.box1 {
height:100px; /* width-Angabe hier unnötig, da Blockelemente immer die gesamte mögliche Breite einnehmen */
background-color:#bdbec6;
background-image:url(box1b.jpg);
border-bottom:1px solid #000;
font-size:24px;
font-family:"Courier New", Courier, mono;
text-align:center;
text-decoration:underline;
}
.box2 {
background-color:#bdbec6;
background-image:url(box2.jpg);
width:120px;
height:600px;
float:left;
}
* html .box2 {
margin-right:-3px; /* anti-3px-in IE */
}
/*Menübox*/
.menutitle{
background-color:#000000;
color:#FFFFFF;
font-weight:bold;
text-align:center;
margin:5px;
border:1px solid #000;
}
/*
.menucontainer {
border:1px solid #000;
background-color:#7b7d8e;
margin:10px;
}
*/
/*für Hyperlinks*/
a.menu:link, a.menu:visited
{
color:#eeeeee;
background-color:#737994;
text-decoration:none;
}
a.menu:active, a.menu:hover
{
color:#737994;
background-color:#eeeeee;
}
a.menu {
display:block;
margin:10px;
padding:3px;
border:1px solid #000;
background-color:#737994;
text-align:center;
font-weight:bold;
color:#eeeeee;
text-decoration:none;
t
}
a.sub {
display:block;
border:1px solid #000;
text-align:center;
/*padding.3px;*/ /*vergroeßert den abstand von schrift zu Buttonrand*/
margin-left:15px;
margin-right:5px;
margin-top:5px;
background-color:#000099;
color:#FFFFFF;
text-decoration:none;
}
.box3 {
height:600px;
background-color:#efeff7;
margin-left:120px;
border-left:1px solid #000; /*erzeugt dünne Trennlinie */
text-align:justify;
}
* html .box3 {
margin-left:117px; /*anti-3px in IE */
}
.clear { /*ein float braucht ein clear, hier als zusätzliches Element gelöst */
clear:left;
height:0;
font-size:0;
line-height: 0px /*Damit horizontale Linie verschwindet am unteren Rand*/
}
</style>
</head>
<body>
<div id="wrapper">
<div class="box1"></div>
<div class="box2">
<p align="center">
<p class="menutitle">Navigation</p>
<div id="menu" style="margin-top: 10px;">
Link1
Link2
Link3
Link4
Link5
Link6
Link7
Link8
</div>
</div>
<div class="box3"></div>
<div class="clear"></div>
</div>
</body>
</html>
Mit Prozent Angaben hatte ich es schon mal probiert hat aber nicht geklappt. Wenn es nur mit absoluter Positionierung geht, kann mir jemand die Höhe des Anzeigebereiches sagen? Vielen Dank ophidian 
|
| Sponsored Links |
|
09.06.2005, 17:30
|
|||
|
|||
|
Zitat:
Code:
html, body {height:100%}
#wrapper {min-height:100%} /* für standardkonforme Browser */
* html #wrapper {height:100%} /* für IE */
es ist nicht möglich, nebeneinander liegende Container in der Höhe voneinander abhängig zu machen. Da helfen nur Tricks (Stichwort für die Suchfunktion: faux columns) Grüße fricca
|
| Sponsored Links |
|
09.06.2005, 18:06
|
|||
|
|||
|
Dein Code hat leider auch nicht das gewünschte Egrebnis gebracht.
Ich glaub dieses "faux columns" Problem habe ich gar nicht, da der overflow in box3 ja gescrollt wird und die Box nicht mit wächst. Alles was ich will ist das der wrapper inklusive der box2 & box3 die gesamte Höhe des iE Anzeigebereiches ausfüllt nicht mehr und nicht weniger. Die boxen sollen sich dementsprechend nicht abhängig von einander ausdehnen. Geht das nur mit absoluter Positionierung, ich probier solange mit height in px rum bis der wrapper genau den Anzeigebereich ausfüllt und mach ich die Boxen entsprechend groß, oder geht das auch einfacher, z. B. automatisch. Ich hoffe ich hab mich verständlich ausgedrückt, aber als Anfänger fehlen mir vielleicht noch die Fremdwörter um mich präzise Auszudrücken. thnx
|
|
09.06.2005, 18:31
|
||||
|
||||
|
Zitat:
das geht nur mit der faux-columns-Methode. (d.h. in deinem Fall z.B.: die Spalten werden durch ein Hintergrundbild im wrapper vorgetäuscht, die boxen passen sich in ihrer Höhe dem Inhalt an) BTW: es gibt noch andere Browser als den IE... Zitat:
Was ist, wenn dein Inhalt länger ist als der verfügbare Anzeigebereich? Soll der User dann nicht hinscrollen können? (Du kannst die Größe des Anzeigebereichs nicht beeinflussen - das ist User-Sache) Zitat:
BTW: Flexibilität ist ein Vorteil! Zitat:
Grüße fricca
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Problem mit z-index | Unearth | CSS | 10 | 23.04.2009 07:49 |
| Absoluter Div mit 100% Höhe wird am Vieport abgeschnitten | tramper | CSS | 10 | 15.04.2009 00:03 |
| 100% höhe des Designs. Footer immer unten. | Donar | CSS | 7 | 26.01.2008 02:02 |
| Höhe des "Center" Bereichs nicht an "menu" ausrichten, aber wie? | surffix | CSS | 9 | 23.09.2007 17:59 |
| Kleiner problem miut der höhe des div elements | Griborim | CSS | 0 | 15.10.2006 20:45 |
Linear-Darstellung
