zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Vertikale Zentrierung des Inhalts eines DIV's

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.04.2004, 10:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2004
Beiträge: 3
menphrad befindet sich auf einem aufstrebenden Ast
Standard Vertikale Zentrierung des Inhalts eines DIV's

Hi,


Ich habe eine kleine Herausforderung (aka. "Problem" *g*)

Und zwar möchte ich in einer Seite, die nur mit XHTML, CSS & DIV arbeitet, also ohne TABLE, den Inhalt vertikal zentriert darstellen.

Ich kenne diese Methode:

Code:
<style type="text/css">
 #inhalt {
  height: 100px;
  width: 300px;
  position: absolute;
  background: #000000;
 }
 #inner {
  height: 50px;
  width: 200px;
  margin-top: -25px;
  margin-left: -100px;
  top: 50%;
  left: 50%;
  position: absolute;
  background: #00FF00;
 }
</style>
...
<div id="inhalt">
 <div id="inner">
 Text
 </div>
</div>
Da aber der Inhalt des DIV "#inner" dynamisch erstellt wird und das DIV daher unterschiedliche Höhen haben kann, ist es nicht möglich, eine fixe Höhe anzugeben. Margin-Angaben in Prozent funktionieren nicht, so weit ich es probiert habe.
Wie kann ich nun doch eine vertikale Zentrierung realisieren?


Herzlichen Dank!


Greetingz,

Manfred
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.04.2004, 11:49
Neuer Benutzer
neuer user
 
Registriert seit: 01.04.2004
Beiträge: 9
cascador befindet sich auf einem aufstrebenden Ast
Standard Woher kennst Du diese Methode eigentlich?

Hallo, Manfred!

Gestatten: Manfred! :)

Bin zwar (noch) kein Experte, aber diese Diskussion lasse ich mir nicht entgehen! Erstmal: Woher kennst Du diese Methode eigentlich? Irgendwie sieht sie mir nämlich ganz und gar nicht nach der Lösung des Problems aus. Ich würde es erst einmal wie folgt reduzieren:

Code:
<style type="text/css"> 
 #inhalt { 
  height: 100px; 
  width: 300px; 
  position: absolute; 
  background: #000000; 
 } 
 #inner {
  width: 200px;
  padding: 25px 100px;
  top: 50%;
  left: 50%;
  background: #00FF00;
 } 
</style> 
... 
<div id="inhalt"> 
 <div id="inner"> 
 Text 
 </div> 
</div>
Höhe ist nicht mehr drin, was soll's schon? Wenn der Inhalt eh dynamisch ist, passt er sich schon an. Und DU als Webmaster wirst sicherlich dafür Sorge tragen, dass nicht zu viel Inhalt die Box inner sprengt!
Beim position haben sie mich erst einmal verlassen, aber da Du die Orientierung top/left prozentual löst, kommt mir position: absolut; zumindest sehr seltsam vor...
Aber ich bin, wie gesagt, kein Experte. Macht es bei der Box inhalt überhaupt Sinn, von potition: absolute; zu sprechen, wenn keinerlei Positionsdaten angegeben sind? Woher kennt die Box ihre Position? :)

Bin gespannt, ob Du diesen Kommentar hilfreich findest....

Gruß
Manni
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.04.2004, 12:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2004
Beiträge: 3
menphrad befindet sich auf einem aufstrebenden Ast
Standard

Hello Manni!


Das ist leider auch nicht ganz das, was ich suche...
(Den Code hab ich übrigens aus dem Buch "CSS-Praxis" von Kai Laborenz/Galileo)

Ein Bild sagt bekanntlich mehr als 1000 Worte:
http://www.e-flow.at/Templates/Vorla...iertes_div.png

Vielleicht erklärt das Bild eher das was ich will?


Liebe Grüße,

Manfred
Mit Zitat antworten
  #4 (permalink)  
Alt 01.04.2004, 12:38
lab lab ist offline
Neuer Benutzer
neuer user
 
Registriert seit: 01.04.2004
Beiträge: 2
lab befindet sich auf einem aufstrebenden Ast
Standard Mit CSS allein wird es nicht gehen

Zitat:
Zitat von menphrad
Das ist leider auch nicht ganz das, was ich suche...
(Den Code hab ich übrigens aus dem Buch "CSS-Praxis" von Kai Laborenz/Galileo)

Ein Bild sagt bekanntlich mehr als 1000 Worte:
http://www.e-flow.at/Templates/Vorla...iertes_div.png
Aha - jetzt wird klarer, was Du willst. Ich fürchte jedoch, dass das mit CSS allein nicht gehen wird. Ein echtes vertical-align wird es erst in CSS3 geben.

Die momentan verfügbaren Tricks gehen davon aus, dass entweder der Abstand oder die Abmessungen des zu zentrierenden Bereiches bekannt sind. In Deinem Fall müsste man wohl per Javascript die Höhe des Bereiches erst einmal ermitteln und dann einen der bekannten Tricks ansetzen.

Gruß, Kai
Mit Zitat antworten
  #5 (permalink)  
Alt 01.04.2004, 12:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2004
Beiträge: 3
menphrad befindet sich auf einem aufstrebenden Ast
Standard

Ah, Herr Laborenz?! Auch in mehreren Foren auf der Suche nach Menschen, denen Sie helfen können!
Ich dachte mir schon, dass dies wohl leider nicht gehen wird!
Dennoch vielen Dank für Ihre umfassenden Tipps.

Schönen Tag noch,

Manfred
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
iframe Größe bei Laden des Inhalts an dessen Größe anpassen wiseguy Javascript & Ajax 0 24.06.2007 22:04
3 Spalten, Breite des Inhalts dynamisch schmidtsmikey CSS 1 30.10.2006 11:39
Vertikale Ausrichtung eines DIVs in einem dynamischen DIV vamac CSS 7 15.08.2005 13:10
Höhe des DIVs automatisch auf volle Höhe scheichxodox Knowledge Base 5 21.12.2004 10:31
Ratschläge bei Publizierung eines fertigen Layouts gesucht Black Fladder CSS 55 05.09.2004 14:30


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:07 Uhr.