Hallo Leute,

ich weiss das Thema war schonmal dran. Ich hab auch alles dazu in diesem Forum gelesen, aber irgendwie bekomm ich das nicht hin

Ich will den DIV mit der class="infos" vertikal zentriert haben

Bin Dankbar für jede Hilfe.


Hier mal meine CSS:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

/* Clearfix */ .clearfix:after {     content:    ".";     display:     block;     height:     0;     clear:      both;     visibility: hidden; }   .clearfix {display: inline-block;}   /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* Clearfix  END*/   #kursangebote #kursText {     margin: 3px 0 12px; }   #kursangebote .kursBox {     margin-bottom: 30px;     /*border-top: 2px solid #FF0000;*/     border-bottom: 2px solid #FF0732; }   #kursangebote .kursBoxBorder {     border-bottom: 2px solid #CEE0EC; } #kursangebote .kursBoxHeader {     margin-top: 25px; }   #kursangebote .kursBoxBody {     margin: 10px 0; }   #kursangebote .kursBoxFooter {     margin-top: -10px;     margin: -10px 0 10px;     padding-left: 10px;     background-color: #E3EEF4; }   #kursangebote .uhrzeit, #kursangebote .infos {     float:left;     /*padding: 10px 0;*/ } #kursangebote .uhrzeit { width: 265px; } #kursangebote .infos { width: 180px; }   #kursangebote .anmeldeButton {     width: 130px;     height:19px;     background:url(images/layout/anmelden.gif) no-repeat;     display: block;     padding: 1px 0 0 22px; }   #kursangebote .infoList {     margin-left: 18px;     padding-top: 2px; } #kursangebote .infoList li {     list-style: none;     list-style-image: url(images/layout/pfeilblau.gif);     margin-bottom: 10px; }

Und hier das HTML dazu:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<!-- Kursbox -->               <div class="kursBox">                 <!-- Kursbox Head -->                 <div class="kursBoxHeader kursBoxBorder">                   <h2>Ab März</h2>                 </div>                 <!-- Kursbox Head end-->                                 <!-- loop -->                                 <!-- Kursbox Body-->                 <div class="kursBoxBorder">                 <div class="clearfix kursBoxBody">                   <div class="uhrzeit">                     <p>Monatg, 12.12.2008</p>                     <p>20:00 - 21:00 Uhr</p>                     <div class="kursBoxBorder" style="width:150px"></div>                     <p>Monatg, 12.12.2008</p>                     <p>20:00 - 21:00 Uhr</p>                     <div class="kursBoxBorder" style="width:150px"></div>                     <p>Monatg, 12.12.2008</p>                     <p>20:00 - 21:00 Uhr</p>                     <p><span class="anmeldeButton"><a href="#">Jetzt anmelden</a></span></p>                   </div>                   <div class="infos">                     <ul class="infoList">                       <li><a href="#"><span class="spacer">Weitere Infos</span></a></li>                       <li><a href="#"><span class="spacer">Fragen zum Kurs</span></a></li>                       <li><a href="#"><span class="spacer">Kurs weiterempfehlen</span></a></li>                     </ul>                   </div>                 </div>                 <!-- Kursbox Body end-->                 <!-- Kursbox footer -->                     <<div class="kursBoxFooter">                         4 x 75 Minuten, Preise: 54 € (47€ , 35€) - Clubcard Kostenlos                     </div>                 <!-- Kursbox footer -->                 </div>                                 <!-- loop -->                               </div>               <!-- Kursbox end-->

Hi,

grundsätzlich muss ein Element eine Höhe besitzen, um es in seinem Anzeigebereich vertikal zentriert positionieren zu können.

Wenn du hier im Forum zu dem Thema aber schon alles gelesen hast, solltest du auch über den entsprechenden CSS-Code gestolpert sein.

Code :

1 2 3 4 5 6

div#centered { position:absolute; height:400px; top:50%; margin-top:-200px; }

Eine alternative Technik wird hier vorgestellt: http://d-graff.de/fricca/center.html

Genau das hab habe ich auch gelesen. Nur wenn ich das mache dann passiert sowas wie in Bild "mit centered.JPG"

Und ohne Zentrierung siehst es so aus "ohne centered.JPG"

wenn ich dich richtig verstehe, soll dein Div mittig im unteren bereich stehen?
wenn ja hau doch einfach eine Tabelle drum und zentriere dort alles mittig.
Dann sollte es gehen

schecker

.infos {
display: table;
}

.infoList {
display: table-cell;
vertical-align: middle;
}

So habe ich das immer umgangen, wenn es nicht so wollte wie ich will.
Inwieweit das jetzt konform ist, ist ne gute Frage

Das übergeordnete DIV des DIV .infos muss relativ positioniert werden, damit sich die absolute Positionierung nicht auf den Dokumentkörper bezieht.

Ansonsten versuch es mal mit einer relativen Positionierung für das DIV .infos.

@Traxmaxx: Dein CSS ist wohl regelkonform, nur werden die "Tabelleneigenschaften" vom IE nicht unterstützt - auch nicht von der aktuellen 7er Baureihe.

@Traxmaxx: Dein CSS ist wohl regelkonform, nur werden die "Tabelleneigenschaften" vom IE nicht unterstützt - auch nicht von der aktuellen 7er Baureihe.

Ich schau heute Abend mal nach, wie ich es letztens gemacht habe. Hatte das Problem irgendwie so gelöst bekommen. Mit IE6 und 7 hattest du jedoch recht

Vielleicht mit einer umschliessenden Tabelle, deren Tabellenzelleninhalt vertikal zentriert wird?

*narf* Mein Gedächtnis :/
Hab eben mal nachgeschaut. Habe es mit "position: relative;" und "margin: auto;" gebacken bekommen.

EDIT: 0 rausgenommen *dringend Schlaf brauch*

Sicher? Denn mit margin:0 auto wird ein Element ausschliesslich horizontal zentriert.

Der erste Wert "0" steht für den vertikalen Außenabstand (oben/unten) und der zweite Wert "auto" für den horizontalen Außenabstand (links/rechts).

Hallo Leute,

erstmal Danke für eure Hilfe.

Maik: Das mit der relativen Positionierung des Eltern DIVs hat geklappt, allerding nur beim Firefox und IE7. Beim IE 6 ist das Info DIV weg, einfach nicht mehr da.

hier mal die css änderung:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

#kursangebote .infos {         float:left;     width: 145px;     position:absolute;     background-color:#00FF00;         top: 50%;     margin-top:-35px;     right: 10px; }   #kursangebote .kursBox {     margin-bottom: 30px;     border-bottom: 2px solid #FF0732;     position: relative; }

Hier auch mal ein Screenshot vom IE und Firefox:

Hi,

kannst du mal einen Link zu der Seite nennen, denn mit deinen bisherigen Quellcode-Angaben ist das besagte DIV bei mir im IE6 nicht verschwunden.

Zitat von ne0hype | PN

Hallo Maik,

ich der Link zur Seite:

http://***.de/

Der IE6 benötigt da offensichtlich eine relative Positionierung:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13

#kursangebote .infos {         width: 145px;         position: absolute;         top: 50%;         height: 70px;         margin-top: -35px;         background-color:#00FF00;         right: 10px; }   [B]* html #kursangebote .infos {         position:relative; }[/B]