Div positionieren von Eduard, 01.12.2006 17:05

Div positionieren

Eduard 01.12.2006 17:05

Hallo,
ich habe ein Problem. Nachdem ich hier schon viele Forenseiten gelesen habe, bin ich immer noch nicht auf die korrekte Lösung gekommen. Ich möchte meine Site nur mit divs aufbauen, aber diese richten sich nicht ganz korrekt aus. Ich will, dass der Techt(Div content)direkt 10px neben der navi(Div nav) steht, und nicht darunter. Sobald ich dies ändere, verhaut es mir den Footer(Div Footer)

Kann mir jemand helfen?

CSS Code:

html, body, ul, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin:0;
padding:0;
border:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:100,01%;
background-color:#B1C3D9;
color:#666666;
text-align:center; /*Hack für IE 5.x*/
}

h1, h2, h3, h4, h5, h6 {
font: 100% Georgia, "Times New Roman", Times, serif;
color: #003366;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #FF7318;
}
h1 {
font-size:130%;
color:#000000;
}
p {
font-size:80%;
margin:20px;
}

#wrapper {
position:relative;
width:900px; /*ist wichtig hält ganzes design zusammen der wrapper*/
height:599px;
margin:10px auto; /*Bild wird zentriert und das 10px von oben entfernt*/
background-color:#FFFFFF;
border:#000000 1px solid;
text-align:left; /*wegen IE Hack im body*/
}
.leftimage {
margin: 10px 15px 10px 0;
float:left;
border:1px #000000 solid; //Bild umrandet mit border
}
.rightimage {
margin: 10px 0 10px 15px;
float:right;
border:1px #000000 solid; //Bild umrandet mit border
}

#banner {
height:110px;
background-image:url(../images/banner_bgu.jpg);
background-repeat:no-repeat;
}
#nav {
position:relative;
z-index:1;
width:150px;
margin:10px inherit; /*Bild wird zentriert und das 10px von oben entfernt*/

}
#nav ul {
padding:0;  /*soll sich ans nav anschmiegen*/
margin:0;
background-color:#3333CC; /*die orangene Hintegrundfarbe hinter den buttons #FF7318*/
}
#nav ul li { /*Tabelle erstellen*/
display:block; /*Liste soll nicht untereinander sondern in eine Zeile*/
padding:0;
margin:0;
}
#nav ul li a { /*Descendentselector, da kein kommer 2 formatierungen getrennt sind*/
font-size:80%;
color:#FFFFFF; /*Schrift weiss*/
background-color:#33c;  /*Button Farbe*/
text-decoration:none;
padding:0 25px; /*die links sollen nicht breiter/größer als die schrift werden.*/
border-right:1px solid #FF7318; /*die links haben rechts orangene Trennlinien.*/
text-align:center; /*Hack notwendig für IE 5.0x*/
width:9em; /*sonst funktioniert padding nicht im IE 5.0x*/
}
#nav ul li a:hover, #nav ul li a:focus { /*Gruppenselector*/
background-color:#006; /*focus ist für die Linkanwahl per TAB-Taste. Dadurch Links barrierefrei per Tastatur anwählbar*/
}
#content{
position: relative;
overflow:visible;
z-index:2;
width:620px;
height:300px;
      left: 150px;
   top:10px;
}
#content p {
margin-left:20px;
}
#content h1{
font-size:130%;
color:#006;
padding:0;
margin-left:20px;
}
#content h2{
font-size:110%;
color:#0042C6;
padding:0;
margin-left:20px;
}
.clearit{
clear:both;
}
#footer{
border-top:1px solid #000000;
background-color:#FF7318;
color:#fff; /*Schriftfarbe weiss*/
}
#footer p{
font-size:80%;
text-align:center;
padding:0;
margin:0;
}

-----------------------------------------------

HTML Code:

<!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>Umweltschutzanlagen </title>
<link href="file:///C|/Dokumente und Einstellungen/wolfram/Eigene Dateien/BGU_Relaunch/bgu_neu/cssFiles/external.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="banner"></div>
<div id="nav">
<ul>
<li><a href="#">Start</a></li>
</ul>
<ul>
<li><a href="#">Über uns</a></li>
</ul>
<ul>
<li><a href="#">Anfahrt</a></li>
</ul>
<ul>
<li><a href="#">Start</a></li>
</ul>
<ul>
<li><a href="#">Über uns</a></li>
</ul>
<ul>
<li><a href="#">Anfahrt</a></li>
</ul>

<div id="content">
<h1><strong>Entlastungs-Systeme</strong></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <img src="file:///C|/Dokumente und Einstellungen/wolfram/Eigene Dateien/BGU_Relaunch/images/entlastung.jpg" alt="bgu-RÜ-Stauklappen" class="leftimage" width="200" height="117"/>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<div class="clearit"></div>
<h2>RÜ-Stauklappe S</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <img src="file:///C|/Dokumente und Einstellungen/wolfram/Eigene Dateien/BGU_Relaunch/images/schema.gif" alt="RÜ-Stauklappe S" width="220" height="165" class="rightimage" />Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum</p>
<div class="clearit"></div>
</div>
</div>

<div id="footer"><p>Umweltschutzanlagen </p></div>
</div>
</body>

</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Eduard: Div positionieren

Div positionieren

Div positionieren