nicht angemeldet
DIV-Container OHNE Abstand "aufeinanderstellen"
Moin Moin,
sehe ich das richtig, dass es nicht ohne weiteres (gar nicht?) möglich ist, DIV Boxen aufeinanderzustellen, so dass sie im IE und unter Opera (jeweils die aktuelle Version, also IE6.0 bzw. Opera7.54) identisch sind?
Ich hab hier nämlich das Prob, dass die Kind-DIVs eines "mainframe-Div" mit float: right und float: left genau unter der "title"-Div liegen sollen, wegen der aufeinadner abgestimmten Hintergrundgrafiken (abgerundete Ecken uns so schickes Zeuch) muss das natürlich genau aufeinander passen, nicht mit einigen Pixeln Lücke, wie z.Z. in Opera. (komischerweise macht der IE das mal "richtig"...)
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="style.css">
</head>
<body>
<div class="mainframe">
<!-- querliegendes Title-DIV -->
<div id="title">
<h1>Titel</h1>
<!-- spaeter weitere links in quer-navigation -->
</div>
<!-- unter Title-DIV zwei Floating-Boxen, je rechts und links -->
<div id="left">
einige Links
</div>
<div id="right">
noch mehr links
</div>
<!-- zwischen den Floating-Boxen ein "content"-DIV-->
<div id="content">
blablabla
</div>
</div> <!-- Ende umfassendes "mainframe"-DIV -->
</body>
</html>
style.css (einfache Hintergrundfarben anstelle der Hintergrundgrafiken, aber das Problem wird deutlich):
body{
background-color: #000000;
}
div{
margin: 0px auto;
}
div.mainframe{
background-color: #CCCCCC;
width: 800px;
}
#title {
background-color: #FFFFFF;
height:92px;
}
#left, #right {
background-color: #FF0000;
width:100px;
height: 300px;
}
#left {
float: left;
position: relative;
top:-13px;
}
#right {
float: right;
}
#content {
width: 592px;
height: 400px;
text-align: center;
}
Absolute Postionierung hilft mir leider nicht, da die Webseite an sich zentriert sein soll, sonst schwimmen die DIV-Boxen u.U. ausserhalb des "mainframes".
Mit relativer Positionierung ist es wie mit dem obigen Beispiel (linke DIV-Box): Opera braucht -13px und der IE gar keine zum exakten zusammenrücken der DIVs, mit Negativer Positionierung gerät die Box im IE Entsprechend zu hoch.
-
Hi,
sehe ich das richtig, dass es nicht ohne weiteres (gar nicht?) möglich ist, DIV Boxen aufeinanderzustellen, so dass sie im IE und unter Opera (jeweils die aktuelle Version, also IE6.0 bzw. Opera7.54) identisch sind?
Nein. Du solltest nicht versuchen float mit position zu mixen und dabei gar noch mit negatiben Werten arbeiten, sondern die relevanten margins der beteiligten Elemente auf 0 setzen.
freundliche Grüße
Ingo-
Danke, die Negativen Werte plus Postion waren nur zur Anschauung für den linken im Gegensatz zum rechten Float-DIV. Die margins auf Null zu setzen machte ich schon ne Weile, scheint aber am besten mit der "globalen" Anweisung
* {
margin: 0;
padding: 0;
}zu klappen. Hab ich grad woanders erfahren. Spart jede Menge Testerei welches Objekt jetzt welchen falschen margin hat ;-)
-
Hi,
* {
margin: 0;
padding: 0;
}zu klappen. Hab ich grad woanders erfahren. Spart jede Menge Testerei welches Objekt jetzt welchen falschen margin hat ;-)
es gibt keine "falschen" margins - nur je nach Browservoreinstellung evtl. unterschiedliche. Sinnvoll sollten sie jedoch schon sein. Und mit dieser Methode läuftst Du Gefahr, solche sinnvollen margins z.B. bei Textabsätzen zu vergessen. Meist sind es ja nur wenige Elemente, bei denen ein bestimmter margin wichtig ist und da finde ich es einfacher, diesen explizit zu definieren.
freundliche Grüße
Ingo
-
-