div am Bildschirm ausrichten

fakerer · 26.06.2011

Hallo,
ich würde gerne ein div mittig am Bildschirm ausrichten so wie es jede lightbox tut.
Allerdings denk ich mir müsste das so auch möglich sein.
Es soll klappen egal wo das div eingebunden ist.
Mit margin:0 auto; oder ähnlichem kommt es ja immer drauf an wo das letzte position war.

Ein weiteres Problem ist das ich Infotext bei Mouse over anzeigen will. Ich kann das ganze dann reletiv zu der Position anzeigen allerdings wird dabei nicht geachtet ob dann auch noch genug platz zum anzeigen ist für das div würde das gener irgendwie bewerkstelligen und das dann die Position angepasst wird so das das div immer ganz angezeigt wird.

kleeaar · 26.06.2011

AW: div am Bildschirm ausrichten

verstehe ich dich richtig, dass du dein div, unabhängig von dessen Position im quelltext immer mittig im bildschirm platzieren willst?
Das könntest du mittels absoluter positionierung (position:absolute) hinbekommen.
horizontal zu zentrieren ist einfach einfach left:50%; margin-left:-(diehälfte deiner div-breite)
vertical zu zentrieren ist schon etwas schwieriger...
könnte aber damit funktionieren: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

ansonsten müsstest du halt mit Javascript arbeiten...

Grüße

degsieger · 26.06.2011

AW: div am Bildschirm ausrichten

Hi!

Ich hab da eine Möglichkeit mal im Netz gefunden um ein DIV auch horizontal zu zentrieren: http://www.wpdfd.com/editorial/thebox/deadcentre4.html
Die Seite zeigt das Ergebnnis mit ein paar Hinweisen. Einfach mal in den Quelltext schauen.

Gruß, Dirk!

fakerer · 26.06.2011

AW: div am Bildschirm ausrichten

Danke für die schnellen Antworten,
ich werd es wohl fürs erste mal mit javascript machen, da es glaub ich nur mit css nix gibt womit man bestimmt wie viel sozusagen von der Seite schon rausgescrollt ist.
Aber vielleicht kommt ja noch was

OJey · 11.07.2011

AW: div am Bildschirm ausrichten

Hi,
ein div kann aber mittels "margin: 0 auto", zentriert werden...
Machen das auch immer so, um die Seiten mittag anzuzeigen!
Ältere Browser zentrieren ein div teilweise auch mit "text-align: center".

hubspe · 11.07.2011

AW: div am Bildschirm ausrichten

fakerer schrieb:
Aber vielleicht kommt ja noch was

du brauchst weder JS noch das übliche Gewürge mit pos. absolute, display-table und vertical-align:schlagmichtot um eine komplette Website horizontal/vertikal zu zentrieren.
Corina hat schon vor sechs Jahren eine Möglichkeit online gestellt die sogar im IE5 problemlos funktioniert.

rakader · 14.07.2011

AW: div am Bildschirm ausrichten

fakerer schrieb:
ich werd es wohl fürs erste mal mit javascript machen, da es glaub ich nur mit css nix gibt womit man bestimmt wie viel sozusagen von der Seite schon rausgescrollt ist.

Vollkommen unnötig.

Lösung wurde hier schon gesagt: Mache einen Wrapper mit #wrapper { margin: 0 auto; }
Einfacher geht es nicht.

Grundstruktur sieht so aus:

HTML:

    <body>
<div id="wrapper">    

    <div id="header"></div>
    <div id="nav"></div>
    <div id="main"></div>
    <div id="footer"></div>

 </div>
    </body>

und das CSS:

HTML:

#wrapper { margin: 0 auto; }

Die Datei nennst Du screen.css. Sie muss im gleichen Ordner liegen wie die Startseite (in diesem Beispiel).

Erklärung: 0 ist der Abstand oben und unten; auto immer der Abstand zum Bildschirm in Abhängigkeit der Content-Breite. Daher immer zentriert.

Das externe CSS bindest Du im Kopf so ein (einfach Cut&Paste):

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>untitled</title>
    <meta name="description" content="content" />
    <link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
    </head>

Das ist alles!

Beckers · 14.07.2011

AW: div am Bildschirm ausrichten

http://d-graff.de/fricca/center.html
Funktioniert super, die Erklärung steht im Quelltext

rakader · 14.07.2011

AW: div am Bildschirm ausrichten

Beckers schrieb:
http://d-graff.de/fricca/center.html
Funktioniert super, die Erklärung steht im Quelltext

Na ja. Das CSS ist unnötig aufgebläht, und das ganze kommt aus der Steinzeit. Aber wenn man mit der Steinaxt jagen will - warum nicht.

Paric · 14.07.2011

AW: div am Bildschirm ausrichten

rakader, das Problem an Deiner Version ist doch, das nur horizontal centriert wird, aber nicht vertikal...

rakader · 14.07.2011

AW: div am Bildschirm ausrichten

Paric schrieb:
rakader, das Problem an Deiner Version ist doch, das nur horizontal centriert wird, aber nicht vertikal...

Noch mehr Silbertablett? Das Problem sitzt eher vor dem Bidlschirm - margin ist Dein Freund. Ansonsten gute Beispiele in selfhtml.

Verabschiede mich mal aus dem Thread und wünsche gutes Gelingen.