Div im Div absolut positionieren @ tutorials.de: Tutorials, Forum & Hilfe

ToboTheRibbler · 28.12.09 15:53

Hallo zusammen,

Ich bin momentan dabei eine Homepage zuerstellen, welches ein div basiertes css layout besitzen soll. Da ich bisher immer mit Tabellen gearbeitet habe, bin ich auf diesem Gebiet noch ein ziemlicher Grünling. Das Layout habe ich versucht mit absolut positionierten Divs zu realisieren und zumindestens mit dem Firefox scheint mein Versuch auch erfrolgreich gewesen zu sein, nur der IE spielt nicht mit.

Mein Problem ist der mittlere Layer ("Inhalt"), welcher eben diesen enthält. Dieser liegt über einem 100% hohen Layer("haupt"), der die Hintergrundgrafik enthält.
Per Inlcude wird in den "Inhalt"-Layer die gewünschte Seite geladen.

Formatiert sind die Container wie folgt:

PHP-Code:


<style type="text/css">

<!--

html, body {

     margin:0;

     padding:0;

     height:100%;

     overflow-y: scroll;

}

]#haupt {

     min-height: 100%;

     width: 1000px;

     background:#0C3;

     position:absolute;

     top: 0px;

     left: 50%;

     margin-left: -500px;

     background:url(bg.jpg);

}

#inhalt {

    width: 1000px;

    border: #FFF solid; border-width: 1pt;

    text-align: center;

    position:absolute;

    top: 170px;

    left: 50%;

    margin-left: -500px;

    z-index:1;

    background:url(bginhalt.jpg);

}

...

So lange die Seiten, die includet werden nur Tabellen enthalten gibt es da auch keine Probleme. Wenn aber divs ins spiel kommen, positionieren der FF und der IE die Container unterschiedlich.

Hier sieht man das Problem:
http://www.dasarsch.de/index.php?inhalt=arschsolo.php

Wenn man den Link einnmal mit FF und IE ausprobiert, sieht man den unterschied.
Ich benutze FF 3.5.x sowie den IE 8.0

CSS für die Seite die included wird:

PHP-Code:


<style type="text/css">

<!--

html, body {

     margin:0;

     padding:0;

     height:100%;

     overflow-y: scroll;

}

#tobi { height: 319px;

        width: 183px;

        position:absolute;

        bottom: 0px;

        left: 0px;

        border:#0C3 solid; border-width: 1px;

}

-->

</style>

Hab die einzelnen Container mal farbig umrandet, damit man sieht wo welche sitzt.
Der Feuefuchs setzt den grünen Container "Tobi" dahin, wo ich ihn auch eigentlich gern hätte, während der IE den Container inerhalb des Layer "Inhalt" in die linke untere Ecke setzt.

Wie kann ich dem IE denn du erklären, dass er den Container doch bitte in die Ecke der gesamten Seite setzten soll, und nicht nur in die Ecke des Layers "Inhalt"

Möchte vorrausschicken , dass dies mein erstes Layout dieser Art ist und ich wirklich keine Erfahrung habe. Deshalb habt erbamen mit mir, und zerfleischt den Code nicht zu sehr. Bestimmt könnte man das alles logischer, besser oder eleganter lösen, nur hoffe ich dass es auch so eine Lösung für das Problem gibt, ohne alles nochmal über den Haufen zu schmeißen.
Bedanke mich an dieser Stelle schon mal für Eure Tipps

Herzliche Grüße
Tobo

Maik · 28.12.09 16:04

Hi,

möglicherweise kommt die IE-Familie (6 - 8) mit deinem invaliden Markup nicht zurecht, denn du includest da ein vollständiges HTML-Grundgerüst in das Hauptdokument, wodurch sich darin nun zwei <body>-Bereiche befinden.

mfg Maik

ToboTheRibbler · 28.12.09 16:10

Also wenn ich alles aus der includeten Seite (arschsolo.php) entferne, bis auf die Codeschnippsel der Tabelle und des Containers habe ich den selben Effekt

<html>, <body>, Doctype, alles raus.

Maik · 28.12.09 16:16

Mit dem nachfolgenden Code positionieren bei mir lokal alle IE-Versionen das DIV #tobi am unteren Fensterrand:

HTML-Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Das  - Die Beste Nicht-Band Der Welt</title>
<style type="text/css">
<!--
html {
     margin:0;
     padding:0;
     height:100%;

}
body {
        margin:0;
     padding:0;
     height:100%;
         background: #1b1b1b url(schatten.jpg) repeat-y 50% 0;
}
a:link { text-decoration:none; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:14;}
a:active {text-decoration:none; color:#FFC; font-family:Arial, Helvetica, sans-serif; font-size:14;}
a:hover {text-decoration:none; color:#FFC; font-family:Arial, Helvetica, sans-serif; font-size:14;}
a:visited { text-decoration:none; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:14;}
#haupt {
         min-height: 100%;
         width: 1000px;
         border: #F00 solid; border-width: 1pt;
         position:absolute;
         top: 0px;
         left: 50%;
         margin-left: -500px;
         background:url(bg.jpg);
}
#inhalt {
        width: 1000px;
        border: #FFF solid; border-width: 1pt;
        position:absolute;
        top: 170px;
        left: 50%;
        margin-left: -500px;
        z-index:1;
        background:url(bginhalt.jpg);
        display:table;
}
#kat {
        width: 400px;
        border-bottom:#FFF, thin;
        text-align: center;
        position:absolute;
        top: 110px;
        left: 50%;
        margin-left: -200px;
        z-index:2;
        height: 50px;
}
.links {
        font-family:Arial, Helvetica, sans-serif;
        font-size:13pt;
        color:#FFF;
        text-decoration:none;
}
#dropmenu, #dropmenu ul { list-style-type:none; margin:0; padding:0; }
#dropmenu li { width:100px; float:left; text-align:center; color:#FFF; font-family:Arial, Helvetica, sans-serif }
#dropmenu li ul { display:none; }
#dropmenu li:hover ul { display:block; }
#test { width: 1000px;
        border: 1px;
        text-align: center;
        position:absolute;
        top: 0px;
        left: 50%;
        margin-left: -500px;
        z-index:1;
        height: 31px;
}
#neues, #disko, #band, #media {
        display: table;
        height: 18px;
        width: 100px;
        border-bottom: solid; border-bottom-width: 1px;
        cursor: pointer;
        }
#instanz2 {
        display: table;
        height: 30;
        width: 100px;
        border-bottom: solid; border-bottom-color:#333; border-bottom-width: 1pt;
        background:#282828;
        font-size:14px;
}


#tobi { height: 319px;
                width: 183px;
                position:absolute;
                bottom: 0px;
                left: 0px;
                border:#0C3 solid; border-width: 1px;
}
-->
</style>
</head>

<body>
  <div id="inhalt">

<div id="tobi"><img src="tobi2.png" width="183" height="319" border="0" /></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top"><table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="Norm"><p>ArschSolo ist das, naja Sie werden es erraten, SOLO-Projekt,  des 2. Bandmitglieds von Das , Hausmeister Tobi. Nach der letzten VerÃ¶ffentlichung von Das , K.A.U.F., welches sich millionenfach verkaufte und der darauf folgenden  Live-Tour, gÃ¶nnten sich Baumeister Dike und Hausmeister Tobi eine kleine Auszeit. Dieses Vorhaben  schmerzte den Fans sehr. Wochenlang haben sich Massen von Frauen vor den  Hotelzimmern versammelt und fÃ¼r ein neues Das  Album demonstriert. Der  Bierkonsum ging drastisch zurÃ¼ck, und so kam es, dass ganze Wirtschaftszweige  drohten wegzubrechen. Die Existenz vieler Menschen stand auf dem Spiel, doch dieser Verantwortung war Â sich  Hausmeister Tobi durchaus bewusst. Um die Wartezeit auf das 3. Album von Das  zu verkÃ¼rzen, entschied er sich ein kleines Soloalbum rauszubringen, welches er â€žBallads  of Beerâ€œ taufte. Auf diesem Album befinden sich Balladen, die sich um  Freundschaft, Liebe und Bier drehen. Die Kritiker waren sich schnell einig,  dass dieses Album der beste TontrÃ¤ger 2009 ist und verliehen Hausmeister Tobi  unter anderem 8 Grammys, 4 Echos und 1 BlumenstrauÃŸ. Von dieser gigantischen Erfolgswelle berauscht, versank Hausmeister Tobi immer mehr in den Genuss von sogenannten, "alkoholfreien" Softdringks. Ihr Alkoholgehalt von 0,0 Promille, zeigt auf, wie gefÃ¤hrlich sie sein kÃ¶nnen. Bei einem mehrwÃ¶chigem Aufenthalt in der Unialkoholklinik Freiburg, wurde Tobi intravenÃ¶s Bier verabreicht. Und es zeigte Wirkung. Nicht nur unser Hausmeister hatte sich wieder erholt, nein auch die  Wirtschaft erholte sich, und die Welt wurde wieder ein StÃ¼ck betrunkener. Zur Zeit  sitzen unsere beiden Helden im Studio und arbeiten an ihrem 3. Album â€žDreifaltigkeit  Zu Zweitâ€œ, auf das die Welt mit Spannung wartet.</p></td>
      </tr>
    </table></td>
  </tr>
</table>
 </div>
<div id="haupt">
  <!-- 4stats Tracker Code // begin -->
  <script type="text/javascript" src="http://4stats.de/de/counter?id=57258&amp;cntr=hide"></script>
<noscript><a href="http://www.4stats.de/" target="_blank"><img src="http://4stats.de/de/stats?id=57258&amp;cntr=hide" border="0" alt="4stats Webseiten Statistik + Counter" /></a></noscript>
<!-- 4stats Tracker Code // end -->

  <div id="kat">
  <ul id="dropmenu">
<li><div id="neues"><a class="links" href="index.php?inhalt=neues.php">Neues</a></div></li>
<li><div id="disko"><a class="links" href="index.php?inhalt=disko.php">Diskographie</a></div></li>
<li><div class="links" id="band">Band</div>
<ul>
<li><div id="instanz2"><a href="index.php?inhalt=dasarsch.php">Das </a></div></li>
<li><div id="instanz2"><a href="index.php?inhalt=arschsolo.php">ArschSolo</a></div></li>
</ul>
<li><div class="links" id="media">Media</div>
<ul>
<li><div id="instanz2"><a href="index.php?inhalt=fotos.php">Fotos</a></div></li>
<li><div id="instanz2"><a href="index.php?inhalt=videos.php">Videoclips</a></div></li>
<li><div id="instanz2"><a href="index.php?inhalt=downloads.php">Downloads</a></div></li></ul>
</ul></div>
</div>
</body>
</html>

mfg Maik

ToboTheRibbler · 28.12.09 16:35

Also jetzt versteh ich gar nichts mehr. Habe den Code jetzt nochmal genau so wie du ihn gepostet hast ausprobiert, bei mir zeigt sich trotzdem kein Effekt.

Nur damit keine Missverständnisse bestehen, hab ich hier nochmal 2 Screenshots gemacht.

Feuerfuchs (wie es sein soll): http://www.dasarsch.de/ff.jpg
Internet Explorer ( wie es nicht sein soll):http://www.dasarsch.de/ie.jpg

Maik · 28.12.09 16:37

Sorry, das lag bei mir durch das fehlende Stylesheet deisgn.css an der großen Schrift in der Tabelle, die das DIV #inhalt nach unten gestreckt hatte.

Demnach fehlen dem DIV #inhalt noch die kommentierten Angaben:

Code css:

#inhalt {
        width: 1000px;
        border: #FFF solid; border-width: 1pt;
        position:absolute;
        top: 170px;
        left: 50%;
        margin-left: -500px;
        z-index:1;
        background:url(bginhalt.jpg);
        display:table;
        min-height:100%; /* Mindesthöhe in standardkonformen Browsern */
        height:auto !important; /* auto-height mit !important-Regel für standardkonforme Browser, damit sie die nachfolgende height:100%-Deklaration ignorieren */
        height:100%; /* "Mindesthöhe" in IE6 */
}

mfg Maik

ToboTheRibbler · 28.12.09 16:50

Also langsam wirds mir unangenehm, wie hilflos ich hier bin. Tut mir leid wenns ein wenig nervig wird

Also hab die Zeilen eingefügt. Im Firefox bleibt alles wie gehabt, alles ok. Im IE wird "Inhalt" bei 100% zu groß. Nämlich die 170Px Abstand die der Layer von Oben hat.
Hab jetzt versucht mit einem Codeschnippsel aus diesem Tutorial:

http://www.tutorials.de/forum/css/29...-100-x-px.html

diese 170px einfach von den 100% wieder abzuziehen. Dann müsste es ja passen.

PHP-Code:


...

min-height:height: expression((document.body.clientHeight - 170) + "px");

height:auto !important;

height:height: expression((document.body.clientHeight - 170 + "px");

...

Anscheinend hat es nur den Effekt, dass der IE denkt es wäre wieder gar keine Höhe angegeben, denn das Ergebnis ist wie am Anfang.

Maik · 28.12.09 17:13

Vielleicht ist dir mit diesem modifizierten Code geholfen?

HTML-Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Das  - Die Beste Nicht-Band Der Welt</title>
<style type="text/css">
<!--
* {
     margin:0;
     padding:0;
}
html,body {
     height:100%;

}
body {
     background: #1b1b1b url(schatten.jpg) repeat-y 50% 0;
}

a:link { text-decoration:none; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:14;}
a:active {text-decoration:none; color:#FFC; font-family:Arial, Helvetica, sans-serif; font-size:14;}
a:hover {text-decoration:none; color:#FFC; font-family:Arial, Helvetica, sans-serif; font-size:14;}
a:visited { text-decoration:none; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:14;}

#inhalt {
        width: 1000px;
        border: #FFF solid 1pt; 
        margin:auto;
        background:url(bginhalt.jpg);
        display:table;
        min-height:100%;
        height:auto !important;
        height:100%;
}
#kat {
        width: 400px;
        border-bottom:#FFF;
        text-align: center;
        margin:110px auto 0 auto;
        z-index:2;
        height: 50px;
}
.links {
        font-family:Arial, Helvetica, sans-serif;
        font-size:13pt;
        color:#FFF;
        text-decoration:none;
}
#dropmenu, #dropmenu ul { list-style-type:none; margin:0; padding:0; }
#dropmenu li { width:100px; float:left; text-align:center; color:#FFF; font-family:Arial, Helvetica, sans-serif }
#dropmenu li ul { display:none; }
#dropmenu li:hover ul { display:block; }
#neues, #disko, #band, #media {
        display: table;
        height: 18px;
        width: 100px;
        border-bottom: solid; border-bottom-width: 1px;
        cursor: pointer;
        }
.instanz2 {
        display: table;
        height: 30px;
        width: 100px;
        border-bottom: solid; border-bottom-color:#333; border-bottom-width: 1pt;
        background:#282828;
        font-size:14px;
}
#tobi { height: 319px;
                width: 183px;
                position:absolute;
                bottom: 0px;
                left: 0px;
                border:#0C3 solid; border-width: 1px;
}
.Norm {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10pt;
        color: #FFFFFF;
}
-->
</style>
</head>

<body>
  <div id="inhalt">
       <div id="kat">
            <ul id="dropmenu">
                <li><div id="neues"><a class="links" href="index.php?inhalt=neues.php">Neues</a></div></li>
                <li><div id="disko"><a class="links" href="index.php?inhalt=disko.php">Diskographie</a></div></li>
                <li><div class="links" id="band">Band</div>
                         <ul>
                             <li><div class="instanz2"><a href="index.php?inhalt=dasarsch.php">Das </a></div></li>
                             <li><div class="instanz2"><a href="index.php?inhalt=arschsolo.php">ArschSolo</a></div></li>
                         </ul>
                </li>
                <li><div class="links" id="media">Media</div>
                         <ul>
                             <li><div class="instanz2"><a href="index.php?inhalt=fotos.php">Fotos</a></div></li>
                             <li><div class="instanz2"><a href="index.php?inhalt=videos.php">Videoclips</a></div></li>
                             <li><div class="instanz2"><a href="index.php?inhalt=downloads.php">Downloads</a></div></li></ul>
                         </ul>
                </li>
            </ul>
       </div>
       <div id="tobi"><img src="tobi2.png" width="183" height="319" border="0" /></div>
       <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td align="center" valign="top">
                      <table width="600" border="0" cellspacing="0" cellpadding="0">
                             <tr>
                                 <td class="Norm">
                                     <p>ArschSolo ist das, naja Sie werden es erraten, SOLO-Projekt,  des 2. Bandmitglieds von Das , Hausmeister Tobi. Nach der letzten VerÃ¶ffentlichung von Das , K.A.U.F., welches sich millionenfach verkaufte und der darauf folgenden  Live-Tour, gÃ¶nnten sich Baumeister Dike und Hausmeister Tobi eine kleine Auszeit. Dieses Vorhaben  schmerzte den Fans sehr. Wochenlang haben sich Massen von Frauen vor den  Hotelzimmern versammelt und fÃ¼r ein neues Das  Album demonstriert. Der  Bierkonsum ging drastisch zurÃ¼ck, und so kam es, dass ganze Wirtschaftszweige  drohten wegzubrechen. Die Existenz vieler Menschen stand auf dem Spiel, doch dieser Verantwortung war Â sich  Hausmeister Tobi durchaus bewusst. Um die Wartezeit auf das 3. Album von Das  zu verkÃ¼rzen, entschied er sich ein kleines Soloalbum rauszubringen, welches er â€žBallads  of Beerâ€œ taufte. Auf diesem Album befinden sich Balladen, die sich um  Freundschaft, Liebe und Bier drehen. Die Kritiker waren sich schnell einig,  dass dieses Album der beste TontrÃ¤ger 2009 ist und verliehen Hausmeister Tobi  unter anderem 8 Grammys, 4 Echos und 1 BlumenstrauÃŸ. Von dieser gigantischen Erfolgswelle berauscht, versank Hausmeister Tobi immer mehr in den Genuss von sogenannten, "alkoholfreien" Softdringks. Ihr Alkoholgehalt von 0,0 Promille, zeigt auf, wie gefÃ¤hrlich sie sein kÃ¶nnen. Bei einem mehrwÃ¶chigem Aufenthalt in der Unialkoholklinik Freiburg, wurde Tobi intravenÃ¶s Bier verabreicht. Und es zeigte Wirkung. Nicht nur unser Hausmeister hatte sich wieder erholt, nein auch die  Wirtschaft erholte sich, und die Welt wurde wieder ein StÃ¼ck betrunkener. Zur Zeit  sitzen unsere beiden Helden im Studio und arbeiten an ihrem 3. Album â€žDreifaltigkeit  Zu Zweitâ€œ, auf das die Welt mit Spannung wartet.</p>
                                 </td>
                             </tr>
                      </table>
                  </td>
              </tr>
       </table>
</div>

</body>
</html>

mfg Maik

ToboTheRibbler · 28.12.09 17:36

hm also der Inhalt sollte schon den Abstand von 170px behalten, dieser Abestand ist quasi der Header.

Maik · 28.12.09 17:41

Bei mir beträgt der Abstand des Inhalts (in der Tabelle) zum oberen Fensterrand 160px, resultierend aus dieser Regel:

Code css:

* {
     margin:0;
     padding:0;
}

mit der die voreingestellten Polsterungseigenschaften des <p>-Elements in der Tabelle zurückgesetzt worden.

Um auf die gewünschten 170px zu kommen, ist in meinem vorgestellten Code diese Regelerweiterung vonnöten:

Code css:

1	table p { margin-top:10px; }

mfg Maik

Maik · 28.12.09 18:14

Hier noch ein kleiner Nachtrag zur Optimierung:

Code :

#inhalt {
        width: 1000px;
        margin:auto;
        [b]background:url(bg.jpg);[/b]
        [b]/*display:table;*/ /* auskommentiert = deaktiviert */[/b]
        min-height:100%;
        height:auto !important;
        height:100%;
}
#kat {
        width: 400px;
        border-bottom:#FFF;
        text-align: center;
        [b]margin:auto;[/b]
        [b]padding-top:110px;[/b]
        z-index:2;
        height: 50px;
}
 
...
 
#dropmenu li { width:100px; float:left; text-align:center; color:#FFF; font-family:Arial, Helvetica, sans-serif; [b]position:relative;[/b] }
#dropmenu li ul { display:none; [b]position:absolute;[/b] }

mfg Maik

ToboTheRibbler · 28.12.09 18:34

hm also da komm ich jetzt nicht mehr mit. Wo ist den der #haupt layer geblieben?
Im IE hab ich aber auch keinen Abstand von 160, sondern von 0. Der Inhalt geht einfach komplett von oben bis nach unten. Ich werd echt kirre hier, wieso nimmt mal nochmal keine Tabellen mehr?

Maik · 28.12.09 18:40

Falls es dir nicht aufgefallen ist, den DIV-Block #haupt hab ich in meinem modifizierten Code (siehe Post #8) entfernt, und dafür die Navigation in #inhalt eingebettet.

Ansonsten passen bei mir mit meinem Code die Abstände im IE:

mfg Maik

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

über Javascript Bilder laden, größe feststellen und absolut positionieren

Absolut Indigo

PHP Galerie (Absolut Anfänger)

Absolut Beginner

Absolut deckend malen

E-Mail:

Abonnieren Abbestellen