Veröffentlicht 1. Juli 200520 j Hi, ich möchste ein div-element mittig auf meinem Bildschirm zentrieren. Im Prinzip ist das kein Problem sprich mit "margin-left:auto" und "margin-right:auto". Jetzt will ich das div-element aber nicht nur links/rechts mittig haben sondern auch oben/unten mittig sprich also wierklich gesamt mittig haben. Man könnte meinen das funktioniert mit "margin-top:auto" und "margin-bottom:auto", aber das tut es leider nicht. kann mir da jemand weiterhelfen?
1. Juli 200520 j Hi, ich möchste ein div-element mittig auf meinem Bildschirm zentrieren. Im Prinzip ist das kein Problem sprich mit "margin-left:auto" und "margin-right:auto". Jetzt will ich das div-element aber nicht nur links/rechts mittig haben sondern auch oben/unten mittig sprich also wierklich gesamt mittig haben. Man könnte meinen das funktioniert mit "margin-top:auto" und "margin-bottom:auto", aber das tut es leider nicht. kann mir da jemand weiterhelfen? entweder frame : <frame src="URL" name="Name" marginwidth="pixelabstand/%" marginheight="pixelabstand/%"> oder tabelle.
1. Juli 200520 j Da eine Höhenangabe im body mit CSS nicht möglich ist wird es wohl nicht funktionieren, außer du liest vorher mit JavaScript die Bildschirmhöhe und Breite aus und positionierst das DIV dann absolut. Ich lasse mich gerne eines besseren belehren, falls es doch eine Möglichkeit gibt.
1. Juli 200520 j mach's dir doch nicht so kompliziert ... also ich würde dies hier machen: <table width="100%" height="100% border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center">Guten Morgen</div></td> </tr> </table> die einfachste möglichkeit halt
1. Juli 200520 j mach's dir doch nicht so kompliziert ... also ich würde dies hier machen: <table width="100%" height="100% border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center">Guten Morgen</div></td> </tr> </table> die einfachste möglichkeit halt Ich will nicht den inhalt des div mittig ausrichten sondern das div selbst!!!
1. Juli 200520 j ja und was haste da drin im div?? ist doch egal ... damit haste es jedenfalls mittig ausgerichtet ...
1. Juli 200520 j ja und was haste da drin im div?? ist doch egal ... damit haste es jedenfalls mittig ausgerichtet ... häh???? nochmal, ich will nicht den inhalt eines div elements mittig ausrichten! ein div element soll wie oben beschrieben mitte/mitte angezeigt werden, vergiss den inhalt...
1. Juli 200520 j Hi, <body style="width:100%"> <div style="width:100%"> <div style="margin: auto; border: 1px solid black;">Ich bin zentriert!</div> </div> </body> ungetestet! Gruß, Markus
1. Juli 200520 j margin:auto läuft aber leider beim IE nur in der 6er. Sonst dürfte es überall klappen, wenn man noch mal vom NN 4 absieht
1. Juli 200520 j Wie wäre es denn mit : div.mitte { position:absolute; width: xx%; height: yy%; left: (100 - xx) / 2 - borderbreite; top: (100 - yy) / 2 - borderbreite; overflow: auto; } ANMERKUNG: natürlich stehen im Style nicht die Formeln, sondern deren Ergebnisse.
1. Juli 200520 j Man könnte meinen das funktioniert mit "margin-top:auto" und "margin-bottom:auto", aber das tut es leider nicht. Richtig, denn margin-top/margin-bottom: auto; entspricht margin-bottom/margin-top: 0;. Wenn das div absolute Werte besitzt, kannst du es _nur_ mit einer äußeren Tabelle komplett in der Mitte ausrichten. Anders wärs, wenn das div eine prozentuale Breiten-/Höhenangabe hätte, denn dann könnte man es ohne Tabelle ausrichten. Grundgerüst für die Tabelle: <table width="99%" height="99%" border="0"> <tr> <td valign="top" align="center"><!-- hier kommt dann dein div hin --></td> </tr> </table> Mit varablen Breiten siehe http://www.1ngo.de/web/zentrierung.html (vorletztes Beispiel).
2. Juli 200520 j mein reden ... ^^ sorry, dass ich das div davor geschrieben hatte ... kann man natürlich auch so machen, müsste man aber auch selbst wissen (davon bin ich ausgegangen) ich bin auch der meinung, dass man es nur mit hilfe einer tabelle wirklich mittig bekommt ...
4. Juli 200520 j Jetzt will ich das div-element aber nicht nur links/rechts mittig haben sondern auch oben/unten mittig... kann mir da jemand weiterhelfen? Nein, ausser mit den Tabellenmethoden. Der Grund: HTML hat keine Begrenzung nach unten. Aus diesem Grund ist auch ein <div style="height:100%"> nicht möglich (ausser im IE, und da nur im Quirks-Modus). Das was du im Browser siehst, also den Rand unten, ist ja nicht der untere Rand des HTML-Dokuments (auf das sich deine Formatierung bezieht.. Es gibt einen "Trick" das dennoch hinzubekommen, indem du im CSS für das Tag <html> und für das Tag <body> (glaube brauchst beide) je eine Höhe von 100% vorgibst. Dann sollte auch eine div Höhe 100% gehen (margin-top etc wohl auch). Das geht auch soweit ganz gut, allerdings hast du dann Probleme, sobald du deine Seite nach unten scrollen willst, dann stimmt der Hintergrund (z.B.) nicht mehr. du benutzt dazu nämlich nur den Viewport, also die aktuelle Anzeige. und sobald du diese verschiebst... naja, verschiebst du halt alles. EDIT: Bleibt zu hoffen, dass sich mit CSS3 da etwas tut... und dann noch, dass das auch von den Browsern entsprechend schnell umgesetzt wird.
4. Juli 200520 j EDIT: Bleibt zu hoffen, dass sich mit CSS3 da etwas tut... und dann noch, dass das auch von den Browsern entsprechend schnell umgesetzt wird. Hi, Mir würde vorerst reichen, dass der IE das DOM Modell, CSS1 & CSS2 richitg interpretiert, dann wäre mir schon sehr geholfen... Gruß, Markus
4. Juli 200520 j Und was soll denn mit meiner Lösong nich funktionieren? height: yy%; Da müsste dann ja wohl 100% stehen, es gibt aber keine 100% Höhe. Ausserdem müsste dass dann über Javascript angepasst werden, sonst würde eine Änderung an der Fenstergröße nicht mitgemacht werden. Und ausserdem sollte man absolute Positionierung so gut es geht vermeiden... (genau wie Layout-Tabellen). Hab das grad dennoch mal probiert... mit HTML 4.01 Transitional stellt mein FF 1.0.4 das hier: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>New Document</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body> <div style="border: 1px solid black; height: 100%";>Test</div> </body> </html> [/php] Mit 100% Höhe dar... XHTML aber dann wieder nicht. Was für eine HTML Version hast du bei der Seite genutzt?
5. Juli 200520 j Ich benutze xhtml1-strict. Ein funktionierendes Beispiel ist meine Webseite. Die CSS-Datei steht unter style/v1.css . So weit ich weiss funktioniert die Seite mit IE, Mozilla (+Derivate), Opera, Safari und den meisten Palm-Browsern. Achja, und Lynx ;-)
Archiv
Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.