|
|||
Inhalt ohne Tab. mittig horizontal u. vertikal ausrichten?
Hallo,
hab versucht meine Seite weitestgehend ohne Tabellen nur mit CSS zu gestalten und hab jetzt einen Test für XHTML durchgeführt. Um die Seite www.doberlug.de halt komplett mittig auszurichten habe ich im Moment die Tabellenlösung gewählt, allerdings ist das nicht xhtml konform da ich die Anweisung table height=100% verwenden muß. Wie kann ich das in CSS lösen, für den IE und auch für die anderen Browser Hab bis jetzt nichts richtiges gefunden. Es soll ja bei allen Bildschirmauflösungen funktionieren. CU Arne |
Sponsored Links |
|
|||
Hallo otoo,
Also wenn du weiterhin ein Tabellen-Design verwenden willst Im CSS-File: Code:
html { height : 100%; } body { height : 100%; } table { height : 100%; width : 100%; } /*Fuer den Hauptinhalt, zentriert*/ td.main { height : 100%; width : 100%; text-align : center; vertical-align : middle; } mfg to.ni |
Sponsored Links |
|
|||
ohne wenn es geht....
Hallo,
vielen Dank erst einmal Ich dachte aber an eine Nutzung ohne das ich Tabellen einsetze! Also nur mit CSS die vert. u. horiz. Ausrichtung zu realisieren. CU Arne |
|
|||
Ups, sorry,
also mit Layern würde das (nach einem kurzen Test meiner-seits) so funktionieren (IE 6 und Mozilla 1.0): CSS: Code:
#main { position : absolute; width : 600px; height : 200px; left : 50%; top : 50%; margin-left : -300px; margin-top : -100px; background : #FF0000; } Anschließend wird der Layer positioniert und zwar 50% Links und 50% von Oben, vom übergeordetem Element aus gesehen, also Body... Aber jetzt wäre lediglich die Linke-Obere-Ecke des Layers bei der Position 50%, 50%... Daher die nächsten Angaben margin-left und -top mit jeweils einem negativen Wert. Der Wert entspricht dabei der Hälfte der Weite- bzw. Höhenangabe. Das ist eingentlich der ganze Zauber. Im HTML kannst du das ganze dann einfach mit Code:
<body> <div id="main"> in der mitte</p> </div> </body> Hoffe, dass ich jetzt weitergeholfen habe... Würde dir auch entsprechende Seiten im Internet empfehlen (Google hilft bestimmt gerne weiter ), z.B. http://selfhtml.teamone.de/ http://www.css4you.de/ mfg to.ni |
|
|||
wollte mal anmerken, dass so geschichten wie height:100% in so einem zusammenhang nur im quirks modus funktionieren - ansonsten bedeutet height:100%, dass sich das element einfach so viel platz nimmt wie es benötigt, und nicht etwa die höhe des viewports einnimmt
|
|
|||
Zitat:
Bei mir nimmt eine 100% hohe Tabelle im Standardsmode das ganze Browserfenster ein. (Vorausgesetzt, ich setze den Body/ Html, wie das hier oben im Beispiel auch richtig gemacht wurde, auf 100%)
__________________
Du bist so dumm, Dich kann man auf 2 Disketten abspeichern. |
|
|||
height:100%; ergibt nur im Quirks modus des IE (seidenn im stylesheet steht ebenfalls html, body { height:100%; }) eine höhe des viewports - ansonsten nimmt das element sich nur so viel platz, wie benötigt um den inhalt komplett anzuzeigen.
|
|
|||
100% funktioniert prima im IE, es sei denn man vergisst festzulegen wie hoch/breit der Body ist.
Ich finde die Verwendung von "funktioniert nur im Quirksmode" etwas daneben, wenn Du es dann doch wieder einschränken musst. Wenn man es richtig macht gibt's keine Probleme, also funktioniert in dem Zusammenhang auch nicht irgendwas "nur im Quirksmode"
__________________
Du bist so dumm, Dich kann man auf 2 Disketten abspeichern. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS-Layout der Browsergröße anpassen | Jen | CSS | 3 | 14.11.2008 09:39 |
Problem mit position:relative; | McCoRmIcK | CSS | 0 | 08.04.2007 17:23 |
dreispaltiges layout, footer soll immer mitwandern | sirrpa | CSS | 14 | 24.11.2005 19:57 |
div box bekomme ich nett zentriert??? | Hard@Bowl | CSS | 1 | 23.05.2005 12:22 |
height: 100% beim IE | [M.o.C]Co | CSS | 3 | 12.05.2005 13:58 |