✔ IE vs. Firefox - DIVs positionieren

Zenti

Zenti

Erfahrenes Mitglied
Guten Morgen,..
hab mal ne Frage an euch.

Ich habe ein kleines Layout gestaltet.

+++ LAYOUT im FIREFOX
http://ze-tech.de/test-coding/html/screens/screen_01.jpg

+++ LAYOUT im IE
http://ze-tech.de/test-coding/html/screens/screen_02.jpg

+++ CSS & HTML
HTML: 
<style>

#kdnr_bg {
	background-image: url(bilder/kdnr_bg.png);
	width: 757px;
	height: 29px;
}

#kdnr {
	float: right;
	padding-right: 15px;
	padding-top: 7px;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #063F51;
}

#user_info_bg {
	float: left;
	padding-right: 0px;
	max-width: 224px;
}

.user_info {
	background-image: url(bilder/user_info_bg.png);
	float: left;
	max-width: 224px;
	width: 224px;
	height: 29px;
}

.info {
	padding-top: 7px;
	padding-left: 10px;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}


.but_ihre_auftraege {
	background-image: url(bilder/but_ihre_auftraege.png);
	float: left;
	width: 224px;
	height: 28px;
}

.but_ihre_auftraege_ov {
	background-image: url(bilder/but_ihre_auftraege_ov.png);
	float: left;
	width: 224px;
	height: 28px;
}

.but_neuer_auftrag {
	background-image: url(bilder/but_neuer_auftrag.png);
	float: left;
	width: 224px;
	height: 28px;
}

.but_neuer_auftrag_ov {
	background-image: url(bilder/but_neuer_auftrag_ov.png);
	float: left;
	width: 224px;
	height: 28px;
}

.but_ihre_funktionen {
	background-image: url(bilder/but_ihre_funktionen.png);
	float: left;
	width: 224px;
	height: 28px;
}

.but_ihre_funktionen_ov {
	background-image: url(bilder/but_ihre_funktionen_ov.png);
	float: left;
	width: 224px;
	height: 28px;
}

.but_neue_funktionen {
	background-image: url(bilder/but_neue_funktionen.png);
	float: left;
	width: 224px;
	height: 28px;
}

.but_neue_funktionen_ov {
	background-image: url(bilder/but_neue_funktionen_ov.png);
	float: left;
	width: 224px;
	height: 28px;
}

.but_none {
	background-image: url(bilder/but_none.png);
	float: left;
	width: 224px;
	height: 29px;
}

.but_postfach {
	background-image: url(bilder/but_postfach.png);
	float: left;
	width: 224px;
	height: 28px;
}

.but_postfach_ov {
	background-image: url(bilder/but_postfach_ov.png);
	float: left;
	width: 224px;
	height: 28px;
}

.but_rechnungen {
	background-image: url(bilder/but_rechnungen.png);
	float: left;
	width: 224px;
	height: 28px;
}

.but_rechnungen_ov {
	background-image: url(bilder/but_rechnungen_ov.png);
	float: left;
	width: 224px;
	height: 28px;
}

.but_abmelden {
	background-image: url(bilder/but_abmelden.png);
	float: left;
	width: 224px;
	height: 29px;
}

.but_abmelden_ov {
	background-image: url(bilder/but_abmelden_ov.png);
	float: left;
	width: 224px;
	height: 29px;
}


</style>

<div id="kdnr_bg">

<div id="kdnr"><b>Kdnr.:</b> 10000</div>

<div id="user_info_bg">

<div class="user_info"><div id="info" class="info">Willkommen <b>Michael Zentgraf</b></div></div>
<a href="#"><div class="but_ihre_auftraege" onmouseover="this.className='but_ihre_auftraege_ov';" onmouseout="this.className='but_ihre_auftraege';" ></div></a>
<a href="#"><div class="but_neuer_auftrag" onmouseover="this.className='but_neuer_auftrag_ov';" onmouseout="this.className='but_neuer_auftrag';"></div></a>
<a href="#"><div class="but_ihre_funktionen" onmouseover="this.className='but_ihre_funktionen_ov';" onmouseout="this.className='but_ihre_funktionen';"></div></a>
<a href="#"><div class="but_neue_funktionen" onmouseover="this.className='but_neue_funktionen_ov';" onmouseout="this.className='but_neue_funktionen';"></div></a>
<div class="but_none"></div>
<a href="#"><div class="but_postfach" onmouseover="this.className='but_postfach_ov';" onmouseout="this.className='but_postfach';"></div></a>
<a href="#"><div class="but_rechnungen" onmouseover="this.className='but_rechnungen_ov';" onmouseout="this.className='but_rechnungen';"></div></a>
<div class="but_none"></div>
<a href="#"><div class="but_abmelden" onmouseover="this.className='but_abmelden_ov';" onmouseout="this.className='but_abmelden';"></div></a>

</div>
</div>


Kann mir bitte jemand erklären was ich falsch mache. :confused:
Vielen Dank im vorraus :)

mit freundlichen Grüßen,
*Zenti
 
Hi,

deine allgemein gehaltene Aussage "Layout im IE" trifft so nicht zu, denn sie bezieht sich ausschließlich auf den betagten IE6.

Die Angabe eines entsprechenden Dokumenttyps für das HTML-Dokument vorausgesetzt, mit dem die Web-Browser in den standardkonformen Darstellungsmodus schalten, kann ich im IE7 und IE8 deinen illustrierten Fehler nicht produzieren.

Um die Erkenntnis, welche IE-Version überhaupt betroffen ist, nicht erstmal dem Hilfeleistenden durch Quervergleiche deines Codes zu überlassen, solltest du zukünftig die IE-Version (am besten direkt im Themenbetreff) nennen, die Probleme bereitet, denn die drei genannten unterscheiden sich untereinander. IE8 ist weitesgehend auf Augenhöhe mit den anderen Browsern (FF, Opera, Safari).

Siehe hierzu bitte auch meinen "Sticky-Thread" in der CSS-Forenübersicht:

Was du falsch machst?

Zunächst mal grundsätzlich: ein <div>-Element (= Block-Element) darf in einem <a>-Element (= Inline-Element) überhaupt nicht eingebettet werden (siehe HTML-Elementreferenz für Inline-Elemente), es sei denn, du gibst in deinem Dokument als Doctype "<!DOCTYPE html>" für "HTML5" an (siehe The a element), wovon ich hier nicht ausgehe.

Auf diese DIVs kannst du hier komplett verzichten, denn die Klassen können direkt den <a>-Elementen zugewiesen werden - also:

HTML: 
<a href="#" class="but_ihre_auftraege"></a>


Mit diesem validen Markup wird (im IE6) Javascript nun auch nicht mehr benötigt, um die Klassennamen zu wechseln, wenn der Mauszeiger das Element überfährt, um das Hover-Hintergrundbild erscheinen zu lassen - dies erledigt ganz einfach und bequem die :hover-Pseudoklasse:

CSS: 
.but_ihre_auftraege {
	background-image: url(bilder/but_ihre_auftraege.png);
	float: left;
	width: 224px;
	height: 28px;
}

.but_ihre_auftraege:hover {
	background-image: url(bilder/but_ihre_auftraege_ov.png);
}

Wie du hier erkennst, wird nun im zweiten Regelblock lediglich die background-image-Eigenschaft genannt, alle übrigen gleichlautenden Regeln für die Klasse .but_ihre_auftraege werden darin nicht benötigt.

Zur falschen Anordnung der DIVs: IE6 vermißt die clear-Eigenschaft für die Buttons, um sie nicht rechts neben .user_info anzuordnen.

Damit du nun nicht für jeden einzelnen Button zusätzlich clear:left angeben mußt, kannst du sie ebenso in einen <div></div>-Block einbetten:

HTML: 
<div id="kdnr_bg">
     <div id="kdnr">
          <b>Kdnr.:</b> 10000
     </div>
     <div id="user_info_bg">
          <div class="user_info">
               <div id="info" class="info">
                    Willkommen <b>Michael Zentgraf</b>
               </div>
          </div>
          <div class="menu">
               <a href="#" class="but_ihre_auftraege"></a>
               <a href="#" class="but_neuer_auftrag"></a>
               <a href="#" class="but_ihre_funktionen"></a>
               <a href="#" class="but_neue_funktionen"></a>
               <div class="but_none"></div>
               <a href="#" class="but_postfach"></a>
               <a href="#" class="but_rechnungen"></a>
               <div class="but_none"></div>
               <a href="#" class="but_abmelden"></a>
          </div>
     </div>
</div>


und diesen wie folgt formatieren:

CSS: 
.menu {
       clear:left;
       width:224px;
}


mfg Maik
 
Vielen Dank für deine Antwort :)

Ich habe mir deine ratschläge zu Herzen genommen,..
Im HTML habe ich noch 2 divs hinzugefügt und siehe da,.. es klappt xD


HTML: 
<div id="kdnr_bg">
<div id="kdnr"><b>Kdnr.:</b> 10000
</div>
<div id="user_info_bg">

<div class="user_info"><div id="info" class="info">Willkommen <b>Michael Zentgraf</b></div>
</div>
</div> <<-- NR.1
</div> <<-- NR.2

<div class="menu">

<a href="#" class="but_ihre_auftraege"></a>
<a href="#" class="but_neuer_auftrag"></a>
<a href="#" class="but_ihre_funktionen"></a>
<a href="#" class="but_neue_funktionen"></a>
<div class="but_none"></div>
<a href="#" class="but_postfach"></a>
<a href="#" class="but_rechnungen"></a>
<div class="but_none"></div>
<a href="#" class="but_abmelden"></a>

</div> 
</div>
</div>


Danke nochmal :)

mit freundlichen Grüßen,
*Zenti

## EDIT ##

Jetzt sitze ich gerade an der HTML Datei..
Gibt es eine Möglichkeit rechts von den Buttons ein <div> zu positionieren
der Content enthält..?

Hab das ausprobiert aber beir zerlegt sich dann alles..

Wär schön wenn mir jemand helfen könnte. :)
Danke,..

mit freundlichen Grüßen,
*Zenti
 
Falls ich vorhin den Menü-Block nach dem falschen </div>-Tag erzeugt habe, stimmt dein gezeigtes Markup so aber nicht mehr.

Mit den entsprechenden Einrückungen der verschachtelten Elemente im HTML-Code ist auf einen Blick zu erkennen, dass nach dem Menü-Block zwei </div>-Tags zu viel enthalten sind:

HTML: 
<div id="kdnr_bg">
     <div id="kdnr">
          <b>Kdnr.:</b> 10000
     </div>
     <div id="user_info_bg">
          <div class="user_info">
               <div id="info" class="info">
                    Willkommen <b>Michael Zentgraf</b>
               </div>
          </div>
     </div> <!-- NR.1 = user_info_bg -->
</div> <!-- NR.2  = kdnr_bg -->

<div class="menu">
     <a href="#" class="but_ihre_auftraege"></a>
     <a href="#" class="but_neuer_auftrag"></a>
     <a href="#" class="but_ihre_funktionen"></a>
     <a href="#" class="but_neue_funktionen"></a>
     <div class="but_none"></div>
     <a href="#" class="but_postfach"></a>
     <a href="#" class="but_rechnungen"></a>
     <div class="but_none"></div>
     <a href="#" class="but_abmelden"></a>
</div>

</div> <!-- überflüssig -->
</div> <!-- überflüssig -->

Zenti hat gesagt.:
## EDIT ##

Jetzt sitze ich gerade an der HTML Datei..
Gibt es eine Möglichkeit rechts von den Buttons ein <div> zu positionieren
der Content enthält..?

Hab das ausprobiert aber beir zerlegt sich dann alles..
Zum Vergrößern anklicken....
Auf diese Weise zerlegt sich da bei mir nichts :)

HTML: 
<div id="kdnr_bg">
     <div id="kdnr">
          <b>Kdnr.:</b> 10000
     </div>
     <div id="user_info_bg">
          <div class="user_info">
               <div id="info" class="info">
                    Willkommen <b>Michael Zentgraf</b>
               </div>
          </div>
     </div>
</div>

<div class="menu">
     <a href="#"class="but_ihre_auftraege"></a>
     <a href="#" class="but_neuer_auftrag"></a>
     <a href="#" class="but_ihre_funktionen"></a>
     <a href="#" class="but_neue_funktionen"></a>
     <div class="but_none"></div>
     <a href="#" class="but_postfach"></a>
     <a href="#" class="but_rechnungen"></a>
     <div class="but_none"></div>
     <a href="#" class="but_abmelden"></a>
</div>

<div class="content">
     content...
</div>
CSS: 
.menu {
       clear:left;
       float: left; /* Element wird vom nachfolgenden Element ".content" rechtsseitig umflossen */
       width:224px;
}

.content {
     float: left;
     width: 533px;
}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück