nicht angemeldet
Div passt sich in der Höhe nicht den Inhalten an
Hallo Alle zusammen,
Vorbemerkung:
Ich habe das Forum (und andere) mit diversen Begriffskombinationen nach meinem Problem dursucht - ich bin mir sicher irgendwo steht sowas wie mein Problem auch bereits - ich finde es nur nicht.
Daher hier mein Problem.
Ich habe ein in der Breite zentriertes Layout. Darin steht ein Div - der Wrapper in dem sich alle weiteren Inhalte befinden werden.
Aktuell sind dort 3 spalten (mittels float) wobei ein absolut positioniertes Logo das mit z-index 100 über allem stehen muss.
Die Spalten bekommen nun Inhalte und dehnen sich nach unten aus. Dabei passen sich auch die entsprechenden Boxen mit aus wie es sein soll.
Die einzige Box die sich nicht ausdehnt ist der Wrapper. Der ist nämlich fast nicht sichtbar.
Außerdem soll der Wrapper unten links und rechts jeweils noch eine abgerundete Ecke bekommen was ich aber auch nicht hinbekommen habe... naja eine Ecke schon mittels Hintergrundgrafik.
Ist es überhaupt möglich dass der "Wrapper" den in ihm liegenden Content erkennt und sich entsprechend komplett in der Höhe ausdehnt inkl. Hintergrundfarbe / Grafik und das browserübergreifend (von mir aus auch mit Conditional Comments und nem extra Stylesheet für den IE gte 5.
Hier mal der aktuelle Quelltext und die CSS Datei:
<!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>Unbenanntes Dokument</title>
<link href="css/mipstyles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="logo">Logo</div>
<div id="header"> Header </div>
<div id="spalte-links">Spalte links </div>
<div id="spalte-mitte"> Spalte Mitte Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci </div>
<div id="spalte-rechts"> Spalte rechts </div>
</div>
</body>
</html>
CSS
body
{
color: #FFFFFF;
text-align: center;
margin: 0px;
padding: 0px;
font: normal 101%/120% Verdana, Helvetica, sans-serif;
background: #FFFFFF
}
#wrapper {
background: #E0E0E0;
text-align: left;
width: 900px;
overflow: visible;
height: auto;
margin: 0px auto;
position: relative;
border-top: none;
border-right: 30px solid #000000;
border-bottom: 30px solid #000000;
border-left: 30px solid #000000;
}
#logo {
background: #003399;
height: 150px;
width: 100px;
position: absolute;
z-index: 101;
top: 0px;
right: 50px;
}
#header {
background: #999999;
clear: both;
height: 40px;
width: 900px;
}
#spalte-links {
width:220px;
padding:0px;
float:left;
background: #00FFFF;
height: auto;
color: #000000;
}
#spalte-mitte {
width:438px;
padding:20px 10px;
float:left;
background: #99FFFF;
height: auto;
color: #000000;
border: 1px solid #000000;
}
#spalte-rechts {
width:220px;
padding:0px;
float:left;
background: #FFFFCC;
height: auto;
color: #000000;
}
Danke im Voraus...
Gruß
Kethryl
-
Du kannst z.B. dem Wrapper overflow:hidden mitgeben oder du baust innerhalb des Wrappers ganz am Ende noch ein div ein und gibst dem folgenden Style:
div.breaker {
clear:both;
height:1px;
overflow:hidden;
}Dann geht auch der Wrapper auf die Höhe des Inhalt auf.
Gruß Ben
-
Ich habe das Forum (und andere) mit diversen Begriffskombinationen nach meinem Problem dursucht - ich bin mir sicher irgendwo steht sowas wie mein Problem auch bereits - ich finde es nur nicht.
Du suchst Einschließen von Floats ohne zusätzliches Markup, das für deinen Wrapper benötigt wird.
Viele Grüße!
_ds
--
»Das sind nunmal zwei starke Persönlichkeiten, die da aufeinander treffen«. Auffällig: Menschen, die ihre Dinger durchziehen wollen, sind meist diejenigen, die nur dabei zuschauen, wie neben ihnen 3,99 Milliarden starke Persönlichkeiten aufeinander treffen.
Top 5-Blog, Floskeln, die man meiden sollte-
[..] das für deinen Wrapper benötigt wird.
Sorry, nicht für den Wrapper, sondern für das floatende Element natürlich.
Viele Grüße!
_ds
--
"Habt ihr nur sonne Milchkaffees, oder gibt's auch was in schwarz?"
Das kleine Seitenschwein, Alice schwarzer
-
-
Hi,
Außerdem soll der Wrapper unten links und rechts jeweils noch eine abgerundete Ecke bekommen was ich aber auch nicht hinbekommen habe... naja eine Ecke schon mittels Hintergrundgrafik.
Mit CSS 3 kommt die Eigenschaft "border-radius", womit du die Ecken abrunden kannst. AFAIK wird das zurzeit, allerdings von keinem Browser unterstützt. Allerdings kennt der Firefox bereits die proprietäre Eigenschaft -moz-border-radius. In so fern kannst du also z.B. folgende CSS-Eigenschaft ein dein CSS einfügen (sofern dir die Abrundung nicht so wichtig ist, dass sie unbeding in allen Browsern funktionieren muss):
#wrapper {-moz-border-radius:0 0 1em 1em;}Zusätzlich solltest du aber unbedingt noch border-radius notieren.
Einen schönen Montag noch!
--
Mein Lieblings-Browser: Firefox 1.5
Mein Lieblings-Notepad: Notepad 2
Selfcode: ie:{ fl:| br:> va:| ls:# fo:| rl:( n4:# ss:{ de:> js:| ch:? mo:) zu:}-
Hallo Daniel.
Allerdings kennt der Firefox bereits die proprietäre Eigenschaft -moz-border-radius.
Welches aber erst mit einem Cairo–basierten Firefox–Build optisch wirklich brauchbar ist.
Einen schönen Montag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Hi,
Allerdings kennt der Firefox bereits die proprietäre Eigenschaft -moz-border-radius.
Welches aber erst mit einem Cairo–basierten Firefox–Build optisch wirklich brauchbar ist.
Mhh, du meinst Firefox 3 richtig? Hab die Alpha davon, und ja, dort werden die Rundungen schön geglättet und die Rahmen einer Box alle gleichgroß gemacht[1]
Einen schönen Montag noch!
[1] Da gab's bei der Verwendung von em teilweise Probleme, was bei runden Rahmen noch schlimmer aussieht.
--
Mein Lieblings-Browser: Firefox 1.5
Mein Lieblings-Notepad: Notepad 2
Selfcode: ie:{ fl:| br:> va:| ls:# fo:| rl:( n4:# ss:{ de:> js:| ch:? mo:) zu:}-
Hallo Daniel.
Allerdings kennt der Firefox bereits die proprietäre Eigenschaft -moz-border-radius.
Welches aber erst mit einem Cairo–basierten Firefox–Build optisch wirklich brauchbar ist.
Mhh, du meinst Firefox 3 richtig?
Keine Ahnung. Die Datei, die ich mir vorhin bei einer erneuten Kontrolle des Status heruntergeladen habe, war mit 1.6a1 benamt, Firefox gab sich aber als „Deer Park Alpha 2“ zu erkennen.
Hab die Alpha davon, und ja, dort werden die Rundungen schön geglättet und die Rahmen einer Box alle gleichgroß gemacht[1]
Und *so* habe ich mir das auch schon immer gewünscht. Die derzeitige Umsetzung ist eher mangelhaft.
Einen schönen Montag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Hi,
Mhh, du meinst Firefox 3 richtig?
Keine Ahnung. Die Datei, die ich mir vorhin bei einer erneuten Kontrolle des Status heruntergeladen habe, war mit 1.6a1 benamt, Firefox gab sich aber als „Deer Park Alpha 2“ zu erkennen.
Meiner hieß "firefox-3.0a1.en-US.win32.installer 2.exe". AFAIK macht das der FF 2 auch noch nicht richtig. Aber vielleicht ist meine Alpha davon etwas veraltet :-)
Hab die Alpha davon, und ja, dort werden die Rundungen schön geglättet und die Rahmen einer Box alle gleichgroß gemacht[1]
Und *so* habe ich mir das auch schon immer gewünscht. Die derzeitige Umsetzung ist eher mangelhaft.
Ja, ich finde die zukünftige Umsetzung auch viel besser. Bleibt zu hoffen, dass der FF auch bald ein standardkonformes border-radius unterstützt.
Einen schönen Dienstag noch!
--
Mein Lieblings-Browser: Firefox 1.5
Mein Lieblings-Notepad: Notepad 2
Selfcode: ie:{ fl:| br:> va:| ls:# fo:| rl:( n4:# ss:{ de:> js:| ch:? mo:) zu:}
-
-
-
-
habe d'ehre D.R.
#wrapper {-moz-border-radius:0 0 1em 1em;}
Wie war das mit "ich hasse proprietäre ....."? ;-)
man liest sich
Wilhelm-
Hi,
#wrapper {-moz-border-radius:0 0 1em 1em;}
Wie war das mit "ich hasse proprietäre ....."? ;-)
Solange man standardkonforme Alternativen verwendet finde ich das ja auch OK. Und border-radius ist CSS 3!
Ich würde niemals nur -moz-border-radius verwenden.
Einen schönen Dienstag noch!
--
Mein Lieblings-Browser: Firefox 1.5
Mein Lieblings-Notepad: Notepad 2
Selfcode: ie:{ fl:| br:> va:| ls:# fo:| rl:( n4:# ss:{ de:> js:| ch:? mo:) zu:}
-
-