LinkBack URL
About LinkBacks
ZitierenMeinst Du die Container navi-left und navi-right? Bei mir wachsen sie mit... (Win XP SP3 mit Firefox 3.5.2 und IE 7).
Der Footer ist aber breiter als der Content.
Hallo Gemeinde
Ich bin ganz neu Hier und habe gleich eine Frage
Ich bastel gerade mein erstes Design ohne Tabellen und habe ein hoffendlich kleines CSS-Problem
hier ein Screen
Das Problem ist das diese Beiden, duch Pfeile markierten, Divelemete nicht mit nach unten wachsen
wo habt sich bei mir der Fehlerteufel eingeschlichen
Hier der HTML-Code
und Hier die dazugehörige CSSHTML-Code:<!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=utf-8" /> <title>Hier ist der Tiltel</title> <link href="site.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrap"> <div class="header">Das ist der Header</div> <div id="mitte"> <div class="mitte-left"><img src="http://xhtmlforum.de/images/shadow_l1.png" /></div> <div class="mitte-mitte"> <div class="top-navi">Hier kommt die Headernavi rein</div> <div class="top"> </div> <div id="content"> <div class="navi-left">Das ist die Linke Navigation</div> <div class="abstand-content"> </div> <div class="content"> Hier kommt der Content rein <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>hahaha</p> </div> <div class="abstand-content"> </div> <div class="navi-right">Das ist die rechte Navigation</div> </div> </div> <div class="mitte-right"><img src="http://xhtmlforum.de/images/shadow_r1.png" /></div> </div> <div class="footer">das ist der Footer</div> </div> </body> </html>
wo liegt mein FehlerCode:@charset "utf-8"; /* CSS Document */ body { margin: 0px 0px 0px 0px; height: 100%; font-size: 12px; background-image: url(images/bg_page.png); background-repeat: repeat-x; background-color: #41566E; } a:link, a:visited { color: #AB290F; text-decoration: none; font-weight: normal; } a:hover { color: #c00; text-decoration: underline; font-weight: normal; } #wrap { width: 900px; margin: auto; padding: 0px; } .header { background-image: url(images/header.png); background-repeat: no-repeat; height: 98px; color: #FFFFFF; } div#mitte { overflow: hidden; } div#mitte div { float:left; } .mitte-left { background-image: url(images/shadow_l2.png); background-repeat: repeat-y; width: 19px; } .mitte-right { background-image: url(images/shadow_r2.png); background-repeat: repeat-y; background-position: right; width: 19px; } .mitte-mitte { width: 862px; background-color: #FFFFFF; } .top-navi { background-image: url(images/navi-top.png); background-repeat: no-repeat; height: 28px; width: 862px; text-align: center; } .top { height: 5px; width: 862px; background-color: #FFFFFF; } div#content { overflow:hidden; width:862px; } div#content div { float:left; } .navi-left { background-image: url(images/bg_navi.png); background-repeat: repeat-x; background-color: #ffffff; border: 1px solid #d2d8de; width: 148px; } .abstand-content { background-color: #FFFFFF; width: 5px; } .content { background-image: url(images/bg_navi.png); background-repeat: repeat-x; background-color: #ffffff; border: 1px solid #d2d8de; width: 550px; } .navi-right { background-image: url(images/bg_navi.png); background-repeat: repeat-x; background-color: #ffffff; border: 1px solid #d2d8de; width: 148px; } .footer { background-image: url(images/footer.png); background-repeat: no-repeat; height: 44px; width: 900px; text-align: center; padding-top: 5px; }
Ich bedanke mich im Voraus für eure Hilfe
Meinst Du die Container navi-left und navi-right? Bei mir wachsen sie mit... (Win XP SP3 mit Firefox 3.5.2 und IE 7).
Der Footer ist aber breiter als der Content.
Wer floatet, muss auch clearen: http://www.ohne-css.gehts-gar.net/0042.php
nein ich meine nicht die naviboxen sondern die schatten rechts und linksZitat von max.m
hmm.. wenn ich mir dein html so ansehe, dann liegt in den div mitte-links und mitte-rechts jeweils nur eine grafik .. warum sollten sie also höher sein, womit sollen sie "mitwachsen" ..?
da du eine feste breite hast, könntest du die schatten zB in einem 900px-breiten bild zusammenfassen und als hintergrund für "mitte" verwenden ..
ja die grafik soll auch oben bleiben aber dies 2 div gehören wenn man so will zum rahmen und wenn der content wächst sollte auch der rahmen mitwachsen und das tut es nicht
wie schon gesagt - er kann nicht mitwachsen, weil nichts drin ist, womit er wachsen kann.. also muss der content irgendie IN das div mit den schatten ..
.. du kannst höchstens mal probieren, den divs ne höhe von 100% zu geben, dann orientiert sich die höhe vielleicht am elternelement - bin aber zusammen mit dem float nicht sicher, ob das überhaupt klappt, und ob das dann auch bei allen möglichen inhaltslängen funktioniert
das mit den 100% habe ich auch schon probiert
oder gibt es ein css-gerüst welches ich für das design nutzen könnte
Und wie wär's wirklich mal mit clearen?
.. wird das nicht schon durch das overflow:hidden bei #mitte gecleart ..?
@wszene:
.. hmm .. bestimmt, hab aber spontan keins zur hand^^ .. ich persönlich würd testweise einfach beide schatten in ein 900px-hintergrundbild packen und es #mitte zuweisen ..
Das solltest Du in ein 3-spaltiges Layout umbauen können und noch eine Fusszeile reinmachen. Die Schattengrafik würde ich wie von wildmieze vorgeschlagen als eine Grafik machen und über Faux Columns einfügen, dann sind die Schatten immer gleich hoch bzw. wandern mit dem Content mit.
Ich danke euch ich werde mal mein Glück versuchen
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)