nicht angemeldet
Pixel-Probleme beim Floaten
Hallo liebe Leute,
kann mir jemand sagen, warum meine drei Spalten nicht in eine Reihe passen? Die erste ist 500 px breit, die zweite (scroller) 150 und die dritte 200. Macht zusammen 850, was im Rahmen (all) angegeben ist. Aber der Scroller rutscht immer unter die äußeren. Erst wenn ich dem Rahmen 6 Pixel dazugebe (also auf 856), dann rutscht der scroller an die richtige Stelle (aber dann hat er dusselige 3 Pixel Abstand zu beiden Seiten 8-(( ). Was läuft hier falsch?
Gruß von Reiner
CSS:
body {
color: black; background-color: white;
margin: 0; padding: 0;
text-align: center; /* Zentrierung im Internet Explorer */
font-size: 100.01%;
font-family: Arial, Helvetica, sans-serif;
voice-family: ""}"";
voice-family: inherit;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, h7 {
font-family: "Courier New", Courier, monospace;
font-weight: bolder;
letter-spacing: 1em;
}
#all {
width: 850px;
}
#scroller {
background-color: #FFFF00;
width: 150px;
height: 100%;
margin-left: 500px;
margin-right: 200px;
}
#main1 {
float: left;
width: 500px;
margin-top: 50px;
text-align: left;
}
#title1 {
background-color: #33FF00;
}
#main2 {
float: right;
width: 200px;
margin-top: 50px;
text-align: left;
}
#title2 {
background-color: #33FF00;
}
#col1 {
background-color: #00FFFF;
}
#col2 {
background-color: #0099FF;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SilberSteine</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="all">
<div id="main1">
<div id="title1">
<h3>Überschrift</h3>
Test </div>
<!-- Linke Spalte -->
<div id="col1"> ... </div>
</div>
<div id="main2">
<div id="title1">
<h3>Über</h3>
Test </div>
<!-- Rechte Spalte -->
<div id="col2"> ... </div>
</div>
<div id="scroller"> scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
</div>
<!-- IE Column Clearing >
<div id="ie_clearing"> </div-->
</div>
</body>
</html>
-
Ach so, vielleicht sollte ich noch ergänzen, dass das Layou im Netscape 7.1 funktioniert, nur nicht im IE 6.0.29
Reiner
-
Hallo Reiner
CSS:
...
»» #all { > width: 850px; margin: auto; /* Zentrierung für Browser */ > } > > #scroller { > background-color: #FFFF00; > /* width: 150px; weglassen, erzeugt den 3px-Fehler im IE, sorgt dafür, dass es nicht mehr dazwischen passt, und ist unnötig */ > /* height: 100%; weglassen, erzeugt den 3px-Fehler im IE und ist Unsinn, ohne Elternelement mit definierter Höhe */ > margin-left: 500px; > margin-right: 200px; > }Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Danke Detlef! Klingt logisch un dfunktioniert.
Gruß Reiner
-
Hallo,
Danke Detlef! Klingt logisch un dfunktioniert.
Außer im NN 7 bei schmalem Browserfenster, was ich leider nicht kontrollieren kann, weil ich den im Moment nicht griffbereit habe.
Vielleicht hilft
min-width:850px;für body.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
Jetzt habe ich immer noch ein Problem. Und zwar habe ich meinen kompletten Inhalt in einem DIV-Container mit
#all {
width: 850px;
margin: auto;
}zentriert. Das funktioniert auch gut. Aber wenn ich das Netscape 7.1-Fenster allmählich verkleinere, rutscht alles nicht nur bis zum linken Rand, sondern auch darüber hinaus. Es gibt zwar einen Scrollbalken, mit dem man den verdeckten Inhalt rechts erreichen kann, aber nicht mehr den linken. Im IE 6.0.29 funktioniert es so, wie es sein soll. Kann man dem Netscape helfen?
Gruß von Reiner
-
Hat sich schon erledigt: min-width:850px; im Body hilft. Dank an Detlef!
Gruß von Reiner
-