zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Container mit 2 Container darin -> Hintergrund anzeigen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.04.2005, 16:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2005
Beiträge: 23
bendar befindet sich auf einem aufstrebenden Ast
Standard Container mit 2 Container darin -> Hintergrund anzeigen

Ich habe folgendes Problem:

ich habe 2 Container (Navigation & Seiteninhalt) in einem Container gepackt, da ich eine zentrierte Hintergrundgrafik benötige (bevor wieder jemand fragt *G*).

Nun das Problem: wenn ich bei der Navigation den Float rechts einstelle ist zwar der Seiteninhalt auf gleicher Höhe, aber dafür wird der große Container mit dem Hintergrundbild nicht mehr aufgefüllt.

Wie kann man diesen dazu bringen, trotz keinem Inhalt außer der beiden Container die Hintergrundgrafik an zu zeigen?

Habe das nun erst mal mit festen Größen realisiert, ist aber nicht so wie ich das gerne hätte.

Code:
div#Flash {
	height: 251px;
	width: 756px;
	margin: 0 auto;					
}

div#Mitte {
	text-align: left;
	height: auto;
	width: 756px;
	margin: 0 auto;
	background: url(images/back.jpg) repeat-y;
}

div#Footer {
	clear: left; 			
	height: 66px;
	width: 756px;
	margin: 0 auto;
	background-image: url(images/end.jpg);
	background-position: center;
}

div#Navigation {
	float: left;				
	height: auto;
	width: 200px;
	margin: 0 0 0 30px;
}

div#Content {						
	height: auto;
	width: 500px;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.04.2005, 16:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.792
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 Re: Container mit 2 Container darin -> Hintergrund anzeig

Zeig mal auch deinen (X)-HTML-Teil - am besten in Form eines vollständigen Quelltextes mit eingebundenem Stylesheet, so dass man den Code komplett kopieren und testen kann.

Grüße
fricca
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.04.2005, 17:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2005
Beiträge: 23
bendar befindet sich auf einem aufstrebenden Ast
Standard

So, ich habe jetzt eine Besipielseite ohne Bilder und extremen Farben gemacht. Im äußeren Container (um den es hier geht) habe ich ein eingefügt, um zu verdeutlichen das er sonst nicht auftauchen würde.

Vielen Dank im Vorraus an jeden, der sich das anschaut!

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
html &#123;
	padding&#58; 0;
&#125;

body &#123;
	margin&#58; 0; padding&#58; 0;
	text-align&#58; center; 			/* zentrieren im IE */
	font-family&#58; verdana, lucida, arial, helvetica, sans-serif;
	font-size&#58; 11px;
&#125;

div#Flash &#123;
	height&#58; 251px;
	width&#58; 756px;
	margin&#58; 0 auto;
	background-color&#58; #CCCCCC;
&#125;

div#Mitte &#123;
	text-align&#58; left;
	height&#58; auto;
	width&#58; 756px;
	margin&#58; 0 auto;
	/* background&#58; url&#40;images/back.jpg&#41; repeat-y; */
	background-color&#58; #F6BA5A;
&#125;

div#Footer &#123;
	clear&#58; left; 			
	height&#58; 66px;
	width&#58; 756px;
	margin&#58; 0 auto;
	/* background-image&#58; url&#40;images/end.jpg&#41;; */
	background-position&#58; center;
	background-color&#58; #000000;
&#125;

.footer &#123;
	font-family&#58; Tahoma, Arial, Helvetica, sans-serif;
	font-size&#58; 11px;
	color&#58; #979797;
&#125;

div#Navigation &#123;
	float&#58; left;				
	height&#58; auto;
	width&#58; 200px;
	margin&#58; 0 0 0 30px;
	background-color&#58; #FF0000;
&#125;

div#Content &#123;
	float&#58; left;
	height&#58; auto;
	width&#58; 500px;
	background-color&#58; #990000;
&#125;
-->
</style>
</head>

<body>


<div id="Flash"></div>



<div id="Mitte">

	
	<div id="Navigation">
	
	
	NAVIGATION NAVIGATION

	NAVIGATION NAVIGATION

	NAVIGATION NAVIGATION

	NAVIGATION NAVIGATION

	NAVIGATION NAVIGATION

	NAVIGATION NAVIGATION

	NAVIGATION NAVIGATION

	NAVIGATION NAVIGATION

	NAVIGATION NAVIGATION

	NAVIGATION NAVIGATION

	NAVIGATION NAVIGATION

	NAVIGATION NAVIGATION

	NAVIGATION NAVIGATION

	NAVIGATION NAVIGATION

	NAVIGATION NAVIGATION

	NAVIGATION NAVIGATION

	
	
	</div>
	

	
	<div id="Content">

 	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT

	BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT


	</div>
	

</div>



<div id="Footer" class="footer">
Copyright
</div>


</body>
</html>
Mit Zitat antworten
  #4 (permalink)  
Alt 05.04.2005, 18:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.792
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 bendar
So, ich habe jetzt eine Besipielseite ohne Bilder und extremen Farben gemacht.
Sehr schön!

Zu deinem Problem:
Wenn du den Footer als clearendes Element einsetzen willst, dann muss er sich noch innerhalb des Elementes befinden, das die floatenden umschließt.
Bei dir also ein </div> höher.

BTW: wozu gibt es eine Klasse und eine ID footer?

Grüße
fricca
Mit Zitat antworten
  #5 (permalink)  
Alt 05.04.2005, 18:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2005
Beiträge: 23
bendar befindet sich auf einem aufstrebenden Ast
Standard

ok, vielen Dank!
Das es so einfach war, hätte ich jetzt nicht gedacht. Hatte zwar schon so einige Variationen ausprobiert, aber natürlich nicht diese *grrr*

BTW: Die Klasse war nur zum testen.
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
Anfängerfrage: Zentrierung in Galerie und Border-Problem goldbeere CSS 3 04.11.2013 19:07
Bei :hover irgendeinen Container anzeigen lassen schrepfer CSS 1 09.05.2009 18:05
Div Orientierung Leonidus CSS 22 30.05.2007 17:05
Probleme mit Container - Hintergrund monti CSS 2 05.11.2005 12:40
Container nimmt nicht die Höhe seines Inhalts an Lestat CSS 10 04.08.2005 13:47


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:49 Uhr.