Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

Seiteninhalt mittig ausrichten mit JS

Frage Entwicklung Webentwicklung

Mitglied: Acider

Acider (Level 1) - Jetzt verbinden

15.01.2009, aktualisiert 02:06 Uhr, 3815 Aufrufe, 4 Kommentare

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
Mitglied: Arano
15.01.2009 um 11:06 Uhr
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
Bitte warten ..
Mitglied: Acider
15.01.2009 um 13:07 Uhr
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 ich brauche dafür also einen passenden left wert.

Verstehst du?

Vielen Dank für deine Hilfe soweit
Bitte warten ..
Mitglied: Arano
16.01.2009 um 00:24 Uhr
Wie ich schon sagte, eine absolut positionierte Box in einer relativ positionierten Box ^^
Das ganze kann dann so aussehen:
01.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
02.
    "http://www.w3.org/TR/html4/strict.dtd"> 
03.
<html> 
04.
 <head> 
05.
  <title>absolute box in relativer box</title> 
06.
  <style type="text/css"> 
07.
   #main { border:1px solid #ff0000; width:80%;   margin:0px auto; position:relative;                       text-align:center; } 
08.
   #box1 { border:1px solid #00ff00; width:100px;                  position:absolute; top:20px; left:250px; text-align:left;   background-color:#e0e0e0; } 
09.
   #box2 { border:1px solid #0000ff; width:100px;                  position:absolute; top:80px; right:20px; text-align:right;  background-color:#c0c0c0; } 
10.
  </style> 
11.
 </head> 
12.
 <body> 
13.
  
14.
  <div id="main"> 
15.
   <div id="box1"> 
16.
    box1<br> 
17.
    t:20px; l:250px; 
18.
   </div> 
19.
   <div id="box2"> 
20.
    box2<br> 
21.
    t:80px; r:20px; 
22.
   </div> 
23.
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br> 
24.
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br> 
25.
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br> 
26.
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br> 
27.
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br> 
28.
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br> 
29.
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br> 
30.
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br> 
31.
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br> 
32.
   ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text. ganzviel l&uuml;ckenf&uuml;ller text.<br> 
33.
  </div> 
34.
  
35.
 </body> 
36.
</html>
Habe es jetzt allerdings nur im Firefox getestet.

Schönes Wochenende
~Arano
Bitte warten ..
Mitglied: Acider
16.01.2009 um 22:17 Uhr
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

Vielen dank nochmal!

gruß
Acider
Bitte warten ..
Ähnliche Inhalte
CSS
Schrift in div-Tag vertikal mittig ausrichten
gelöst Frage von trallerCSS1 Kommentar

Hallo, ich möchte eine Textzeile in einem div-Tag vertikal mittig ausrichten. Bekanntlich funktioniert "vertical-align:middle" hier nicht. wie bekomme ich ...

JavaScript
Komplexer JS-Code
gelöst Frage von rsadmchefJavaScript2 Kommentare

Hallo Team können die JS Cracks unter euch diesen Code erklären ? auf gesehen eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c)r e(c) =k c danke und ...

JavaScript
Zeile mit JS einfügen
gelöst Frage von lord-iconJavaScript3 Kommentare

Ich bau an ein JS Script, was mir eine Zeile einfügt (klappt mitunter auch). Siehe hier: 3 Probleme habe ...

PHP
PHP und JS auf dem Mac
Frage von 2SeitenPHP4 Kommentare

Hey Zusammen, Mal eine etwas andere Frage Auf Windows programmiere ich PHP/JS Websiten mit Netbeans und als Webserver die ...

Neue Wissensbeiträge
Windows 10

Autsch: Microsoft bündelt Windows 10 mit unsicherer Passwort-Manager-App

Tipp von kgborn vor 1 TagWindows 106 Kommentare

Unter Microsofts Windows 10 haben Endbenutzer keine Kontrolle mehr, was Microsoft an Apps auf dem Betriebssystem installiert (die Windows ...

Sicherheits-Tools

Achtung: Sicherheitslücke im FortiClient VPN-Client

Tipp von kgborn vor 1 TagSicherheits-Tools

Ich weiß nicht, wie häufig die NextGeneration Endpoint Protection-Lösung von Fortinet in deutschen Unternehmen eingesetzt wird. An dieser Stelle ...

Internet

USA: Die FCC schaff die Netzneutralität ab

Information von Frank vor 2 TagenInternet5 Kommentare

Jetzt beschädigt US-Präsident Donald Trump auch noch das Internet. Der neu eingesetzte FCC-Chef Ajit Pai ist bekannter Gegner einer ...

DSL, VDSL

ALL-BM200VDSL2V - Neues VDSL-Modem mit Vectoring von Allnet

Information von Lochkartenstanzer vor 2 TagenDSL, VDSL2 Kommentare

Moin, Falls jemand eine Alternative zu dem draytek sucht: Gruß lks

Heiß diskutierte Inhalte
Batch & Shell
Kann man mit einer .txt Datei eine .bat Datei öffnen?
Frage von HelloWorldBatch & Shell16 Kommentare

Wie schon im Titel beschrieben würde ich gerne durch einfaches klicken auf eine Text oder Word Datei eine Batch ...

Router & Routing
OpenWRT bzw. L.E.D.E auf Buffalo WZR-HP-AG300H - update
gelöst Frage von EpigeneseRouter & Routing11 Kommentare

Guten Tag, ich habe auf einem Buffalo WZR-HP-AG300H die alternative Firmware vom L.E.D.E Projekt geflasht. Ich bin es von ...

Windows Server
Ping auf einen bestimmten Server nicht möglich
gelöst Frage von a.thierWindows Server7 Kommentare

Hallo, ich habe folgendes Problem. srv-dc1: Ping srv-nav > geht Ping srv-exchange > geht nicht srv-exchange: Ping srv-dc1 > ...

Hardware
Fujitsu Workstation mit K80 und Quadro P5000, Fehlermeldung: Connect Power Adapter
Frage von MachelloHardware7 Kommentare

Hallo Zusammen, ich benötige euren Rat da ich ratlos bin. Folgende Konfiguration im Büro: Fujitsu Workstation Celcius R940 Power ...