Verzweifle an DIV Layout...

Deepthroat

Aktives Mitglied
Thread Starter
Dabei seit
29.09.2006
Beiträge
139
Reaktionspunkte
1
Hallo zusammen,

ich bastel grad an ner Seite für nen Bekannten, siehe hier.
Aber ich krieg das mit den div's irgendwie nicht gebacken... :kopfkratz:
Der div, in dem der Inhalt dargstellt wird, wird im IE nicht neben das Menü, sondern darunter dargestellt. Außerdem will ich den Inhalt per include einfügen. Aber wenn ich das mach, wird das ganze Layout zerschossen... :heul:

Hab nach Lösungen gegoogelt, aber ich steh irgendwie voll auf'm schlauch.

Hoffe jemand kann mir weiterhelfen...

Deep
 
Hallo zusammen,

ich bastel grad an ner Seite für nen Bekannten, siehe hier.
Aber ich krieg das mit den div's irgendwie nicht gebacken... :kopfkratz:
Der div, in dem der Inhalt dargstellt wird, wird im IE nicht neben das Menü, sondern darunter dargestellt. Außerdem will ich den Inhalt per include einfügen. Aber wenn ich das mach, wird das ganze Layout zerschossen... :heul:

Hab nach Lösungen gegoogelt, aber ich steh irgendwie voll auf'm schlauch.

Hoffe jemand kann mir weiterhelfen...

Deep

Wenn der Div im IE runter rutscht, ist das meistens weil der Div zu breit wird. Dann passt er im IE nicht mehr rein und rutscht runter.
Das mit dem Includen müsstest Du mal Posten, damit Wir sehen können wo Dein Denkfehler ist. Ich tippe auf einen falsch geöffneten oder geschlossenen Div! :)
 
Hmmm...für den ersten Teil habe ich jetzt keine Idee, doch das mit dem Include dürfte nicht passieren. Tritt das nur auf, wenn du den Inhalt per include einbindest, oder auch wenn du den Inhalt zu Testzwecken direkt in die Seite kopierst?
 
Hey!

Danke für Tipp. :) War tatsächlich nur die Breite des DIV. Jetzt steht's auch im IE wo's hinsoll.

Das zweite Problem besteht allerdings weiterhin...

Hier mal der der Quelltext:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>IBF Faulhaber</title>
	
	<style type="text/css" media="screen">
	body
	{
		margin: 0px;
		padding: 0px;
		font: 85% arial, hevetica, sans-serif;
		text-align: center;
		color: #505367;
		background-color: #ffffff;
	}
	
	#container
	{
		margin: 0px auto;
		width: 800px;
		text-align: left;
		background-color: #E0E0E0;
		border: 1px solid black;
	}
	
	#header
	{
		height: 120px;
	}
	
	#leiste
	{
		height: 10px;
		background-color: green;
	}
	
	#left
	{
		float: left;
		width: 150px;
		height: 100px;
	}
	
	#info
	{
		font: 12px arial, hevetica, sans-serif;
		color: #505367;
		padding-top: 10px;
		width: 150px;
		text-align: center;
		background-color: #E0E0E0;
	}
	
	#content
	{
		margin-left: 150px;
		height: 770px;
		width: 640px;
		background-color: #ffffff;
		z-index: 2;
	}
	
	#footer	
	{
		clear: both;
		height: 20px;
		padding-top: 3px;
		font: 12px arial, hevetica, sans-serif;
		color: #ffffff;
		text-align: center;
		background-color: green;
	}
	
	</style>
	
	
</head>
<body>
	
<div id="container">
	<div id="header">
		<img src="images/header.jpg" alt="" />
	</div><!-- header -->
	
	<div id="leiste"></div>
	
	<div id="left">	
		<div id="menu">
			<div id="nav">
				<!-- hier steht eigentlich das Menue -->
			</div><!-- nav -->		
		</div><!-- menu -->
	
		<div id="info">
			<p>Tel:&nbsp; 06784 / 981900<br/>Fax: 06784 / 981904</p>
			<p>info(at)ibf-faulhaber.de</p>
			<p>Auf Kampen 17<br/>55758 Bärenbach</p>
			<p>Geschäftszeiten:<br/>Mo-Do: 7.30 h - 17.30 h<br/>Fr: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7.30 h - 14.00 h</p>
		</div><!-- info -->
	
	</div><!-- left -->
	
	<div id="content">
		
			<? 
			if ($name) 
			 { 
			  include($name); 
			 } 
			else 
			 { 
			  include("welcome.php"); 
			 } 
			?>
		
	</div><!-- content -->
	
	
	<div id="footer">&copy; 2007 IBF Faulhaber</div>
</div>
</body>
</html>
 
du hast eine fixe Höhe für den Content Container angegeben, probier statt height mal minimum-height damit sich das bei viel Inhalt anpasst.

War das dein Problem?

Edit: das hat bei mir beim Testen geklappt.
 
Ihr seid die besten! Mein Tag is gerettet... Jetzt funktioniert alles. :D

Besten Dank! :)

Deep
 
du hast eine fixe Höhe für den Content Container angegeben, probier statt height mal minimum-height damit sich das bei viel Inhalt anpasst.

War das dein Problem?

Edit: das hat bei mir beim Testen geklappt.

Min-height versteht der IE aber nicht richtig! ;)
 
lol, echt? =) Nadann, lass ganz weg, ist ja eh nie, nichts drinnen.
 
Conditional comments

Google mal nach conditional comments für den IE.
Ich hab das gleiche Problem und habe für den IE ein eigenes stylesheet
gebastelt. Am einfachsten das CSS in eine Externe Datei auslagern und für Explorer ändern.

Code:
<link href="guterbrowser.css" rel="stylesheet" type="text/css" media="screen" />
<!--[if IE]><link href="boeserbrowser.css" rel="stylesheet" type="text/css" media="screen" />  <![endif]-->

Viel Erfolg
 
Man braucht in 90% der auftretenden Probleme keine Weichen und Hacks und eigene Stylsheets für bestimmte Browser :cool:

2nd
 
also bei mir sehen einige Seiten immer noch nicht perfekt aus. Z.B. Das Team wird im IE 7 sehr weit runter gesetzt. Oben ist grau und der weiße Bereich mit Inhalt fängt erst bei den Geschäftszeiten an.
 
also bei mir sehen einige Seiten immer noch nicht perfekt aus. Z.B. Das Team wird im IE 7 sehr weit runter gesetzt. Oben ist grau und der weiße Bereich mit Inhalt fängt erst bei den Geschäftszeiten an.

Welch Überraschung! :D
Nein, der IE 7 hat ja wieder eigene Bugs, da muss er extra nacharbeiten.

Mal ne Frage: Kann man MS nicht finanziell belangen, weil man für die IEs immer ewig nacharbeiten muss? :p
Dadurch ensteht ja ein Volkswirtschaftlicher Schaden!! :D
 
Mal ne andere Frage dazu...
Kennt jemand eine Möglichkeit wie ich Seiten für IE optimieren kann?
Für Windows hab ich mal ein Programm gefunden mit dem man mehrere IE Versionen installieren konnte, aber bei Mac?
 
Man braucht in 90% der auftretenden Probleme keine Weichen und Hacks und eigene Stylsheets für bestimmte Browser :cool:

2nd

Ähm...
Ich weiss ja nich was du für Seiten machst... ;)
...also wir machen hier Seiten wo die Kunden gerne in allen Browsern eine möglichst Pixelgenau gleiche Darstellung wünschen, dabei aber vollkommen barrierefrei bleiben wollen und am besten noch dynamische Breitenanpassung der Seite, so das diese nicht komplett zerpflückt wird, wenn ein Inhalt mal zu breit wird (wegen großer Tabellen oder ähnlichem)...

Und nun mach das mal ab IE 5.01 ohne Hacks und Weichen...

Wir nutzen ein sauberes Stylesheet was 100% konform ist und die beste Darstellung in allen Browsern erreicht und includen zusätzlich zu diesem dann, je nach Browser unterschiedliche Stylesheets mit entsprechenden Anpassungen an den jeweiligen Browser... So sind weitere Varianten schnell gemacht und man schlägt sich nicht mit kryptischen Hacks rum die eventuell Nebenwirkungen zeigen oder dafür Sorgen das das CSS nicht konform ist...

Mal ne andere Frage dazu...
Kennt jemand eine Möglichkeit wie ich Seiten für IE optimieren kann?
Für Windows hab ich mal ein Programm gefunden mit dem man mehrere IE Versionen installieren konnte, aber bei Mac?

Am besten nen Windows XP in VM oder Paralells laufen lassen, auf dem du mit dieser von dir schon gefunden Möglichkeit mehrere IE-Versionen installieren kannst.

Wir nutzen hier nen VM-Server wo nen Windows mit zich IE-Versionen drauf läuft, da verschiedene Leute mal drauf zugreifen müssen...
 
Zuletzt bearbeitet von einem Moderator:
Welch Überraschung! :D
Nein, der IE 7 hat ja wieder eigene Bugs, da muss er extra nacharbeiten.

Mal ne Frage: Kann man MS nicht finanziell belangen, weil man für die IEs immer ewig nacharbeiten muss? :p
Dadurch ensteht ja ein Volkswirtschaftlicher Schaden!! :D


Schön wärs...
Wenn man Microsoft wenigstens dazu zwingen könnte mal nen ordentlichen Browser zu entwickeln.

Als ich mit dem IE mal denn csszengarden(Ist das ein Begriff?) ansah, wollte ich schon vom Stuhl fallen.
Der IE kann ja garnix!
Was für ein Sorgenkind :rolleyes:
 
Ähm...
Ich weiss ja nich was du für Seiten machst... ;)
...also wir machen hier Seiten wo die Kunden gerne in allen Browsern eine möglichst Pixelgenau gleiche Darstellung wünschen, dabei aber vollkommen barrierefrei bleiben wollen und am besten noch dynamische Breitenanpassung der Seite, so das diese nicht komplett zerpflückt wird, wenn ein Inhalt mal zu breit wird (wegen großer Tabellen oder ähnlichem)...

Alles für IE ab v6.x und die restlichen modernen Browser. Für 5.x baue ich so gut wie nichts oder nur auf expliziten Wunsch - das kläre ich vorher.

Sonst arbeite meistens mit denselben Anforderungen wie Du: relative Grössen der Block-Level-Elemente abhängig von der eingestellten Schriftgrösse, W3C-Konformität durch strukturiertes XHTML-Markup und die dazugehörige CS-Sheets.

In der Regel komme ich mit 1-2 Hacks zurecht.

2nd
 
Hello :)

Hab nen Tipp für dich, falls immer noch nicht so will mit den Div Layouts.. Probier mal YAML (www.yaml.de). Fixfertige CSS Layouts (eines davon trifft ziemlich genau auf deinen Aufbau zu - musst du nur noch adaptieren. Kannst dir das ganze mal runterladen und reinlesen, kostet nicht allzuviel Zeit und lohnt sich auf jeden Fall - alleine schon wegen der Browserunterstützung und die Mühen, die du dir ersparst die bugs im IE auszubessern.
 
Danke für den Tipp! Werd ich mir ma angucken. denke aber, dass ich jetzt hinbekommen hab. Also in Safari und FF läuft's und im IE6 auch.
Werd ggf. noch ne weiche für den IE machen, weil das Menü nicht 100%ig identisch aussieht.

Könnt ihr nochma drüber gucken? Wenn jemand den IE 7 und vielleicht Netscape (wird der überhaupt noch genutzt???) zur Hand hätte wär ich für nen Test sehr dankbar. :)

Viele Grüße

Deep
 
Wenn ich Browser wäre, würde ich auch durcheinanderkommen. Du hast 2 Doctypes, 2 öffnende Bodytags und 2 Heads in der Seite (Zeile 102ff im div id="content").

Schau Dir das nochmal an :)

HTML:
<div id="info">
		<p>	fon: 06784 / 98 19 00<br/>
			fax: 06784 / 98 19 04</p>
		<p>	kontakt(at)ibf-faulhaber.de</p>
		<p>	Auf Kampen 17<br/>
			55758 B&auml;renbach</p>
		<p>	Gesch&auml;ftszeiten:<br/>
			Mo-Do: 8.00 h - 17.30 h<br/>
			Fr: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8.00 h - 14.00 h
		</p>
	</div><!-- info -->
	</div><!-- left -->
		
	<div id="content">
		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>IBF Ingenieurb&uuml;ro Faulhaber GmbH</title>

	<link rel="STYLESHEET" type="text/css" href="css/style.css" media="screen"/>

</head>
<body>
	<div class="box">
<h2>Referenzliste</h2>

2nd
 
Das passiert dadurch, dass ich ich den content per PHP include einbinde....

Soll ich die entsprechenden Seiten dann ohne doctype, head und body machen? Oder wie löst man das?

Da hab ich übrigens gerade noch ein problem festgestellt.
http://www.ibf-faulhaber.de hier funktioniert das includen nicht.

Auf dem anderen Server zum testen läuft's aber... :(

Is daran was falsch:
Code:
<? 
		if ($name) 
		 { 
		  include($name); 
		 } 
		else 
		 { 
		  include("welcome.htm"); 
		 } 
		?>

Und noch ne Sache, warum ist beim Impressum die Telefonnummer so weit nach unten gerückt? Check ich nich....
 
Zurück
Oben Unten