✔ div - variabler Hintergrund

Status
Nicht offen für weitere Antworten.
C

campari

Erfahrenes Mitglied
Wie bekomt mans hin, dass der Hintergrund (class zwei) in der Höhe mit Klasse drei mitgeht? Also in dem Fall soll der Hintergrund 200px hoch sein. Steh grad auf der Leitung...

HTML: 
.zwei {
width: 90%;
background: #0000ff;
position: absolute;
top:10px;
left: 10px;
}
.drei {
position: absolute;
left: 0px;
top: 0px;
width: 100px;
height: 200px;
background: #00ff00;
}
</style>
</head>
<body>
<div class="zwei">
<div class="drei"></div>
</div>
 
Probier es mal ohne die Positionierung für das DIV .drei:

Code: 
.zwei {
width: 90%;
background: #0000ff;
position: absolute;
top:10px;
left: 10px;
}
.drei {
width: 100px;
height: 200px;
background: #00ff00;
}
 
Die brauch ich, weil da noch zwei weitere Container neben Klasse drei kommen die auch absolut positioniert werden.
 
Anstelle der Positionierung kannst du die Boxen auch mit Hilfe der float-Eigenschaft nebeneinander ausrichten.
 
Ja, aber dann brechen die bei ner kleinen Auflüsung um.

HTML: 
.zwei {
width: 90%;
background: #0000ff;
position: absolute;
top:10px;
left: 10px;
}
.drei {
position: absolute;
left: 0px;
top: 0px;
width: 100px;
height: 200px;
background: #00ff00;
}
.vier {
position: absolute;
left: 150px;
top: 0px;
width: 100px;
height: 200px;
background: #00aa00;
}
.funf {
position: absolute;
left: 300px;
top: 0px;
width: 200px;
height: 500px;
background: #006600;
}
</style>
</head>
<body>
<div class="eins">
<div class="zwei">
<div class="drei"></div>
<div class="vier"></div>
<div class="funf"></div>
</div>
</div>

So soll das: http://atomlol.at.funpic.de/pic/div.png

Grüsse
 
CSS bietet mit der min-width-Eigenschaft die Möglichkeit, einem Element eine Mindestbreite zu geben.

Auf diese Weise lässt sich das Umbrechen der Boxen bei einer kleineren Auflösung verhindern.

Da der IE diese Eigenschaft nicht unterstützt, wäre ein Workaround erforderlich, den Stu Nicholls in 5 Varianten vorstellt.

Basierend auf dem zweiten Lösungsansatz min-width in Internet Explorer - fixed könnte das in deinem Fall dann so aussehen:

Code: 
.zwei {
width: 90%;
min-width: 500px;
background: #0000ff;
position: absolute;
top:10px;
left: 10px;
}

/* Für IE6 */
* html .minwidth {border-left:500px solid #0000ff; position:relative; float:left; z-index:1;}
* html .container {margin-left:-500px; position:relative; float:left; z-index:2;}

.drei {
float:left;
width: 100px;
height: 200px;
background: #00ff00;
}
.vier {
float:left;
margin-left: 50px;
width: 100px;
height: 200px;
background: #00aa00;
}
.funf {
float: left;
margin-left: 50px;
width: 200px;
height: 500px;
background: #006600;
}
HTML: 
<div class="eins">
     <div class="zwei">
          <div class="minwidth">
          <div class="container">
          <div class="drei"></div>
          <div class="vier"></div>
          <div class="funf"></div>
          </div>
          </div>
     </div>
</div>
 
Moin michaelsinterface, also die Klasse zwei wird in Mozi, IE und NS nicht dargestellt. In IE gibts trotzem einen Umbruch. Eigentlich stellts nur OP "richtig" dar. Das ist eine mit diesen unterschiedlichen Interpretationen! Sorry, aber ich bin gra so abgeturnt von den unterschiedlichen Standarts. Was man da an Zeit verballert.... :mad:

Grundlegend will ich von dieser Zwischenlösung des "800px Zentrieren" weg, die ja z.b. auch dieses Forum benutzt. Ich möchte wieder links Menü und rechts davon der Inhalt, der variabel den Rest der Seite füllt. Dazu header, footer, fertig.
Muss doch möglich sein, dass alle verfluchten Browser das eindeutig interpretieren.

Gruss
 
Seltsam, alle mir zur Verfügung stehenden Browser stellen das zuletzt gezeigte Beispiel einheitlich und fehlerfrei dar.

Testumgebung: Win2k, FF 1.5.0.4, IE 6.0, MOZ 1.7.12, NN 7.0, OP 8.50
 
Ja hast Recht, Deine Lösung funktioniert überall perfekt!
War schon weiter, und hatte u.a. der Klasse 'funf' eine Prozentangabe zugewiesen. Die Klasse funf soll das Fenster variabel bis zum rechten Rand ausfüllen. Das klappt allerdings in keinem Fall. In allen Browsern bricht Klasse funf um bei entsprechender Fensterbreite, sobald ich ihr z.b. width:90% zuordne. Maximale width ist 40%, dann findet kein Umbruch statt. Wie kann ich das verstehen?

Grüsse
 
Verwende mal folgende Regel für das DIV .funf:

Code: 
.funf {
margin-left: 300px;
height: 500px;
background: #006600;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück