zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Divs per float positionieren - Problem mit IE

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.03.2008, 10:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.03.2008
Beiträge: 5
fluppi befindet sich auf einem aufstrebenden Ast
Standard Divs per float positionieren - Problem mit IE

*Problem gelöst - siehe Ende*

Hallo zusammen,

ich habe ein Problem mit der Anordnung von drei Div´s, die per float nebeneiander dargestellt werden sollen (drei Spalten).
Im Firefox sieht alle genauso aus wie ich es mir vorgestellt habe, nur der IE (6) macht hier irgendwie Probleme, indem er das letzte der drei Divs (.banner_rechts) unter die anderen "schiebt".

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
	html {
		height:100%;
	}

	body {
		height:100%;
		margin:0 0 0 0;
		padding:0 0 0 0;
		background-color:white;
		font-family:Arial, Helvetica, sans-serif;
		font-size: .8em;
		color:red;
	}

	.banner {
		width:100%;
		height:30%;
		background: url(bilder/sthg.jpg);
	}

	.banner_links {
		height:100%;
		width:25%;
		background: url(bilder/v_oben.jpg);
		background-repeat:repeat-x;
		background-position:bottom;
		background-color:#dcdcdc;
		float:left;
	}

	.banner_links .linke_ecke {
		height:100%;
		background: url(bilder/x_rot.jpg);
		background-repeat:no-repeat;
		background-position:bottom left;
	}

	.banner_mitte {
		text-align:center;
		width:50%;
		height:100%;
		background: url(bilder/v_oben.jpg);
		background-repeat:repeat-x;
		background-position:bottom;
		background-color:#ababab;
		float:left;
	}

	.banner_logo {
		width:282px;
		height:108px;
		background: url(bilder/x-0-banner.jpg);
		background-repeat:no-repeat;
		background-position:center;
		background-color:grey;
	}

	.banner_rechts {
		width:25%;
		height:100%;
		background: url(bilder/v_oben.jpg);
		background-repeat:repeat-x;
		background-position:bottom;
		background-color:#dcdcdc;
		float:right;
	}

	.banner_rechts .rechte_ecke {
		height:100%;
		background: url(bilder/x_rot.jpg);
		background-repeat:no-repeat;
		background-position:bottom right;
		text-align:right;
	}

	.content_links {
		width:20%;
		height:70%;
		float:left;
		background: url(bilder/rand_links.jpg);
		background-repeat:repeat-y;
		background-position:left;
	}

	.content_mitte {
		width:60%;
		height:70%;
		float:left;
		background-color:#efefef;
	}

	.content_rechts {
		width:20%;
		height:70%;
		background: url(bilder/rand_rechts.jpg);
		background-repeat:repeat-y;
		background-position:right;
		float:right;
	}

</style>
<title>:: Noch nix ::</title>
</head>
<body>
	<div class='banner' align='center'>
		<div class='banner_links' align='left'>
			<div class='linke_ecke'></div>
		</div>

		<div class='banner_mitte' align='center'>
			<div class='banner_logo'></div>
		</div>

		<div class='banner_rechts' align='right'>
			<div class='rechte_ecke'></div>
		</div>
	</div>

	<div class='content_links'>
		links
	</div>

	<div class='content_mitte'>
		mitte
	</div>

	<div class='content_rechts'>
		rechts
	</div>
</body>
</html>
Leider habe ich bis jetzt keine Lösung dazu gefunden -wäre nett wenn mal jemand drüber schauen könnte

Vielen Dank schonmal,
Fluppi

Geändert von fluppi (20.03.2008 um 14:24 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.03.2008, 14:21
Benutzerbild von Timo
table-layout: none;
XHTMLforum-Kenner
 
Registriert seit: 11.11.2006
Beiträge: 5.345
Timo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein Lichtblick
Standard

So spontan würd ich sagen: Wer Floatet muss auch Clearen.

Schau mal in den FAQ vorbei und schau dir den Punkt 2 an!

Gruß
Timo
__________________
Um weitere Erklärungen eingeblendet zu bekommen, drücken Sie bitte die Tastenkombination Alt + F4
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.03.2008, 17:18
Neuer Benutzer
neuer user
 
Registriert seit: 04.02.2008
Beiträge: 6
rosa schwarz befindet sich auf einem aufstrebenden Ast
Standard

wenn du es noch nicht hinbekommen hast dann probiere doch folgendes

lasse das div mit der .banner weg was die 3 oberen divs einschliesst.
du brauchst diese divs nicht extra nochmal ausrichten mit align='center'

gebe ihnen einfach eine id wo du diese sachen belegst z.b so

#mainleft {
width:33%;
height: 50%;
float:left;
background:#666;

}

#mainright {
width:33%;
height: 50%;
float:left;
background:#000;
}

#maincenter {
width:34%;
height: 50%;
float:left;
background:#999;

}

das müsste wunderbar funktionieren
Mit Zitat antworten
  #4 (permalink)  
Alt 19.03.2008, 18:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.03.2008
Beiträge: 5
fluppi befindet sich auf einem aufstrebenden Ast
Standard

Danke schonmal für die Antworten

@rosa schwarz Das Div .banner dient zusätzlich zur Darstellung einer Bildes (ergibt einen Rahmen).

Vielleicht baue ich auch nochmal alles etwas anders - wobei es ja eigenlich schon fertig wäre.. gäbe es den IE nicht^^

@timo Habe da nochmal ein bissl rumprobiert, ließ sich das Problem dadurch nicht lösen (wobei ich nicht ausschließe, daß ich alles richtig verstanden habe )

Wenn ich die Breite bei einem den drei oberen Divs (.banner_links .banner_mitte .banner_rechts) nur um einen Prozent verringere, passt es mit der Anordnung. Allerdings ergibt es dann (korrekterweise) eine kleine Lücke, was nicht wirklich Sinn macht..
Mit Zitat antworten
  #5 (permalink)  
Alt 19.03.2008, 19:14
Neuer Benutzer
neuer user
 
Registriert seit: 04.02.2008
Beiträge: 6
rosa schwarz befindet sich auf einem aufstrebenden Ast
Lächeln

naja du kannst das .banner auch wieder reinnehmen dadurch verändert sich nix.
es erscheint auf allen browsern so wie es sein soll.
Mit Zitat antworten
  #6 (permalink)  
Alt 20.03.2008, 11:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.03.2008
Beiträge: 5
fluppi befindet sich auf einem aufstrebenden Ast
Standard

Leider sieht es bei mir nicht aus wie es sein soll (wenn ich es so richtig verstanden habe )

Ich habe mal ein Bild hochgeladen wie es mit (unfertigen) Hintergundgrafiken aussieht: Bildchen zum Anschauen

Genau wie im Quelltext oben hängt der rechte Teil das Banners unter den anderen -immerhin auf der richtigen Seite
Mit Zitat antworten
  #7 (permalink)  
Alt 20.03.2008, 11:25
Benutzer
neuer user
 
Registriert seit: 24.05.2007
Ort: Heidenau
Beiträge: 68
gernegross befindet sich auf einem aufstrebenden Ast
Standard

Hi,

versuch mal folgendes:

Code:
.banner_mitte {
		text-align:center;
		width:50%;
		height:100%;
		background: url(bilder/v_oben.jpg);
		background-repeat:repeat-x;
		background-position:bottom;
		background-color:#ababab;
		float:left;
	}
Nimm da mal bitte width:50%; raus und das float:left;.
Versuch es erstmal ohne die zwei Werte wenn das nicht geht.

Dabei müßtest auch die Anordnung der DIV's im Quelltext ändern, das mittlere DIV muß ans Ende.


Gruss
Ronny

EDIT:

Bei

Code:
content_mitte {
		width:60%;
		height:70%;
		float:left;
		background-color:#efefef;
	}
das gleiche.

Geändert von gernegross (20.03.2008 um 11:30 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 20.03.2008, 11:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.03.2008
Beiträge: 5
fluppi befindet sich auf einem aufstrebenden Ast
Standard

Ich habe die Seite mit Bildern hochgeladen: Link zur Seite
(Firefox 2.0.0.12 richtig, IE 6 falsch)

1. Edit: @gernegroß: die Divs auf der rechten Seite werden bei mir dadruch beide nicht mehr richtig dargestellt
2. Edit: die roten Xe auf der linken und rechten Seite sind Platzhalter für abgerundete Ecken

Geändert von fluppi (20.03.2008 um 12:00 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 20.03.2008, 12:39
Benutzer
neuer user
 
Registriert seit: 24.05.2007
Ort: Heidenau
Beiträge: 68
gernegross befindet sich auf einem aufstrebenden Ast
Standard

Hi,

ich meinte das so: :: X-0 - Übersicht ::

Weiß nur noch nicht welcher Bug das vom IE ist der die Abstände zwischen den DIV zustande bringt. Zumindest hat es etwas mit den height-Angaben zutun.

Gruss
Ronny

Edit:
OK die lücken kommst so weg:
Code:
* html .banner_links {margin-right:-3px;}
Für die andere Seite natürlich genauso, eben nur genau Umgedreht.

In der Online Version hab ich das schon geändert.

Geändert von gernegross (20.03.2008 um 13:02 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 20.03.2008, 14:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.03.2008
Beiträge: 5
fluppi befindet sich auf einem aufstrebenden Ast
Standard

Perfekt, genauso passt es!
-vielen Dank für die zahlreichen Antworten und die rasche Hilfe euch allen!

Für die "Nachwelt" zum anschauen:
Vorher (Fehler im IE): Klick mich
Nachher (so sollte es aussehen):Klick dich

Viele Grüße,
Fluppi *freut sich*

Geändert von fluppi (20.03.2008 um 14:23 Uhr) Grund: Link eingefügt
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
Problem der überlagernden DIVs gerrit87 CSS 24 01.07.2011 19:33
2 DIVS richtig positionieren Pari CSS 0 13.06.2009 21:22
So langsam bekomme ich die Krise mit den DIVs Thuroc CSS 12 12.11.2007 15:25
Großes Problem mit Positionieren von DIVs (bzw. background-images) luzero CSS 15 20.08.2006 15:10
Problem: 3 Div's horizontal positionieren Krieju CSS 2 07.05.2004 18:00


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:43 Uhr.