float - uhaaa!!!
langer
- css
hallo an alle!
hoffe ich gehe Euch nicht auf die nerven.. ist höchst wahrscheinlich vollkommen tivial...
ich möchte eine seite mit 760x560 auf dem screen zentireren. horizontal habe ich das auch geschafft...
body {
text-align= center;
margin= 0 auto;
marginwidth= 0;
marginheight= 0;
background-color: #ffffff;
}
innerhalb des bodys sind in der .html drei div container.
1. div id=head oben (ist zentriert)
div#head {
width: 760px;
height: 122px;
margin: 0 auto;
padding: 0;
border: 0;
background-color: #ffffff;
}
2. div id=menue (soll nach links, aber mit der linken kante mit der von head abschliessen)
div#menue {
background-color: #ffffff;
width: 305px;
height: 434px;
margin: 0 auto;
padding: 0;
border: 0;
float: left;
}
3. div id=content (soll nach rechts, aber mit der rechten kante mit der von head abschliessen)
div#content {
background-color: #ffffff;
width: 455px;
height: 434px;
margin: 0 auto;
padding: 0;
border: 0;
}
das problem ist: wenn ich menue float=left angebe setzt sich content zwar nach oben und positioniert sich auch richtig unter head, aber menue rutscht nach links aussen, dh es gibt einen riesen abstand zwischen content und menue... ausserdem ist menue nicht mehr zentriert! das das alles zusammenpasst ist wichtig weil sich in jenem div container ein teil eines bildes verbirgt die zusammen wieder passen müssen...
Frage: lässt sich das beheben, und kann man (wenn das geht), die seite auch vertikal zentrieren?
VIELEN VIELEN DANK schon mal!
Yerf!
body {
text-align= center;
margin= 0 auto;
marginwidth= 0;
marginheight= 0;
background-color: #ffffff;
}
Ehm... das ist so kein korrektes CSS...
a) in den anderen Zuweisungen benutzt du doch auch Doppelpunkte
b) marginwidth/height gibt es in CSS nicht, das wird alleine durch die margin-Angabe geregelt
Frage: lässt sich das beheben, und kann man (wenn das geht), die seite auch vertikal zentrieren?
Hm, ich würde die unteren beiden Divs zusammenfassen zu einem und darin das Menu links floaten, damit sollte es dann gehen.
Vertikales Zentrieren setzt voraus, das die Seite 100% der Viewporthöhe benutzt, dies ist im Gegensatz zur Breite nicht automatisch der Fall. Setze daher die Höhe von BODY und HTML auf 100%, dann sollte über margin:auto ein Zentrieren möglich sein.
Gruß,
Harlequin
Hallo
ich möchte eine seite mit 760x560 auf dem screen zentireren.
Gebe entweder für body eine Breite an, oder setze alle Inhaltsdivs in einen Weiteren, der diese nur gruppiert und sowohl die Breitenangabe als auch das margin:0 auto;
zugewiesen bekommt.
<body>
<div id="alles">
<div id="head">...</div>
<div id="menue"></div>
<div id="content">...</div>
</div>
Um nun _innerhalb_ von #alles das Menü floaten zu lassen, musst du #alles einen eigenen Anzeigekontext verpassen. Dies kannst du erreichen, indem du #alles selbst floaten lässt oder ihm overflow
mit einem anderen Wert als "visible" mitgibst. Sinnvoll wäre hier wohl "auto".
Falls erwünscht, solltest du übrigens das text-align:center;
im body (wurde wohl für den MSIE angelegt?) später (bei meiner Lösung in #alles) wieder aufheben.
Tschö, Auge