5 Boxen und diverse Auflösungen

GerhardS · 10.05.2007, 18:04

Hallo,
ich habe ein browserunabhängiges Problem. Ich habe eine Seite aus 5 Boxen gebastelt (1 Box links für die Navigation, daneben 1 Box für den Kopf, unter dem Kopf 3 Boxen (Bilder, Text, Bilder).
Jede Box hat eine prozentual festgelegte Breite. Alle Prozentwerte zusammen ergeben 100 %. Das Problem beginnt bei einer Änderung der Bildschirmauflösung. Bei 1024x768 im Vollbild sieht alles gut aus. Bei 1600x1200 wird Box3 zu breit (in 3 Browsern: FF2, O9, IE6).
Ich glaube, ich habe irgendwo einen Denkfehler eingebaut. Deshalb hier der CSS-Code:

Code:

*{
 margin:0;
 padding:0; 
}
body
{
background-color:#ffcc9f; /*helles ocker */
/*background-color:#ffffff; /*weiß */
}

.pictop
{
	margin-right: 20px;
	margin-top: 10px;
}
.picleft
{
	margin-top: 10px;
	margin-bottom: 10px;	
}
.picright
{
	margin-top: 10px;
	margin-left: 15px;
	margin-bottom: 10px;
}
a:link {
	font-weight: normal; 
	text-decoration:none;
	color: #FCFD00; /*gelb */
	}
a:visited{
	font-weight:normal; 
	color:#FCFD00; /*gelb */
	text-decoration:none;
	}
a:hover{
	font-weight:normal; 
	color:red; 
	text-decoration:none;
	}
a:focus{
	font-weight:normal; 
	color:red; 
	text-decoration:underline;
	}
a:active{
	font-weight:bold; 
	color:lime; 
	text-decoration:underline;
	}
.bu {
	text-align: center;
	font-size: 0.7em;
}
#leftbox {	     
         border-top: none;
			border-left: none;
			border-bottom: none;
         float: left;                 
         width: 95%;
         color: black; /*Farbe der Überschrift */               
         background-color: #FF7F50; /*dunkles Orange */
			padding-top:5px;
			padding-bottom: 10px;
			font-family: sans-serif;
         font: sans-serif;
         font-variant: normal;
         font-size: 0.85em;			
}
#liste{
 list-style:none; /*entfernt die Bullets vor den Listeneinträgen */
 margin: 0; /*Folge von list-style none*/
 padding: 10px; 
}

h1 {
	      padding-right: 15px;
         padding-left: 15px;
         padding-bottom: 5px;
         margin: 0px;
         padding-top: 5px;
         text-align: center;
			font-size:1.2em;
			}
h2 {
	      padding-right: 15px;
         padding-left: 15px;
         padding-bottom: 5px;
         margin: 0px;
         padding-top: 5px;
			text-align: center;
			font-size: 1em;
			font-family: sans-serif; 
			}

p {
	text-align: justify;
	font-family: sans-serif;
	font-size: 0.85em;
}		
#box1 { 
position:absolute; 
top:0px; 
left:0px; 
width:20%; 
height:100%; 
background-color: #ffcc9f; /*helles ocker */
/*background-color:yellow; */
font-family: sans-serif;
font: sans-serif;
font-variant: normal;
font-size: 0.85em;
}

#box2 { 
position:absolute; 
top:0px; 
right:0px;
left:20%; /*wichtig */
width:80%; 
height:20%;
background-color: #ffcc9f; /* helles Ocker */
/* background-color: #DC143C; */ /*crimson (rot) */
font-family: sans-serif;
font: sans-serif;
font-variant: normal;
font-size: 0.85em;
text-align: center; /*zentriert auch die Bilder */
}
#box3 { 
position:absolute; 
top:210px;
left:20%;
width:18%; 
background-color:#ffcc9f; /* helles Ocker*/
/* background-color: Aqua; */ /* */
font-family: sans-serif;
font: sans-serif;
font-variant: normal;
font-size: 0.85em;
}
#box4 { 
position:absolute; 
top:210px; 
left:38%; 
width:44%; 
/* background-color: InactiveCaption; */ /* */
background-color: #ffcc9f; /*helles Ocker */
font-family: sans-serif;
font: sans-serif;
font-variant: normal;
font-size: 0.85em;
}
#box5 { 
position:absolute; 
top:210px; 
left:82%; 
width:18%; 
background-color: #ffcc9f; /*helles Ocker */
/* background-color: Gray; */ /* */
font-family: sans-serif;
font: sans-serif;
font-variant: normal;
font-size: 0.85em;
}

Die auskommentierten Hintergrundfarben sind als didaktisches Hilfsmittel zu sehen.
Wer kann mir einen Tipp geben?

Mich@el · 10.05.2007, 20:09

Der dazugehörende HTML Code wäre auch noch ganz nett. Vielleicht hilft Dir aber auch das hier weiter?

Grüße
Michael

GerhardS · 11.05.2007, 00:45

Hier der HTML-Quellcode:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<?xml version="1.0"?>
<html>
<head>
<title>Ein Landhaus in der Toscana</title>
<meta http-equiv=content-type content="text/html; charset=iso-8859-1">
<meta http-equiv=language content=de>
<link rel=stylesheet type=text/css media="screen,projection" href="css/basic.css">
<link rel="stylesheet" type="text/css" media="print, embossed" href="css/print.css">
<meta name="author" content="Icke" />
<meta name="robots" content="index,follow" />
<meta http-equiv="expires" content="0" />
<meta name="keywords" content="Landhaus, Toscana, Maremma, Ferienwohnung, Ferienhaus">
</head>
<body>
<div id="box1">
<div id="leftbox">
      <ul id="liste">
       <em><strong>Navigation</strong></em> 
		  <li>
        <a href="index.htm">Startseite </a>         </li>		  
        <li>
		  <a href="d_ein_landhaus_im_herzen_der_marem.htm">Ein Landhaus im Herzen der Maremma</a>
		  </li>
		  <li>
		  <a href="landkarte.htm">Landkarte</a>
		  </li>
		  <li>
		  <a href="d_die_besitzerin.htm">Die Besitzerin</a>
		  </li>
		  <li>
		  &mdash;&mdash;&mdash;&mdash;&mdash;&mdash;
		  </li>
		  <li>
		  <a href="i_index.htm">Home</a>
		  </li>
		  <li>
		  <a href="i_una_villa_nel_cuore_della_maremma.htm">Una villa nel cuore della Maremma</a>
		  </li>
		  <li>
		  <a href="landkarte.htm">Carta</a>
		  </li>
		  <li>
		  <a href="i_la_proprietaria.htm">La proprietaria</a>
		  </li>
		  <li>
		  &mdash;&mdash;&mdash;&mdash;&mdash;&mdash;
		  </li>
		  <li>		  
		  <a href="e_index.htm">Home</a>
		  </li>
		  <li>
		  <a href="e_a_country_house_in_the_heart_of_the_maremma.htm"> A country house in the heart of the Maremma</a>
		  </li>
		  <li>
		  <a href="landkarte.htm">Map</a>
		  </li>
		  <li>
		  <a href="e_the_owner.htm">The Owner</a>
		  </li>  
      </ul>
	</div> <!-- leftbox -->
</div> <!-- id="box1" -->

<div id="box2">
<h1>Landhaus</h1>
<h2>Landhaus in der s&uuml;dlichen Toscana (Maremma)</h2>
<p class="bu">Zum Vergrößern bitte auf die Bilder klicken</p>
<img class="pictop" src="images/small/haus_totale160x96.jpg" width="160" height="120" />
<img class="pictop" src="images/small/terasse_160x120.jpg" width="160" height="120"/>
<img src="images/small/meerblick1_160x120.jpg" width="160" height="120"/>
</div> <!-- box2 -->

<div id="box3">  
<img class="picleft" src="images/small/zypressen_160x120.jpg" /><br />
<img class="picleft" src="images/small/kirche_160x120.jpg" /><br />
<img class="picleft" src="images/small/rathaus_120x160.jpg" /><br />
<!-- <img src="images/small/festung_160x120.jpg" width="160px" height="120px" /> -->
<!-- <img src="images/small/blickaufhuegel_160x120.jpg" width="160px" height="120px"/>  -->
</div> <!-- box3 -->

<div id="box4">
<h2>Lage</h2>
<p>Das ehemalige Bauernhaus befindet sich auf einem 7 ha gro&szlig;en h&uuml;geligen Anwesen in 460 m H&ouml;he mit Blick auf das Tyrrhenische Meer (Insel Giglio,
Argentario). Olivenb&auml;ume, Eichen und Zypressen sind der typische Baumbestand. Es liegt auf einer H&uuml;gelkette in der N&auml;he der Stra&szlig;e. </p>
<br />
<h2>Wohnen</h2>
<p>Das Haus hat 90 qm Wohnfl&auml;che, bestehend aus 3 Schlafzimmern mit insgesamt sechs Schlafpl&auml;tzen, einer Wohnk&uuml;che und einem Bad. Die gro&szlig;e Terrasse ist zum
Teil &uuml;berdacht. Aller Komfort ist vorhanden: Telefon, Fernsehen mit Parabolspiegel, Heizung, warmes/kaltes Wasser, moderner Herd, Geschirrsp&uuml;lmaschine, Waschmaschine. 
Geschirr, Besteck, Kocht&ouml;pfe, Bettw&auml;sche und Gartenm&ouml;bel sind reichlich vorhanden.</p>
<br />
<h2>Umgebung</h2>
<p>Die Maremma ist bekannt f&uuml;r ihre endlosen Sandstr&auml;nde, den Naturschutzpark „Parco naturalle dell'Uccellina”, die Etruskerkultur, die ber&uuml;hmten Thermen von Saturnia u.a.m. Das Anwesen liegt mittendrin: 28 km zum Meer, 25 km nach Grosseto, 26 km nach Saturnia Terme, 35 km nach Ansedonia usw. In
weiterem Umfang: 100 km nach Siena, 160 km nach Florenz, 180 km nach Rom. Grosseto liegt an der Hauptzugverbindung Rom - Pisa - Genua (f&uuml;r fly &amp; drive). </p>
</div> <!-- box4 -->

<div id="box5">  
<img class="picright" src="images/small/stadtmauer_160x120.jpg" />
<img class="picright" src="images/small/kirche_innenansicht_160x112.jpg" />
<img class="picright" src="images/small/viadukt_160x120.jpg" />
<!-- <img src="images/small/kirschblueten_160x120.jpg" height="120px" width="160px" /> -->
<!-- <img src="images/small/meerblick3_160x120.jpg" height="120px" width="160px" />  -->
</div> <!-- box5 -->
</body>
</html>

ttb · 17.05.2007, 15:04

Moin,

kein Wunder, das alles auseinanderfällt, wenn du _alles_ absolut positionierst, anstatt die Möglichkeiten von CSS zu nutzen, sprich float, margin, padding und clear.

GerhardS · 17.05.2007, 16:23

Hallo Fabian,
hast du mal einen Link auf eine 5-Boxen-Seite?
Ich habe das Problem inzwischen gelöst, auf zwei Wegen.
Zum einen habe ich in die 5 Boxen noch je eine Hilfsbox gelegt, die ein 15-px-Padding zur umgebenden Box hat.
Zum anderen passe ich mit width="100%" die Querformat-Bilder an die Boxengröße an. Bei Hochformat-Bildern steht die Breite auf 75%. Damit zickt, wenn mehr als drei Bilder in der Box stehen und das unterste ein Hochformat hat, zwar der IE6 herum (die Schrift in Box4 erhält die Formatierung aus Box1), aber das kann man beheben.
Gruß
Gerhard