✔ Probleme beim ersten Layout, float, overflow

Status
Nicht offen für weitere Antworten.
sepp05

sepp05

Mitglied
Hallo Leute,
bin gerade dabei mein erstes richtiges Layout in CSS zu erstellen, nach dem ich mir (meines erachtens) genug Literatur reingezogen habe :)!

Ich habe 2 Probleme, bei denen ihr mir vielleicht helfen könntet!

1. Im Firefox geht alles wie ich mir es vorstelle, im IE ist alles total verschoben
Ich vermute das hängt mit dem Atribut "Float" zusammen, was ich in fast jedem DIV verwendet habe ?!

2. Meinem Content-Bereich wollte ich ein "Overflow: auto;" geben, was wieder imFF funktioniert - im IE jedoch nicht!


Hier mein Code:

HTML: 
<style type="text/css"> 
	body				{background-color: #3d3d3d;}
	div#container 		{position:relative; top: 50px;
						 margin-left: auto;
						 margin-right: auto;
						 background-color: grey;
				   		 width: 800px;
				   		 height: 600px;
				   		 border: solid #dbdbdb 1px;}
	div#header1	  		{background-image: url(Bilder/index_01.jpg);
	              	 	 height: 123px;
	               		 width: 800px;}
	div#bild2	  		{background-image: url(Bilder/index_02.jpg);
				   		 width: 210px;
				  	 	 height: 477px;
				  	 	 float: left;}
	div#platzhalter3	{background-image: url(Bilder/index_03.jpg);
						 width: 590px;
						 height: 71px;
						 float: left;
						 left: 210px;}
	div#platzhalter4	{background-image: url(Bilder/index_04.jpg);
						 width: 16px;
						 height: 406px;
						 float: left;}
	div#button5			{background-image: url(Bilder/index_05.jpg);
						 width: 130px;
						 height: 27px;
						 float: left;}
	div#button6			{background-image: url(Bilder/index_06.jpg);
						 width: 98px;
						 height: 27px;
						 float: left;}
	div#button7			{background-image: url(Bilder/index_07.jpg);
						 width: 81px;
						 height: 27px;
						 float: left;}
	div#button8			{background-image: url(Bilder/index_08.jpg);
						 width: 91px;
						 height: 27px;
						 float: left;}
	div#button9			{background-image: url(Bilder/index_09.jpg);
						 width: 94px;
						 height: 27px;
						 float: left;}
	div#button10		{background-image: url(Bilder/index_10.jpg);
						 width: 80px;
						 height: 27px;
						 float: left;}
	div#content11		{background-color: #a9a9a9;
						 width:  551px;
						 height: 344px;
						 float: left;
						 overflow: auto;}
	div#platzhalter12	{background-color: #a9a9a9;
						 width: 23px;
						 height: 344px;
						 float: left;}
	div#platzhalter13	{background-image: url(Bilder/index_13.jpg);
						 width: 574px;
						 height: 35px;
						 float: left;}
	</style>	
		
	
	</head>

	<body>
		<div id="container">
		<div id="header1"></div>
		<div id="bild2"></div>
		<div id="platzhalter3"></div>
		<div id="platzhalter4"></div>
		<a href="#"><div id="button5"></div></a>
		<a href="#"><div id="button6"></div></a>
		<a href="#"><div id="button7"></div></a>
		<a href="#"><div id="button8"></div></a>
		<a href="#"><div id="button9"></div></a>
		<a href="#"><div id="button10"></div></a>
		<div id="content11"> 
		</div>
		<div id="platzhalter12"></div>
		<div id="platzhalter13"></div>
		</div>
	</body>


Die Angehängten Bilder zeigen einmal das Layout im FF und einmal im IE

Danke im vorraus
Sepp05
 

Anhänge

  • firefox.jpg
    firefox.jpg
    59,7 KB · Aufrufe: 63
  • InternetExplorer.jpg
    InternetExplorer.jpg
    62,2 KB · Aufrufe: 61
Hi,

wenn ich die inhaltsleeren DIVs aus deinem Quellcode befülle, richtet der IE das DIV #content11 an der gewünschten Position aus. Ebenso blendet er für die Box den Scrollbalken ein, wenn der Inhalt die vorgegebene Höhe überschreitet.

Bei den Navigations-Buttons wird sich wohl im IE der "3px-Gap-Bug" bemerkbar machen, weshalb der letzte Link "Login" umgebrochen wird.

Abhilfe schafft die folgende Regelerweiterung für die "Button"-DIVs:

Code: 
margin-right:0 !important;
margin-right:-3px;

Übrigens darf ein Inline-Element (= a) kein Block-Element (= div) enthalten.
 
Erst einmal Danke für deine Antwort Maik!
die margin-befehle haben etwas geholfen! Und nachdem ich das Content-Feld mit Inhalt gefüllt habe hat es sich auch an die richtige Stelle verschoben! Nur ist da trotzdem noch der Wurm drin :confused:!

Übrigens darf ein Inline-Element (= a) kein Block-Element (= div) enthalten.
Zum Vergrößern anklicken....
Wie gebe ich ansonsten einem Div einen Hyperlink?

Ich habe nochmal ein Bild angehängt vom akuellen Stand!

*edit: Wie kommt das eine "hallo" unter das Traubenbild Die stelle hat doch nichts mit dem Content-Feld zu tun?!
 

Anhänge

  • InternetExplorer2.jpg
    InternetExplorer2.jpg
    86,9 KB · Aufrufe: 59
Okay ich hatte die Inline Elememente (a) noch nicht entfernt! Das war der Fehler! Nun brauch ich auch das mit dem 3px-Problem nicht mehr! Vielen Dank!
Ist der Weg mit dem "Float" Befehl der richtige? Oder hätte ich dieses Layout auch einfacher bauen können?
 
Zuletzt bearbeitet:
Hi,

das folgende Konstrukt erzeugt invaliden HTML-Code:

Code: 
<a href="#"><div id="button5"></div></a>
Besser, weil regelkonform, ist das hier:

Code: 
<div id="button5"><a href="#">...</a></div>
Um den Link innerhalb des DIVs zu "skalieren", wird er mit display:block ausgezeichnet und kann wie gewünscht dimensioniert werden.

Wenn noch immer etwas nicht in Ordnung ist, solltest du vielleicht mal einen Link zur Seite nennen, damit man dort einen Blick drauf werfen kann.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück