Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Höhe von einem DIV-Layer relativ zum nachfolgenden DIV

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Höhe von einem DIV-Layer relativ zum nachfolgenden DIV

    Hallöchen...

    gibts eine Möglichkeit die Höhe von einem DIV-Layer abhängig von einem anderen DIV-Layer zu machen?

    ich hab folgendes:
    Code:
    <body>
    
    	<div id="titel">
    		[img]biller/logo.gif[/img]
    		<div id="kuerf">
    			{KUERF}
    		</div>
    	</div>
    
    	<div id="navi">
    		{KATEGIREN}
    	</div>
    
    	<div id="main">
    		{HAAPTDEEL}
    	</div>
    
    </body>
    Und "navi" soll genau so hoch sein wie "main"

    hab die zwei auch schon ineinander verschachtelt, aber irgendwie haut's nicht hin

    Ich hab auch schon etwas im Forum rumgestöbert, aber irgendwie krieg ich die richtigen Suchbegriffe nicht zusammen...

    Bin über jeden Hinweis dankbar!


  • #2
    nein, das geht nicht. Wenn es um Farben gibt, dann kann man das mit einem Trick erreichen, den ich vor kurzem schon einmal in diesem Forum beschrieben haben. Aber Divs sind halt keine Tabellen! (und das ist auch gut so )

    Kommentar


    • #3
      Sollen die beiden nebeneinander sein, oder warum soll eine Navigation genauso groß sein wie der Hauptteil direkt darunter?
      Falls nebeneinander:
      <div>-Container um beide, beide innerhalb bekommen 100% Höhe, der Inhalt drückt den eigenen und äußeren Container auf und da 100% festgelegt ist, sind beide inneren gleichgroß.

      Kommentar


      • #4
        Genau, die zwei sind nebeneinander...
        aber das mit dem div drumrum will nicht so ganz...
        Hier mal meine CSS-Definitionen

        Code:
        #titel
        {
        	margin-top:			0px;
        	position:			fixed;
        	height:				95px;
        	width:				100%;
        	padding:			0px 5px;
        	border-bottom:		1px solid #000000;
        	background-color:	#600000;
        	text-align : 		left;
        	left:				5px;
        	z-index:			1;
        }
        #navi
        {
        	font-family:		Georgia;
        	margin-top : 		95px;
        	margin-left:		0px;
        	position : 			absolute;
        	left:				5px;
        	width:				200px;
        	
        	line-height:		18px;
        	background-color:	#800000;
        	height:				100%;
        	text-align : 		left;
        	padding-left:		2px;
        	padding-top:		5px;
        	font-size:			11px;
        	border-right:		1px solid #000000;
        	z-index:			0;
        	border:1px solid green;
        }
        #main
        {
        	font-family:		Georgia;
        	font-size:			14px;
        	margin-top : 		95px;
        	margin-bottom:		50px;
        	margin-left:		203px;
        	width:				650px;
        	float:				left;
        	text-align : 		left;
        	padding:			5px;
        	height:				100%;
        	border:1px solid white;
        }
        #kuerf
        {
        	position:			fixed;
        	right:				0px;
        	height:				87px;
        	top:				0px;
        	padding:			2px 5px 1px 0px;
        	margin:				0px;
        	width:				170px;
        	text-align:			right;
        	font-size:			10px;
        	font-family:		Verdana;
        }
        hier noachmal das komplette template:

        Code:
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
        <html>
        <head>
        	{REDIRECT}
        	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        	
        	{JS}
        	
        	<title>{TITLE}</title>
        	
        </head>
        <body>
        
        	
        	<div id="titel">
        		[img]biller/logo.gif[/img]<span style="position:absolute;margin-top:0px;">[img]biller/titel.gif[/img]
        
        		<table border="0" width="650" cellspacing="0px" style="position:absolute;margin-top:17px;font-size:15px;padding:0px 3px;border:1px;">
        			<tr>
        				<td style="vertical-align:bottom;">
        					Suche
        				</td>
        				<td style="vertical-align:bottom;">				
        					AGB
        				</td>
        				<td style="vertical-align:bottom;">	
        					Impressum
        				</td>
        				<td style="vertical-align:bottom;">	
        					Datenschutz
        				</td>
        				<td style="vertical-align:bottom;">
        					Kontakt
        				</td>
        				<td style="vertical-align:bottom;">
        					Login
        				</td>
        				<form action="sichen.php5" method="GET" class="mini">
        				<td style="vertical-align:bottom;" align="right">
        					
        					<span class="mini" style="text-align:right;">Stichwort:</span>
        				</td>
        				<td style="vertical-align:bottom;" >	
        					<input type="text" name="s_text" class="mini" />
        				</td>
        			
        				<td colspan="2" align="center"  style="vertical-align:bottom;">	
        					<input type="submit" name="submit" value="Suchen" class="mini_button" />
        					
        				</td>
        				</form>
        			</tr>
        		</table>
        		<div id="kuerf">
        			{KUERF}
        		</div>
        	</div>
        	<div style="border:1px solid blue;padding:3px;" width="800px">
        		<div id="navi">
        			{KATEGIREN}
        		</div>
        
        		<div id="main">
        			{HAAPTDEEL}
        		</div>
        	</div>
        </body>
        </html>
        der div mit dem blauen rand um "navi" und "main" ist auch gar nicht drumrum
        der hängt oben und ist etwa 5 pixel hoch

        oh mann, ich wollt ich würd css wenigstens etwas beherrschen

        //edit: hab nur die mail-addresse rausgestrichen

        Kommentar


        • #5
          Zitat von Zergling
          <div>-Container um beide, beide innerhalb bekommen 100% Höhe, der Inhalt drückt den eigenen und äußeren Container auf und da 100% festgelegt ist, sind beide inneren gleichgroß.
          Das ist nach meinen Erfahrungen ein Wunschdenken und funktioniert leider in der Praxis nicht.

          Kommentar


          • #6
            Du kannst hinbekommen, dass es so aussieht, dass sie beide gleich hoch wären aber real werden sie es nicht sein.
            Code:
            <div style="width: 800px; background: url('./img/hintergrund.für.beide.divs.png');">
            	<div style="width: 200px; float: left;">linkes div</div>
            	<div style="width: 600px; float: right;">rechtesDiv</div>
            	<div style="clear: both; width: 100%; height: 0px; overflow: hidden;">
            	<!--
            		- um beim floaten im Firefox das umschließende div auseinanderzuziehen
            		- das wird sonst auf height 0px reduziert und du siehst halt das Hintergrundimg nicht
            	 -->
            	</div>
            </div>
            Gruß
            Der Desian
            Wenn dich was ankotzt, machs besser.

            Kommentar


            • #7
              Zitat von lomtas
              Zitat von Zergling
              <div>-Container um beide, beide innerhalb bekommen 100% Höhe, der Inhalt drückt den eigenen und äußeren Container auf und da 100% festgelegt ist, sind beide inneren gleichgroß.
              Das ist nach meinen Erfahrungen ein Wunschdenken und funktioniert leider in der Praxis nicht.
              ???

              Kommentar


              • #8
                das klappert alles irgendwie nicht

                so wie's der Desian gemacht hat wird bei nur das umschliessende div "aufgebläht", das linke bleibt so gross wie der Inhalt. Auch wenn height=100% bei den Inneren angegeben ist.

                lomtas scheint recht zu haben...

                Kommentar


                • #9
                  Habs auch mal versucht. Scheint zu funktionieren:

                  PHP-Code:
                  <?php
                  <html>
                  <
                  head>
                  <
                  title>Untitled Document</title>
                  <
                  meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                  <
                  style type="text/css">
                  <!--
                  .
                  left {
                      
                  margin5px;
                      
                  padding5px;
                      
                  floatleft;
                      
                  height97%;
                      
                  width150px;
                      
                  background-colorgray;
                  }
                  .
                  main {
                      
                  margin5px;
                      
                  padding5px;
                      
                  floatright;
                      
                  height97%;
                      
                  width500px;
                      
                  background-colorgray;

                  }
                  .
                  container {
                              
                  width700px;
                              
                  height100%;
                              
                  border1px solid gray;
                              
                  margin5px;
                              
                  margin-leftauto;
                              
                  margin-rightauto;
                              
                  padding5px;
                          }
                  -->
                  </
                  style>
                  </
                  head>

                  <
                  body>
                  <
                  div class="container">
                  <
                  div class="left">test</div>
                  <
                  div class="main">content</div>
                  </
                  div>
                  </
                  body>
                  </
                  html>

                  ?>
                  Getestet mit FF 1.5
                  Und geht auch alles in die Binsen, immer heftig weiter grinsen!

                  Kommentar


                  • #10
                    Huhu juhuwoorps,

                    mach doch mal etwas text in den rechten, dass mehr als eine bildschirmansicht gefüllt ist... dann sieht's nicht mehr so doll aus , leider

                    ich hab's jetzt so hingemogelt, dass der "drumrum" die gleiche Breite, Farbe, etc hat wie der linke. Der linke hat height: auto; sodass dort immer dem content angepasst wird.
                    wird der rechte jetzt grösser, wird der "drumrum" aufgezogen.

                    ist nicht ganz wie ich's mir vorgestellt hatte aber, naja, immerhin!

                    Kommentar


                    • #11
                      genau und das ist das einzige was funktioniert.

                      Kommentar

                      Lädt...
                      X