nicht angemeldet
3-spaltiges mittiges div Element
Hallo liebe Helfer,
irgendwie bekomme ich es nicht richtig hin - vielleicht liegt es auch an der Uhrzeit.
Auf meiner Seite möchte ich "unabhängig" vom Seitenlayout ein mittig positioniertes div-Element, das wiederrum aus 3 Spalten bestehen soll.
CSS:
DIV.mittig {
border: 2px solid #FF0000;
background-color: #ffc;
width: 50%;
margin: 10px 25%;
}
DIV.div_for_message DIV#div_message_left {
height: 100%;
width: 60px;
}
DIV.div_for_message DIV#div_message_right {
height: 100%;
width: 60px;
}
DIV.div_for_message DIV#div_message_middle {
height: 100%;
}
HTML:
<div style="width:100%">
<div class="mittig">
3 Spalten, 1. (links) und 3. (rechts) mit fester Breite, 2. in der Mitte soll den restlichen Platz einnehmen
</div>
</div>
Mit position kann ich nicht arbeiten, da sonst das restliche Seitenlayout mit Navigation (position:fixed) nicht funktioniert.
Ich bitte um eure Hilfe, bekomme es grad nicht hin.
Vielen Dank und liebe Grüße
sanjoy
-
Okay, hier meine Lösung. Ich habe deinen Code ein wenig umgeschrieben, du kannst ihn aber leicht wieder anpassen. Damit das funktioniert was du vorhast, musst du den linken und den rechten div-Container mit float:left; bzw. float:right; formatieren - und dann daran denken, im umgebenden div-Container zuerst den links-Container, dann den rechts-Container und dann erst den Mittelcontainer einzufügen.
Ich habe die Seitencontainer mal grau gemacht, um das Ganze farblich hervorzuheben.
-------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css" rel="stylesheet" media="screen">
div.mittig{
border:2px solid #FF0000;
background-color:#ffc;
width:50%;
margin:10px 25%;
}
div#div_message_left{
float:left;
height:100%;
width:60px;
background-color:gray;
}
div#div_message_middle{
height:100%;
width:auto;
}
div#div_message_right{
float:right;
height:100%;
width:60px;
background-color:gray;
}
</style>
</head><body>
<div style="width:100%">
<div class="mittig">
<div id="div_message_left">1. Spalte (links)</div>
<div id="div_message_right">3. Spalte (rechts)</div>
<div id="div_message_middle">2. Spalte (mitte)</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------
div.mittig
div#div_message_left
div#div_message_middle
div#div_message_right{sehr schlaue namensgebung ;)
-
Ironie? ;-) Oder wegen des deutsch/englisch-Mix? ;-)
-
Ironie? ;-) Oder wegen des deutsch/englisch-Mix? ;-)
nein,
inhalt, spalte1, spalte2, spalte3 usw wären bessere namen
was ist wenn mittig nicht mehr mittig ist oder links nicht mehr links?
klassennamen wie "red_little_arrow" oder ähnliches sind übrigens noch schlimmer
-
-
-
Vielen lieben Dank Raphael,
hätte ich auch selbst mal drauf kommen können ;-)!
Komischerweise ist das Ding überhaupt mit mittig im IE6.0! Mal gucken, woran das liegt...Liebe Grüße
Sanjoy-
Nicht mittig meinst du? Ich glaube der IE spinnt da ein bisschen.
Versuch mal das hier:
------------------------------------------------------------
body{text-align:center;}
div.mittig{
border:2px solid #FF0000;
background-color:#ffc;
width:50%;
height:500px;
margin:10px 0%;
}-------------------------------------------------------------
Mit margin:10px 0% zentrierst du das ganze zuverlässig für jeden vernünftigen Browser, mit body{text-align:center;} erreichst du diesen Effekt auch im IE. Denk aber daran die Text-Ausrichtung bei den inneren Containern wieder auf links zu setzen.
MFG Raphael
-
-