Mehrere DIV Boxen ineinander von Eschy, 12.04.2012 03:02

Mehrere DIV Boxen ineinander

Eschy Homepage des Autors 11.04.2012 20:31

Ich habe ein Problem. Und zwar möchte ich mehrere DIV Boxen ineinander haben .. aber irgendwie will es nicht so wie ich es will ... die übergeordnete box soll den hintergrund erstellen und die untergeordnete ist für den textinhalt zuständig.
Die CSS Datei:

  
body {  
  background-color: #C0C0C0;  
  color: #000000;  
  font-family: Verdana, Arial, Helvetica, sans-serif;  
  font-size: 12pt;  
}  
  
a {  
  color: #FF0000;  
  text-decoration: none;  
}  
  
a:visited {  
  color: #FF0000;  
}  
  
a:hover {  
  color: #800000;  
}  
  
#head {  
  position: absolute;  
  left: 20px;  
  top: 20px;  
  height: 300px;  
  width: 1024px;  
  background-image: url(img/header.png);  
  background-repeat: no-repeat;  
  border: 1xp solid;  
}  
  
ul#navi {  
  position:absolute ;  
  top: 250px;  
  left: 20px;  
  width: 982px;  
  height:53px;  
/*  border: 1px solid; */  
  list-style-type:none;  
}  
  
ul#navi li {  
  padding: 1px 2px 0px 0px;  
  height: 50px;  
  float:left;  
  list-style-type: none;  
}  
  
  
ul#navi a {  
  
/*  display: block;*/  
  padding: 18px 50px 0px 50px;  
  text-decoration: none;  
  float:left;  
  color: #fff;  
  height: 45px;  
  font-size: 13px;  
}  
  
  
ul#navi a:hover {  
  background: url(img/hover.png) repeat-x;  
  text-decoration: none;  
  }  
  
#left {  
  position: absolute;  
  left: 20px;  
  top: 320px;  
  width: 230px;  
  border-right: 1px solid;  
/*border: 1px solid;*/  
}  
  
img#top {  
  position:absolute;  
  left:250px;  
  top:322px;  
  width:800px;  
  height: 18px;  
}  
  
#content {  
 position:absolute;  
 left:250px;  
 top:340px;  
 width:800px;  
 background-image: url(img/bg.png);  
 background-repeat: repeat-y;  
 /*border: 1px solid;*/  
}  
  
#inside {  
 position: absolute;  
 left:10px;  
 top:18px;  
 width: 750px;  
 border: 1px solid;  
}

Die HTML/PHP datei

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
  
  
<head>  
<link rel="stylesheet" href="style.css" type="text/css" />  
<!--<title></title>-->  
</head>  
  
<body>  
<div id='head'></div>  
<? include("navi.htm"); ?>  
<div id='left'><? include("left.htm"); ?></div>  
<img id='top' src="img/top.png" width="800" height="18" border="0" alt="" />  
<div id='content'>  
<div id='inside'>  
<?php  
     if (!isset($_GET[id]))  
     {  
        echo "  
        <head><title>EFO - Home/Neuigkeiten</title></head>  
        <h1>EFO-WEB.DE</h1>  
        ";  
         }  
        if ($_GET[id] == 1) {include("pictures.htm");}  
        if ($_GET[id] == 2) {include("kontakt.htm");}  
        if ($_GET[id] == 3) {include("anfahrt.htm");}  
        if ($_GET[id] == 4) {include("impressum.htm");}  
        ?>  
        </div>  
<!--<img src="img/bottom.png" width="800" height="20" border="0" alt="" />-->  
</div>  
  
</body>  
  
</html>

ich bekomme zwar den textinhalt aber er befindet sich nicht an der stelle wie ich will und in #inside angegeben habe.

Beitrag melden

– Informationen zu den Bewertungsregeln

Mehrere DIV Boxen ineinander
ichen 11.04.2012 22:30

css
– Informationen zu den Bewertungsregeln
Hi Eschy!

ich bekomme zwar den textinhalt aber er befindet sich nicht an der stelle wie ich will und in #inside angegeben habe.

Hast du dir schonmal angesehen, wo du laut #inside deinen Text stehen hast? Nämlich von der oberen linken Ecke des Fensters aus 10px nach links und 18px nach unten...

#inside {
position: absolute;
left:10px;
top:18px;
width: 750px;
border: 1px solid;
}

Versuch mal von dem fixierten Layout (position:absolute) weg zu kommen.

#head {
  position: absolute;
  left: 20px;
  top: 20px;
  height: 300px;
  width: 1024px;
  background-image: url(img/header.png);
  background-repeat: no-repeat;
  border: 1xp solid;
}

Hier tun es auch margin-top/left:20px;

ul#navi {
  position:absolute ;
  top: 250px;
  left: 20px;
  width: 982px;
  height:53px;
/*  border: 1px solid; */
  list-style-type:none;
}

Als Blocklevel-Element ordnet es sich eh unter dem Head an. Wenn es zu weit runter rutscht, dann mit margin-top:-Zahlpx; (neg. margin.top) gegensteuern.

#left {
  position: absolute;
  left: 20px;
  top: 320px;
  width: 230px;
  border-right: 1px solid;
/*border: 1px solid;*/
}

Arbeite mit float und width. Auch hier kannst du mittels margin nachkorrigieren.

img#top {
  position:absolute;
  left:250px;
  top:322px;
  width:800px;
  height: 18px;
}

Auch hier: position:absolute; raus. Wenn float für #left vernünftig gesetzt ist, sollte das Bild fast da sein, wo es hin soll, ansonsten mit margin nachbessern. Gleiches gilt für das nachfolgende:

#content {
position:absolute;
left:250px;
top:340px;
width:800px;
background-image: url(img/bg.png);
background-repeat: repeat-y;
/*border: 1px solid;*/
}

Fixierte Layouts sind zwar "handlich" zu bauen, aber unschön. Lass den Browser die grobe Anordnung selbst machen und korrigiere mit margin.

tschau
ichen

--
Halte deine Umwelt sauber!
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Mehrere DIV Boxen ineinander
  
  Eschy Homepage des Autors 12.04.2012 03:02
  
  css
  – Informationen zu den Bewertungsregeln
  Hi Eschy!
  
  Hast du dir schonmal angesehen, wo du laut #inside deinen Text stehen hast? Nämlich von der oberen linken Ecke des Fensters aus 10px nach links und 18px nach unten...
  
  #inside {
  position: absolute;
  left:10px;
  top:18px;
  width: 750px;
  border: 1px solid;
  }
  
  Versuch mal von dem fixierten Layout (position:absolute) weg zu kommen.
  
  Hier tun es auch margin-top/left:20px;
  
  »»
  
  Als Blocklevel-Element ordnet es sich eh unter dem Head an. Wenn es zu weit runter rutscht, dann mit margin-top:-Zahlpx; (neg. margin.top) gegensteuern.
  
  Arbeite mit float und width. Auch hier kannst du mittels margin nachkorrigieren.
  
  img#top {
    position:absolute;
    left:250px;
    top:322px;
    width:800px;
    height: 18px;
  }
  
  Auch hier: position:absolute; raus. Wenn float für #left vernünftig gesetzt ist, sollte das Bild fast da sein, wo es hin soll, ansonsten mit margin nachbessern. Gleiches gilt für das nachfolgende:
  
  #content {
  position:absolute;
  left:250px;
  top:340px;
  width:800px;
  background-image: url(img/bg.png);
  background-repeat: repeat-y;
  /*border: 1px solid;*/
  }
  
  Fixierte Layouts sind zwar "handlich" zu bauen, aber unschön. Lass den Browser die grobe Anordnung selbst machen und korrigiere mit margin.
  
  tschau
  ichen
  
  ein dickes danke schon einmal. soweit funktioniert alles.. blos gibts noch nen fehler, wenn man das Browserfenster verkleinert, denn da springt dann der ganze container nach unten... Seite
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
Mehrere DIV Boxen ineinander
Der Martin 13.04.2012 10:30

css
– Informationen zu den Bewertungsregeln
Hallo,

Ich habe ein Problem.

ja, sieht so aus.
#content {

position:absolute;
left:250px;
top:340px;
width:800px;
background-image: url(img/bg.png);
background-repeat: repeat-y;
/border: 1px solid;/
}

#inside {
position: absolute;
left:10px;
top:18px;
width: 750px;
border: 1px solid;
}
```
  
Es ist meistens eine schlechte Idee, Elemente mit position:absolute festzukleben. Das braucht man eigentlich nur in Ausnahmefällen.  
  

> ~~~html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  

>     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
>   
> <html xmlns="http://www.w3.org/1999/xhtml">  
>   
>   
> <head>  
> <link rel="stylesheet" href="style.css" type="text/css" />  
>   
> </head>  
>   
> <body>  
> <div id='head'></div>  
> <? include("navi.htm"); ?>  
> <div id='left'><? include("left.htm"); ?></div>  
> <img id='top' src="img/top.png" width="800" height="18" border="0" alt="" />  
> <div id='content'>  
> <div id='inside'>
```
Aha, #inside ist also ein Kindelement des absolut positionierten #content. Woran orientiert sich also die Positionsangabe von #inside? Genau, am Elternelement.

<?php
     if (!isset($_GET[id]))
     {
        echo "
        <head><title>EFO - Home/Neuigkeiten</title></head>
        <h1>EFO-WEB.DE</h1>
        ";
         }

Stop, stop! Wir befinden uns hier längst im body des HTML-Dokuments. Du kannst nicht einfach hergehen und nochmal ein zweites head-Element mitten in den body nageln!

Es ist immer eine gute Idee, sich an das alte EVA-Konzept zu halten (Eingabe, Verarbeitung, Ausgabe). Das heißt, dein PHP-Script sammelt erst alle Eingaben (GET/POST-Parameter, evtl. Session- und Cookie-Daten), zieht dann aus den vorliegenden Daten alle Schlussfolgerungen, erforderliche Berechnungen und so'n Zeugs - und erst zum Schluss, wenn alle Ausgabedaten feststehen, gibst du sie auch tatsächlich aus. Dann ist es auch kein Problem, den Dokumenttitel dynamisch zu machen.

ich bekomme zwar den textinhalt aber er befindet sich nicht an der stelle wie ich will und in #inside angegeben habe.

Dann denk dran, worauf sich die Positionsangaben von #inside beziehen (siehe oben). Und versuch am besten, auf absolute Positionierung weitgehend zu verzichten. Du machst dir die Arbeit damit nur unnötig schwer.

Ciao,
Martin

--
Liebet eure Feinde - vielleicht schadet das ihrem Ruf.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Eschy: Mehrere DIV Boxen ineinander

Mehrere DIV Boxen ineinander

Mehrere DIV Boxen ineinander

Mehrere DIV Boxen ineinander

Mehrere DIV Boxen ineinander

Mehrere DIV Boxen ineinander