Elternelement der größe der kindelemente anpassen von j4nk3y, 29.11.2014 18:17

Elternelement der größe der kindelemente anpassen

j4nk3y 29.11.2014 18:17

html

Servus zusammen,

ich hätte da ein kleines Problemchen, wo ich nicht weiter komme und mir hoffentlich jemand helfen kann.

und zwar geht es mehr oder weniger um die "dynamische" Positionierung von mehreren Elternelementen in Abhängigkeit von der Größe der jeweiligen Kindelemente innerhalb.
Es stellt sich das Problem das egal wie ich versuche in der CSS zu drehen einfach nichts gescheites dabei rum kommt.

zur veranschaulichung:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
          "http://www.w3.org/TR/html4/loose.dtd">  
  
<html>  
<head>  
<title></title>  
<link rel="stylesheet" type="text/css" href="style.css"/>  
<script language="javascript" type="text/javascript" src="java_1.js"></script>  
</head>  
  
<body>  
 <div id="aussen">  
  <div id="anzeige">  
   <p class="h1">  
   &Uumlberschrift:  
   </p>  
   <div class="eintrag">  
    <div class="bild">  
					  
    </div>  
    <div class="info">  
						  
    </div>  
    <p><b>Beschreibung:</b>  
    <a href="javascript:/" onClick="div_change(5)"><img src="minus.jpg" ID="img5" border="0" style="vertical-align:middle"></a><br></p>  
    <div id="5" class="beschreibung">  
    <p>  
    Ganz viel inhalt...<br>  
    Ganz viel inhalt...<br>  
    Ganz viel inhalt...<br>  
    Ganz viel inhalt...<br>  
    Ganz viel inhalt...<br>  
    Ganz viel inhalt...<br>  
    Ganz viel inhalt...<br>  
    Ganz viel inhalt...<br>  
    Ganz viel inhalt...<br>  
    Ganz viel inhalt...  
    </p>  
    </div>  
   </div>  
   <p class="h1">  
   &Uumlberschrift:  
   </p>  
   <div class="eintrag">  
    <div class="bild">  
					  
    </div>  
    <div class="info">						  
						  
    </div>  
    <p><b>Beschreibung:</b>  
    <a href="javascript:/" onClick="div_change(6)"><img src="minus.jpg" ID="img6" border="0" style="vertical-align:middle"></a><br></p>  
    <div id="6" class="beschreibung">  
    <p>  
    Ganz viel inhalt...  
    </p>  
    </div>  
   </div>  
  </div>  
</div>  
</body>  
</html>

dazu mal das wichtige aus der CSS (dazu muss ich sagen ich hab die letzten 2 tage soviel in den entsprechenden Klassen anweisungen rum geschrieben das ich grad nicht weiß welche Version das ist) :

  
#aussen  
{  
height: 99%;  
min-height: 900px;  
width: 99%;  
min-width: 1200px;  
position: absolute;  
}  
  
#anzeige  
{  
outline-width: 1px;  
outline-style: solid;  
height: 94%;  
width: 95%;  
position: absolute;  
left: 2.5%;  
top: 5%;  
overflow: auto;  
}  
  
.eintrag  
{  
outline-width: 1px;  
outline-style: solid;  
height: 20%;  
width: 95%;  
clear: both;  
margin-left: 20px;  
margin-top: 20px;  
padding-bottom: 10px;  
}  
  
.bild  
{  
outline-width: 1px;  
outline-style: solid;  
height: 160px;  
width: 160px;  
float: left;  
margin-left: 10px;  
margin-top: 10px;  
}  
  
.info  
{  
outline-width: 1px;  
outline-style: solid;  
height: 20%;  
width: 70%;  
float: right;  
margin-right: 10px;  
margin-top: 10px;  
}  
  
.beschreibung  
{  
outline-width: 1px;  
outline-style: solid;  
height: 20%;  
width: 70%;  
float: right;  
margin-right: 10px;  
margin-top: 10px;  
}

Zu guter Letzt das JS ( wobei ich hier gern anmerken möchte das zwar das ein und ausklappen super funktioniert aber das Bild sich nicht ändert, falls da jemand eine Idee hat,bitte gern):

  
function div_change(strID)  
{  
    if (document.getElementById(strID).style.display == 'none')  
	{  
        document.getElementById(strID).style.display = 'block'  
        document.getElementById(strID + "_shown").style.display = 'block'  
        document.getElementById(strID + "_hidden").style.display = 'none'  
        document.getElementById("img" + strID).src = 'minus.jpg'  
	}  
	else  
	{  
        document.getElementById(strID).style.display = 'none'  
        document.getElementById(strID + "_shown").style.display = 'none'  
        document.getElementById(strID + "_hidden").style.display = 'block'  
        document.getElementById("img" + strID).src = 'plus.jpg'  
    }  
}

So stellt sich das Problem.
Im voraus vielen dank.

Gruß
Jo

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

j4nk3y: Elternelement der größe der kindelemente anpassen

Beitrag lesen

Elternelement der größe der kindelemente anpassen

Elternelement der größe der kindelemente anpassen