zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS-Layout: Krieg's einfach nicht hin, wer kann helfen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.01.2009, 12:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.01.2009
Beiträge: 1
raginrob befindet sich auf einem aufstrebenden Ast
Standard CSS-Layout: Krieg's einfach nicht hin, wer kann helfen?

Hallo zusammen,

ich hab mich endgültig entschlossen vom Tabellenlayout abzurücken und komplett auf CSS umzusteigen. Jetzt hab ich ein Problem mit dem Layout einer Seite und komme einfach nicht dahinter, wie es klappen soll, ich hoffe ihr habt den entscheidenden Tipp für mich Das Problem ist, dass im rechten Bereich unter der Grafik mit dem Verlauf der Lückenfüller nicht das macht, was er machen soll, nämlich die Lücke füllen!

So sieht mein Layout in Reinform aus:

skizze1.jpg

und hier ist noch einmal eine Skizze mit ein paar Bereichen, um die es geht:

skizze2.jpg

Die DIV's habe ich folgendermaßen angeordnet:

Code:
<div id="hauptcontainer">
	<div id="oben"></div>
	<div id="mitte">
	  <div id="links">
	    <div id="menurand"></div>
	    <div id="menuzeile"></div>
	    <div id="contentbereich"></div>
	  </div>
	  <div id="rechts">
	    <div id="seitenbereich"></div>
	  </div>
	</div>
	<div id="unten">
	  <div id="untenlinks"></div>
	  <div id="untenmitte"></div>
	  <div id="untenrechts"></div>
	</div>	
</div>
Und hier ist das zugehörige Stylesheet:

Code:
#hauptcontainer {
	width: 1044px;
	margin-left:auto;
	margin-right:auto;
	margin-top: 20px;
}

#oben {
	width:100%;
	background-image:url(logo_top.jpg);
	height:123px;
	background-repeat:no-repeat;
}

#mitte {
	width:100%;
	background-image:url(Bilder/rand_lm.gif);
	background-position:left;
	background-repeat:repeat-y;
	background-color:#FFFF00;	
}


#links {
	float:left;
	width:786px;
	background-image:url(Bilder/rand_lm.gif);
	background-position:left;
	background-repeat:repeat-y;
	background-color:#006600;
}

#menurand {
	float:left;
	width: 33px;
	height: 39px;
	background-image:url(Bilder/rand_lo.gif);
	background-repeat:no-repeat;
}

#menuzeile {
	float:right;
	background-image:url(Bilder/entwurf_08.gif);
	background-position:bottom;
	background-repeat:repeat-x;
	width:753px;
	height:39px;
}

	
#contentbereich {
	clear;
	width:753px;
#	position:relative;
	margin-left:33px;
	background:#ff0000;
}

#rechts {
	float:right;
	width:258px;
	#height:10000px;
	background-image:url(Bilder/entwurf_13.gif);
	background-position:right;
	background-repeat:repeat-y;
}

#seitenbereich {
	background-image:url(Bilder/leiste_rechts.jpg);
	background-position:top;
	background-repeat:no-repeat;
	width:258px;
	height:400px;
}

#untenlinks {
	clear:both;
	float:left;
	background-image:url(Bilder/ecke_lu.gif);
	width:33px;
	height:76px;
}

#untenmitte {
	float:left;
	width:753px;
	height:76px;
	background-image:url(Bilder/rand_u.gif);
	background-repeat:repeat-x;
}


#untenrechts {
	float:left;
	background-image:url(Bilder/entwurf_18.gif);
	width:258px;
	height:76px;
}
Wenn ich nun im DIV "contentbereich" eine größere Menge Text eingebe, schiebt "contentbereich" das DIV "unten" weiter runter, wie es sein soll. Das Problem ist aber, das ich nicht weiss, wie ich es hinkriege, dass auf der rechten Seite der Lückenfüller (eine kleine Grafik, Nr. 6 auf der zweiten Skizze) die Lücke füllt! Im Browser sieht das ganze nämlich so aus:

ergebnis.jpg

Mit Tabellen war das bisher kein Problem, da eine Untertabelle in der linken Zelle beim Größerwerden die rechte Zelle vertikal ja ebenso vergrößerte und der Hintergrund der rechten Zelle somit ebenfalls weitergeführt wurde. Ich hab ehrlich gesagt keine Ahnung, wie das klappen soll, vielleicht habt ihr da eine Idee. Danke im Voraus!!!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.01.2009, 21:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Das liegt daran, weil die Container nicht mitwachsen, wie die Zellen in einer Tabelle das tun. Zudem ist ja dein "#seitenbereich" auf 400px in der Höhebegrenzt. Du kannst diesen "Mitwachseffekt" durch einen Trick erzeugen. Einfach mal durchlesen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.01.2009, 22:42
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.834
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Bau bitte keine Div-Suppe: div-Suppe

Gerade als Umsteiger vom Tabellen-Layout bist du dafür "anfällig".
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
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
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 12:25
Banner neben CSS Layout platzieren? delaspuke CSS 19 29.12.2010 22:08
CSS layout was 'mit geht' Iceman* CSS 2 30.12.2005 08:36
Ich bekomme das mit dem CSS einfach nicht hin tkd CSS 6 09.05.2004 20:43
includes bei css layout dan CSS 2 10.03.2004 18:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:09 Uhr.