Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 09.06.2005, 16:30
ophidian ophidian ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2005
Beiträge: 17
ophidian befindet sich auf einem aufstrebenden Ast
Standard 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>
Kann ich das Problem nur durch absolute Positionierung lösen (Pixel genaues Einstellen des wrappers), oder bietet CSS eine Möglichkeit die Höhe automatisch dem IE bei 1024 x 768 Pixel anzupassen?

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
Mit Zitat antworten
Sponsored Links