div-Höhe

[Ben]

Hallo,

ich habe ein Problem beim Aufbau meiner neuen Seiten. Ich möchte endgültig von Tabellen (außer zur tabellarischen Darstellung von Daten) als Designelementen Abstand nehmen und nutze deshalb <div>s.

Das Problem dabei ist momentan, dass ich für den Hauptteil (#hintergrund) eine Höhe von 100% angegeben habe. Das ist auch an sich kein Problem. Ist nun aber der Inhalt von #content zu groß, wird dieser Bereich angepasst (soll er ja auch). #hintergrund hingegen bleibt gleichgroß, weshalb der Inhalt dann nach unten übersteht.

Die CSS-Definitionen sehen so aus:

#hintergrund
{
  background-image:url('../gfx/weiss.gif');
  background-repeat: repeat-y;
  width: 799px;
  height: 100%;
}

#content
{
  z-index: 3;
  width: 400px;
  position: absolute;
  left: 230px;
  top: 220px;
  text-align: justify;
  height: auto;
}

und die HTML-Datei so:

<div id="hintergrund">
     <div id="header"><img src="gfx/logo.gif" alt="bens-homepage" /></div>
     <div id="rechtsoben"><img src="gfx/kabel1.jpg" alt="Kabel" /></div>
        <div id="login">Login<br /></div>
     <div id="menu"><?php include ("menu.php"); ?></div>
        <div id="pfad">Du bist hier:<br /><img src="gfx/bullet_pfad.gif" alt="->" valign="absmiddle" />bens-homepage /
        News</div>
     <div id="content">
         <?php
              if (!isset($_GET['page']))
              {
                include("news.php");
              } else {
                include($_GET['page'].".php");
              }

?>
        </div>
     <div id="barcode"><img src="gfx/barcode.gif" alt="Barcode" /></div>
     <div id="rechtsunten"><img src="gfx/kabel2.jpg" alt="Kabel" /></div>
    </div>

Schon einmal vielen Dank im Voraus und viele Grüße
Ben

[Ashura]

Hallo Ben.

Ist nun aber der Inhalt von #content zu groß, wird dieser Bereich angepasst (soll er ja auch). #hintergrund hingegen bleibt gleichgroß, weshalb der Inhalt dann nach unten übersteht.

Rate mal, warum dies so ist. ;)

position: absolute;

Lies dir mal durch, was position:absolute für Auswirkungen auf ein Element hat...

Gruß, Ashura

[Ben]

Hi Ashura,

Lies dir mal durch, was position:absolute für Auswirkungen auf ein Element hat...

Na gut, da hätte ich wohl auch selbst drauf kommen können... aber wie kann ich das dann machen? Gar nicht positionieren und nur mit padding arbeiten oder wie? Ich bin doch noch neu auf dem Gebiet CSS (jedenfalls was die komplette Gestaltung der Seite damit angeht)... :(

Danke und liebe Grüße
Ben

[Ashura]

Hallo Ben.

Gar nicht positionieren und nur mit padding arbeiten oder wie?

Es kommt auf dein Layout an. Elemente floaten zu lassen, hat sich aber oftmals bewährt.

Die Kombination von margin und padding herauszufinden, ist wiederum von dir abhängig.

Du hast einen ziemlich großen Handlunsspielraum, jedoch solltest du starre Layouts (px) vermeiden.

Nur zur Information, wenn du dies nicht schon selbst weißt. ;)

Gruß, Ashura

[Ben]

Hi Ashura,

Es kommt auf dein Layout an.

Das soll am Ende so aussehen: http://www.bens-homepage.de/v3/entwurf2.jpg

Elemente floaten zu lassen, hat sich aber oftmals bewährt.

Ich denke nicht, dass das bei mir reichen wird, oder? Besonders wichtig ist ja die Positionierung der Bildelemente, deshalb denke ich schon, dass ich mit Positionierung arbeiten muss!?

Danke und etwas ratlose Grüße,
Ben

[Ashura]

Hallo Ben.

Ich denke nicht, dass das bei mir reichen wird, oder? Besonders wichtig ist ja die Positionierung der Bildelemente, deshalb denke ich schon, dass ich mit Positionierung arbeiten muss!?

Das denke ich nicht. Alle "Elemente" die ich sehen kann, kann man mittels float und margin positionieren.

Gruß, Ashura

[Ben]

Hi Ashura,

Das denke ich nicht. Alle "Elemente" die ich sehen kann, kann man mittels float und margin positionieren.

Naja, möglich ist das wahrscheinlich schon. Aber ist es nicht möglich, mein Problem einfacher zu lösen, als die ganze Struktur nochmal umzustellen?

Meine komplette CSS-Datei sieht bislang so aus:

body
{
  margin: 0;
  background-image:url('../gfx/hinterg.gif');
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

/*
Style-Angaben fuer die unterschiedlichen <div>'s
*/

#hintergrund
{
  background-image:url('../gfx/weiss.gif');
  background-repeat: repeat-y;
  width: 799px;
  height: 100%;
}

#header
{
  width: 415px;
  height: 516px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

#rechtsoben
{
  width: 277px;
  height: 385px;
  position: absolute;
  left: 515px;
  top: 0px;
  z-index: 1;
}

#login
{
  position: absolute;
  left: 642px;
  top: 20px;
}

#barcode
{
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1;
}

#rechtsunten
{

position: absolute;
  left: 545px;
  bottom: 0;
}

#menu
{
  z-index: 2
  width: 300px;
  position: absolute;
  left: 45px;
  top: 425px;
}

#pfad
{
  z-index: 3;
  width: 400px;
  position: absolute;
  left: 230px;
  top: 130px;
  text-align: left;
  color: #C1C2C1;
  font-size: 10px;
}

#content
{
  z-index: 3;
  width: 400px;
  position: relative;
  left: 230px;
  top: 220px;
  text-align: justify;
  height: auto;
}

Und die entsprechende html bzw. php-Datei dann so:

<html>
<head>
<title>bens-homepage.de - v3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
<div id="hintergrund">
     <div id="header"><img src="gfx/logo.gif" alt="bens-homepage" /></div>
     <div id="rechtsoben"><img src="gfx/kabel1.jpg" alt="Kabel" /></div>
        <div id="login">Login<br /></div>
     <div id="menu"><?php include ("menu.php"); ?></div>
        <div id="pfad">Du bist hier:<br /><img src="gfx/bullet_pfad.gif" alt="->" valign="absmiddle" />bens-homepage /
        News</div>
     <div id="content">
         <?php
              if (!isset($_GET['page']))
              {
                include("news.php");
              } else {
                include($_GET['page'].".php");
              }

?>
        </div>
     <div id="barcode"><img src="gfx/barcode.gif" alt="Barcode" /></div>
     <div id="rechtsunten"><img src="gfx/kabel2.jpg" alt="Kabel" /></div>
    </div>
</body>
</html>

---------------------

Da muss es doch auch eine einfachere Lösung geben, oder? Ansonsten muss ich mich natürlich hinsetzen und nochmal von vorne mit float und margin arbeiten, was dann aber auch wieder den box-model-hack wg. des IE implementieren würde, oder?

Gruß
Ben

[Ingo Turski]

Hi,

Da muss es doch auch eine einfachere Lösung geben, oder? Ansonsten muss ich mich natürlich hinsetzen und nochmal von vorne mit float und margin arbeiten, was dann aber auch wieder den box-model-hack wg. des IE implementieren würde, oder?

Nein, Du hast Dir da ein sehr schwierig umzusetzendes Layout ausgedacht. Das erfordert weit mehr als CSS-Grundkenntnisse und position ist hierfür wirklich nicht erforderlich. Allerdings werden wohl verschachtelte Elemente zur Aufnahme und Positionierung von Hintergrundgrafiken nötig sein.

freundliche Grüße
Ingo

[Ben]

Hi Ingo,

Nein, Du hast Dir da ein sehr schwierig umzusetzendes Layout ausgedacht. Das erfordert weit mehr als CSS-Grundkenntnisse und position ist hierfür wirklich nicht erforderlich. Allerdings werden wohl verschachtelte Elemente zur Aufnahme und Positionierung von Hintergrundgrafiken nötig sein.

Na das klingt ja nach nem Haufen Arbeit und einem Neuanfang... Kannst du mir vielleicht einen Tipp geben, wie ich das am Besten umsetzen kann oder wo ich mir ein Beispiel dafür ansehen könnte? Vielleicht setze ich einfach die zwei oberen Bilder als eins und die zwei unteren Bilder als eins ein? Dann habe ich nur noch zwei Elemente, die ich da positionieren muss.

Danke und Gruß
Ben

[Chriss]

Hi Ben,

Schaue dir einfach mal diese Seite an die der Ingo angeben hat an, vielleicht helfen die dir weiter

Arbeite dich gut in Divs ein, dein Problem ist mit einfacher Positionierung nicht so einfach zu lösen. Liegt an deinem Layout, um ein verschachteln von divs richtig anzuwenden, braucht es mehr als Grundkenntnisse.

Mfg Chriss

[Ingo Turski]

Hi,

Na das klingt ja nach nem Haufen Arbeit und einem Neuanfang...

so ist es..;-)

Vielleicht setze ich einfach die zwei oberen Bilder als eins und die zwei unteren Bilder als eins ein? Dann habe ich nur noch zwei Elemente, die ich da positionieren muss.

Nein; und Du mußt wie gesagt keine Elemente absolut positionieren.

Das größte Problem ist die Hintergrunddekoration oben rechts und unten rechts. Hierfür brauchst Du zwei den Seitenbereich umspannende Elemente, da body ja bereits für den rechten Hintergrund benötigt wird und sich für html AFAIK nicht in jedem Browser ein Hintergrundbild zuweisen läßt.
Vielleicht funktioniert das mit zwei ineinander verschachtelten DIVs - das äußere nimmt die obere Grafik auf und könnte auch die linken Bildelemente enthalten, das innere nimmt die untere Grafik auf, die dort bottom right positioniert ist.
Den Login-Bereich kannst Du float:right oder sogar absolut positionieren.
Das Menü bekommt float:left und margin-top, der Inhaltsbereich margin-left und margin-top.
Der Strichcode schließlich braucht nur clear:left und margin-top.

freundliche Grüße
Ingo

[Ben]

Hi,

Na das klingt ja nach nem Haufen Arbeit und einem Neuanfang...
so ist es..;-)

Na dann werde ich mir deine Ratschläge mal zu Herzen nehmen und das in den nächsten Tagen versuchen, umzusetzen. Vielen Dank für deine Anregungen. Ich gehe mit einer positiven Einstellung da ran und wenn ich es nicht hinbekommen sollte, kann ich ja nochmals hier nachfragen.

Jedenfalls vielen Dank und viele Grüße
Ben

[Ben]

Da wäre ich wieder.

Ich habe nun nach Ingo's Ratschlägen mein Grundgerüst überarbeitet.

Das schaut nun so aus:

<div id="weiss">
<div id="rechtsoben">
  <div id="header">
   <div id="rechtsunten">
    <div id="menu"><?php include("menu.php"); ?></div>
    <div id="content">
     <?php

if (isset($_GET['seite']))
      {
       include($_GET['seite'].".php");
      } else {
       include('news.php');
      }
     ?>
    </div>
    <div id="barcode"><img src="gfx/barcode.gif"></div>
   </div>
  </div>
</div>
</div>

----

Die entsprechende CSS-Datei so:

#weiss
{
  background-image:url('../gfx/weiss.gif');
  background-repeat: repeat-y;
  width: 799px;
  height: auto;
}

#rechtsoben
{
  width: 792px;
  height: auto;
  background-image:url('../gfx/kabel1.jpg');
  background-position: 100% 0%;
  background-repeat: no-repeat;
}

#header
{
    width: 792px;
    height: auto;
    background-image:url('../gfx/logo.gif');
    background-position: top left;
    background-repeat: no-repeat;
}

#rechtsunten
{
    width: 793px;
    height: auto;
    background-image:url('../gfx/kabel2.jpg');
    background-position: bottom right;
    background-repeat: no-repeat;
}

#menu
{
    width: 200px;
    float: left;
    padding-top: 400px;
   padding-left: 40px;
}

#content
{
    width: 350px;
    padding-left: 250px;
    padding-top: 220px;
    height: auto;
    text-align: justify;
}

#barcode
{
    padding-left: 10px;
    padding-bottom: 10px;
    clear: left;
}

------------------------

Im Firefox wird alles schön richtig angezeigt. Im IE jedoch ist der content-Bereich vollkommen eingequetscht. Siehe -> http://www.bens-homepage.de/v3

Liegt das an dem Padding? Was muss ich tun, damit auch der IE die Seite korrekt darstellt?

Danke und viele Grüße
Ben

[Ingo Turski]

Hi,

Liegt das an dem Padding?

vermutlich. Der IE hat damit - i.V. mit float - erhebliche Probleme. Du könntest margin stattdessen versuchen oder notfalls dem IE über eine CSS-Browserweiche alternative Werte geben.
Ein Doctype wäre auch sinnvoll, um zu erreichen, daß standardkonforme Browser die Seite auch ge,ä dem Standard interpretieren und nicht versuchen zu raten, was Du von ihnen willst.

freundliche Grüße
Ingo

[Ben]

Hallo Ingo,

lieben Dank für deine Hilfe. Habe nun eine CSS-Weiche eingestellt, mit der der IE eine andere Datei zugewiesen bekommt und es scheint alles zu funktionieren. Der Doctype ist jetzt natürlich auch da :)

Danke und liebe Grüße
Ben