zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Höhe des "wrappers"

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.06.2005, 15:30
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
  #2 (permalink)  
Alt 09.06.2005, 16:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Mit Prozent Angaben hatte ich es schon mal probiert hat aber nicht geklappt.
Dann probier's nochmal:
Code:
html, body {height:100%}

#wrapper {min-height:100%} /* für standardkonforme Browser */

* html #wrapper {height:100%} /* für IE */
Und wenn du jetzt feststellst, dass es dir gar nicht um den #wrapper geht, sondern vielmehr um #box1 und #box2, die im Moment eine fixe Höhe von 600px haben:
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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.06.2005, 17:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2005
Beiträge: 17
ophidian befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 09.06.2005, 17:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von ophidian
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.
Du möchtest doch, dass die boxen- egal wie viel Inhalt sie haben - optisch immer die gesamte Höhe ausfüllen?
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:
Zitat von ophidian
Geht das nur mit absoluter Positionierung,
Mit absoluter positionierung ist das gar nicht sinnvoll/benutzerfreundlich lösbar.

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:
Zitat von ophidian
ich probier solange mit height in px rum bis der wrapper genau den Anzeigebereich ausfüllt und mach ich die Boxen entsprechend groß
Wie kommst du auf die Idee, dass irgend jemand den gleichen Viewport zur Verfügung hat, den du gerade auf deinem Bildschirm siehst?
BTW: Flexibilität ist ein Vorteil!

Zitat:
, oder geht das auch einfacher, z. B. automatisch.
100%.

Grüße
fricca
Mit Zitat antworten
  #5 (permalink)  
Alt 10.06.2005, 12:35
Benutzer
neuer user
 
Registriert seit: 02.06.2005
Beiträge: 42
hannes-n befindet sich auf einem aufstrebenden Ast
Standard

irgendwie versteh ich dein problem nicht .. könntest du vlt ein bild machen, damit man es besser versteht?
__________________
_meine_ meinung
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit z-index Unearth CSS 10 23.04.2009 06:49
Absoluter Div mit 100% Höhe wird am Vieport abgeschnitten tramper CSS 10 14.04.2009 23:03
100% höhe des Designs. Footer immer unten. Donar CSS 7 26.01.2008 01:02
Höhe des "Center" Bereichs nicht an "menu" ausrichten, aber wie? surffix CSS 9 23.09.2007 16:59
Kleiner problem miut der höhe des div elements Griborim CSS 0 15.10.2006 19:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:50 Uhr.