margin-top problem

[Isery]

[HTML]

[/HTML]Hallo

<div id="foto" style="display: none" class="inhalt">
		     
		     <div class="divbilder">

   					<img src="portrait.jpg" alt="">
		    </div>
		    <div class="divbilderbeschreibung" >

  					asdjf
  		    </div>

		     <div class="text">

Das ineressante ist das divbilder und divbilder ein margin top haben und es funktioniert...ich will aber auch ein margin top für div text...dort funktioniert es aber nicht! Weis wer warum?

.divbilder {
	
	
	color:white;
	background:black;
	margin-left:20px;
	margin-top:35px;
	margin-bottom:5px;
	float: left;
	width: auto; 
	height: auto; 
	border: 1px solid silver; 
	

}

.divbilderbeschreibung {
	
	color:white;
	background:black;
	float: left;
	margin-left:50px;
	margin-top:75px;
	height: auto;
	width:50%;		
	border: 1px solid silver; 
	
}

.text {

	clear:both;
	background:black;
	width:80%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	margin-top:250px;
}

 

[vast]

Eigentlich dürfte man da gar nichts sehen... es sei denn, du machst evtl das div #foto nicht zu...

Am besten mal dein ganzes HTML posten, so kommen wir nicht weit...heitere Raterunde

 

[Isery]

     <div id="foto" style="display: none" class="inhalt">
		     
		     <div class="divbilder">
   					<img src="portrait.jpg" alt="">
				</div>
				<div class="divbilderbeschreibung" >
  					 <p><strong>" 640K ought to be enough for anybody "
</strong><br><br>Bill Gates, 1981 </p>
  					 
				</div>
		     <div class="text">
		     <div class="fotoheader" id="fotoheader1" >Frankreich</div>
</div>
</div>

Uploaded with ImageShack.us

Man erkennt das die beiden grau hinterlegten divs ein margin top haben das funktioniert nur das rote nicht....

 

[Isery]

Kann es sein da die beiden oberen gefloatet sind das deshalb der bezugspunkt fehlt?

 

[vast]

tja. bin immer noch konfus:

        <div id="foto" style="display: none" class="inhalt">
            ...
        </div>

..eigentlich dürfte man gar nichts von div#foto sehen können, das "display:none" versteckt das ganze Ding samt Inhalt.
vielleicht doch nicht der aktuelle code...

Ich vermute allerdings, das die floats nicht korrekt gecleart wurden.

versuch mal:

<div id="foto" class="inhalt">
      <div class="divbilder">
        <img src="portrait.jpg" alt="" />
      </div>
      <div class="divbilderbeschreibung">
        <p>
          <strong>" 640K ought to be enough for anybody "</strong>
          <br />
          <br />
          Bill Gates, 1981
        </p>
      </div>
      <div style="clear:both;"></div>
      <div class="text fotoheader" id="fotoheader1">
        Frankreich
      </div>
    </div>

Mehr Informationen zu clearing floats zB hier.
(Bestimmt hat jemand noch einen besseren Link parat, da ich aber hauptsächlich englische Seiten lese, habe ich auf die Schnelle nichts besseres gefunden)


Dort wirst du auch erfahren, dass meine oben angewendete Methode nicht unbedingt die Beste ist, zB wegen unnötigem markup (<div class="clear"></div>).
Für den Anfang aber evtl vom Verständnis her einfacher.

hilft das weiter?

 

[Isery]

Ja das schon weiter geholfen! Ich habe zuerst unten einfach einen neuen div erstellt und dann begrifen das ich die beiden clearen muss.

Wenn ich z.b: einen leeren div habe und in diesen div noch einen reinstecke...warum nimt der übergeordnete div nicht automatisch die größe des untergeordneten an?


Vielen dank trotzdem

 

[Isery]

Und das Display:none hat was mit meinen Javascript zu tun...das erst ausgeblented und danach wieder ein...da mach dir keine sorgen!

 

[vast]

Und das Display:none hat was mit meinen Javascript zu tun...das erst ausgeblented und danach wieder ein...​

ah, ok, jetzt verstehe ich.

Wenn ich z.b: einen leeren div habe und in diesen div noch einen reinstecke...warum nimt der übergeordnete div nicht automatisch die größe des untergeordneten an?

Eigentlich ist das auch so - es sei denn, es floated oder hat position:absolute.

 

[Isery]

Alles verstanden =)

Vielen Dank