zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden div zentrieren funktioniert bei relativer grösse nur horizontal, wieso?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.02.2009, 11:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.02.2009
Beiträge: 5
muusser befindet sich auf einem aufstrebenden Ast
Frage div zentrieren funktioniert bei relativer grösse nur horizontal, wieso?

mit tabellen meine website zu gestalten dürfte zwar nicht besonders schwer sein, ich bevorzuge aber divs.

schon ganz am anfang habe ich jedoch ein grosses problem:

ich möchte meine website zentrieren (horizontal und vertikal, aber auch eine relative grösse angeben.

mit absoluten grössen funktioniert alles super:

html-code:
Code:
<body>
<div ID="beispiel">hallo</div>
</body>
css-code:
Code:
#beispiel{
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
border: 1px black solid;}
sobald ich aber die grösse von 100px auf 90% wechsle, funktioniert dies nur noch horizontal. Wieso?

html-code:
Code:
<body>
<div ID="beispiel">hallo</div>
</body>
css-code:
Code:
#beispiel{
position: absolute;
height: 90%;
width: 90%;
top: 50%;
left: 50%;
margin-top: -45%;
margin-left: -45%;
border: 1px black solid;}
ich verstehe das nicht ganz? wäre froh, wenn mir jemand helfen könnte. bin ziemlich neu dabei, aber dachte, dieses prinzip hätte ich verstanden, aber scheint wohl doch nicht der fall zu sein?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.02.2009, 11:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.784
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
sobald ich aber die grösse von 100px auf 90% wechsle, funktioniert dies nur noch horizontal. Wieso?
CSS2.1 | 8.3 Margin properties
Zitat:
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.
[Rote Hervorhebung von mir]
Zitat:
#beispiel{
position: absolute;
height: 90%;
width: 90%;
top: 50%;
left: 50%;
margin-top: -45%;
margin-left: -45%;
border: 1px black solid;}
Du willst, dass dein Element einen Abstand von 5% von oben hat. Wenn du einen Moment nachdenkst merkst du sicher, dass bei Prozentwerten diese ganze (negative) Verschieberei unnötig ist.

Grundsätzlich: Bei dieser Art der Zentrierung mit abs. Positionierung verschwinden bei kleinem Viewport die Inhalte unerreichbar nach oben und links. Nicht empfehlenswert. In den FAQ findest du eine Alternative.

Geändert von fricca (24.02.2009 um 12:20 Uhr) Grund: Aus der Zukunft (CSS3.2) in die Gegenwart (2.1). Es grüßt die Netbook-Tastatur.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.02.2009, 13:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.02.2009
Beiträge: 5
muusser befindet sich auf einem aufstrebenden Ast
Standard ich stecke fest.

in den faqs habe ich eine variante gefunden, wie ich ein div zentrieren kann. jedoch kann ich wiederum NUR HORIZONTAL eine Prozentzahl angeben. Mit margin-top: 5%, height: 90% funktioniert es auch nicht. Wo liegt mein Überlegungsfehler?
Mit Zitat antworten
  #4 (permalink)  
Alt 24.02.2009, 13:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.784
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
in den faqs habe ich eine variante gefunden, wie ich ein div zentrieren kann. jedoch kann ich wiederum NUR HORIZONTAL eine Prozentzahl angeben.
Du brauchst die Methode aus den FAQ nicht für Boxen mit Prozentmaßen. Es ist eine Alternative zu der von dir gezeigten Methode für Boxen mit Pixel-/Em-Maßen.

Zitat:
Mit margin-top: 5%, height: 90% funktioniert es auch nicht. Wo liegt mein Überlegungsfehler?
Lies nochmal den Teil der Spezifikation, den ich oben zitiert habe.
Und dann überleg dir, mit welcher Eigenschaft außer Margin du deine Box in der vertikalen Richtung verschieben kannst.
Mit Zitat antworten
  #5 (permalink)  
Alt 24.02.2009, 13:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.02.2009
Beiträge: 5
muusser befindet sich auf einem aufstrebenden Ast
Standard nun

ich habe es mit

Code:
position: absolute; 
top: 5%;
left: 5%,
height: 90%, 
width: 90%;
gelöst. jedoch ist hier die Posititionierung auch absolut. Ist das ein Problem?

Herzlichen Dank, jetzt ist das div wenigstens schon mal in der mitte
Mit Zitat antworten
  #6 (permalink)  
Alt 24.02.2009, 13:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.784
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von muusser Beitrag anzeigen
Code:
position: absolute; 
top: 5%;
left: 5%,
height: 90%, 
width: 90%;
gelöst. jedoch ist hier die Posititionierung auch absolut. Ist das ein Problem?
Das Problem ist dabei nicht die Positionierung.
Der Umgang mit überfließenden Inhalten wird das Problem werden.
Mit Zitat antworten
  #7 (permalink)  
Alt 24.02.2009, 13:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.02.2009
Beiträge: 5
muusser befindet sich auf einem aufstrebenden Ast
Standard

Ich verstehe nicht genau, was mit überfliessenden inhalten gemeint ist.

gäbe es denn noch eine andere variante, das div vertikal mittig zu positionieren, zum Beispiel mit Hilfe eines zweiten divs?

Ich hatte einmal versucht, ein div mit Höhe und Breite von 100% zu nehmen und da rein ein div zu positionieren, jedoch hatte ich die selben Probleme wie auch ohne dieses zusätzliche Div.
Mit Zitat antworten
  #8 (permalink)  
Alt 24.02.2009, 14:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.784
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von muusser Beitrag anzeigen
Ich verstehe nicht genau, was mit überfliessenden inhalten gemeint ist.
Inhalte, die mehr Platz brauchen, als du es ihnen mit deinen Dimensionen zugestehen willst.
Füg doch mal viel Text in deine Box ein und schau dir an, was bei kleinem Browserfenster passiert.
Mit Zitat antworten
Antwort

Stichwörter
absolut, css, div, horizontal, relativ, vertikal, zentrieren, zentriert

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
DIV lässt sich nicht zentrieren. densi CSS 10 09.07.2011 18:18
div in div vertikal zentrieren kostonstyle CSS 0 18.06.2011 17:23
DIV Layout mit CSS: Zentrieren eines Divs und links und rechts auffüllen. darkwave CSS 5 07.04.2011 13:11
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 22:48
Horizontal und verikal zentrieren mit Scroll-Bereich hatschiii CSS 20 20.12.2007 21:01


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:46 Uhr.