acider
Jan 15, 2009, updated at 01:06:04 (UTC)
view5341
view4
0
Goto Top

Seiteninhalt mittig ausrichten mit JS

GermansolvedQuestionWeb DevelopmentDevelopment
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
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 106086

Url: https://administrator.de/contentid/106086

Printed on: April 23, 2024 at 19:04 o'clock

4 Comments
Latest comment
Goto Top
Member: Arano
Arano Jan 15, 2009 at 10:06:54 (UTC)
Goto Top
Hm... positioniere die Box doch absolute in "Everything" !
So würde die Box bei { top:0px; left:0px; } oben links in der Ecke von "Everything" sitzen und von hier aus kannst du das ja dann weiter positionieren.

Also eine absolute Positionierung in in dem relativ positioniertem "Everything".

~Arano
Member: Acider
Acider Jan 15, 2009 at 12:07:45 (UTC)
Goto Top
Hm ja sowas hatte ich ja vor.
Nur sollte der Seiteninhalt imm zentriert im Browser sein. das Everything div oben links bei top:0 left:0 zu positionieren geht ohne probleme.
ich habe auch schon die kleinen toolboxen innerhalt des Everything positioniert.
Aber nun sollte die Everything-Box aus optischen gründen in der Mitte sein face-smile ich brauche dafür also einen passenden left wert.

Verstehst du? face-smile

Vielen Dank für deine Hilfe soweit face-smile
Member: Arano
Arano Jan 15, 2009 at 23:24:00 (UTC)
Goto Top
Wie ich schon sagte, eine absolut positionierte Box in einer relativ positionierten Box ^^
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&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br>
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br>
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br>
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br>
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br>
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br>
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br>
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br>
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br>
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br>
  </div>
 
 </body>
</html>
Habe es jetzt allerdings nur im Firefox getestet.

Schönes Wochenende
~Arano
Member: Acider
Acider Jan 16, 2009 at 21:17:17 (UTC)
Goto Top
VIELEN DANK!
Da hast du mir aber wirklich nen schönes Wochenende beschert. Es funktioniert und das sogar im IE.

Ich diese Lösung ist einfach super. Unkompliziert und einleuchtend face-smile

Vielen dank nochmal!

gruß
Acider
GermansolvedQuestionWeb DevelopmentDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 CommentsjstrickerWireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 CommentsAlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 Comments