zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit CSS relative, absolute & float

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.08.2010, 21:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.08.2010
Beiträge: 7
FrageHabe befindet sich auf einem aufstrebenden Ast
Standard Problem mit CSS relative, absolute & float

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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.08.2010, 00:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.08.2010
Beiträge: 7
FrageHabe befindet sich auf einem aufstrebenden Ast
Standard

Ich habe in der Zwischenzeit mal einen anderen Ansatz ausprobiert, indem ich absolute (das Bild in der Ecke) und relative (der Rest) gemischt und clear:both eingesetzt habe, sowie als Test eine dritte Reihe links eingefügt. Das Ergebnis war mal wieder nur halb zufriedenstellend, da alles soweit klappt, sowohl im Firefox als auch im IE...

Bis ich zum #rowmain komme - danach funktioniert wieder nichts, weder mit float:right, noch einer prozentualen / pixelbasierten Breitenangabe, noch mit einer absoluten Positionierung.

Hier mal mein anderes verwurschteltes CSS

#pic1 { background-color: white;
position: absolute; left: 0px; top: 0px; z-index: 50;
width: 80px;
height: 60px;
padding: 0px 0px 0px 0px;
margin: 0px;
border: 0px;
text-align:left;
}

#header { background-color: green;
position: relative; left:0px; top: 0px;
float: left;
width: 800px;
height: 60px;
padding: 0px 0px 0px 0px;
margin: 0px;
border: 0px;
text-align:center;
}

#headerlow { background-color: aqua;
position: relative; left:0px; top: 0px;
float: left;
width: 800px;
height: 15px;
padding: 0px 0px 0px 0px;
margin: 0px;
border: 0px;
text-align:center;
}

#rowleft { background-color: blue;
position: relative; left: 0px; top: 0px;
float: left;
width: 80px;
height: 60px;
padding: 10px 0px 0px 10px;
margin: 0px;
border: 0px;
text-align:left;
}

#rowleft2 { background-color: gray;
position: relative; left: 0px; top: 0px;
clear: both;
float: left;
width: 80px;
height: 60px;
padding: 10px 0px 0px 10px;
margin: 0px;
border: 0px;
text-align:left;
}

#rowleft3 { background-color: blue;
position: relative; left: 0px; top: 0px;
clear: both;
float: left;
width: 80px;
height: 60px;
padding: 10px 0px 0px 10px;
margin: 0px;
border: 0px;
text-align:left;
}

#rowmain { background-color: yellow;
position: relative;
width: 580px;
height: 100%;
padding: 20px 30px 10px 30px;
margin: 0px;
border: 0px;
text-align:justify;
}

#ad { background-color: red;
position: relative; left: 80px; top: 75px;
float: left;
width: 250px;
height: 250px;
padding: 0px 0px 0px 0px;
margin: 0px;
border: 0px;

}

#rowright { background-color: gray;
position: relative; left: 0px; top: 0px;
float: right;
width: 80px;
height: 120px;
padding: 10px 0px 0px 0px;
margin: 0px;
border: 0px;
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.08.2010, 08:29
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Moin,

das liest sich so, als würdest du nicht so recht verstehen was du da tust.
Trial/Error ist imho kein guter Ansatz.

Little Boxes hilft dir beim verstehen der grundsätzlichen Sachen.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #4 (permalink)  
Alt 13.08.2010, 15:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.08.2010
Beiträge: 7
FrageHabe befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

danke für den Link, das hilft mir teilweise weiter - vor allem der float Part. Ich habe jetzt die Nacht auf CSS Zen verbracht und mir da ein paar "perfekte" Layouts und Strukturierungen angesehen und meine, meinen Denkfehler gefunden zu haben - zumindest das "sieht immer anders aus" sowie das floaten habe ich fast gelöst, ich habe alles über den Haufen geworfen und die divs stärker ineinander verschachtelt sowie mit Listen etwas ausprobiert.

Ich poste dann meine Lösung, wenn ich fertig bin, irgendwann musste ich auch mal ins Bett .
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
div-höhe? - Hauptcontainer über ganze Seite will nicht... AndMei CSS 5 13.12.2010 15:43
960 Grid System - Problem ceville CSS 1 17.09.2009 12:18
Doctype und CSS Problem tech CSS 3 29.05.2009 21:16
Problem mit CSS Style flo007 CSS 3 25.01.2009 18:08
Ich komme nicht weiter - fertiges Layout ... Gulli CSS 16 06.08.2008 16:00


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:32 Uhr.