Problem mit untereinanderlegung von divs

ThorstenSt · #1 (**permalink**) 14.08.2005, 12:52

Hallo alle zusammen.

Ich habe das problem, das ich gerne ganz einfach zwei "Divs" unter einander haben möchte, so wie in Tabllen <tr>....</tr><tr>....</tr>

Nur gelingt mir dieses nur bedingt. Der IE zeigt es so an wie es sein sollte. der Firefox nicht und Opera auch nicht.

Hier einmal der Code:

Code:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>IA-Project 2005</title>

<style type="text/css">
body{
	 text-align:center;
	 background-color:#0099CC;
}

#hauptinhalt{
			
			padding: 0;
			width: 902px;
			height: 100%;
			margin: 0px auto;
			text-align: left;
			border: 1px solid #000000;
			background-color: #FFFFFF;
}

#footerinhalt{
			 
			 width: auto;
			 height: auto;
			 text-align:left;
			 margin: 50% auto auto;
			 border-bottom: 1px solid #000000;
			 background-color: #FFFFFF;
}

#logo{
	 display:block;
	 position:relative;
	 text-align:center;
	 clear:right;
}

#haupt-menue{
			position:ralative;
			display:block;
			margin: 0px auto;
			background-image:url(toptbbg.jpg);
			width:100%;
			height:32px;
			vertical-align:middle;
}

.footer-menue{
			 background-color: #D4D4D4;
			 text-align: center;
			 font-family: "Courier New", Courier, mono;
			 font-size: 12px;
}

.footer-extras{
			  background-color: #F1F2ED;
			  text-align: center;
			  font-family: "Courier New", Courier, mono;
			  font-size: 12px;
}

</style>

</head>
<body>
	
	
	<div id="hauptinhalt">
			
			<div id="logo">
				    [img]logo01.jpg[/img]
					[img]logo02.jpg[/img]
					[img]logo03.jpg[/img]
					[img]logo04.jpg[/img]
			</div>
			
			<div id="haupt-menue">Irgendwas ein inhalt mit hintergrun</div>
	
	
		
		
		<div id="footerinhalt">
			<p class="footer-menue">Startseite -- Portal -- Kontakt -- Impressum 
</p>
		
			<p class="footer-extras">
		  		[img]home.gif[/img] Als Startseite festlegen ...

				[img]fav.gif[/img] Zu den Favoriten ...
			</p>
		
		</div>
	
		
	
	</div>
	
	
</body>
</html>

Link zur besichtigung: http://grebnietz.homeip.net/iaprojec...oschau-css.htm

So, Problem ist, das ich oben das Logo aus vier grafiken erstellt habe und der Hintergrund vom Menü was unter dem Logo erscheinen soll, sich nicht an die richtige stelle setzt. Im Firefox über oder unter das Bild. Außer der Text, der steht natürlich komischer weiße da wo er hin soll. Ich weiß einfach nicht mehr weiter

Wäre nett wenn mir dabei einer helfen könnte.

Danke schon mal

Gruß
Thorsten

Swoop · #2 (**permalink**) 14.08.2005, 13:36

ein div brauch kein display: block; es ist bereits ein Block element..

dann vermischst du position: relative; mit clear elementen also auf gut deutsch ein heilloses Durcheinander..

#haupt-menue hat position: relative; noch falsch geschrieben..

du solltest dich mal bei selfhtml oder css4you einlesen zum thema Positionierung..

fricca · #3 (**permalink**) 14.08.2005, 13:55

Zitat:

Zitat von ThorstenSt

So, Problem ist, das ich oben das Logo aus vier grafiken erstellt habe und der Hintergrund vom Menü was unter dem Logo erscheinen soll, sich nicht an die richtige stelle setzt.

Du hast die 5 Bilder gefloatet, aber danach kein clear gesetzt. Das Verhalten des FF ist also völlig richtig - der Text in hauptmenue weicht den Bildern aus, das div selbst jedoch nicht.

Um Bilder nebeneinander zu bekommen brauchst du kein float; Bilder sind inline-Elemente und stehen ganz von selbst in einer Zeile, wenn der Platz ausreicht. Du musst darauf achten, dass du keine Lücken im Quelltext zwischen den Bildern hast, sonst entsteht dort jeweils ein Leerzeichen.

BTW: Warum zerschneidest du das Titelbild überhaupt? Mach doch ein einzelnes Bild draus - dann erledigt sich das Problem ganz von selbst.

Grüße
fricca

ThorstenSt · #4 (**permalink**) 14.08.2005, 14:01

vielen dank, wusste das ich wohl irgendwas nicht verstanden habe. und es war das clear element was ich nicht verstand.

hier noch mal der kot der entlich klappt

Code:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>IA-Project 2005</title>

<style type="text/css">
body{
	 text-align:center;
	 background-color:#0099CC;
}

#hauptinhalt{
			
			padding: 0;
			width: 902px;
			height: 100%;
			margin: 0px auto;
			text-align: left;
			border: 1px solid #000000;
			background-color: #FFFFFF;
}

#footerinhalt{
			 
			 width: auto;
			 height: auto;
			 text-align:left;
			 margin: 50% auto auto;
			 border-top: 1px solid #000000;
			 background-color: #FFFFFF;
			 padding:0px;
}

#logo{
	 
	 position:relative;
	 text-align:center;
	 
}

#haupt-menue{
			clear:left;
			margin: 0px auto;
			background-image:url(toptbbg.jpg);
			width:100%;
			height:32px;
			vertical-align:middle;
}

.footer-menue{
			 background-color: #D4D4D4;
			 text-align: center;
			 font-family: "Courier New", Courier, mono;
			 font-size: 12px;
			 marign: 0px auto;
}

.footer-extras{
			  background-color: #F1F2ED;
			  text-align: center;
			  font-family: "Courier New", Courier, mono;
			  font-size: 12px;
}

</style>

</head>
<body>
	
	
	<div id="hauptinhalt">
			
			<div id="logo">
				    [img]logo01.jpg[/img]
					[img]logo02.jpg[/img]
					[img]logo03.jpg[/img]
					[img]logo04.jpg[/img]
			</div>
			
			<div id="haupt-menue">Irgendwas ein inhalt mit hintergrun</div>
	
	
		
		
	  <div id="footerinhalt">
		<p class="footer-menue">Startseite -- Portal -- Kontakt -- Impressum </p>
		
			<p class="footer-extras">
		  		[img]home.gif[/img] Als Startseite festlegen ...

				[img]fav.gif[/img] Zu den Favoriten ...
			</p>
		

		</div>
	
		</div>
	
	
</body>
</html>

Vielen Dank!

ich komme wieder

Raaven · #5 (**permalink**) 14.08.2005, 15:09

Zitat:

Zitat von ThorstenSt

hier noch mal der kot der entlich klappt

Code:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>IA-Project 2005</title>

Ich schlage dir vor, die erste Zeile deines Codes zu entfernen.
Ist diese da, wird der IE in den Quirks Mode versetzt.

Da du den content-type ja mittels des meta-Elementes festgelegt hast,
gibt es auch keine Probleme durch das Weglassen deiner ersten Zeile.
.
mmmmServus Raaven
.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit zwei divs float right und left	nicolafw	CSS	6	13.05.2013 10:33
Problem mit Höhe eines divs (height: 100%)	redwueter	CSS	9	20.02.2012 10:18
Problem bei Div's - zwei mal das gleiche und doch nicht ...	Niriel	CSS	10	09.06.2005 17:39
problem mit divs	Mr.Right	CSS	0	09.06.2005 17:31
div's und float problem ?	saphear	CSS	1	17.02.2005 09:31