Hi, :?
ich bin am verzweifeln. Ich versuche drei divs nebeneinander mit relativen Größen darzustellen (in dieser Reihenfolge: 25%, 50%, 25%). Ich habe versucht, bei allen float:left zu verwenden, was auch geklappt hat. Allerdings gibt es jetzt bei verschiedenen Auflösungen Fehler bei den Abständen (obwohl ich gar keine eingefügt habe), und der Inhalt geht über den Rest der Seite (wenn er zu lang ist).
HTML:
CSS:
Hoffe ihr könnt mir helfen. :(
ich bin am verzweifeln. Ich versuche drei divs nebeneinander mit relativen Größen darzustellen (in dieser Reihenfolge: 25%, 50%, 25%). Ich habe versucht, bei allen float:left zu verwenden, was auch geklappt hat. Allerdings gibt es jetzt bei verschiedenen Auflösungen Fehler bei den Abständen (obwohl ich gar keine eingefügt habe), und der Inhalt geht über den Rest der Seite (wenn er zu lang ist).
HTML:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>www.hiphop-sms.com | Home</TITLE>
<link rel="stylesheet" type="text/css" href="Style.css">
</HEAD>
<BODY>
<div id="impressum">
<a class="white" href="Impressum.html">Impressum</a>
</div>
<div align="center">
<div id="header">
<a href="Home.html"><img src="hiphop-sms.png" border="0" alt="www.hiphop-sms.com"; title=""></a>
</div>
<div id="main">
<div id="main2">
<div id="bar">
<script type="text/javascript"><!--
google_ad_client = "pub-1184269954047031";
/* Anzeige Linkblock Ganz Oben 468x15, Erstellt 11.05.08 */
google_ad_slot = "2226036793";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<h1>Willkommen auf Hiphop-SMS.com!</h1>
<br><br><br><br><br><br>
<div style="float:left; width:25%; text-valign:top">
<div style="border-style:solid; border-width:1px; border-color:#000000">
<h2>Was wir dir bieten:</h2>
100%-ig <b>kostenlose</b> SMS<br>
ohne Anmeldung<br>
100 SMS pro Tag<br>
160 Zeichen je SMS<br>
weltweit versendbar
</div>
</div>
<div style="float:left; width:50%; text-valign:top">
<!-- BEGIN FREE SMS - DO NO CHANGE THIS CODE -->
<script type="text/javascript">
box_id = 3341;
this_uri = document.location;
last_uri = document.referrer;
</script>
<script type="text/javascript" src="http://server2.sms-box.de/free_sms_box-3341.js"></script><noscript>Ihr Browser unterstützt kein Javascript.<br /><a target="_blank" href="http://www.smsgott.de">Free SMS</a></noscript>
<!-- END FREE SMS -->
</div>
<div style="float:left; width:25%; text-valign:top">
<script type="text/javascript"><!--
google_ad_client = "pub-1184269954047031";
/* 160x600, Erstellt 12.05.08 */
google_ad_slot = "6399658232";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<br><br><br><br><br><br><br><br>
<div id="footer2">
<script type="text/javascript"><!--
google_ad_client = "pub-1184269954047031";
/* 728x90, Erstellt 11.05.08 */
google_ad_slot = "7303480458";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
</div>
<div id="footer">
Copyright © Hiphop-SMS | Version 0.01 | <a class="white" href="Impressum.html">Impressum</a>
</div>
</div>
</BODY>
</HTML>CSS:
Code:
body {
background:url(Hintergrund.png);
margin-top:0px;
margin-bottom:0px;
font-family:Arial;
font-size:12px;
text-align:center;
}
a:link { color:#000000; text-decoration:underline; }
a:visited { color:#000000; text-decoration:underline; }
a:hover { color:#CCCCCC; text-decoration:underline; }
a:active { color:#CCCCCC; text-decoration:underline; }
a:focus { color:#CCCCCC; text-decoration:underline; }
.white:link { color:#FFFFFF; text-decoration:none; }
.white:visited { color:#FFFFFF; text-decoration:none; }
.white:hover { color:#CCCCCC; text-decoration:underline; }
.white:active { color:#CCCCCC; text-decoration:underline; }
.white:focus { color:#CCCCCC; text-decoration:underline; }
h1 {
font-size:18px;
font-style:italic;
font-weight:bold;
text-align:center;
color:#8B0000;
}
h2 {
font-size:14px;
font-weight:bold;
}
#impressum {
position:fixed;
right:15px;
top:10px;
}
#header {
margin-top:30px;
margin-bottom:20px;
}
#main {
background-color:#FFFFFF;
width:80%;
height:800px;
border-style:solid;
border-width:2px;
border-color:#B0B0B0;
}
#main2 {
text-align:left;
margin-left:12px;
margin-right:12px;
margin-top:0px;
margin-bottom:0px;
}
#bar {
text-align:center;
margin-bottom:18px;
}
#sms {
width:100%;
border-style:solid;
border-width:1px;
border-color:#000000;
}
#footer {
margin-top:20px;
margin-bottom:20px;
color:#FFFFFF;
}
#footer2 {
margin-bottom:0px;
text-align:center;
}
. Das mit den Farben war auch ne gute Idee, denn die Abstände kamen nur dadurch zustande, dass es verschiedene text-aligns gab. Bleiben aber noch zwei Probleme: Ich krieg die ganzen drei divs insgesamt nicht mittig, habs schon mit div, p und span versucht... Und unter den drei divs kann ich keinen Abstand erzeugen. Zeilenumbrüche werden ignoriert und ich weiß auch nicht nach welchem div ich sie hinschreiben soll (bei margin-bottom weiß ichs auch nicht)...
