Probleme mit Verticaler Ausrichtung!

[syscon]

Hallo,

Ich möchte einen Text(Link) Vertical in einer Tabelle ausrichten, so das der Text anschließend in der mitte steht.

Das steht in meiner HTML Datei:

<td class="menue"><div id="rollovermenu"><a href="index.html">Hallo</a></div></td>

und das in der Css Datei:

td.menue {text-align:center; vertical-align:middle;}

Trozdem bleibt der Text immer am oberen Rand der Tabelle.
Was mache ich falsch?

lg

 

[_Thor_]

Du hast der Zelle keine Höhe gegeben, damit wird sie nur so groß, wie nötig.

Das <div> in der <td> macht keinen Sinn, da es nichts gruppiert, die <td> lässt sich genau so formatieren.

Ausserdem weißt du sicher, dass Tabellen nicht fürs Layout verwendet werden sollen, sondern zur Auszeichnung tabellarischer Daten, bin gespannt, welche tabellarischen Daten zu Hallo gehören ;)

 

[syscon]

Habe das div rausgenommen trozdem ergibt sich keine Veränderung. Die Maße habe ich jetzt in der Tabelle und im Rollover eingegeben das führt zu keiner Veränderung. Hab mal den jetztigen Code gepostet

#rollovermenu a {background: url("images/menue/middle_bg.gif"); display: block; height: 30px; width: 150px;}
#rollovermenu a:hover {background-image: url("images/menue/middle_bg_click.gif"); height: 30px; width: 150px; }
#rollovermenu a:active {background-image: url("images/menue/middle_bg_active.gif") ;height: 30px ; width: 150px;}

td.menue {text-align:center; vertical-align:middle; height: 30px; width: 150px;}

Jedoch führte das zu keinem Erfolg. Der Text bleibt weiterhin am oberen Rand der Zelle!

Hab mal noch paar Bilder davon angehängt dann könnt ihr mein Problem auch visualisiert sehen. Das Home (vorher Hallo) steht immer noch ganz oben.

 

[_Thor_]

Im CSS kann ich keinen Fehler finden, allerdings ist die Verwendung einer Tabelle hier falsch. Du verwendest die Tabelle fürs Layout, dafür ist sie nicht vorgesehen. Lass sie weg, zeichne deinen Inhalt mit semantisch korrektem HTML aus, mach das Layout mit CSS, dann hast du diese Probleme erst garnicht.

Such mal hier im Forum nach "semantisches HTML", da findest du unzählige Beispiele und Erklärungen, warum du die Tabelle nicht fürs Layout verwenden solltest.

 

[syscon]

Hi,

ich glaube ich kann dir nicht mehr ganz folgen. Bis jetzt dachte ich immer das Tabellen äußerst Praktisch bei der Web gestaltung sind weil man mit ihnen sehr gut positionieren kann.

Leider ergab die Suche nach semantischem Web keinen Treffer. Jedoch hab ich mal ein bischen gegoogelt und da stand, dass semantisches Web einfach nur korrekter und passender HTML Code ist. Aber warum soll man eine Tabelle jtzt nicht fürs Layout nehmen?

 

[_Thor_]

Weil HTML nur für die Bedeutung deines Inhaltes zuständig ist. Mit HTML legst du fest, was eine Überschirft ist und zeichnest sie dem entsprechend aus (<h1> bis <h6>), Fließtext wird als <p> ausgezeichnet, Listen als <ul>, <ol> oder <dl>, Menüs als <ul>, tabellarische Daten als <table>, wichtiges als <em>, sehr wichtiges als <strong> usw.

HTML hat nichts mit dem Layout zu tun, wie das also im Browser aussieht, ist erstmal völlig egal, weil es bei der Auszeichnung mit HTML nur um die Semantik (Bedeutung) deines Inhaltes geht. Layout wird anschließend mit CSS gemacht.

Ausserdem waren die Suchbegriffe 'semantisches HTML', nicht 'semantisches Web', dann findest du auch noch ausführlichere Erklärungen hier im Forum.

 

[Efchen]

Bis jetzt dachte ich immer das Tabellen äußerst Praktisch bei der Web gestaltung sind weil man mit ihnen sehr gut positionieren kann.

Ja, das war in den 1990er Jahren so. Damals gab es nämlich noch keine Layoutsprache. CSS wurde erst Ende des Jahrtausends entwickelt. Deswegen musste man sich also vor ca. 15 Jahren damit behelfen, HTML zu Layout- und Designzwecken zu missbrauchen. Denn HTML selbst war tatsächlich schon seit seiner Einführung nie dafür gedacht, damit Layout zu machen. HTML war schon immer eine Strukturbeschreibungssprache.

Glücklicherweise hat jemand CSS erfunden, und damit kann man nun schon seit fast 10 Jahren endlich HTML wieder zu seinem eigentlichen Zweck nutzen und CSS fürs Layout verwenden. Dass es noch heute Leute wie Dich gibt, die fest davon überzeugt sind, dass man mit Tabellen layoutet, zeigt dass man im Internet nicht alles für bare Münze nehmen darf :-) Es ist grauenvoll, dass es wohl heute noch zahlreiche HTML-Tutorials gibt, die lehren, Layout mit Tabellen zu machen.

Leider ergab die Suche nach semantischem Web keinen Treffer.

Du kannst auch nach "Semantik" oder nach Beiträgen von mir suchen ;-)

Jedoch hab ich mal ein bischen gegoogelt und da stand, dass semantisches Web einfach nur korrekter und passender HTML Code ist. Aber warum soll man eine Tabelle jtzt nicht fürs Layout nehmen?

Weil HTML eben nicht fürs Layout zuständig ist und nie war. Tabellen zum Layout zu missbrauchen war ein Hack, weil man sich nicht anders helfen konnte. Aber das ist wie gesagt schon seit fast 10 Jahren überholt!

"Trennung von Inhalt und Layout" ist ein weiteres Stichwort in dem Zusammenhang. Endlich kann man den Inhalt zusammen mit seiner logischen Auszeichnung in HTML getrennt vom Layout belassen. Alle Layout- und Designinformationen packt man in ein externes Stylesheet und schon ist die Wartbarkeit der Website enorm vereinfacht worden. Schau Dir mal css Zen Garden: The Beauty in CSS Design an, dann siehst Du, was Du mit CSS-Layout machen kannst. Der Clou an der Site ist, dass ALLE von den 210 Designs mit exakt dem gleichen HTML-Code funktionieren und dass lediglich das Stylesheet ein anderes ist! Das ist Trennung von Inhalt und Layout in Perfektion!