Frage zu DIV Layer.. IE und Firefox

[Domi83]

Judeldu.. Ich denke mal, jeder hat sich mit den Problemen rum geschlagen das eine Seite im IE etwas anders aussieht, als im Firefox oder sogar dem Opera. Unter anderem abgerundete Kanten, oder das zentrieren von einem DIV etc.

Also ich hab es eigentlich immer gut gemeistert bekommen, wenn ich ein Menü wie folgt aufgebaut hatte...

<div class="menu_out">
 <div class="menu_in">
  Startseite<br />
  Impressum<br />
  bla...<br />
 </div>
</div>

Nun habe ich div.menu_out gesagt das er eine Breite von 180px hat, und div.menu_in hab ich gesagt breite, 100% aber irgend wann zerschießt er mir alles im IE im Vergleich zum Firefox, oder auch mal umgekehrt.

Gibt es da eine sichere Methode, um z.B. meinem div.menu_in zu sagen, das er wirklich NUR 100% in diesem Bereich nutzen soll, und nicht 1px mehr?

Und als nächstes wollte ich mal was in Erfahrung bringen...

<div class="main">
 dfj kjdhf ksjhdf kjshfdk
</div>

So, nach welcher Methode bringt man diesem DIV denn nun bei, dass er immer zentriert sitzen soll? Es gibt ja für CSS mehrere Varianten, aber die eine oder andere geht nur im Firefox, in beiden oder in gar keinem...

Also mit CSS und DIVs bauen ist im Prinzip nicht das Problem, ich hab es ja auf einer meiner Seiten schon gut hin bekommen (www.hannover-hallo.de), aber vielleicht gibt es ja noch einfachere oder bessere Varianten die sicherer sind

Mehr Wünsche habe ich im Moment gar nicht
Mfg. Domi

 

[Fleshgrinder]

Um Menüs zu Strukturieren solltest du nicht einfache DIVs nehmen, vielmehr Listen oder gleich Menülisten (Stichwort: „Semantisches Web“).

Beispiel:

<menu>
  <li>Menüpunkt 1</li>
  <li>Menüpunkt 2</li>
  <li>Menüpunkt 3</li>
  <li>…</li>
</menu>

Damit ein DIV zentriert in allen Browsern dargestellt wird machst du einfach folgendes:

<div style="margin:0 auto">Lorem Ipsum</div>

Damit dies aber auch funktioniert, benötigt der DIV eine festgelegte Breite. Ansonsten kann der Browser nicht herausfinden welche Abstände er links und rechts nehmen muss:

<div style="width:1000px;margin:0 auto">Lorem Ipsum</div>

 

[Domi83]

Okay, dann werde ich das also in den DIV selbst mit einbauen.. 2009 im Sommer hatte ich dann immer wieder mal ein wenig versucht mehr auf DIVs einzugehen, da ich von TABLEs weg wollte

Und da hatte ich dann in der .css Datei folgendes stehen,

div.main {
 width: 1220px;
 margin-left: auto;
 margin-right: auto;
}

Ich hatte dann nie großartig darauf geachtet, bis mir die Bekannte heute sagte, dass ihre Seite ja auch linksbündig wäre.. Da war ich dann etwas verdutzt und musste selber erst mal schauen was sie meinte und sah, dass obwohl mein DIV main trotz dem Befehl in der CSS linksbündig angeordnet ist

Aber das mit dem Menü finde ich schon mal eine gute Idee... Auf meiner genannten Seite oben, hab ich ja jeden Menüpunkt in einen DIV gesetzt Auf die Idee mit dem LI bin ich noch nicht so gekommen... Mal umsetzen

Aber um einen DIV in einem anderen DIV "einzusperren" gibt es wohl keine Möglichkeit, oder? Es geht dann ehr um den Content-Bereich, wenn ich da mehrere Spalten / Zeilen drin habe

 

[Fleshgrinder]

Bei CSS-Selektoren solltest du beachten, was ich die Tage in diesem Beitrag geschrieben habe.

Die CSS-Angaben von dir bedeuten theoretisch das Selbe wie die Angaben von mir. Nur kann es sein, dass der eine oder andere Webbrowser das nicht ganz richtig interpretiert, da er margin-left und margin-right nicht korrekt interpretiert (kann ich mir besonders bei älteren Webbrowsern gut vorstellen).

Durch die kombinierte Angabe (margin: 0 auto;) wird genau das verhindert, da dieser Ausdruck immer in einem interpretiert werden muss.

Also ich würde das mit den zwei DIVs wie folgt machen:

<div id="outter">
  <div id="inner">
    <!-- content -->
  </div>
</div>

#outter{width:500px}
#inner{width:inherit}

inherit steht einfach für „vom übergeordneten Element vererben“ und somit hätte der DIV #inner automatisch immer die Breite vom übergeordneten DIV #outter (in diesem Fall 500px).

Das Problem der Angabe width: 100%; ist, dass sobald padding oder border angewendet werden, die Größe des DIVs größer als 100% wird. Da entsprechend dem CSS-Box-Model Angaben wie padding oder border zur Breite und Höhe hinzu addiert werden müssen. Dieses Problem wird übrigens auch nicht mit inherit umgangen.

Du kannst aber zum Beispiel folgendes machen:

#outter{width:500px;display:table}
#inner{display:table-cell}

Nun verhalten sich die DIVs wie Tabellen (bzw. eine Tabellenzelle), dadurch wird das Verhalten für dich vielleicht leichter nachvollziehbar. Das Verhalten ist manchmal aber auch etwas komisch.

Es gibt noch viele weitere Möglichkeiten zum Rumspielen, wenn du ein konkretes Problem hast, kannst du dies hier ja mal aufzeigen, dann kann ich dir spezifisch helfen.

 

[Domi83]

Alleine dein Beispiele mit width:inherit ist schon ein Quantensprung für mich, da ich immer 100% genommen habe, dass werde ich mal umsetzen und ausprobieren. Sollte es dann zu Problemen kommen, mache ich hier einen Nachtrag. Ich hab zwar öfters von inherit gelesen, aber hab die Verwendung NIE wirklich verstanden oder nachvollziehen können. Aber nun leuchtet mir was ein

Und ja, dass mit margin oder padding und den 100% ist auch mein Problem gewesen, ich suche nachher mal einen Link raus, stelle es so um wie ich das Problem hatte und zeige es Dir, denn aktuell hab ich das umgangen, indem ich auf 99% stellte aber gucken wir mal

Zumal ich mit dem zweiten Befehl table-cell vielleicht sogar endlich mal den Inhalt meiner mittleren Box richtig stellen könnte, denn in der Mitte sind halt drei DIVs nebeneinander, left_box, content_box und right_box und da musste ich immer die Größen anpassen, da er mir sonst dank float left oder right alles verschoben hat. Mal gucken ob es klappt.. :-)

 

[Fleshgrinder]

Bei einem Dreispalten-Layout mit float müssen fixe Breiten angegeben werden, damit das korrekt hinhaut.

<div id="container">
  <div id="sideLeft"><!-- content --></div>
  <div id="sideCenter"><!-- content --></div>
  <div id="sideRight"><!-- content --></div>
</div>

#container{width:1000px}
#container:after{clear:both;content:'.';display:none}
#sideLeft{width:200px;float:left}
#sideCenter{width:600px;margin-left:200px}
#sideRight{width:200px;float:right}

So sollte das eigentlich klappen (rein aus'm Kopf ohne ausprobieren).

 

[Domi83]

Ah.. Fein.. Ich hab eben mal ein wenig rum gespielt mit dem ersten Beispiel, und da hab ich schon ein wenig was gefunden was mir weiter hilft Wenn ich folgendes mache,

#outter {
 border: 1px dotted #ff0000;
 width: 500px;
 display: table;
}
#inner {
 border: 1px dotted #0000ff;
}

Bleibt mein DIV inner komplett in dem DIV outter, und das nur durch den display:table, somit rückt er auch nicht einen Pixel über den Rand des DIV outter, was ja schon mal recht gut ist Das zweite Beispiel wegen den drei Spalten schaue ich mir jetzt mal an Was mir noch aufgefallen ist, gibt es da ein gewisses shema, nach dem die meisten Leute arbeiten? Weil, ich habe meistens class="" verwendet und ich hatte mal mit id="" gearbeitet, hab da aber keinen großen Unterschied / Vorteil gesehen..

 

[Fleshgrinder]

IDs sind eindeutige Selektoren, die für ein bestimmtes Element gültig sind und kein zweites mal vorkommen dürfen im HTML. Sie sind also besonders gut geeignet für Layoutelemente wie header, footer, etc. pp.. Der größte Vorteil von IDs ist, dass sie extrem schnell vom Webbrowser interpretiert werden, eine Angabe wie #id{width:100%} kann vom Webbrowser schneller angewendet werden als .class{width:100%}. Der Grund ist sehr einfach. Der Browser sucht bei einer ID nach einem DOM-Element mit dieser ID, ist es gefunden kann er die Suche abbrechen. Bei einer Klasse müssen alle DOM-Elemente untersucht werden. Bei sehr großen HTML-Dokumenten kann dies dann eben zu Verzögerungen führen.

Schau dir hierzu auch den Beitrag von mir an (hatte ich oben schon mal verlinkt).

IDs sind also für einzelne Elemente.

Klassen für wiederkehrende Elemente (Elemente die sich innerhalb eines Dokuments durchaus wiederholen können).

Tag-Selektoren (wie a, h1, pre, etc. pp.) für bestimmte Tags und langsam aber wichtig.

Pseudo-Selektoren (wie :hover, :nth-child, etc. pp.) für spezielle Anwendungsfälle und teils extrem langsam und ob sie nötig sind oder nicht muss immer gesondert entschieden werden (bei Hyperlinks sind sie definitiv extrem wichtig, z. B.).

usw. usw. usw.

Die Strukturierung von IDs, Klassen, Tags, … erfolgt nach diesen Kriterien. Performance ist immer das Wichtigste und dann kommt natürlich der logische Aufbau hinzu (unter den obig beschriebenen Gesichtspunkten wie eindeutige Elemente, wiederkehrende Elemente, etc. pp.).

 

[Domi83]

So, ich habe es noch mal versucht neu aufzubauen das Grundgerüst von der Seite meiner Bekannten, damit das alles schön ist und so.. Aber nun hab ich folgende "Fehler"

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de">
 <head>
  <title> </title>
  <link href="css/div.css" rel="stylesheet" type="text/css" />
  <link href="css/font.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  <div id="main_out">
   <!-- header -->
   <div id="head_out">
    <div id="headBox">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </div>
   </div>
   <!-- /header -->

   <!-- middle -->
   <div id="middle_out">
    <!-- navi -->
    <div id="naviBox">
     <div class="moduletable_menu">
      <ul class="menu">
       <li class="item13"><a href="/willkommen.html"><span>Startseite</span></a></li>
       <li class="item13"><a href="/willkommen.html"><span>Willkommen</span></a></li>
       <li class="item13"><a href="/"><span>Seite 2</span></a></li>
       <li class="item13"><a href="/"><span>Seite 3</span></a></li>
      </ul>
     </div>
    </div>
    <!-- /navi -->

    <!-- content -->
    <div id="contentBox">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </div>
    <!-- /content -->
   </div>
   <!-- /middle -->

   <!-- footer -->
   <div id="foot_out">
    <div id="footBox">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </div>
   </div>
   <!-- /footer -->
  </div>
 </body>
</html>

html {
 overflow-y: scroll;
}
body {
 background: #2c2923;
 color: #c39d75;
 font-family: arial, helvetica, sans-serif;
 font-size: 14px;
 margin: 0px;
}
img {
 border: 0px;
}
p {
 margin: 0px;
}

/*=========================*/
#main_out {
 border: 0px dotted #ff0000;
 left: 50%;
 margin-left: -610px;
 position: absolute;
 width: 1220px;
}
#head_out {
 background-image: url("../img/bg_head.jpg");
 height: 165px;
 width: inherit;
}
#middle_out {
 background-image: url("../img/bg_middle.jpg");
 width: inherit;
}
#foot_out {
 background-image: url("../img/bg_foot.jpg");
 height: 25px;
 width: inherit;
}

/*=========================*/
#headBox {
 border: 0px dotted #ff0000;
 font-size: 9px;
 padding: 146px 0px 0px 28px;
}
#naviBox {
 border: 0px dotted #ff0000;
 float: left;
 font-size: 11px;
 margin: 0px 0px 0px 20px;
 width: 193px;
}
#contentBox {
 border: 0px dotted #ff0000;
 margin: 0px 0px 0px 217px;
 text-align: justify;
 width: 979px;
}
#footBox {
 border: 0px dotted #ff0000;
 font-size: 9px;
 padding: 7px 0px 0px 28px;
}

So, und die Ergebnisse habe ich mal als Anhang dran gehängt... aus irgend einem (mir noch unerklärlichen Grund) mag er mich heute nicht mehr... Das links müsste das vom firefox und das rechte vom internet-explorer sein

 

[Fleshgrinder]

Das Problem ist, dass du den floatenden DIV nirgendwo clearst. Für das erste Problem – die Fußzeile – wäre ein clear:both für #foot_out bereits ausreichend, doch ich sehe schon wo das nächste Problem auftaucht. Der Inhalt von #contentBox ist weniger als im Menü und deshalb entsteht der sogenannte Guillotine-Bug. Hier eine Lösung die alle Fehler behebt und bei mir (Windows 7, Opera, Safari, FF, IE8) auf allen Webbrowsern funktioniert.

<!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" xml:lang="de" lang="de" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Test</title>
  <style type="text/css">
    body{color:#fff;font-family:sans-serif}
    .clearfix:after{height:0;content:'.';display:block;clear:both;visibility:hidden}
    #div1{width:1000px;background:#ccc}
    #div2{width:200px;background:red;float:left}
    #div3{width:800px;margin-left:200px;background:blue}
    #div4{width:1000px;background:green}
  </style>
</head>
<body>
  <div id="div1" class="clearfix">
    <div id="div2">
      <menu>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </menu>
    </div>
    <div id="div3" class="clearfix">Inhalt</div>
  </div>
  <div id="div4">Fußzeile</div>
</body>
</html>

Mehr Informationen zu diesem Thema findest du im Artikel How To Clear Floats Without Structural Markup.

 

[Domi83]

Ohh backe.. Ich habe einen der größten Fehler in meinen .php oder .html Dateien gefunden!! Das ist ja doof.. Ich hab immer mit <html> angefangen, und den ersten Teil <!DOCTYPE HTML...> habe ich immer raus genommen.

Ich habe mich gestern schon gewundert, wieso ALL deine Codes bei mir im Firefox funktionieren, aber nicht im IE.. Weil ich immer diese Zeile raus genommen habe Ohh backe, die Einsicht ist zwar sehr spät, aber ich hab einen der größten Fehler von mir gefunden..

Ich versuche es nun mal richtig anzufangen.. Kann man diese Einleitung mit dem DOCTYPE irgend wie auf das nötigste reduzieren, oder ist das schon das was unbedingt rein muss? Was ich auf deiner verlinkten Seite noch gelesen habe gestern Nacht bevor ich ins Bett ging, du hast geschrieben das man im CSS nicht div.bla oder div#bla schreiben soll, gibt es da einen Grund für wieso man nicht sagen darf / soll das sich der classen oder id Name auf ein DIV etc. bezieht?

Gruß, Domi

 

[Fleshgrinder]

Wenn du HTML5 verwendest wird der DOCTYPE extrem kurz.

HTML5-Template:

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Unbenanntes Dokument</title>
</head>
<body>
</body>
</html>

Der Grund weshalb du nicht div.bla nehmen sollst liegt in der Effizienz der Selektoren begründet. Durch Selektion einer einzelnen Klasse, oder noch besser einer einzelnen ID, im CSS kann der Webbrowser die Stylesheet-Anweisung viel schneller ausführen. Beim Websites geht es immer um Millisekunden, genau deshalb spielen solche Kleinigkeiten auch eine Rolle, es sind Millisekunden die sich addieren. Performance ist einer der wichtigsten um am meisten vernachlässigten Punkte bei der Entwicklung überhaupt.