zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Content und Sidebar immer gleich lang

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.03.2010, 17:31
545 545 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.03.2010
Beiträge: 6
545 befindet sich auf einem aufstrebenden Ast
Standard 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!!!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.03.2010, 17:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Bitte poste einen Link zum Problem. Siehe auch die Hinweise für Fragende.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.03.2010, 18:05
545 545 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.03.2010
Beiträge: 6
545 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 31.03.2010, 18:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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?
Mit Zitat antworten
  #5 (permalink)  
Alt 31.03.2010, 19:25
545 545 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.03.2010
Beiträge: 6
545 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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?
Genau die weißen abstände sollen abstände darstellen.

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?
Mit Zitat antworten
  #6 (permalink)  
Alt 31.03.2010, 19:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von 545 Beitrag anzeigen
Genau die weißen abstände sollen abstände darstellen.
Du brauchst keine leeren Divs für Abstände. Dafür gibt es Margin und Padding.

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.
Du weißt doch, wie groß deine blaue Box ist. Also ist es kein Problem, dafür zu sorgen, dass der Containing Block immer groß genug ist. Es reicht ein unterer Abstand für die Sidebar.

Zitat:
Also auch diese variante funktioniert nicht!
Werden wir sehen!

Zitat:
Wie bekomme ich es denn genau hin, dass die Sidebar und der Content immer gleich lang sind?
Mit Float gar nicht. Sowas machen Tabellenzellen.
Mit Zitat antworten
  #7 (permalink)  
Alt 31.03.2010, 19:51
545 545 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.03.2010
Beiträge: 6
545 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Du brauchst keine leeren Divs für Abstände. Dafür gibt es Margin und Padding.

Du weißt doch, wie groß deine blaue Box ist. Also ist es kein Problem, dafür zu sorgen, dass der Containing Block immer groß genug ist. Es reicht ein unterer Abstand für die Sidebar.

Werden wir sehen!

Mit Float gar nicht. Sowas machen Tabellenzellen.

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
Mit Zitat antworten
  #8 (permalink)  
Alt 31.03.2010, 19:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von 545 Beitrag anzeigen
1. leere Divs? ich habe keine leere Divs!
Doch. Schau mal in deinen HTML-Code.
Zitat:
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.
Es war auch nie die Rede davon, dem Content eine feste Höhe zu geben.

Zitat:
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.
Ich verstehe kein Wort.
Ein absolut positioniertes "Twitter-Modul" reagiert nicht auf den genannten Abstand. Es rutscht einfach drüber.

Zitat:
4. Ich werde einen Teufel tun meine Website (Content und Sidebar) komplett mit Tabellenzellen auszustatten!
Davon war nie die Rede.

Zitat:
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!
Nein, tun sie nicht. Sowas tun Tabellenzellen.

Zitat:
Ich danke dir für deine Hilfestellung aber die Sachen habe ich schon probiert oder funktionieren nicht.
Wenn etwas "nicht funktioniert", musst du herzeigen, was du machst. Sonst kann dir niemand sagen, was du falsch machst.

Zitat:
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 muss nichts schaffen, ich habe kein Problem.

Viel Erfolg noch, ich bin dann mal weg.
Mit Zitat antworten
  #9 (permalink)  
Alt 31.03.2010, 20:12
545 545 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.03.2010
Beiträge: 6
545 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 31.03.2010, 20:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ohne Worte.
Zitat:
Zitat von dein Code
Code:
<div class="whiteBgFullTop"></div>
[...]
<div class="sidebarBottom"></div> 
[...]
<div class="whiteBgFullBottom"></div>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Tabellen als Div Container SpecialFighter (X)HTML 7 12.10.2010 17:40
Ungewöhnlicher abstand beim clearen von floats adrianno CSS 14 16.09.2009 14:20
Dynamische Höhe im Content und DIV immer unten keaton CSS 8 13.12.2006 18:19
DIV Länge automatisch anpassen judicious CSS 10 08.05.2006 16:30
Seitenaufbau mit DIVs und 100% Höhe vespasquire CSS 6 12.09.2004 15:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:30 Uhr.