<div> Exakte Position bei <center> und untersch. Bildschirmauflösungen

Drrichardfahrer · 6 Januar 2009

Ich versuche gerade zu verstehen, wie es möglich ist, <div>s so zu platzieren (mit position: absolute; ), dass sie trotz unterschiedlicher Bildschirmauflösungen der User im Hintergrund immer anselber Stelle sind, wenn die Seite ge<center>t wurde...

Z.B. ich hab im Header oben ein Bild mit Platz für genau eine Bannerrotation (da ist schwarz) - ich will, dass die dazugehörige <div> genau dort ins schwarze kommt...

Jetzt hab ich das mit meiner Auflösung richtig positioniert (mit left: und top: und position: aboslute; ), aber in allen anderen Auflösungen verschiebt sich ja die Bannerrotation dann (weil ja die gesamte Seite mit <center> immer in der Mitte ist)...

What to do?? Please help me

Astrodan · 6 Januar 2009

Okay, das könnte jetzt etwas aufwändiger werden. Ich geh mal ein paar Punkte der reihe nach durch:

a) dass du dich bemühst dein Objekt mit CSS zu formatieren ist löblich, aber bitte, bitte kein <center>. Dieser Tag ist mehr als veraltet, und es gibt mind. zwei, wenn nicht sogar mehr alternativlösungen in CSS, die mindestens ebenso gut sind. Dieses sind

b) Positioniert werden Objekte per CSS mit Hilfe von

margin: 0 auto; (zentriert)
bzw.
text-align: center; (bei nicht-Block-Elementen)

Nun wir ein Objekt, welches du mit position: absolute; positionierst immer am nächsthöheren Elternelement orinertiert, welches nicht auf der Standardeinstellung (position: static

steht. Dies ist im normalfall dein <body>. Da dein body je nach Auflösung verschiedene Höhen und Breiten hat ist er zur gleichen Positionierung auf verschiedenene Systemen denkbar ungeeignet, so lange du nicht einen konstanten Abstand zu einer der Seiten des Fensters haben willst.
Deshalb musst du einen kleinen Umweg gehen:

c) Du nimmst dir ein <div> (theoretisch gehen auch einige andere, aber divs bieten sich eigentlich an) und positionierst es zentriert, mit einer definierten Breite (width: <zahl>px

. Dieses div nimmt nun deinen kompletten (!) Inhalt der Seite auf, und ist dadurch in der lage ihn zu zentrieren. Damit kommen wir zu

d) Nun hast du dein <center>-Tag ersetzt. Aber eine absolute Positionierung orientiert sich immernoch am Fensterrand, deswegen musst du dafür sorgen, dass für alle Kind-Elemente das <div>-Tag als Ausgangselement genutzt wird. Dies errreichst du, indem du es mit position: relative; positionierst, d.h. relativ zur aktuellen position klannst du es verschieben. Das willst du zwar nicht, aber dann verschiebst du es halt um jeweils 0 Pixel.

e) Nun kannst du dein Objekt innerhalb des divs mit position: absolute; beispielsweise anhand der oberen Linken Ecke deines divs orientieren, und jeder, der die Seite aufruft wird es genau die angegebene Anzahl an Pixeln vom Rand deiner Seite sehen.

So, ich hoffe das hilft.. ich würde dir empfehlen, dir mal einiges zu CSS-Designs durchzulesen, und ansonsten hilft dabei leider nur: Üben, ausprobieren, fluchen, weiterüben.

Viel Erfolg.

~~Edit: Sekunde, ich arbeite an nem Kurzbeispiel..~~

Beispiel (Achtung, kein Anspruch auf Richtigkeit oder Vollständigkeit. HTML-Struktur nur knapp nachempfunden. Zusätzliche Elemente dienen nur der Anschaulichkeit):

HTML:

<head>
  <style>
    body div#content {
      width: 777px; margin: 0 auto; position: relative;
    }

    body div#head {
      width: 777px; margin: 0; padding: 0;
    }

    div#head div#banner {
      width: 300px; height: 75px; margin: 3px; border: 1px solid #000000;
      position: absolute; left: 40px; top: 30px;
    }
  </style>
</head>
<body>
  <div id="content">
    <div id="head">
      <div id="banner"></div>
    </div>
    <div id="page">
      [...]
    </div>
</div>
</body>

Drrichardfahrer · 6 Januar 2009

Du bist ein Wahnsinn, Astrodan!!

D A N K E ! ! !

Graccem · 7 Januar 2009

Astrodan schrieb:
Nun wir ein Objekt, welches du mit position: absolute; positionierst immer am nächsthöheren Elternelement orinertiert, welches nicht auf der Standardeinstellung (position: static steht. Dies ist im normalfall dein <body>. Da dein body je nach Auflösung verschiedene Höhen und Breiten hat ist er zur gleichen Positionierung auf verschiedenene Systemen denkbar ungeeignet, so lange du nicht einen konstanten Abstand zu einer der Seiten des Fensters haben willst.

Deine Aussage ist nicht ganz korrekt. Im "Normalfall" wie du es betitelst, ist es <html>, das diese Aufgabe übernimmt, da es keinen weiteren Vorfahren besitzt. Desweiteren ist es sehr wohl möglich, mit position: absolute; ein Element zu zentrieren. Du musst dem Element nur eine fest Breite geben, einen Offset von 50% erzeugen und dann die Box um die Hälfte der Höhe und Breite negativ verschieben.

Beispiel:

HTML:

<html>
	<head>
		<title>Test</title>
		<style type="text/css">
			html,body {
				height:100%;
				margin:0;
				padding:0;
			}
			body {
				position:relative;
				min-width:400px;
				min-height:300px;
			}
			#container {
				position:absolute;
				background:#9ccd3e;
				border:2px solid #577923;
				height:300px;
				width:400px;
				left:50%;
				top:50%;
				margin-top:-150px;
				margin-left:-200px;
			}
		</style>

		<!--[if lte IE 7]>
		<style type="text/css">
			* html #platzhalter {
				height:300px;
				width:400px;
			}
		</style>
		<![endif]-->
	</head>
	<body>
		<div id="platzhalter"><!-- --></div>
		<div id="container">
			<h1>Lorem Ipsum</h1>
		</div>
	</body>
</html>

Wenn du dich für neue Techniken interessierst, dann empfehle ich die Lektüre
"Fortgeschrittene CSS-Techniken" von Ingo Chao und Corina Rudel. Selbst wenn man glaubt, man wüsste schon einiges, kann es einem die Augen öffnen und helfen. Aus dieser Lektüre ist das obigen Beispiel.

Astrodan · 7 Januar 2009

Graccem schrieb:
Deine Aussage ist nicht ganz korrekt. Im "Normalfall" wie du es betitelst, ist es <html>, das diese Aufgabe übernimmt, da es keinen weiteren Vorfahren besitzt.

Okay, ich glaub da hab ich was übersehen.. aber auch gut, kommt auf das Ergebnis raus, was ich nannte.

Graccem schrieb:
Desweiteren ist es sehr wohl möglich, mit position: absolute; ein Element zu zentrieren. Du musst dem Element nur eine fest Breite geben, einen Offset von 50% erzeugen und dann die Box um die Hälfte der Höhe und Breite negativ verschieben.

Und das wäre das, was ich als zweite Möglichkeit zum Zentrieren eines Objekts meinte, aber nicht erwähnt hab.
Die möglichkeit ist aber relativ umständlich, und macht praktisch keinen Sinn mehr, wenn das Objekt nicht in der Mitte, sondern eine bestimmte Anzahl an Pixeln relativ zu einem anderen Objekt positioniert werden soll.
Dennoch hast du (leider?

) durchaus recht.

perlini · 8 Januar 2009

Graccem schrieb:
Desweiteren ist es sehr wohl möglich, mit position: absolute; ein Element zu zentrieren. Du musst dem Element nur eine fest Breite geben, einen Offset von 50% erzeugen und dann die Box um die Hälfte der Höhe und Breite negativ verschieben.

Diese Variante hat aber einen Nachteil. Wenn das zu zentrierende Element breiter ist als der Viewport, dann wird es durch das negativen Verschieben links "abgeschnitten".

Graccem · 8 Januar 2009

perlini schrieb:
Diese Variante hat aber einen Nachteil. Wenn das zu zentrierende Element breiter ist als der Viewport, dann wird es durch das negativen Verschieben links "abgeschnitten".

Nicht in dem von mir geposteten Beispiel. Dort sind diese Macken behoben. (min-width/height + #platzhalter für IE6)

<div> Exakte Position bei <center> und untersch. Bildschirmauflösungen

Drrichardfahrer

Well-known member

Astrodan

Gamma Cephei

Drrichardfahrer

Well-known member

Graccem

* {display:none;}

Astrodan

Gamma Cephei

perlini

Antifaschist

Graccem

* {display:none;}

Ähnliche Themen