Frage stellen
bin gerade dabei von dem Seitenaufbau mit Tabellen wegzukommen. Der Erste Versuch eine Seite nur mit CSS / Divs zu erstellen geht soweit ganz gut, nur habe ich das Problem, dass die Container die Links und Rechts neben dem Content-Container platziert sind, sich nicht mit dem Inhalt der Seite verlängern (höhe).
Also, ich habe einen Main-Container, in dem ist ein Head-Container, Links ein Menu-Container, in der Mitte ein Content-Container und rechts noch mal ein Container der sich wie der Linke in der Höhe erweitern soll.
Hier die CSS-Datei:
- Code: Alles auswählen
/* ------------- Seitenaufbau ------------- */
body {
text-align: center;
}
#site {
text-align: left;
margin: 0 auto;
width: 878px;
background-color: #ffffff;
border: solid;
}
#head {
width: 878px;
height: 132px;
margin-top: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
border: 0;
background-image: url(images/head.jpg);
background-repeat: no-repeat;
background-position: center;
}
#menu_left {
float: left;
width: 142px;
background-color: #f1f1f1;
}
#menu_right {
float: right;
width: 142px;
height: 800px;
margin-right: 0;
background-color: #c6d5de;
}
#content {
width: 548px;
margin-left: 162px;
margin-right: 23px;
margin-top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #000000;
}
#footer {
clear:both;
border-color: #ffffff;
width: 878px;
height: 16px;
background-color: #124666;
}
/* ------------- Seitenaufbau-Details ------------- */
#content h4 {
color:#FF0000;
}
.menu_font {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #787c7e;
margin-left: 21px;
}
.menu_div {
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
html { height: 100% }
body { min-height: 101%; }
/* ------------- Verhalten der Links (Menubar)------------- */
#menu_left a:link { color:#787c7e; text-decoration:none; }
#menu_left a:visited { color:#787c7e; text-decoration:none; }
#menu_left a:focus { color:#787c7e; text-decoration:none; }
#menu_left a:hover { color:red; text-decoration:none; }
#menu_left a:active { color:red; text-decoration:none; }
Und hier die HTML-Datei:
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<div id="site">
<!-- head -->
<div id="head"></div>
<!-- / head -->
<!-- menu left -->
<div id="menu_left">
<div class="menu_div">
<span class="menu_font">
<a href="#">- Menupunkt1</a>
<br /><br /><br />
</span>
</div>
</div>
<!-- / menu left -->
<!-- menu right -->
<div id="menu_right">
</div>
<!-- / menu right -->
<!-- content -->
<div id="content">
<h4>Willkommen</h4>
Dies ist ein Test test test test Dies ist ein Test test test testDies
</div>
<!-- / content -->
<!-- footer -->
<div id="footer">
</div>
<!-- / footer -->
</div>
<body>
</body>
</html>
Für Eure Hilfe mit Erklärungsweise für einen Neuling, bin ich Euch sehr Dankbar!!
Viele Grüße,
Daniel
trotzdem Dank ich Dir für Deine Mühe.