Hallo,
könnt ihr mir sagen wie ich es hinbekomme, dass mein contend div Inhalt (Text) auf gleicher Höhe wie meine Navigationsleiste steht (horizontal)? Bisher wird er nach unten, ans Navigationsende geschoben.
Vielen Dank
Navigation
Text
Navigation Text
html>
<head>
<title>Sport Homepage</title>
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
</head>
<body>
<div id="wrapper">
<div id=logo>
<img src="pictures/logo/versuch Farbe.JPG"/>
</div> <!-- Dies ist das Logo -->
<div id="navigation">
<div id="header">
<img src="pictures/header/header_photo_2.jpg" />
</div> <!-- Ende Header -->
<table>
<tr>
<td><a href="http://www.html.net/">home</a><hr class="naviline" /></td>
<td><a href="http://www.html.net/">handstand</a><hr class="naviline"
/></td>
</tr>
<tr>
<td><a href="http://www.html.net/">home</a><hr class="naviline" /></td>
<td><a href="http://www.html.net/">handstand</a><hr class="naviline"
/></td>
</tr>
</table>
</div> <!-- Ende Navigation -->
<div id="content">
<h1 id="headline1" > New System </h1>
Test für einen Inhalt
Um ein Element relativ zu positionieren, wird die Eigenschaft position auf den Wert relative
gesetzt. Der Unterschied zwischen absoluter und relativer Positionierung liegt in der Berechnung
der Position.
Die Position eines relativ positionierten Elementes wird von der eigentlichen Stelle im Dokument
aus berechnet. D.h. man verschiebt das Element nur nach rechts, links, oben oder unten. Das
Element nimmt nach der Positionierung trotzdem noch seinen ursprünglichen Platz im Dokument ein,
obwohl es woanders dargestellt wird.
<div id= picturehome>
<img src="pictures/home/beginner-skateboard-tricks.jpg" />
</div>
Standardmäßig werden nachfolgende Elemente herangezogen, um freien Platz neben dem schwimmend
positionierten Element aufzufüllen. Schauen Sie in das obige Beispiel, wo der Text automatisch
neben das Bild von Bill Gates gezogen wird.
Test für einen Inhalt Um ein Element relativ zu positionieren, wird die Eigenschaft position auf
den Wert relative gesetzt. Der Unterschied zwischen absoluter und relativer Positionierung liegt
in der Berechnung der Position. Die Position eines relativ positionierten Elementes wird von der
eigentlichen Stelle im Dokument aus berechnet. D.h. man verschiebt das Element nur nach rechts,
links, oben oder unten. Das Element nimmt nach der Positionierung trotzdem noch seinen
ursprünglichen Platz im Dokument ein, obwohl es woanders dargestellt wird.
</div> <!-- Ende Content -->
<div id="footer">
Contact Info klick!
<p> http://www.homepage.de | Alle Rechte vorbehalten | © 2012 </p>
</div> <!-- Ende footer -->
<div style="clear: both;"></div>
</div> <!-- Ende wrapper -->
</body>
</html>
| html * { margin: 0px; padding: 0px;} body {background-color: #DEDEDE;} #wrapper { margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto; padding: 20px 0px 0px 0px; background: white url(../pictures/wrappernavi/grau.JPG) repeat-y left top; z-index: 1; width: 840px;border:20px solid white; } #header { margin-top: 20px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 20px 0px 40px 0px; z-index: 3; } #navigation { margin-top: 0px; margin-right: 710px; margin-bottom: 0px; margin-left: 0px; background-color: ; z-index: 2; padding: 0px 0px 0px 20px; } #content { margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 292px; z-index: 4; width: 520px; font-family: tahoma, geneva, verdana, arial, sans-serif; font-size: 90%; color: #616161; } #footer { margin-top: 20px; margin-right: 20px; margin-bottom: 0px; margin-left: 272px; background-color: #2E2E2E; z-index: 5; padding: 0px 0px 0px 130px; width: 424px; font-family: tahoma, Geneva, verdana, arial, sans-serif; font-size: 90%; color: white; } #logo { position:relative; top: 20px; left: 130px; } table, tr, td { font-family: tahoma, Geneva, verdana, arial, sans-serif; font-size: 90%; table-layout: fixed; width: 80px; padding: 0px 12px 8px 0px; } a:link { color: #616161; text-decoration:none; } a:visited { color: #616161; } a:active { color: #DE5A51; } a:hover { color: #DE5A51; border-bottom: 1px solid grey; } .naviline { margin: 8px 0px 0px 0px; high: 1px; border-color : #B0B0B0; border-width : 1px 0 0 0; border-style : solid; } #picturehome { margin: 20px 0px 20px 0px; } #headline1 { font-family: tahoma, Geneva, verdana, arial, sans-serif; font-size: 110%; color: #616161; padding: 0px 0px 20px 0px; } |