Probleme mit den Positionen von <div>-Spalten in Browsern @ tutorials.de: Tutorials, Forum & Hilfe

Elandril · 27.08.11 04:01

Hallo,

vor kurzem ist eine Freundin von mir auf mich zugekommen, sie würde eine Homepage brauchen. Und da ich ja Informatik studiere kann ich ja sicher so etwas. Naja, wie eben das Weltbild des normalen Volkes so ist.

Jedenfalls habe ich jetzt tatsächlich eine α-Version hinbekommen. Das Ganze wird auch im Opera exakt so dargestellt, wie ich mir das gedacht habe.

Oben eben eine Zeile mit Überschrift und Trennlinie. Darunter dann links ein Menü, rechts eine vertikale Liste mit Bildern und in der Mitte eben den Inhalt der Seite. Darunter dann noch eine einfache Zeile mit Credits usw.

Die ganze Seite ist 1100 x 800 Pixel groß und ich hab sie vorher in einem Grafikprogramm entworfen und aus dem dann eben die Schnippsel weiter verwendet (Macht man heute u.U. nicht mehr, aber für meine und insbesondere für die Zwecke der Freundin reicht das wohl erst mal).

Das hier wäre mal der HTML-Code:

Code :

<body>
 
    <!-- Hintergrundbild -->
    <img id = "bg_img" src = "pic_frags/background.png">
 
    <div id = "ersatzBody">
    
        <div id = "headDiv">
        </div>
        
        <!-- Menü Elemente hier einfügen -->
        <div id = "menuDiv">
        
            <div id = "menu">
                <p><a id = "link" href = "alpha.htm">Über Mich</a></p>
                <p><a id = "link" href = "alpha.htm">Englisch</a></p>
                <p><a id = "link" href = "alpha.htm">Taekwondo</a></p>
                <p><a id = "link" href = "alpha.htm">Downloads</a></p>
            </div>
        
        </div>
        
        <!-- Bilder zwischen upper_sep und lower_sep einfügen -- Empfehlung: maximal 5 Bilder -->
        <div id = "picturesDiv">
        
            <img id = "upper_sep" width = "174" height = "18" src = "pic_frags/upper_pic_sep.png"></img>
            
            <div id = "picBG">
                <a href = "alpha.htm"><img id = "pic" src = "pic_frags/testbild.png"></img></a>
            </div>
            
            <div id = "picBG">
                <a href = "alpha.htm"><img id = "pic" src = "pic_frags/testbild.png"></img></a>
            </div>
            
            <div id = "picBG">
                <a href = "alpha.htm"><img id = "pic" width = "132" height = "101" src = "pic_frags/testbild.png"></img></a>
            </div>
            
            <img id = "lower_sep" width = "174" height = "10" src = "pic_frags/lower_pic_sep.png"></img>
 
        </div>
        
        <!-- Inhalt hier einfügen -->
        <div id = "contentDiv">
        
        </div>
        
        <div id = "creditsDiv">
        </div>
    
    </div>
 
</body>

Und der Zugehörige CSS-Code:

Code :

/* Hintergrundbild */
#bg_img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 1;
}
 
#ersatzBody
{
    position: relative;
    left: 50%;
    margin-left: -550px;
    z-index: 2;
    width: 1100px;
    height: 800px;
}
 
 
/* Überschrift */
#headDiv
{
    background: url(pic_frags/titel.png);
    width: 1100;
    height: 112;
}
 
 
/* Menü */
#menuDiv
{
    background: url(pic_frags/menu_border.png);
    width: 180;
    height: 323;
    float: left;
}
 
#menu
{
    text-align: center;
    
    position: relative;
    left: 4px;
    top: 55px;
}
 
#menu p
{
    line-height: 2;
}
 
#link
{
    color: black;
    font-family: tahoma, sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding-top: 2px;
    padding-bottom: 2px;
}
 
#link:visited
{
    color: black;
}
 
#link:hover
{
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-bottom-style:solid;
    border-color: black;
}
 
 
/* Inhalt */
#contentDiv
{
    background: url(pic_frags/content_border.png);
    width: 746;
    height: 663;
}
 
 
/* Bilder links */
#picturesDiv
{
    width: 174;
    height: 18;
    float: right;
}
 
#picBG
{
    width: 174;
    height: 107;
    
    background: url(pic_frags/picBG.png);
}
 
#pic
{
    position: relative;
    top: 3px;
    left: 14px;
}
 
/* Credits */
#creditsDiv
{
    background: url(pic_frags/credits.png);
    width: 1100;
    height: 25;
    clear: both;
}

Wie schon erwähnt, im Opera sieht es exakt so aus, wie in meiner Vorlage.

Stichprobenartig habe ich aber gerade eben ein paar andere Browser getestet (Internet Explorer 9, Firefox 6, Safari WasauchimmermitLionausgeliefertwird)

Dabei sind mir dann einige Fehler aufgefallen, bei denen ich nicht mehr wirklich eine Idee habe, wodurch sie verursacht werden und weswegen ich jetzt nun hier anfragen wollte.

Zunächst mal der IE:

Hier finden sich auf den ersten Blick 3 Darstellungsfehler

Die Bilder auf der Linken Seite wurden von mir im Opera so positioniert, dass sie mehr oder weniger im Farbverlauf des Hintergrundbildes positioniert wurden, jedenfalls sind die auf eine etwas unschöne Art und Weise verschoben, allerdings im großen und ganzen nichts, womit sich nicht zur Not leben lassen könnte. Vermute aber auch, dass es mit Problem 2 zusammen hängt.
Das Menü links wurde mit float: left; und die Bilder mit float: right entsprechend positioniert. Dazwischen soll dann ein weiteres <div> den Inhalt der Seite beinhalten. Im Internet Explorer sitzt dieses Content-Div allerdings unter den beiden float-Elementen aber noch vor den "Credits".
In den ersten Zeilen der CSS habe ich ja ein "Hintergrundbild" so eingebunden, dass es das Browserfenster flächendeckend füllt, was auch im Opera und Firefox / Safari wunderbar funktioniert. Nur im IE bleibt auf der rechten Seite ein hässlicher weißer Streifen, mit dem sich dann nicht mehr sooo gut leben lässt.

Safari und Firefox teilen sich im Prinzip die Probleme und da ist es auch schnell erledigt:

Wie Punkt zwei beim Internet Explorer oben haben die beiden Browser auch Probleme mit der Positionierung des mittleren Inhaltskontainers nur mit dem Unterschied, dass er bei den beiden Browsern hinter dem Menü auf der linken Seite verschwindet und nicht in der Mitte angeordnet wird.

Vielleicht hätte ja jemand eine Idee, wie ich das beheben kann.

Vielen Dank jedenfalls schon jetzt und im Anhang noch einige Grafiken, evtl. zur besseren Darstellung des Problems

spicelab · 27.08.11 05:12

Beim ersten Überflug deines Stylesheets fällt direkt auf, dass im überwiegenden Teil der width- und height-Regeln die Maßeinheit px fehlt!

Wenn Opera diesen Fehler ignoriert, liegt hier die Vermutung nahe, dass das HTML-Doc den Browsern mit einem falschen oder ohne <!DOCTYPE> im "Quirks Mode" übergeben wird, was z.B. für IE (Version unerheblich) fatale Folgen hat, denn er verhält sich nun wie IE5 / IE6.

Korrekt wäre hier aber der "Standards Mode", womit sich (in Verbindung mit den ergänzten Maßeinheiten) die Darstellungsfehler in den genannten Browsern von selbst lösen dürften.

Siehe hierzu auch Der »DOCTYPE-Switch« und seine Auswirkungen.

Achja, im HTML-Code würde ich zudem alle gesetzten Leerzeichen vor und nach dem Attribut-Gleichheitszeichen entfernen.

Elandril · 27.08.11 06:04

Danke, Spicelab

Ich habe jetzt einmal die px entsprechend eingefügt, was allerdings keine Auswirkung hatte (vermute an der Stelle jetzt einfach mal, dass px Standard ist)

Habe dann

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> (*)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

an den Anfang der htm kopiert und jetzt erhalte ich zumindest einmal einen einheitlichen Anzeigefehler (Siehe png).

Ich denke mal, man könnte diese <div> einfach entsprechend nach rechts schieben, aber was wäre denn "best practice", um das zu bewerkstelligen?

Jedenfalls Danke soweit!

spicelab · 27.08.11 06:08

Zitat von Elandril

Ich habe jetzt einmal die px entsprechend eingefügt, was allerdings keine Auswirkung hatte (vermute an der Stelle jetzt einfach mal, dass px Standard ist)

Nein, dies gilt lediglich für HTML-Attributswerte, wie z.B. width="200" (= 200px).

Zitat von Elandril

Habe dann

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> (*)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

an den Anfang der htm kopiert und jetzt erhalte ich zumindest einmal einen einheitlichen Anzeigefehler (Siehe png).

Das sind 3 <!DOCTYPE>-Tags zuviel! Oder meinst du den mit (*) gekennzeichneten?

Und wo versteckt sich dort der Anzeigefehler?!

Elandril · 27.08.11 14:16

Nein das is nur das Paket, das da auf der Seite unter "Full Standard" stand. Wenn natürlich einer davon reicht, um so besser.

Zum Anzeigefehler habe ich das png oben mit angehängt. Der große blaue Rahmen soll da nämlich in der Mitte positioniert sein (hab das von dieser Seite: http://www.zdnet.de/magazin/39120950...itenlayout.htm)

spicelab · 27.08.11 14:29

Zitat von Elandril

Nein das is nur das Paket, das da auf der Seite unter "Full Standard" stand. Wenn natürlich einer davon reicht, um so besser.

Es gibt nur einen wählbaren Dokumenttyp für das Webdokument bzw. einen <!DOCTYPE>-Tag in dessen HTML-Dokumentbaum

Zitat von Elandril

Der große blaue Rahmen soll da nämlich in der Mitte positioniert sein

Ah so...

Deinem HTML-Code zufolge wird aus

Code css:

#contentDiv
{
    background: url(pic_frags/content_border.png);
    width: 746px;
    height: 663px;
}

dieses

Code css:

#contentDiv
{
    background:url(pic_frags/content_border.png);
    margin:0 174px 0 180px; /* Abstände zu den beiden äußeren Spaltenblöcken */
    height:663px;
}

Elandril · 27.08.11 14:35

Alles klar, jetzt passt die Sache!

Vielen Dank!

spicelab · 27.08.11 14:44

Gern geschehen

Hab da noch einen Hinweis nachzureichen, denn wie ich gerade (bewußt) wahrgenommen hab, deklarierst du ID-Bezeichner mehrfach im HTML-Dokument. Dies ist so aber nicht regelkonform (valide), da sie darin eindeutig sein müssen.

In deinem Fall wandelst du im CSS diese beiden Bezeichner (#link und #pic) in sog. Klassen-Namen um, indem du das "#"-Zeichen durch einen Punkt ersetzt (.link und .pic), und tauscht im HTML das Attribut id= gegen class= aus.

Diese Bezeichner, gleich ob ID oder Klasse, können hier aber gänzlich entfallen, wenn dafür im CSS die nachfolgend genannten Selektoren für Nachfahren definiert werden - so gelten die CSS-Regel dann ebenfalls dokumentweit ausschließlich für diese Elemente.

Code css:

#menuDiv #menu a:link { ... }
#menuDiv #menu a:visited { ... }
#menuDiv #menu a:hover { ... }
 
#picturesDiv #picBG img { ... }

Elandril · 27.08.11 19:15

Hallo, danke nochmal.

Das mit den ids habe ich heute nachmittag geändert. War ein vorläufiges Konstrukt, bis das mit der Positionierung gepasst hat

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Layout-Probleme mit versch. Browsern

Mehere Probleme mit verschiedenen Browsern

probleme mit positionierung in verschiedenen browsern.

probleme mit height in browsern

Probleme mit Framegröße in allen Browsern

Stichworte

E-Mail:

Abonnieren Abbestellen