Html-Tag unabhängig vom normalen Textfluss einmitten

[Grawapple]

Hallo zusammen!

Ich möchte ein Html-Div-Tag undabhängig (also eigentlich mit: position:absolute) vom andern Textfluss positionieren. Nun soll aber das Div horizontal immer in der Mitte des Fensters, egal wie gross es ist, sein.

Ist sowas möglich?

Danke und Gruss Yatekii

 

[mschoening]

Hi,
mit dynamischer Größe geht das meiner Meinung nach nicht. Wenn du aber fixe Dimensionen für das DIV hast dann geht es so:

<style type="text/css">
#header {
	background: red;
	height: 100px;
	width: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
}
</style>

 

[Skeeve]

Hi,
mit dynamischer Größe geht das meiner Meinung nach nicht. Wenn du aber fixe Dimensionen für das DIV hast dann geht es so:

Oder man verwendet (pfui Teufel!) JavaScript. Dann klappt es auch mit dynamischen Breiten, da JS die Breite des DIVs erfragen und dann passend positionieren kann.

 

[Der Paule]

Moin,

es gibt zwar die CSS Eigenschaft vertical-align:center, die funktioniert aber bei divs nicht.

Da könntest du mit left und top arbeiten. Ungefähr so...

#name_div_id
{
position:absolute;
top:25%;
left:35%
}

Oder so...

#name_div_id
{
width:200px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px auto auto -100px;
text-align:center;
}


Kommt auch immer auf die Browser an...

Vielleicht hilfts...

mfg
paule


Damn.... to late....

 

[Grawapple]

Danke vielamls...da das div ne feste grösse hat ist mein problem gelöst...

wie würde es denn mit (pfui-teufel) java-script gehen?

 

[mschoening]

Hi,
die zweite Variante wäre dann das Layout nur horizontal vertikal zu zentrieren:

<style type="text/css">
#wrapper {
	text-align: center;
}

#div {
	background: red;
	width: 100px;
	margin: 0 auto;
	text-align: left;
}
</style>

<div id="wrapper">
	<div id="div">
	
	</div>	
</div>

 

[Skeeve]

wie würde es denn mit (pfui-teufel) java-script gehen?

Wie beschrieben: Die Größe des DIVs ermitteln und dann, wie von mschoening beschrieben, die Position setzen. Halt nicht mit 100px und 50px sondern mit den ermittelten Werten.

Ist mir momentan zu müßig, das auszuklamüsern. Ich habe sowas ähnliches aber schon mal für eine feststehende Kopfzeile programmiert. Die war dann ebenfalls ein DIV und ein JavaScript, das per body.onload gestartet wurd hat dann einen entsprechenden Margin für den darunterliegenden Text erstellt.

 

[Grawapple]

@mschoenig:

http://wapple.ch/design-2.html

das ist meine site...und die blauen buttons sollten nach oben über den blauen streifen, aber weshalb sind die so weit undten? habe genau deinen code(ausser der farbe und der grösse benutzt)!

 

[Grawapple]

@skeeve...dein karmamäleon, wie haste das gemacht? kannst mir auch eins machen? xD ich habs mal gmoddet, hab aber nur die hälfte hingekriegt...statt skeeve stand dann Yatekii...aber weiter kam ich net...weil ich neue zeichen hätt dazuschreiben müssen...

 

[mschoening]

Hi,
ja du hast ja für das DIV was du absolut positionieren willst nicht die Grösse angegeben. Also du musst die Größe angeben und dann bei margin jeweils de Hälfte der Breite/Höhe nach links/oben verschieben mit einem negativen margin.

 

[SnowWhite]

@grawapple

Dein Html-Quelltext:

<center><div style="width:1200px; margin:20px auto 20px">
<img style="" src="pic/border-top2.gif" />
...

Mach dir doch erstmal ein CSS. Es vereinfacht die Übersicht wenn die Attribute nicht in den Tags stehen. v.a kannst du dann auch besser mit den Stylesheet "experimentieren".

 

[Grawapple]

Ich weiss wie das geht! Doof bin ich ja net...das Design ist nur mal Beta...übrigens...wie findet ihr es?

 

[mschoening]

Gestrig...aber das ist Geschmackssache, hauptasche du räumst deinen Code auf und es sieht Browserübergreifend gleich aus. Das ist das wichtigste...alles andere ist subjektiv. Wenn du zu viele Leute fragst was sie von deiner Webseite halten bekommst du Antworten wie: du ich mag grün lieber, oder...mach doch lieber alles zentriert...

 

[Grawapple]

jaa stimmt xDD

 

[SnowWhite]

Ich weiss wie das geht! Doof bin ich ja net...das Design ist nur mal Beta...übrigens...wie findet ihr es?

Ich hatte ja keine Ahnung, dass das eine "Beta" sein soll. Hätte auch gut sein können, dass du Anfänger bist, das hat auch nichts mit doof zu tun. Nun gut, man kann sich ja mal vertun...

Stelle dein Template erstmal fertig. Unfertiges bewerten mag ich nicht. Und wenn ich bewerte dann nur die Formatierung, alles andere ist, wie bereits erwähnt, Geschmackssache.

 

[Grawapple]

Ich hatte ja keine Ahnung, dass das eine "Beta" sein soll. Hätte auch gut sein können, dass du Anfänger bist, das hat auch nichts mit doof zu tun. Nun gut, man kann sich ja mal vertun...

War auch nicht böse gemeint

 

[Bajuware]

Ich bin zwar unsicher ob ich die Frage richtig verstanden habe aber :

#mittig { margin-left: auto; margin-right: auto; width: 100%; height: auto; min-width: ?px; max-width: ?px; }

Für einige Browser sind für min/max-width Hacks nötig. Zusätzliches position: relative; + top/left/bottom/right/ sollte ebenfalls Spielraum geben.

 

[Grawapple]

ja...das problem ist mit der "margin"-funktion reiht sich das an den normalen textfluss was ich ja nicht will...aber ich habs jetzt hingekriegt mit divverschachtelung...