| Autor |
Nachricht |
taccett
Threadersteller
Dabei seit: 15.05.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 14.12.2010 12:43
Titel [CSS] Floating DIV und Hintergrund anderer DIVs |
  |
|
Hallo!
Ich hab eine kleines Problem mit eine "gefloateden" DIV.
Minimalbeispiel:
| Code: |
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<style>
html, body {
font-family:Verdana, sans-serif;
font-size:12px;
}
#aussen {
width:900px;
border:1px solid black;
padding:10px;
}
#rechts {
float:right;
width:150px;
background:#ccc;
border:1px solid #555;
padding:10px;
}
.hintergrund {
border:1px solid green;
background:#777;
}
</style>
</head>
<body>
<div id="aussen">
<div id="rechts">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
</div>
<p class="hintergrund">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
</p>
<div class="hintergrund">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
</div>
</div>
<div style="clear:both;"></div>
</body>
</html>
|
Wie bekommen ich es hin, dass die divs und p "hintergrund" mit dem dunkelgrauen Hintergrund am div "rechts" aufhören? Der Hintergrund geht immer unter das div...
Ist das überhaupt möglich?
mfg
taccett
Zuletzt bearbeitet von taccett am Di 14.12.2010 12:45, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: 
|
Verfasst Di 14.12.2010 13:08
Titel
|
|
|
Floats werden nicht per default von anderen Elementen eingeschlossen. Dem kannst Du durch einen eigenen sog. "Block Formatting Context" (Google) für den Floatholder abhelfen, oder durch ein clearendes Element (auf Blocklevel) unmittelbar vor dem schließenden tag des Floatholders. Dieses Element hast Du bereits, nur an der falschen Stelle.
Bessere Alternative: Dieses leere (und daher sinnlose) Element aus dem HTML werfen und es stattdessen per CSS erzeugen - google "Clearfix" bzw. "Easy Clearing".
Zuletzt bearbeitet von heiko_rs am Di 14.12.2010 13:09, insgesamt 3-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
trashmaster
Dabei seit: 20.01.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 14.12.2010 19:04
Titel
|
|
|
Hi taccett,
die einfachste Lösung wäre wahrscheinlich, deinen .hintergrund-Elementen eine feste Breite zu geben, sodass sie nicht mehr bis zum rechten Rand des außen-divs laufen.
Und - wie heiko bereits erwähnte - damit die Floats korrekt aufgehoben werden, müsste dein | Code: | | <div style="clear:both;"></div> |
als letztes Element in das außen-div, oder du nimmst den sauberen Weg und schaust bei Google nach seinem Alternativvorschlag 
|
|
| |
|
|
taccett
Threadersteller
Dabei seit: 15.05.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 15.12.2010 10:31
Titel
|
|
|
Danke schonmal für eure Antworten.
Das richtige Clearing behebt leider nicht mein eigentliches Problem... Die dunkelgrauen Boxen gehen immer noch unter die rechte Box.
Feste Breite geben ist auch nicht möglich, da das ganze mit einem CMS eingesetzt werden soll, und die rechte Box nicht immer da ist.
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mi 15.12.2010 12:19
Titel
|
|
|
| taccett hat geschrieben: | | Das richtige Clearing behebt leider nicht mein eigentliches Problem |
Dann ist es auch nicht richtig. Code?
|
|
| |
|
|
taccett
Threadersteller
Dabei seit: 15.05.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 15.12.2010 12:38
Titel
|
|
|
Ich habs mit der Easy Clearing Methode versucht:
| Code: |
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<style>
html, body {
font-family:Verdana, sans-serif;
font-size:12px;
}
#aussen {
width:900px;
border:1px solid black;
padding:10px;
}
#aussen:after {
content: ".";
display: block;
clear: both;
font-size: 0;
height: 0;
visibility: hidden;
}
#rechts {
float:right;
width:150px;
background:#ccc;
border:1px solid #555;
padding:10px;
}
.hintergrund {
border:1px solid green;
background:#777;
}
</style>
</head>
<body>
<div id="aussen">
<div id="rechts">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
</div>
<p class="hintergrund">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
</p>
<div class="hintergrund">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
</div>
</div>
</body>
</html>
|
Die rechte Box ist jetzt zwar schon Innerhalb der "aussen"-Box, die .hintergrund Elemente "fliessen" aber immer noch unter die rechte Box...
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mi 15.12.2010 12:48
Titel
|
|
|
|
Dieses normale Verhalten von Blockelementen (nur ihre inline-Elemente weichen einem Float aus) lässt sich z.B. beheben, indem sie horiz. margin bekommen.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Zentrieren von floating DIVs
Mehrere divs im einem gesamt-div und ein floating Problem
[CSS] Hintergrund bei verschachtelten DIVs
Hintergrund eines Divs mit echten Ascii-Zeichen füllen
Floating mit Javascript
css floating problem
|
|
Willkommen auf dem Portal für Mediengestalter
