<DIV> zentrieren + scrollen verbieten?

Avenger · Jul 7, 2008

Ich habe nun über 1h gegoogelt, rumprobiert, etc. und ich komme nicht weiter, also hier meine Fragen:

1. ich habe einen <DIV>-Container, wie bekomme ich den sowohl Vertikal als auch Horizontal zentriert?
2. wie kann ich verbieten, dass der Benutzer die Hauptseite scrollt? Und wie kann ich das dann wieder aufheben?

danke im Voraus,
mfg

EDIT

JS darf auch verwendet werden

Keci · Jul 7, 2008

1. Google mal nach "Spacer in XHTML"
2. <div style="overflow:fixed;"> und overflow:auto # Glaub ich

BasicAvid · Jul 7, 2008

1. ich habe einen <DIV>-Container, wie bekomme ich den sowohl Vertikal als auch Horizontal zentriert?

Falls der Div-Container über allen anderen liegen soll, wirst Du nicht an JS vorbei kommen.

rami · Jul 7, 2008

Original von BasicAvid

1. ich habe einen <DIV>-Container, wie bekomme ich den sowohl Vertikal als auch Horizontal zentriert?

Zum Vergrößern anklicken....

Falls der Div-Container über allen anderen liegen soll, wirst Du nicht an JS vorbei kommen.

echt? z-index müsste gehen!
@topic: Schau mal auf http://1ngo.de/web/zentrierung.html ganz unten

beavisbee · Jul 7, 2008

um links und rechts den gleichen Abstand zu haben:

CSS-Code:

Code:

margin-left:auto;
margin-right:auto;

oben und unten den gleichen Abstand:
soweit ich weiß ohne JavaScript nicht möglich.
Außer du packst den DIV-Container in eine Tabelle, die über die ganze Seite geht, dem td gibst du als CSS-Eigenschaft ein align:center; und vertical-align:middle; - dann könnte es gehen... hab ich aber selber nicht ausprobiert und Tabellen-Layouts sind sowieso schlechter Stil...

BasicAvid · Jul 7, 2008

Original von r@mi

Original von BasicAvid

1. ich habe einen <DIV>-Container, wie bekomme ich den sowohl Vertikal als auch Horizontal zentriert?

Zum Vergrößern anklicken....

Falls der Div-Container über allen anderen liegen soll, wirst Du nicht an JS vorbei kommen.

Zum Vergrößern anklicken....

echt? z-index müsste gehen!
@topic: Schau mal auf http://1ngo.de/web/zentrierung.html ganz unten

Mir ist bewußt, dass man mit dem z-index den Layer über die anderen Elemente legen kann, aber Du kannst keinen Div-Container der mit position: absolute (zum Body) in der Seite positioniert wird ohne JS zentrieren.

Avenger · Jul 7, 2008

oh sorry, habe vergessen zu sagen, dass JS natürlich verwendet werden darf

Original von Keci
2. <div style="overflow:fixed;"> und overflow:auto # Glaub ich

auch hier ein sorry: ich meinte, wie man verbietet, dass die ganze Seite gescrollt wird, halt solange dann des <div> eingeblendet wird

H3PO · Jul 7, 2008

Original von BasicAvid
Du kannst keinen Div-Container der mit position: absolute (zum Body) in der Seite positioniert wird ohne JS zentrieren.

es sei denn, der container hat eine feste breite (zb. 800px). dann geht

Code:

<div style="left: 50%; margin-left:-400px;">...</div>

und das ganze funktioniert auch für die vertikale ausrichtung.
zu sehen auf meiner platzhalterseite: http://h3po.de/

edit: geduld beim anklicken meiner seite, 1&1 hat grad arge probleme...

BasicAvid · Jul 8, 2008

@H3PO

Ok, so geht es natürlich auch ;-)

Hier hat man aber dann das Problem, dass sich der Div-Container immer an der selben stelle befindet, und ich denke mal Avenger benötigt einen Div-Container der sich beim Scrollen neu ausrichtet.

Avenger · Jul 8, 2008

hm, nicht unbedingt

wenn ich halt irgendwie verbieten kann, dass der Benutzer die Seite scrollt, solange der Container angezeigt wird, ist es kein Problem

H3PO · Jul 8, 2008

Original von BasicAvid
Hier hat man aber dann das Problem, dass sich der Div-Container immer an der selben stelle befindet, und ich denke mal Avenger benötigt einen Div-Container der sich beim Scrollen neu ausrichtet.

Original von Avenger
hm, nicht unbedingt

wenn ich halt irgendwie verbieten kann, dass der Benutzer die Seite scrollt, solange der Container angezeigt wird, ist es kein Problem

wenn ich das richtig verstehe, willst du so ne art meldungsfenster haben, dass vor allem anderen fest positioniert ist?
wie wärs mit

Code:

<body style="padding: 0px;">
<div style="padding: 0px; margin: 0px; width: 100%, height: 100%; overflow: hidden">
<div style="width: 640px; height: 480px; left: 50%; top: 50%; margin-left: -320px; margin-top: -240px;">

<div>
</div>
</body>

Avenger · Jul 13, 2008

Konnt erst heute deinen Vorschlag testen.

Irgendwie hat deine Konstruktion ned hingehauen.

Aber ich hab nun einen recht gute Alternative gefunden (JavaScript):

Code:

function showdiv() {
var ObjRef = document.getElementById("name_des_divs");
ObjRef.style.position = "fixed";
ObjRef.style.visibility = "visible";
}

Vielen Dank für eure Hilfe!

mfg