|
|||
Content und Sidebar immer gleich lang
Hallo Leute,
ich habe bereits (fast) das komplette Internet nach einer Lösung durchsucht aber habe noch keine gefunden Ich habe folgendes Problem: Mein Content und meine Sidebar sollen IMMER gleich lang sein. Warum? In der Sidebar befindet sich ein Twitter Modul, welches immer ganz unten stehen soll. Egal wie lang oder wie kurz der Content oder die Sidebar ist. DARSTELLUNG: Insgesamt gibt es 3 Zustände: 1. Wenn meine Sidebar länger als der Content (im Content sich aber Inhalt befindet) ist, dann sieht alles so aus, wie es aussehen soll. 2. Wenn der Content länger als die Sidebar ist, dann wächst die Sidebar nicht mit. Nun sieht es so aus, als ob mein Twitter Modul nix besonderes wäre. Es klebt einfach an einer stelle und fertig! 3. Wenn im Content kein Inhalt ist, dann schiesst mein Twitter Modul einfach oben heraus. Hier mal mein HTML Code: HTML-Code:
<!--CONTENT BEGIN--> <div id="content"> <div class="whiteBgFullTop"></div> <div class="whiteBgFullMain"> <!--CONTENT BOX BEGIN--> <div id="contentBox"> <p>Hier kommt der Inhalt rein</p> </div> <!--CONTENT BOX END--> <!--SIDEBAR BEGIN--> <div id="sidebar"> <!-- SOCIAL NETWORK BEGIN --> <div class="sidebarTop"> <div class="sidebarHeadline">Werde ein Fan von uns</div> <a href="#" id="facebookFollow"></a> <a href="#" id="myspaceFollow"></a> <a href="#" id="twitterFollow"></a> </div> <div class="sidebarBottom"></div> <!-- SOCIAL NETWORK END --> <!-- TWEET BEGIN --> <div id="tweetBox"> <div class="tweet"></div> </div> <!-- TWEET END --> </div> <!--SIDEBAR END--> <div class="clear"></div> </div> <div class="whiteBgFullBottom"></div> </div> Und hier der dazugehörige CSS Code: HTML-Code:
.clear { clear:both; } #tweetBox { background:#ccc; width:190px; height:361px; position:relative; bottom:0px; right:0px; } .tweet { width:168px; height:130px; margin:10px 0px 0px 10px; overflow:hidden; } .whiteBgFullTop, .whiteBgFullBottom { background:#FFF; height:10px; width:800px; } .whiteBgFullMain { border:1px #FFF solid; width:778px; padding:0px 10px 0px 10px; background:#FFF; } #contentBox { width:500px; float:left; } #sidebar { float:right; width:190px; border:1px solid #000; } #content { margin:30px 0px 30px 0px; } Bin gespannt, ob ihr wisst, wo der Fehler liegen könnte. Wie gesagt der Content und die Sidebar müssten eigentlich immer gleich lang dargestellt werden. Bin für jede Hilfe sehr sehr dankbar!!! |
Sponsored Links |
|
|||
Bitte poste einen Link zum Problem. Siehe auch die Hinweise für Fragende.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Ah ok...
Ich bin nun zwar schon etwas weiter aber ein Problem bleibt. Die Sidebar wächst nicht mit dme Content. Unbenanntes Dokument Der blaue Kasten sollte ganz unten sein |
|
|||
Floats wachsen nicht mit ihren Nachbarn.
Du kannst die blaue Box absolut in Bezug auf "whiteBgFullMain" positionieren. Dann ist sie unten. edit: Jetzt muss ich doch noch fragen: Was willst du denn mit diesen leeren Elementen überall? Etwa Abstände erzeugen?
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Zitat:
diese funktion mit "absolut" hatte ich auch bereits ausprobiert. Dabei passiert aber folgendes: wenn der content zu klein ist etwas wenn dort kein inhalt drin ist, dann schießt die blaue box aus der weissen heraus. Also auch diese variante funktioniert nicht! Wie bekomme ich es denn genau hin, dass die Sidebar und der Content immer gleich lang sind? |
|
|||
Du brauchst keine leeren Divs für Abstände. Dafür gibt es Margin und Padding.
Zitat:
Zitat:
Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Zitat:
1. leere Divs? ich habe keine leere Divs! schau mal in die CSS dann siehst du es, dass ich mit margin und paddings arbeite. 2. Leider ist es nicht möglich den Content immer eine bestimmte Höhe zu geben, da es ein System wird, wo sich später user registrieren können. Diese sollen dann bestimmte daten einfügen können. Fügen die User keinen Inhalt ein, dann ist im Content folgender Maßen leer! Der Content liegt also eher in der Hand der User und nicht in meiner. 3. Wenn ich der Sidebar einen gewissen Abstand nach unten gebe, dann wächst der Content (top). ABER auch hier sehe ich sofort das nächste Problem: Wenn ich die Sidebar mit Inhalten vollhaue, dann komme ich irgendwann zu dem Punkt, wo die Sidebar länger ist als der Content und da sieht man dann, das "gefuscht" wurden ist. in der Sidebar selbe hätte ich dann überall exakte Abstände nach oben und unten. Und zwischen dem letzten Element in der Sidebar und dem Twitter Modul würde ein deutlich größerer Abstand sein und das sieht unprofessionel aus und überhaupt nicht schick. 4. Ich werde einen Teufel tun meine Website (Content und Sidebar) komplett mit Tabellenzellen auszustatten! Stichwort "modernes Webdesign" oder "Web 2.0" oder "barrierefreies Webdesign" !!! 5. Ich habe auch versucht die beiden DIVS (Content und Sidebar) zu positionieren und nicht zu floaten. Aber auch dann wachsen sie nciht gleichmäßig! Ich danke dir für deine Hilfestellung aber die Sachen habe ich schon probiert oder funktionieren nicht. Falls du dir wirklich zu 100% sicher bist, dass du es hinbekommst, kannst du es gerne mal ausprobieren. Glaube aber eher weniger, dass du es schaffst Ich jedenfalls bin mit meinem Latein am Ende |
|
||||||
Doch. Schau mal in deinen HTML-Code.
Zitat:
Zitat:
Ein absolut positioniertes "Twitter-Modul" reagiert nicht auf den genannten Abstand. Es rutscht einfach drüber. Zitat:
Zitat:
Zitat:
Zitat:
Viel Erfolg noch, ich bin dann mal weg.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Schade... dachte du hast was drauf. Aber hast wohl gesehen, dass deine Ansätze nicht dumm sind - aber sie funktionieren nicht!
Und... mein Code ist online! Kannst also nachgucken und auch kopieren! Hast recht ist besser dass du nicht mehr antwortest. Viel gerede mehr aber nicht! PS: Es gibt keine leeren Divs!!! ich kenne meinen Code deutlich besser als du |
Sponsored Links |
|
|||
Ohne Worte.
Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Tabellen als Div Container | SpecialFighter | (X)HTML | 7 | 12.10.2010 18:40 |
Ungewöhnlicher abstand beim clearen von floats | adrianno | CSS | 14 | 16.09.2009 15:20 |
Dynamische Höhe im Content und DIV immer unten | keaton | CSS | 8 | 13.12.2006 19:19 |
DIV Länge automatisch anpassen | judicious | CSS | 10 | 08.05.2006 17:30 |
Seitenaufbau mit DIVs und 100% Höhe | vespasquire | CSS | 6 | 12.09.2004 16:21 |