nicht angemeldet
Div's strechtchen
0 0 0 
Der Martin
0 0 0 0 Der Martin
0 0
Div's strechtchen
Hi Community,
ich komm einfach nicht dahinter was ich noch machen muss. Ich hoffe ich kann es vertändlich erklären.
also mein Zentraler Bereich besteht aus drei DIV's. Einer rechts (Bild) einer in der Mitte (Content)und einer links (Navi).
Hab ich mit float's gemacht.
Dadrunter habe ich ein weitere div, den Footer. dieser erstreckt sich horizontal über alle anderen.
jetzt ist es so das wenn einer der drei div'd eine gewisse Größe hat (height) das die anderen zwei sich nicht ebenfalls bis zum footer erstrecken. macht man doch mit height:auto; oder nicht ?
aktuelle zu sehen unter sl.büroservice.de
ich blicks einfach nciht. weil ich will das der linke bereich eine andere hintergrund farbe hat als die anderen beiden.
jemand eine idee ?
hier noch mein Code:
<div id="container">
<div id="banner">
###LOGO###
<div id="platzhalter">
###PLATZHALTER###
</div>
<div id="navihead">
###KLICKPFAD###
</div>
</div>
<div id="inner">
<div id="links">
<div id="navi">
###MENU_LINKS###
</div>
<!--<div id="suche">
###SUCHE###
</div>-->
</div>
<div id="right">
###RECHTS###
</div>
<div id="center">
<div id="head">
###DATUM### :: ###SPRACHE### :: ###DRUCKVERSION###
</div>
<div id="content">
###INHALT###
</div>
</div>
</div>
<div id="footer">
###FOOTER###
<div id="naviunten">###NAVIUNTEN###</div>
</div>
</div>
#links {
width: 233px;
height: auto;
float: left;
background-color: orange;
}
#inner {
}
#center {
margin-left: 233px;
padding: 25px 25px 25px 25px;
width: auto;
height: auto;
background-color:white;
}
#head {
width: auto;
height: auto;
background-color:white;
}
#content{
width: auto;
height:auto;
background-color:white;
}
/* ----------Rechter Bereich--------- */
#right{
width: 215px;
height: auto;
float: right;
text-align: left;
padding-top: 25px;
}
#navi {
text-align:left;
color: white;
height:auto;
}
-
Nein, height:auto bedeutet lediglich, dass sich die Höhe dem Inhalt anpaßt. Mit CSS2 ist das, was Du vorhast lediglich mit display:table(-cell) möglich - was der MSIE6 allerdings nicht versteht.
Gruß, LX
--
RFC 1925, Satz 8: Es ist komplizierter als man denkt.-
Nein, height:auto bedeutet lediglich, dass sich die Höhe dem Inhalt anpaßt. Mit CSS2 ist das, was Du vorhast lediglich mit display:table(-cell) möglich - was der MSIE6 allerdings nicht versteht.
Gruß, LX
stimmt ja... sorry .. gibt es eigentlich einen unterschied zwischen auto und 100% ?
-
Hallo,
stimmt ja... sorry .. gibt es eigentlich einen unterschied zwischen auto und 100% ?
jar klar: "auto" heißt, die Höhe richtet sich nach dem Inhalt. "100%" heißt, die Höhe beträgt 100% der Höhe des Elternelements. Okay, wenn das Elternelement auch wieder "auto" hat und sich deshalb nach dem Inhalt richtet, hast du nichts gewonnen ... ;-)
Ciao,
Martin -
Hi!
Nein, height:auto bedeutet lediglich, dass sich die Höhe dem Inhalt anpaßt.
stimmt ja... sorry .. gibt es eigentlich einen unterschied zwischen auto und 100% ?Na dann überleg' doch mal.
'Auto' bezieht sich worauf?
Und die 100%?
Ist das immer gleich, bzw. dasselbe?Gruß Gunther
-
Der Martin hats ja schon erklärt.. also will ich jetzt mal nicht so tun als wäre es meine idee.
auto ist dann immer so hoch wie das element hat sein muss um den inhalt zu fassen. 100 % stösst an das eltern element an.
aber irgendwie kann das ja auch nicht stimmen. sonst hätte ich ja kein problem
ich hab ja die drei div's die eine unterschiedliche länge habe. allerdings werden die von einem übergeordnetem Elternelement umschlossen id=inner
wenn ich nun #inner { height = auto;} mache, und bei allen drei kind elementen div#kindelemente {height = 100%;} mach dann müsste es doch funzen.. (ich trau mich nicht zu fragen).. oder etwa nicht ?-
Hi!
Der Martin hats ja schon erklärt..
Genau!
auto ist dann immer so hoch wie das element hat sein muss um den inhalt zu fassen. 100 % stösst an das eltern element an.
aber irgendwie kann das ja auch nicht stimmen. sonst hätte ich ja kein problem
Doch, das stimmt schon. ;-)
ich hab ja die drei div's die eine unterschiedliche länge habe. allerdings werden die von einem übergeordnetem Elternelement umschlossen id=inner
wenn ich nun #inner { height = auto;} mache, und bei allen drei kind elementen div#kindelemente {height = 100%;} mach dann müsste es doch funzen.. (ich trau mich nicht zu fragen).. oder etwa nicht ?Hast du Martins Sätze "ja klar: "auto" heißt, die Höhe richtet sich nach dem Inhalt. "100%" heißt, die Höhe beträgt 100% der Höhe des Elternelements. Okay, wenn das Elternelement auch wieder "auto" hat und sich deshalb nach dem Inhalt richtet, hast du nichts gewonnen ... ;-)" nicht gelesen?
Für Prozentangaben müssen alle übergeordneten Elemente durchgängig andere Angaben für height enthalten, als 'auto'! Und deshalb hast du eben die Situation, wie sie ist, weil das bei dir eben nicht der Fall ist.
Lies' dir mal den von mir verlinkten Artikel durch, denke über die CSS-Alternative mit display:table(-...) nach, oder 'bastel' dir für die User, die es aktiviert haben, eine (zusätzliche) JS-Variante (Achtung!!! Ist "fummelig", da man jede Größen- und Zoomänderung mit überwachen + abfangen muss), oder ändere dein Layout, oder lebe einfach damit wie es ist, oder, oder, oder ...!
Gruß Gunther
-
danke für deinen Beitrag. Die diplay alternative hab ich zwar getestet, was auch funktioniert aber ich musste das trotzdem ausschließen, das funktioniert ja ausschließlich nur mit dem IE 8. das ist mir zu inkompatibel.
die JS Variante kann ich nicht umsetzten da ich davon leider keine ahnung habe.
habe nun in den saueren apfel gebissen und ein div weggelassen .. so das ich nur noch zwei habe und damit kann man den background-color trick machen.
danke noch mal an alle beteiligeten für die anregungen, links und tipps.
PS: hätte nicht gedacht das es keine "gewollte" und einfache lösung dafür gibt. Ich meine.. zich websiten sind doch genau in dieser struktur aufgebaut.
-
-
Hallo,
ich hab ja die drei div's die eine unterschiedliche länge habe. allerdings werden die von einem übergeordnetem Elternelement umschlossen id=inner
wenn ich nun #inner { height = auto;} mache, und bei allen drei kind elementen div#kindelemente {height = 100%;} mach dann müsste es doch funzen.. (ich trau mich nicht zu fragen).. oder etwa nicht ?oder etwa nicht. Denn im Quelltext hast du wohl drei divs, die von einem gemeinsamen vierten umschlossen werden. Könnte also funktionieren - wenn du die äußeren beiden divs nicht floaten würdest. Dadurch werden sie aus dem normalen Elementfluss genommen und beeinflussen nicht mehr die Größe ihrer Elternelemente, weil sie sich sozusagen selbst enterbt haben.
Lösung: Elternelement ebenfalls floaten, oder dem letzten Element im Container-div ein clear:both spendieren.
So long,
Martin--
Hannes würfelt abends immer, ob er den Abend mit seiner Frau zuhause verbringt oder in die Kneipe geht. Wenn er eine 6 würfelt, geht er in die Kneipe.
Gestern musste er 37mal würfeln.
-
-
-
-
-
korrektur : sl-büroservice.de . soll das heissen
-
Hi,
ich komm einfach nicht dahinter was ich noch machen muss. Ich hoffe ich kann es vertändlich erklären.
jetzt ist es so das wenn einer der drei div'd eine gewisse Größe hat (height) das die anderen zwei sich nicht ebenfalls bis zum footer erstrecken. macht man doch mit height:auto; oder nicht ?
Oder nicht. ;-)
Height:auto bedeutet lediglich, dass sich die Höhe des Elements nach seinem Inhalt richtet und nicht etwa immer eine bestimmte (vorgegebene) Höhe hat.Und dieses Thema taucht bei jedem Neuling irgendwann auf. Deshalb gibt es dazu im Web unzählige Abhandlungen, Beispiele und Erklärungen!
Deshalb müssen wir dir das hier nich noch einmal extra erklären. ;-)
Auf Englisch heißt das Thema:"equal height columns" (Google ist dein Freund)
Und ich empfehle bei dieser Gelegenheit immer wieder gerne den sehr hilfreichen Artikel von Mathias im Weblog.
Wenn man auf die Unterstützung älterer Browser (und der IEs < 8) verzichten kann, gibt es Abhilfe mittels der Display-Eigenschaften table(-...).
Ansonsten bist du imho auf eine der größten "Schwächen" von CSS gestoßen.
Gruß Gunther
-
danke für die antwort und den link.
kann mir schon vorstellen das das problem schon oft vorgekommen ist .. schließlich sind ja floated div's ja mittlerweile zu einem standard geworden.. so weit ich das beurteilen kann. aber ich kann die lösung irgendwie nicht auf mein projekt übertragen. ich brauch hilfe.
-
Hi,
aber ich kann die lösung irgendwie nicht auf mein projekt übertragen. ich brauch hilfe.
Dann mach Hilfe möglich.
Beschreibe, was du versucht hast, und woran du scheiterst.MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
danke für die nachfrage. aber das hat sich jetzt erledigt. siehe anderen diskussionsfaden.
gruß
-
-
-