Seitendarstellung inkorrekt durch DOCTYPE
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolute angaben
angabe
beispiel
bessere varianten anbieten
boxen
code
container
dank
fragestellung
katze
kombiniert code
mode
party
plazieren
position
problem
standard
tabelle
url
vorgehen
-
Hi.
Ich hab mich jetzt lange Zeit gewehrt mich an die HTML-Standards zu halten und dinge wie DOCTYPE schon rein aus Prinzip weggelassen... Bei meinem Aktuellen Projekt wollte ich mal schön nach HTML 4.1 Strict vorgehen. Dabei stellen sich jetzt allerdings erste Probleme ein:
Ich möchte eine Tabelle mittig im Browserfenster zentrieren. Dazu benutz ich folgenden CSS-Code:
table#content { width:100%; height:100%; border-width:0px; } table#content > tr > td { width:100%; height:100%; vertical-align:middle; } table { border:1px solid #005AFF; border-collapse:collapse; font-size:8pt; margin:auto; }
Das ganze wird mit Folgendem HTML-Code kombiniert:
<table id="content"> <tr> <td> <table> [...] </table> </td> </tr> </talbe>
Das sind natürlich nur die wichtigsten Abschnitte...
Hat alles auch wunderbar geklappt - bis ich oben einen DOCTYPE eingefügt hab - danach war das zwar horienzontal noch zentriert, jedoch vertikal nicht mehr. Ich hab das sowohl mit strict als auch transitional probiert - beides mal das selbe Ergebnis... Ohne passt es wieder.
Warum?
Bzw. wie muss ich es machen, dass es troz doctype zentriert wird (troz doctype - wie sich das anhört.. HTML-Seite tut nich weil akurat valide geschrieben - lag ich vllt. doch nicht so falsch?)
Danke schonmal
Dustboy -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Der Doctype hat den Browser aus dem Quirks in den Standards Mode gebracht. Der Quirks Mode ist dazu da, damit Seiten, die vor etwa 30 Jahren geschrieben wurden immernoch darstellbar sind ;)
Was du da machst ist - nett ausgedrückt - Folter. Du nutzt da eine Tabelle um eine andere Tabelle zu zentrieren. Sowas tötet fast genauso viele Kätzchen wie das nutzen von XML.
Eine Suche nach "CSS vertically centered" sollte die viel bessere Varianten anbieten. Sie werden in den guten Browsern zwar auch auf Tabellensimulation zurückgreifen, aber eben nur Simulation ;) Erster Link bei Google -
Danke dir schonmal (warscheinlich hab ich das nich gefunden, weil sich meine keywords mehr auf zentrieren spezialisiert hatten
)
Jetzt stehe ich allerdings vor dem Problem, das das <div> aus dem Beispiel irgendwie nur absolute angaben nimmt und keine Prozentangaben... Waum ist das so bzw. wie muss ich das machen wenn ich das wirklich in der Mitte vom Browserfenster haben will?
PS: Das mit den Katzen und XML hab ich irgendwie net kapiert lol -
Hallöle,
ich hoffe ich hab deine Fragestellung jetzt richtig verstanden bezüglich der % - Angaben.
So sollte es gehen:
html:
<body> <div id="container"></div> </body>
css:
#container { width:80%; height:50%; position: absolute; left: 50%; top: 50%; margin-left: -40%; margin-top: -25%; }
Die Prozentangaben sind natürlich nur Beispiele
-
Also entweder hat du mich nicht richtig verstanden, der dein Code ist genau so falsch wie meiner
Um meine Frage zu verdeutlichen nochmal hier mit Quelltext dargestellt.
Das ist das Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Universal vertical center with CSS</title> <style> .greenBorder {border: 1px solid green;} /* just borders to see it */ </style> </head> <body> <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;"> <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> <div class="greenBorder" style=" #position: relative; #top: -50%"> any text<br> any height<br> any content, for example generated from DB<br> everything is vertically centered </div> </div> </div> </body> </html>
Und das möchte ich dann so abändern:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Universal vertical center with CSS</title> <style> .greenBorder {border: 1px solid green;} /* just borders to see it */ </style> </head> <body> <div class="greenBorder" style="display: table; height: 100%; width:100%; #position: relative; overflow: hidden;"> <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> <div class="greenBorder" style=" #position: relative; #top: -50%"> <table style="margin:auto"> ... </table> </div> </div> </div> </body> </html>
Also mit height 100% und width 100% umd die Table (sprich den content) mittig auf dem Bildschirm zu platzieren. Allerdings weigert sich das <div> größer zu werden... -
Irgendwie kann ich dir nicht folgen 
Also du willst eine 100/100 %ige Box um IN dieser eine weitere Box mittig zu plazieren???
Hab ich das jetzt richtig verstanden?
Der einfachste weg, wäre doch nur den Content mittig zu plazieren!?
Wieso die äußere Box?
-
Gern doch - Ich hab nur KP wie ich das machen sollte, wenn ich nicht eine ganz äußere box hab mit 100%/100%...
Der ganze sinn dieses Threads ist: "Hilfe ich will was zentrieren, bekomms aber nich hin"^^ -
ahso. jeeeetzt..........
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Unbenanntes Dokument</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> html, body { height:100%;} * {margin:0px; padding:0px;} #container {width:800px; height:400px; position:absolute; top:50%; left:50%; margin-top:-200px; /*Hälfte von height*/ margin-left:-400px; /*Hälfte von width*/} .box {background-color:#ccc; padding:20px;} </style> </head> <body> <div id="container" class="box"> <p>Content goes here......</p> </div> </body> </html>
so, ich hoffe ich konnte dir nun helfen.
-
Es funktioniert *freu, party*
Muss man halt au wissen, dass man html, body als 100% angeben muss, wa?
Danke euch
PS: Sry fürs solang zeit lassen mit zurückschreiben - kam einfach net früher zu ^^
Beitrag zuletzt geändert: 28.10.2010 20:08:56 von dustboy -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
