Seiteninhalt mittig ausrichten mit JS
Guten Tag,
ich will den Seiteninhalt in jedem Browser je nach größe des Browserfensters mittig ausrichten.
Dies ist eigentlich kein Problem mit ein bisschen CSS und einem gewusst wie kommt man darauf:
body {
text-align:center;
}
div#Everything {
width:1000px;
text-align:left;
margin:0px auto;
z-index:0;
}
Wobei "Everything" natürlich der gesammte Seiteninhalt ist. Diese Methode funktioniert perfekt.
Nun aber das Problem:
Bei gewissen Aktionen sollen DIVs aufpoppen und den darunterliegenden Inhalt überdecken. Typische Anwendung sind die "mehr.." oder "Optionen"-Links auf Webseiten. Man klickt drauf und darunter springen einen zusätzliche Tools ins Auge.
Genau sowas brauche ich. Dazu habe ich mir folgende Lösung überlegt. Man nehme ein div namens Everything, dass absolut ausgerichtet ist und bestimme dann in dessen Abhängigkeit die immer gleichbleibende Position der Toolboxen. Ich muss also wissen bei welcher Koordinate sich die linke obere Ecke des Everything-Divs befindet. Dazu sollte ich mit JS die Aktuelle Browserbreite wissen und benutzen.
Genau diesen Schritt bekomme ich nicht hin.
Ich stell mir das Ergebnis irgendwie so vor:
div#Everything {
position:absolute;
top:0px;
left:expression(document.body.clientWidth < 1001? ......);
width:1000px;
text-align:left;
margin:0px auto;
z-index:0;
}
Wie geht das? Kann mir jemand helfen?
Ich wäre auch sehr dankbar für eine alternative Lösung meines Problems!
Vielen Dank für eure Hilfe.
mfg
Acider
ich will den Seiteninhalt in jedem Browser je nach größe des Browserfensters mittig ausrichten.
Dies ist eigentlich kein Problem mit ein bisschen CSS und einem gewusst wie kommt man darauf:
body {
text-align:center;
}
div#Everything {
width:1000px;
text-align:left;
margin:0px auto;
z-index:0;
}
Wobei "Everything" natürlich der gesammte Seiteninhalt ist. Diese Methode funktioniert perfekt.
Nun aber das Problem:
Bei gewissen Aktionen sollen DIVs aufpoppen und den darunterliegenden Inhalt überdecken. Typische Anwendung sind die "mehr.." oder "Optionen"-Links auf Webseiten. Man klickt drauf und darunter springen einen zusätzliche Tools ins Auge.
Genau sowas brauche ich. Dazu habe ich mir folgende Lösung überlegt. Man nehme ein div namens Everything, dass absolut ausgerichtet ist und bestimme dann in dessen Abhängigkeit die immer gleichbleibende Position der Toolboxen. Ich muss also wissen bei welcher Koordinate sich die linke obere Ecke des Everything-Divs befindet. Dazu sollte ich mit JS die Aktuelle Browserbreite wissen und benutzen.
Genau diesen Schritt bekomme ich nicht hin.
Ich stell mir das Ergebnis irgendwie so vor:
div#Everything {
position:absolute;
top:0px;
left:expression(document.body.clientWidth < 1001? ......);
width:1000px;
text-align:left;
margin:0px auto;
z-index:0;
}
Wie geht das? Kann mir jemand helfen?
Ich wäre auch sehr dankbar für eine alternative Lösung meines Problems!
Vielen Dank für eure Hilfe.
mfg
Acider
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 106086
Url: https://administrator.de/contentid/106086
Ausgedruckt am: 14.11.2024 um 07:11 Uhr
4 Kommentare
Neuester Kommentar
Wie ich schon sagte, eine absolut positionierte Box in einer relativ positionierten Box ^^
Das ganze kann dann so aussehen:Habe es jetzt allerdings nur im Firefox getestet.
Schönes Wochenende
~Arano
Das ganze kann dann so aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>absolute box in relativer box</title>
<style type="text/css">
#main { border:1px solid #ff0000; width:80%; margin:0px auto; position:relative; text-align:center; }
#box1 { border:1px solid #00ff00; width:100px; position:absolute; top:20px; left:250px; text-align:left; background-color:#e0e0e0; }
#box2 { border:1px solid #0000ff; width:100px; position:absolute; top:80px; right:20px; text-align:right; background-color:#c0c0c0; }
</style>
</head>
<body>
<div id="main">
<div id="box1">
box1<br>
t:20px; l:250px;
</div>
<div id="box2">
box2<br>
t:80px; r:20px;
</div>
ganzviel lückenfüller text. ganzviel lückenfüller text. ganzviel lückenfüller text.<br>
ganzviel lückenfüller text. ganzviel lückenfüller text. ganzviel lückenfüller text.<br>
ganzviel lückenfüller text. ganzviel lückenfüller text. ganzviel lückenfüller text.<br>
ganzviel lückenfüller text. ganzviel lückenfüller text. ganzviel lückenfüller text.<br>
ganzviel lückenfüller text. ganzviel lückenfüller text. ganzviel lückenfüller text.<br>
ganzviel lückenfüller text. ganzviel lückenfüller text. ganzviel lückenfüller text.<br>
ganzviel lückenfüller text. ganzviel lückenfüller text. ganzviel lückenfüller text.<br>
ganzviel lückenfüller text. ganzviel lückenfüller text. ganzviel lückenfüller text.<br>
ganzviel lückenfüller text. ganzviel lückenfüller text. ganzviel lückenfüller text.<br>
ganzviel lückenfüller text. ganzviel lückenfüller text. ganzviel lückenfüller text.<br>
</div>
</body>
</html>
Schönes Wochenende
~Arano