Größe eines übergeordneten div automatisch anpassen von jeff, 19.08.2008 14:12

Größe eines übergeordneten div automatisch anpassen

jeff 19.08.2008 14:12

Hi,

ich habe eine Website mit divs realisiert. Dabei gibt es ein großes übergeordnetes div, in dem alle anderen divs (für Inhalt, Navigation usw.) untergeordnet sind.
Die Höhe des großen divs ist bisher mit einer festen Größe (1000px) definiert. Ist der Inhalt des untergeordneten divs jedoch zu groß, wächst dieses div über das große übergeordnete hinaus.

Wie kann ich das verhindern? Gibt es eine Möglichkeit, dass die Größe des übergeordneten divs von seinem Inhalt abhängt, also die Größe mitwächst?

Beitrag melden

– Informationen zu den Bewertungsregeln

Größe eines übergeordneten div automatisch anpassen
bleicher Homepage des Autors 19.08.2008 14:15

css
– Informationen zu den Bewertungsregeln
Grüße,

Wie kann ich das verhindern? Gibt es eine Möglichkeit, dass die Größe des übergeordneten divs von seinem Inhalt abhängt, also die Größe mitwächst?

indem du auf feste größenangabe verzichtest, oder diese in min-height:1000px; form wandels

allerdings erwartet dich aber der übliche necrosoftluxus.

MFG
bleicher

--
__________________________-
Die versprechen ernsthaft werbefreien hosting?
Beitrag melden

–
Informationen zu den Bewertungsregeln

Größe eines übergeordneten div automatisch anpassen

suit Homepage des Autors 19.08.2008 14:15

– Informationen zu den Bewertungsregeln

ich habe eine Website mit divs realisiert.

wer hat dich dazu angestiftet?

Dabei gibt es ein großes übergeordnetes div, in dem alle anderen divs (für Inhalt, Navigation usw.) untergeordnet sind.

noch mehr divs?

Die Höhe des großen divs ist bisher mit einer festen Größe (1000px) definiert. Ist der Inhalt des untergeordneten divs jedoch zu groß, wächst dieses div über das große übergeordnete hinaus.
Wie kann ich das verhindern? Gibt es eine Möglichkeit, dass die Größe des übergeordneten divs von seinem Inhalt abhängt, also die Größe mitwächst?

wenn seine kindelement im textfluss sind, ist das kein problem - ich vermute aber, du hast alles absolut positioniert - da gibts per css keine möglichkeit

aber ohne irgendwelchen code kann man dir nicht helfen, deine problembeschreibung sieht in etwas so aus:

"div, div, div, div, 1000px hoch, div, problem!"

Beitrag melden

– Informationen zu den Bewertungsregeln

Größe eines übergeordneten div automatisch anpassen

jeff 19.08.2008 14:43

– Informationen zu den Bewertungsregeln

index.php:

<?php  
    ...  
  
    echo "<body background=\"images/site/background.gif\">\n";  
  
    echo "      <div class=\"big_div\" id=\"big_div\">\n";  
    echo "              <div style=\"float:left\" class=\"symbol\">&nbsp;</div>\n";  
    echo "              <div style=\"float:left\" class=\"headline\"><font color=\"#F5F5F5\">CODING MONKEYS IMPERIUM</font></div>\n";  
  
    echo "          <div class=\"index\" id=\"inhalt_frame\">\n";  
    include "content/site/content.php";  
    echo "          </div>\n";  
  
    echo "          <div class=\"navigation\" id=\"navigation\">\n";  
    include "navigation.html";  
    echo "          </div>\n";  
  
    echo "          <div class=\"bottomline\">\n";  
    echo "              <i>Optimiert f&uuml;r Mozilla Firefox 2.x/3.x, Safari 3.x</i>&nbsp;&nbsp;|\n";  
    echo "              <a href=\"index2.html\" title=\"-->1280x1024\" class=\"navminiLink\">1024x768</a>&nbsp;&nbsp;|&nbsp;&nbsp;Diego Jahn&nbsp;|&nbsp;Max Schumann&nbsp;|&nbsp;\n";  
    echo "              <script type=\"text/javascript\">\n";  
    echo "                  var jetzt = new Date();\n";  
    echo "                  var Monat = jetzt.getMonth();\n";  
    echo "                  var Jahr  = jetzt.getFullYear();\n";  
    echo "                  var Tag = jetzt.getDate();\n";  
    echo "                  var Stunde = jetzt.getHours();\n";  
    echo "                  var Minute = jetzt.getMinutes();\n";  
    echo "                  if (Monat < 10) {\n";  
    echo "                      document.write(Tag + \".0\" + Monat + \".\" + Jahr + \" | \" + Stunde + \":\" + Minute + \" Uhr\");\n";  
    echo "                  }\n";  
    echo "                  if (Monat > 9) {\n";  
    echo "                      document.write(Tag + \".\" + Monat + \".\" + Jahr + \" | \" + Stunde + \":\" + Minute + \" Uhr\");\n";  
    echo "                  }\n";  
    echo "              </script>\n";  
    echo "              &nbsp;|&nbsp;<a href=\"#top\" class=\"navminiLink\">nach oben</a>\n";  
    echo "          </div>\n";  
    //echo "            <br style=\"clear:both;\" />\n"; // css-float beenden  
    echo "      </div>\n";  
  
    echo "</body>\n";  
    echo "</html>\n";  
?>

css für big_div:

div.big_div {  
  
font-family:Arial;  
position:relative;top:0;  
border-style:none;  
/*---800px/1000px---*/  
width:800px;  
min-height:1000;  
background-color:F7F7F7;  
margin:0 auto 0 auto;  
}

css für das div mit dem inhalt:

div.index {  
  
position:absolute;top:140px;left:220px;  
border-style:solid;  
border-color:#59607A;  
border-width:1px;  
font-family:Arial;  
/*---510px/712px---*/  
width:510px;  
padding:20px;  
margin-bottom:20px;  
min-height:690px;  
background-color:/*#F4F4F4*/#EDEDED;  
}

Beitrag melden

– Informationen zu den Bewertungsregeln

Größe eines übergeordneten div automatisch anpassen

suit Homepage des Autors 19.08.2008 14:54

– Informationen zu den Bewertungsregeln

index.php:

verlinke bitte den code, der im browser ankommt - serverseitiger code ist bei einem clientseitigen problem (darstellung im browser) nicht relevant

dennoch hat deine seite wie vermutet nicht viel mit css zu tun:
anstatt text-transform zu nutzen schreibst du gross, du nutzt   als formatierungswerkzeug usw

die absolute positionierun (wie vermutet) scheint dein problem zu sein, damit nimmst du das element mit der klasse index aus dem textfluss

Beitrag melden

– Informationen zu den Bewertungsregeln

Größe eines übergeordneten div automatisch anpassen

jeff 19.08.2008 15:05

– Informationen zu den Bewertungsregeln

Wie man das wohl dem Quelltext entnehmen kann, ist das alles nur ein Hobby und nicht gerade sauber programmiert...
Ich möchte eh nochmal das ganze css überarbeiten (auch wenn es "nicht viel mit css zu tun hat"). deswegen wäre ich über ein paar hinweise sehr dankbar.
muss nur die klasse index im textfluss mit eingebunden sein, damit big_div seine größe ändert?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd"  

><html>  

      <head>  
          <title>CODING MONKEYS IMPERIUM - Max Schumann, Diego Jahn</title>  
          <link rel="stylesheet" href="css/website_css.css" type="text/css">  
          <link rel="shortcut icon" type="image/x-icon" href="monkey_icon2.ico">  
          <meta name="author" content="Diego Jahn, Max Schumann">  
          <meta name="keywords" lang="de" content="Diego Jahn, Max Schumann, Coding Monkeys Imperium, CMI">  
      </head>  
<body background="images/site/background.gif">  
      <div class="big_div" id="big_div">  
              <div style="float:left" class="symbol">&nbsp;</div>  
              <div style="float:left" class="headline"><font color="#F5F5F5">CODING MONKEYS IMPERIUM</font></div>  
          <div class="index" id="inhalt_frame">  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  
<html>  
<head>  
 <title>MS.DJ</title>  
 <link rel="stylesheet" href="website_css.css" type="text/css">  
</head>  
  
<body>  
  
<h1 align="center">Herzlich Willkommen!!</h1>  
  
<p>Diese Website ist zur Zeit noch im Aufbau. Sie dient momentan noch zur Pr&auml;sentation von Arbeitsergebnissen.</p>  
<p>Aktuell: Projektwoche am <a href="http://mcg-dresden.de" title="Homepage des MCG" target="_blank">Marie-Curie-Gymnasium Dresden</a> vom 16.06.-20.06.2008 zum Thema <a href="?section=morphin" title="Artikel lesen">Arzneimittel: Morphin</a>.</p>  
  
<div align="center"><a href="images/site/cmi.png"><img src="images/site/cmi.png" width="385" height="346" border="0"></a></div>  
<br>  
<p><b>Viel Spa&szlig; w&uuml;nscht Ihnen das C.M.I.!</b></p>  
  
<div align="right" border="3" border-color="red" title="Beta-Version" position:absolute;bottom:0px;>  
<br><br><br><br><br><br>  
<a href="beta/b_startseite.html">  
.  
</href></div>  
  
</body>  
  
</html>          </div>  
          <div class="navigation" id="navigation">  
<html>  
<head>  
<title></title>  
<link rel="stylesheet" href="website_css.css" type="text/css">  
  
</head>  
<script>  
g_lastSelectedMenu="";  
  
function load_projekte() {document.getElementById('inhalt_frame').src="projekte.html?random"+Math.random();}  
function toggleMenuArea(menuPointID)  
{  
  
 if(g_lastSelectedMenu!="" && g_lastSelectedMenu!=menuPointID)  
 {  
  document.getElementById(g_lastSelectedMenu).style.display="none";  
 }  
  
  
  
 if(document.getElementById(menuPointID).style.display=="none")  
 {  
  document.getElementById(menuPointID).style.display="block";  
 }  
 else  
 {  
  document.getElementById(menuPointID).style.display="none";  
 }  
  
 g_lastSelectedMenu=menuPointID;  
}  
</script>  
<body>  
  
  
  
<!--inhalt-->  
  
<div class="sub_navi_top">  
  
<h1 class="ueberschrift_navigation">Themen&uuml;bersicht</h1>  
</div>  
  
<div class="sub_navi">  
        <a href="?section=startseite" title="Startseite" class="navLink">  
        <img src="images/site/dreieck.png" height="10px" width="10px" hspace="5px" border="0">Startseite</a>  
        <p>  
</div>  
  
<!--div class="sub_navi">  
        <a href="startseite.html" target="inhalt_frame" title="Startseite" class="navLink">  
        <img src="images/site/dreieck.png" height="10px" width="10px" hspace="5px" border="0">Startseite</a>  
        <p>  
</div-->  
  
  
<div id="menu1" class="sub_navi"  
   onclick="toggleMenuArea('submenu1')"  
   style="cursor:pointer"><a href="#" title="Projekte">  
   <img src="images/site/dreieck.png" height="10px" width="10px" hspace="5px" border="0">  
   <a href="#" class="navLink">Projekte</a></div>  
  
  
<div id="submenu1" style="display:none">  
  
<div class="sub_navi_hidden">  
        <a href="?section=bionik" title="Bionik" class="navLink">  
        <img src="images/site/dreieck.png" height="10px" width="10px" hspace="5px" border="0">Bionik</a>    <!--untermenue bionik-->  
        <p>  
</div>  
  
<div class="sub_navi_hidden">  
        <a href="?section=morphin" title="Morphin" class="navLink">  
        <img src="images/site/dreieck.png" height="10px" width="10px" hspace="5px" border="0">Morphin</a>   <!--untermenue morphin-->  
        <p>  
</div>  
  
<div class="sub_navi_hidden">  
        <a href="?section=schnittstellen" title="Schnittstellen" class="navLink">  
        <img src="images/site/dreieck.png" height="10px" width="10px" hspace="5px" border="0">Schnittstellen</a>    <!--untermenue schnittstellen-->  
        <p>  
</div>  
  
<!--div style="cursor:pointer">Morphin</div>  
<div style="cursor:pointer">Schnittstellen</div>  
<div style="cursor:pointer">Unter menu4</div-->  
  
</div>  
  
<!--div class="sub_navi">  
        <a href="#" onclick="top.load_bionik()" title="Bionik" class="navLink">  
             <img src="images/site/dreieck.png" height="10px" width="10px" hspace="5px" border="0">Morphin</a>  
        <p>  
</div>  
  
<div class="sub_navi">  
        <a href="#" onclick="top.load_morphin()" title="Morphin" class="navLink">  
             <img src="images/site/dreieck.png" height="10px" width="10px" hspace="5px" border="0">Morphin</a>  
        <p>  
</div>  
  
<div class="sub_navi">  
             <a href="#" onclick="top.load_schnittstellen()" title="Schnittstellen" class="navLink">  
             <img src="images/site/dreieck.png" height="10px" width="10px" hspace="5px" border="0">Schnittstellen</a>  
                <p>  
</div-->  
  
<div class="sub_navi_bottom">  
        <a href="?section=impressum" title="Impressum" class="navLink">  
             <img src="images/site/dreieck.png" height="10px" width="10px" hspace="5px" border="0">Impressum</a>  
        <p>  
</div>  
  
</body>  
</html>          </div>  
          <div class="bottomline">  
              <i>Optimiert f&uuml;r Mozilla Firefox 2.x/3.x, Safari 3.x</i>&nbsp;&nbsp;|  
              <a href="index2.html" title="-->1280x1024" class="navminiLink">1024x768</a>&nbsp;&nbsp;|&nbsp;&nbsp;Diego Jahn&nbsp;|&nbsp;Max Schumann&nbsp;|&nbsp;  
              <script type="text/javascript">  
                  var jetzt = new Date();  
                  var Monat = jetzt.getMonth();  
                  var Jahr  = jetzt.getFullYear();  
                  var Tag = jetzt.getDate();  
                  var Stunde = jetzt.getHours();  
                  var Minute = jetzt.getMinutes();  
                  if (Monat < 10) {  
                      document.write(Tag + ".0" + Monat + "." + Jahr + " | " + Stunde + ":" + Minute + " Uhr");  
                  }  
                  if (Monat > 9) {  
                      document.write(Tag + "." + Monat + "." + Jahr + " | " + Stunde + ":" + Minute + " Uhr");  
                  }  
              </script>  
              &nbsp;|&nbsp;<a href="#top" class="navminiLink">nach oben</a>  
          </div>  
      </div>  
</body>  
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

Größe eines übergeordneten div automatisch anpassen
suit Homepage des Autors 19.08.2008 15:25

css
– Informationen zu den Bewertungsregeln
Wie man das wohl dem Quelltext entnehmen kann, ist das alles nur ein Hobby und nicht gerade sauber programmiert...

grade wenns dein hobby ist, solltest du doch etwas idealismus reinstecken - wenn du das ganze nicht sauber machst und einfach nur hinrotzt kann das garnix

Ich möchte eh nochmal das ganze css überarbeiten (auch wenn es "nicht viel mit css zu tun hat"). deswegen wäre ich über ein paar hinweise sehr dankbar.
muss nur die klasse index im textfluss mit eingebunden sein, damit big_div seine größe ändert?

ich fürchte der generierte quelltext ist so nicht brauchbar - du hast zb 3 schliessende </html>-tags

ich würde vorschlagen, du beginnst gleich sauber mit dem http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title=grundgerüst und erstellst darauf basierend ein <http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=css-basierendes layout> mit semantischem code

wenn das layout dann steht, kümmere dich um den dynamischen teil (mit php) um exakt diesen code zu generieren

mit deinem code ist eine fehlersuche bzw eine fehlerbehebung äusserst sinnlos
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Größe eines übergeordneten div automatisch anpassen
  
  jeff 19.08.2008 15:36
  
  css
  – Informationen zu den Bewertungsregeln
  danke für den link zum css-basierendem layout. ich werde versuchen meine seite den standards entsprechend völlig neu aufzuarbeiten. ich arbeite aber wohl in einem völlig anderem bereich von "professionalität" als du. aber man muss ja auch nicht so bewanderten leuten eine chance geben.
  
  so, wie die website jetzt erstmal aussieht, wollte ich sie haben. auch wenn sie "nicht brauchbar" ist, habe ich erstmal ne vorstellung, wie so was am ende samt "sauberem" quelltext (dafür muss ich noch sorgen) aussehen könnte.
  
  danke...hat sehr geholfen.
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Größe eines übergeordneten div automatisch anpassen
    
    suit Homepage des Autors 19.08.2008 16:02
    
    css
    
    – Informationen zu den Bewertungsregeln
    ich arbeite aber wohl in einem völlig anderem bereich von "professionalität" als du.
    
    grade wenn du etwas als hobby betreibst, willst du es ja gut machen und es soll dir freude bereiten - etwas idealistisch muss man halt sein
    
    stell dir einen modellbauer vor, dem seine wirklichkeitsgetreuen modelle mit falschen maßen nachbaut oder nicht wirklichkeitsgetreut bemalt - das würde kein idealist tun
    
    aber man muss ja auch nicht so bewanderten leuten eine chance geben.
    
    darum hab ich dir die links gegeben, schwer ist es nicht ;)
    
    auch wenn sie "nicht brauchbar" ist, habe ich erstmal ne vorstellung, wie so was am ende samt "sauberem" quelltext (dafür muss ich noch sorgen) aussehen könnte.
    
    das problem an deinem code ist, dass er vollig an den standards vorbei geht - jeder browser machts also mit seiner fehlerkorrektur "irgendwie" - und das "irgendwie" ist nicht definiert, somit hast du im schlimmsten fall in jedem browser eine andere darstellung - im idealfall mit viel glück siehts wie gewünscht aus - aber das ist eben kein kontrollierbarer faktor mehr
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum

Größe eines übergeordneten div automatisch anpassen
jeff 19.08.2008 15:24

css
– Informationen zu den Bewertungsregeln
die absolute positionierun (wie vermutet) scheint dein problem zu sein, damit nimmst du das element mit der klasse index aus dem textfluss

super...also das hat schon weitergeholfen.
einziges problem: das übergeordnete div ist nun exakt genauso groß wie das untergeordnete. ein rand wäre gut, also dass das übergeordnete div immer ein paar pixel größer ist als das untergeordnete.

wenn das noch stimmt, wäre mein problem gelöst.
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Größe eines übergeordneten div automatisch anpassen
  
  suit Homepage des Autors 19.08.2008 15:26
  
  css
  – Informationen zu den Bewertungsregeln
  einziges problem: das übergeordnete div ist nun exakt genauso groß wie das untergeordnete. ein rand wäre gut, also dass das übergeordnete div immer ein paar pixel größer ist als das untergeordnete.
  
  für ränder sowie innen- und aussenabstände ist "border", "padding" und "margin" zuständig
  
  wenn das noch stimmt, wäre mein problem gelöst.
  
  das wird dein problem nicht lösen, da du code verwendest, der fernab von gültigem html ist - jede gewünschte darstellung ist reine glückssache, siehe dazu meinen anderen post
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

jeff: Größe eines übergeordneten div automatisch anpassen

Größe eines übergeordneten div automatisch anpassen

Größe eines übergeordneten div automatisch anpassen

Größe eines übergeordneten div automatisch anpassen

Größe eines übergeordneten div automatisch anpassen

Größe eines übergeordneten div automatisch anpassen

Größe eines übergeordneten div automatisch anpassen

Größe eines übergeordneten div automatisch anpassen

Größe eines übergeordneten div automatisch anpassen

Größe eines übergeordneten div automatisch anpassen

Größe eines übergeordneten div automatisch anpassen

Größe eines übergeordneten div automatisch anpassen

Größe eines übergeordneten div automatisch anpassen