Bild im gefloateten div vertikal ausrichten?

Fiberman · 11.03.07, 14:04

Hallo,

ich bin mal wieder auf die Hilfe von euch angewiesen.

Wie kann ich das Bild in dem linken DIV Container vertikal ausrichten?Der Container links soll auch die gleiche Höhe haben wie der Container rechts.

            
                    HTML-Code:
                  
                   	<div style="float:left;">
  <a href="link"><img src="quelle" border="0" alt="besch" /></a>
</div>
<div style="float:right;">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
</div>

Danke für die Hilfe Gruß Fiberman

FabianKliem · 13.03.07, 17:50

Da musst du eigentlich doch nur ein align:vertical reinschreiben.
Wenn du willst das das andere div auf der selben Höhe ist gibt es da eine Einstellung, das die sich im Bezug aufeinander anordnen...wenn dir das nicht reicht kann ich dir den Code geben...

**Maik** · 13.03.07, 17:56

Hi,

für ein mehrspaltiges Layout, dessen Spaltenhöhen sich immer der benachbarten Spalte automatisch angleichen, empfehle ich dir http://www.cssplay.co.uk/layouts/3cols.html.

Wenn du die Grafik im DIV vertikal zentrieren möchtest, und die Grafikhöhe bekannt ist, könnte folgendes Stylesheet weiterhelfen:

            
                    Code:
                  
                   	a img {
position: relative;
top: 50%;
height: 70px; /* Grafikhöhe */
margin-top: -35px; /* negative Hälfte von height:70px */
}

            
                    Code:
                  
                   	<div style="float:left;height:200px;border:1px solid #000;">
  <a href="link"><img src="quelle" border="0" alt="besch" /></a>
</div>

@FabianKliem: align:vertical gibt es nicht, und vertical-align:middle bzw. vertical-align:bottom funktioniert hier nicht.

Eiszwerg · 17.03.07, 21:47

Muss diesen Thread nochmal aufgreifen, da auch ich gerade ein Problemchen damit habe, mein Menü in einem 60px hohem DIV als bottom zu positionieren.

Zitat:

@FabianKliem: align:vertical gibt es nicht, und vertical-align:middle bzw. vertical-align:bottom funktioniert hier nicht.

Wieso funktioniert das nicht? Gemerkt hab ich das auch schon, aber warum ist dem so?

Danke schön!

**Maik** · 17.03.07, 21:54

Hi,

das Menü lässt sich folgendermaßen am unteren Elementrand positionieren:

            
                    Code:
                  
                   	div#parent {
position: relative;
height: 60px;
border: 1px solid #000;
}

div#menu {
position: absolute;
bottom: 0;
}

            
                    Code:
                  
                   	<div id="parent">
     <div id="menu">menu</div>
</div>

Eiszwerg · 17.03.07, 22:02

Hmm... ich danke Dir soweit.
Aber magst Du mir zuliebe ein paar erklärende Worte dazu verlieren?
SELFHTML hat mich bzgl. "position" nicht wirklich schlauer gemacht. Was genau passiert da?

**Maik** · 17.03.07, 22:07

Um das DIV #menu innerhalb des DIV #parent absolut positionieren zu können, muss dieses relativ positioniert sein.

Eiszwerg · 17.03.07, 22:09

Okay... dann werd ich mir noch mal Infos bzgl. relative und absolute holen... Danke Dir