Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Problem mit CSS relative, absolute & float
Autor: FrageHabe [Beiträge: 2]
Datum: 12.08.2010 20:45:25
Hallo,
ich habe folgendes Problem, an dem ich schier verzweifle nachdem anfangs alles recht gut geklappt hat, ich stelle mal kurz meine Probleme dar:
- Wenn ich den folgenden Code in Firefox teste klappt alles problemlos bzw. sieht (bis auf das Float-Problem) alles so aus wie ich es möchte - im IE dafür gar nicht! (Blöcke verschoben, große Lücke zwischen mainrow und rightrow.
- Ich habe dann nur wenige Elemente absolut im CSS gesetzt und den Rest relative - Ergebnis: im IE alles an Ort und Stelle, im Firefox dafür total verschoben.
- Dazu kommt das Float Problem - ich möchte, dass der "div mainrow" den "div ad" umfließt, da ich an der Stelle Werbung einbinden möchte - nur klappt dies auch nicht.
Ich weiß, dass es mit div align klappt, so funktionierte auch alles, nur möchte ich wie man sieht fast alles in das CSS auslagern und dort Größe, Aussehen, Position bestimmten.
Für Hilfe jedweder Art bin ich dankbar!
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Testseite</title>
<meta name="description" content="Testseite">
<meta name="robots" content="index, follow">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="page-enter" content="blendtrans(duration=0.1)">
<meta http-equiv="page-exit" content="blendtrans(duration=0.1)">
<link rel="StyleSheet" type="text/css" href="./default.css">
<script type="text/javascript" src="http://www.test.de/bbcode.js"></script>
</head>
<body onselectstart="return false">
<div id="pagewidth" >
<div id="pic1" ><img src="pic URL" width="120" height="60" alt="Bild"></div>
<div id="header" > Titel </div>
<div id="headerlow" > Headerlow </div>
<div id="rowleft" > Links </div>
<div id="rowleft2" > Links2 </div>
<div id="rowmain" > Xxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxx
</div>
<div id="ad">
</div>
<div id="rowright" > rechts </div>
</body>
</html>
CSS Code:
html, body{
margin:0;
padding:0;
text-align:center;
}
#pagewidth{
width:800px;
text-align:center;
margin-left:0px;
margin-right:0px;
}
#header { background-color: green;
position: absolute; left:0px; top: 0px;
width: 800px;
height: 60px;
padding: 0px 0px 0px 0px;
margin: 0px;
border: 0px;
text-align:center;
}
#headerlow { background-color: aqua;
position: absolute; left:0px; top: 60px; z-index 20;
width: 800px;
height: 15px;
padding: 0px 0px 0px 0px;
margin: 0px;
border: 0px;
text-align:center;
}
#pic1 { background-color: white;
position: absolute; left: 0px; top: 0px; z-index: 15;
width: 80px;
height: 60px;
padding: 0px 0px 0px 0px;
margin: 0px;
border: 0px;
text-align:left;
}
#rowleft { background-color: blue;
position: absolute; left: 0px; top: 75px; z-index: 0;
width: 80px;
height: 60px;
padding: 10px 0px 0px 10px;
margin: 0px;
border: 0px;
text-align:left;
}
#rowleft2 { background-color: gray;
position: absolute; left: 0px; top: 135px; z-index: 0;
width: 80px;
height: 60px;
padding: 10px 0px 0px 10px;
margin: 0px;
border: 0px;
text-align:left;
}
#rowmain { background-color: yellow;
position: absolute; left: 80px; top: 75px;
float: left;
width: 580px;
height: 100%;
padding: 20px 30px 10px 30px;
margin: 0px;
border: 0px;
text-align:justify;
}
#ad { background-color: red;
position: absolute; left: 80px; top: 75px; z-index: 50;
float: left;
width: 250px;
height: 250px;
padding: 0px 0px 0px 0px;
margin: 0px;
border: 0px;
}
#rowright { background-color: gray;
position: absolute; left: 720px; top: 75px;
width: 80px;
height: 120px;
padding: 10px 0px 0px 0px;
margin: 0px;
border: 0px;
}
Zum Abschicken deines Beitrags bitte die Schaltfläche "Abschicken" nur einmal anklicken und warten. Der Server braucht manchmal
einige Zeit, bis er den Beitrag in die Datenbank übernommen hat. Wenn du die Schaltfläche mehrmals drückst, erscheint dein Beitrag
auch mehrmals im Forum.
Bewerten Sie Ihren Webhosting-Provider
Wie zufrieden sind Sie mit Ihrem Webhosting-Provider? Gibt es Probleme beim Service, mit der Performance oder der Abrechnung?
Teilen Sie jetzt Ihre Erfahrungen mit anderen Webmastern und schreiben Sie eine Provider-Bewertung. Mit etwas Glück können Sie ein Apple iPad gewinnen!
Weitere Informationen und Teilnahme...
