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
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;
}
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!
Re: Problem mit CSS relative, absolute & float
Autor: Matthias
Datum: 13.08.2010 12:48:13
> Hallo,
Herzlich willkommen im Forum!
> ich habe folgendes Problem, an dem ich schier
> verzweifle nachdem anfangs alles recht gut
> geklappt hat, ich stelle mal kurz meine Probleme
> dar:
> - 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.
Das ist durchaus normal, denn Du hast zu wenig unternommen, damit die Ergebnisse möglichst gleich sind. Du musst dazu einen Standard nutzen, den beide Brauser kennen, das ist HTML in den verschiedensten Versionen. Damit die Brauser aber die gleiche Version nutzen, musst Du diese mitteilen. Dafür ist der Doctype vorgesehen.
Du benutzt:
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
> Transitional//EN">
Dieser ist nicht vollständig und daher benehmen sich die Brauser so, wie sie es gerade für richtig halten.
Füge einfach mal diesen hier ein und Du wirst sehen, dass sich beide Ansichten in den Brausern stark annähern, zumindestens bei meinem IE 8 und FF 3.6.8.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Bedingung ist dafür aber auch, dass Du im Container #lowermain die fehlenden Doppelpunkte vor dem Wert in der CSS-Definition ergänzt.
> - 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.
Das was Du formulierst, ist nicht präzise. Ich weiss nicht, wie das aussehen soll. Du willst, dass der Container ad zentriert liegt und dann die Inhalte vom umgebenden Container Main drumherumfliessen?
Dieses fließen klappt bei Dir sowieso noch nicht ganz. Ich sehe keine Notwendigkeit in Deinem Aufbau unbedingt absolute Positionierung zu benutzen. Übersehe ich da was?
> 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.
Ein guter Vorsatz! Das bekommen wir mit Dir zusammen schon hin.
Grüße
Matthias
Hier die Stelle der fehlenden Doppelpunkte nach dem Bezeichner z-index.
> CSS Code:
>
> #headerlow { background-color: aqua;
>
> position:
> absolute; left:0px; top: 60px; z-index 20;
>
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!
Re: Problem mit CSS relative, absolute & float
Autor: FrageHabe
Datum: 13.08.2010 14:47:03
> Füge einfach mal diesen hier ein und Du wirst
> sehen, dass sich beide Ansichten in den Brausern
> stark annähern, zumindestens bei meinem IE 8 und
> FF 3.6.8.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
> Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
Danke für den Tipp, das hat tatsächlich noch etwas gebracht - ich habe mir in der Zwischenzeit bei CSS Zen die Zeit vertrieben und alles noch einmal umgestellt, damit war das IE / FF Problem auf einmal von selbst gelöst.
> Bedingung ist dafür aber auch, dass Du im
> Container #lowermain die fehlenden Doppelpunkte
> vor dem Wert in der CSS-Definition ergänzt.
Danke, das hatte ich wirklich übersehen.
> Das was Du formulierst, ist nicht präzise. Ich
> weiss nicht, wie das aussehen soll. Du willst,
> dass der Container ad zentriert liegt und dann
> die Inhalte vom umgebenden Container Main
> drumherumfliessen?
> Dieses fließen klappt bei Dir sowieso noch nicht
> ganz. Ich sehe keine Notwendigkeit in Deinem
> Aufbau unbedingt absolute Positionierung zu
> benutzen. Übersehe ich da was?
Ich habe anfangs auf die absolute Positionierung gesetzt, da ich das Problem hatte, dass bei der relativen zwar in einem Browser alles richtig war, dafür in dem anderen umso mehr verschoben.
> Ein guter Vorsatz! Das bekommen wir mit Dir
> zusammen schon hin.
Ich freue mich! Ich habe den Code größtenteils komplett über den Haufen geworfen und jetzt stärker mit ineinander verschachtelten Divs sowie Listen angefangen. Bisher sieht alles gut aus, nur habe ich gestern (Mensch muss auch schlafen) bei dem "Ad-Float-Problem" aufgehört. Mal sehen, was da noch kommt. Sollte ich es alleine schaffen, stelle ich es hier noch rein, Kritik höre ich immer gern!
