Hallo bin gerade dabei meine Homepage mittels HTML und CSS zu erstellen.
Leider wills nicht so wie ich udn hoffe jetzt mal das ihr mir helfen könnt.
Hier erst mal der bisherige Code
HTML-Datei
<body>
<div id="wrapper">
<div id="header_top">
Ich bin ein Header_Top Text.
</div>
<div id="header_buttom">
<ul id="Navigation">
<li><a href="seite_1.htm">Beispiel 1</a></li>
<li><a href="seite_2.htm">Beispiel 2</a></li>
<li><a href="seite_3.htm">Beispiel 3</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="content_wrapper">
<div id="content_left">
Ich bin ein content_left Text.
</div>
<div id="content_right">
Ich bin ein content_right Text.
</div>
</div>
<div class="clear"></div>
<div id="footer_top">
Ich bin ein footer_top Text.
</div>
<div id="footer_bottom">
Ich bin ein footer_bottom Text.
</div>
</div>
</body>CSS-Datei
html {
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
font-size:62.5%;/* schriftgroesse relative machen, um spaeter mit em zu arbeiten */
background-color:#fff;
font-family:verdana, arial, sans-serif;
text-align:center; /* vertikal zentrieren im IE6 */
background-image: url(green-balken.jpg);
background-repeat: repeat-x;
}
#wrapper {
width:900px;
margin:0 auto; /* vertikal zentrieren */
text-align:left; /* text wieder links positionieren */
background-color:#fff;
}
#header_top {
width:900px;
height:200px;
float:left;
background-color:#303030;
font-size:1.2em;
padding:.5em;
}
#header_buttom {
width:900px;
height:50px;
float:left;
background-color:#474747;
font-size:1.2em;
padding:.5em;
}
#content_wrapper {
width:900px;
float:left;
background-image: url(content.jpg);
}
#content_left {
width:200px;
height:400px;
float:left;
background-color:#8e8e8e;
font-size:1.2em;
color:#000;
padding:.5em;
}
#content_right {
width:700px;
height:400px;
float:right;
background-color:#787878;
font-size:1.2em;
color:#000;
padding:.5em;
}
#footer_top {
width:900px;
height:50px;
float:left;
background-color:#adadad;
font-size:1.2em;
color:#fff;
padding:.5em;
}
#footer_bottom {
width:900px;
height:100px;
float:left;
background-color:#cccccc;
font-size:1.2em;
color:#fff;
padding:.5em;
}
div.clear {
clear:both;
}Problem
Der Linke und rechte Inhaltsbereich werden nicht nebeneinander angezeigt. Liegt irgendwie an dem Padding, wenn ichs raus nehme steht aber alles am Rand. Wie muss ich das Ändern. Hoffe ihr könnt mir helfen
Die Hintergrundfarben sind nur zur unterscheidung der verschiedenen Bereiche. Aber habe das gefühl das trotzdem noch viele Anwendungen in der CSS-Datei doppelt sind, wäre gut wenn ihr mir sagen könntet wie ich das ganze verkürzen kann bzw. was sollt ich gänzlich ändern. Ist wie gesagt meine erste Homepage und bin noch am lernen
Danke schon mal
Schulli