✔ 2 Boxen Nebeneinander und darunter wieder 2 Boxen

F

FunkFlex

Mitglied
Hi, ich bin neu hier und habe ein großes Problem.
Für ein Layout einer Website habe ich geplant, diese in 4 Bereiche aufzuteilen.
Um noch etwas dazu zu sagen, die 4 boxen befinden sich alle in einer Großen wrapper Box.
Die boxen sollen sie wie folgt verhalten.
Links oben befindet sich ein Firmenlogo, rechts daneben mit selber Höhe ein Header wo mal ein Bild rein soll.
Unter dem Firmenlogo soll eine Navigationsbox die genauso breit is wie das Firmelogo, daneben ein Textbereich, der letztliche "Anzeigebereich", der wieder so breit is wie der header.
Ich hab nur versucht es schon mit float und clear float auszurichten, dann mit den Positionsangaben top,left right etc.
Nun hab ich die Variante die hier in den FAQ stehen ausprobiert. Nur leider funktioniert garnichts von all dem.
In der Live Ansicht von Dreamweaver, stehen die verschiedenen Boxen nur wirr nebeneinander, bzw. man sieht manche garnicht.
Könnt ihr mir bitte helfen?
Hier mein Code:
Erst Html:
HTML: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="home_css.css">

</head>

<body>
<div id="wrapper">

   <div id="mecklogo">

   </div>
    
   <div id="navigation">
   
   </div>
 
  
   <div id="header">
  
   </div>
	
   <div id="metainformation">	

   </div>
  
 </div>  
</body>
</html>

Und hier CSS:
CSS: 
#wrapper {
	margin: 0 auto;
	width: 960px;
}
	

#mecklogo {
	float:left;
	height: 192px;
	width: 192px;
	background-color:#0F3;
	margin: 0;
	padding: 0;
	}
#navigation {
	clear:left;
	position:fixed;
	height:auto;
	width: 192px;
	background-color:#999;
	margin: 0 ;
	padding: 0 ;
	}

#header {
	float:left;
	height: 192px;
	width: 768px;
	background color:#39C;
    margin: 0 ;
	padding:0 ;	
}

#metainformation {
clear:left;
height: auto;
width: 768px;
background-color:#C3C;
margin: 2%;
padding: 2%;
}

Is jetz bisschen lange aber ich hoffe mir kann jemand helfen!
Vielen Dank schonmal!
Gruß
FunkFlex
 
Zuletzt bearbeitet von einem Moderator:
Hi,

ich empfehle dir, zwei weitere DIV-Blöcke einzurichten (hier: #leftCol u. #rightCol ), die in deinem Seitenkonzept den linken und rechten Spaltenblock für die genannten Seitenbereiche bilden:
HTML: 
<div id="wrapper">

   <div id="leftCol">
      <div id="mecklogo"></div>
      <div id="navigation"></div>
   </div><!-- / #leftCol -->

   <div id="rightCol">
      <div id="header"></div>
      <div id="metainformation"></div>
   </div><!-- / #rightCol -->

</div><!-- / #wrapper -->


Die beteiligten Blöcke werden dann wie folgt formatiert:
CSS: 
/*linkerSpaltenblock */
#leftCol {
float:left;
width:192px;
}
#mecklogo {
height: 192px;
background-color:#0F3;
margin: 0;
padding: 0;
}
#navigation {
height:auto;
background-color:#999;
margin: 0;
padding: 0;
}

/* rechter Spaltenblock */
#rightCol {
float:left;
width:768px;
}
#header {
height: 192px;
background color:#39C;
margin: 0;
padding:0;
}
#metainformation {
background-color:#C3C;
margin: 0;
padding: 0;
}


mfg Maik
 
Also jetz richten sie sich wunderbar nebeneinander aus, dankeschön! Aber die Navileiste und die Metainfo sind relativ klein. Kann ich diese dann mit height auto machen oder soll ich ne feste Größe festlegen?
Gruß FunkFlex
 
Von einer festen (absoluten) Höhenangabe solltest du absehen, wenn der Inhaltsumfang recht groß ist, und zukünftig auch anwachsen wird. Überschreitet nämlich der Inhalt die festgelegte Boxenhöhe, läuft er über den unteren Rand seines Elternelements hinaus.

Du hast jedoch mit der Eigenschaft min-height die Möglichkeit, für die Boxen eine Mindesthöhe vorzusehen, die dann bei zunehmenden Inhalt auch mitwächst.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück