Zu den Aufzeichnungen der tutorials.de-Live-Workshops
ERLEDIGT
JA
ANTWORTEN
7
ZUGRIFFE
7018
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. #1
    Fiberman Fiberman ist offline Mitglied Bronze
    Registriert seit
    Feb 2004
    Beiträge
    38
    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
     

  2. #2
    Registriert seit
    Aug 2004
    Beiträge
    227
    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...
     

  3. #3
    Maik Tutorials.de Gastzugang
    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 :
    1
    2
    3
    4
    5
    6
    
    a img {
    position: relative;
    top: 50%;
    height: 70px; /* Grafikhöhe */
    margin-top: -35px; /* negative Hälfte von height:70px */
    }
    Code :
    1
    2
    3
    
    <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.
     

  4. #4
    Registriert seit
    Oct 2002
    Ort
    Eckernförde, S.-H.
    Beiträge
    617
    Muss diesen Thread nochmal aufgreifen, da auch ich gerade ein Problemchen damit habe, mein Menü in einem 60px hohem DIV als bottom zu positionieren.

    @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!
     

  5. #5
    Maik Tutorials.de Gastzugang
    Hi,

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

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    div#parent {
    position: relative;
    height: 60px;
    border: 1px solid #000;
    }
     
    div#menu {
    position: absolute;
    bottom: 0;
    }

    Code :
    1
    2
    3
    
    <div id="parent">
         <div id="menu">menu</div>
    </div>
     

  6. #6
    Registriert seit
    Oct 2002
    Ort
    Eckernförde, S.-H.
    Beiträge
    617
    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?
     

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

  8. #8
    Registriert seit
    Oct 2002
    Ort
    Eckernförde, S.-H.
    Beiträge
    617
    Okay... dann werd ich mir noch mal Infos bzgl. relative und absolute holen... Danke Dir
     

Ähnliche Themen

  1. Vertikal ausrichten
    Von EGJSoldier im Forum CSS
    Antworten: 4
    Letzter Beitrag: 01.03.10, 19:14
  2. Text im gefloateten div ausrichten
    Von Fiberman im Forum CSS
    Antworten: 2
    Letzter Beitrag: 08.03.07, 10:34
  3. Text Vertikal ausrichten
    Von LoMo im Forum CSS
    Antworten: 2
    Letzter Beitrag: 10.07.06, 14:35
  4. Antworten: 9
    Letzter Beitrag: 24.03.06, 08:13
  5. CSS Layout; vertikal ausrichten
    Von fjordblauer im Forum CSS
    Antworten: 11
    Letzter Beitrag: 19.01.05, 13:08