Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Box mittig anordnen: CSS und/oder Javascript?“

Christian

verpeilt & verschallert

Hallohoohooo ich hab ma wieder ne Frage:
Ich will eine Box mit CSS mittig anordnen und weis net so recht wie ich das machen soll. Hab auch schon gegoogelt (geiles wort^^) aber nichts gescheites gefunden, daher dachte ich das es vllt so zu machen:

CSS schrieb:
<div name="layerdeux" style="width:[X]; height:[Y]; position:absolute; top=50%; left=50%">
BLUB
</div>
dann wird ja die Box nur mit der oberen linken Ecke mititig sein. Daher dachte ich mir als evtl Lösung das hier:
JavaScript schrieb:
function alignBox(){
var x=document.layerdeux.style.top;
var y=document.layerdeux.style.left;
x = (screen.width/2)-([X]/2);
x +="px";
y = (screen.height/2)-([Y]/2);
y +="px";
}
[X] und [Y] sollen die Boxenwerte sein, die hier natürlich nur eine nebengeordnete Rolle spielen.
P.S.: funktioniert natrülich nicht. Kann mir jemand helfen?
 

Herr_D

offline

oder ganz auf die schnelle

Code:
<div id="Layer1" style="position:absolute; left:50%; top:50%; width:[x]px; height:[y]px; z-index:1; margin-left:-1/2[x]px; margin-top:-1/2[y]px;"></div>
 

sono23

Nicht mehr ganz neu hier

Herr_D schrieb:
http://css.fractatulum.net/sample/layout4format.htm

oder ganz auf die schnelle

Code:
<div name="layerdeux" style="width:[X]; height:[Y]; position:absolute; top=50%; left=50%; padding-left:-1/2[x]; padding-top:-1/2[y];">
BLUB
</div>


aufs blub kommts also an!!! :)
 

Herr_D

offline

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div id="Layer1" style="position:absolute; left:50%; top:50%; width:400px; height:400px; z-index:1; margin-left:-200px; margin-top:-200px;border:1px solid #000000;"></div>
</body>
</html>

das funzt (*grübel* war eigentlich der selbe code...)...
 
X

XC5511

Guest

Ich bin mir nicht ganz sicher, aber eigentlich sollte das mit einem "margin:auto;" gehen.

Code:
<div name="layerdeux" style="width:50px; height:50px; margin:auto;">

so habe ich es jedenfalls auf meiner Site "tom.webacons.com" gemacht...
 

Christian

verpeilt & verschallert

Herr_D schrieb:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div id="Layer1" style="position:absolute; left:50%; top:50%; width:400px; height:400px; z-index:1; margin-left:-200px; margin-top:-200px;border:1px solid #000000;"></div>
</body>
</html>

das funzt (*grübel* war eigentlich der selbe code...)...
Danke, genau das funktioniert *g*
 

erti

Blabubb

-lol-, ich glaub die gängigste Methode wäre einfach
Code:
<div style="margin-left: auto; margin-right: auto;"></div>

Sollte in allen Browsern funktionieren und is reines css, ohne irgendwelche javascriptschnippsel...

gruß
erti
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.858
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben