Tabelle: vertical-align

Luzzy

Mitglied
Thread Starter
Dabei seit
01.03.2007
Beiträge
45
Reaktionspunkte
0
Hallo,

ich habe immer gedacht die vertikale ausrichtung einer Tabellenzelle macht man mit vertical-align liege ich da richtig?
Dies funktioniert aber nicht auf meiner Homepage. Weder unter Safari, noch Firefox oder Netscape. (IE da klappt das ganze Layout sowieso noch nicht, hab ich also noch nicht getestet.)

Hier die Details:

table#thumbnailsGraphics{
table-layout: fixed;
width: 330px;
height: 330px;
background-color: #FFFFFF;
margin-left: 185px;
margin-top: 15px;
position: absolute;
}

table#thumbnailsGraphics td{
width: 110px;
height: 110px;
border: 1px solid black;
vertical-align: middle;
text-align: center;
}

Seite:
http://www.claudia-cyan.de/index.php?section=paintings

Weiss jemand Rat? Im vorraus vielen Dank

lg luzzy
 
Validation: 133 Errors. Wundert mich das man das nicht sieht? :)

Zum Layout was anderes. Mache statt dem Valign einfach ein Margin um die Bilder.
 
Ich habe das Problem jetzt gelöst:

line-height: 0; bei <td> einfügen und dann noch zusätzlich für <img>

table#thumbnailsGraphics td img{
display: block;
margin: auto;
}
sieht mir aber wie ein ziemliches gefummel aus (um nicht zu sagen dirty Hack) oder macht man das so?

Danke ThaHammer! Aber was meinst Du eigentlich mit
"Validation: 133 Errors."
:hum:
Wie soll ich das nur verstehen?

lg luzzy
 
ich habe immer gedacht die vertikale ausrichtung einer Tabellenzelle macht man mit vertical-align liege ich da richtig?
<td valign="middle"> ist das, was den Effekt brächte, Style vertical-align:middle beeinflusst nur die Textausrichung, z.B. relativ zu einem Bild.
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align
Was der W3C-Validator als Fehler registriert, hängt an erster Stelle vom angegebenen Dokumententyp ab, deiner ist XHTML 1.0 Strict. Schon der erste tag <html> stimmt dann nicht, der Validator schlägt dir deshalb <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> vor. Viele Fehler, die angemerkt werden, entstehen durch die falsche Auszeichnung "leerer Elemente", <img ...> müsste z.B. <img ... /> heißen. Ein Fehler wird sich aber nicht abstellen lassen, wenn du XHTML 1.0 Strict zusammen mit deinen Javascript-MouseOvers verwendest (<img name="artPic" ...) Das Attribut name gibt es nicht in XHTML 1.0 Strict. Das einfachste wäre also, du verwendest einen Dokumententyp, der die Atrribute name und border in einem image-tag akzeptiert (Attribut alt fehlt aber dennoch).
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

EDIT: <td valign="middle"> ist default, d.h. <td> bedeutet <td valign="middle">
 
Zuletzt bearbeitet:
Ich hab den Quellcode nicht gelesen! Nur validiert!

Aber mal zu XML Tag. Ich brauche den leider öfters, weil ich ungern hernehme. Eben wegen der besagten Problematik! Was nehme ich am Besten her?
 
Ich denke, es kommt da auf den Inhalt und den Verwendungszeck an; für CMS nehme ich gewohnheitsgemäß XHTML 1.0 Transitional, hauptsächlich wegen der Target-Attribute zum Öffnen von Seiten. Bei Strict entfällt das Target-Attribut, es soll dem Benutzer überlassen werden, ob er den Link direkt öffnet, oder, über Mausmenü, die Seite in einem neuen Fenster öffnet - dabei wird meiner Ansicht nach ein Interesse an Dokumenten-Strukturen, sowohl beim Site-Besucher als auch bei den Redakteuren, vorausgesetzt, das eigentlich nicht vorhanden ist. Viele haben sich daran gewöhnt das Fenster bzw. den Tab zu schließen, um auf die Ausgangsseite zurückzukehren - besonders bei Windows ist es lästig, wenn dann gleich der Browser beim Schließen beendet wird, und man sich eventuell nach Browser-Neustart neu einloggen muss. Ein zweiter Grund ist das Session-Problem: Sobald Cookies deaktiviert sind, landet in Formularen der Tag für den Fallback an falscher Position außerhalb des Fieldsets (habe allerdings auch noch gar nicht ausprobiert, ob man das über die php.ini beeinflussen kann). Da ich aber meinen Kunden valides XHTML anbieten will (das sehe ich auch als gute Rahmenbedingung für den Gestaltungsauftrag), nehme ich dann lieber transitional. Bei statischen Seiten, bzw. Nicht-CMS käme strict für mich vielleicht in Frage - solche Aufträge bekomme ich aber eher selten. Kurze Info zum Thema DOCTYPE-Switch.

Allerdings sollte man auch berücksichtigen, dass der Validator keine Aussage macht, ob ein Dokument einen sinnvollen semantischen Aufbau hat. Steht höchstens als Anmerkung da, dass es jenseits der fehlerfreien Seite auch noch anderes gibt.

Meine Meinung - es gibt bestimmt viele, die es anders sehen.
 
Zuletzt bearbeitet:
Hi,

dank eurer Hilfe habe ich es jetzt geschafft einiger maßen validen XHTML-code zu schreiben. Allerdings habe ich jetzt probleme meinen CSS-Code zu testen über per URI bricht der Test immer ab mit der Fehlermeldung:

Servlet has thrown exception:javax.servlet.ServletException: Timed out

Wenn ich das per File-Upload teste bricht der Test bei Zeile 131 ab.

Teile ich das File in zwei separate Teile funktioniert der Test per Direkteingabe allerdings kommt dann die Fehlermeldung:

table.PicturesTable td Die Eigenschaft valign existiert nicht : middle

(der erste Teil funktioniert)

Ist valign: middle also nach CSS 2.1 oder 3 nicht "valide"?


Ans Anhang noch das CSS-File ist ziemlich lang und bisher ziemlich unübersichtlich:
 
das mit dem Anhang hat nicht funktioniert, ungültiges Dateiformat:

bei mir heißt das natürlich layout.css
 

Anhänge

  • layout.txt
    11,6 KB · Aufrufe: 65
Weiß auch nicht, weshalb der CSS-Validator sich so anstellt. Aber der Fehler "table.PicturesTable td Die Eigenschaft valign existiert nicht" stimmt schon, das war wohl missverständlich ausgedrückt: valign ist keine css-Eigenschaft sondern ein Attribut im Html-Tag td, also <td valign="middle">.
Aber wie gesagt <td> ohne valign bewirkt das selbe.
 
die Fehlermeldung kommt wahrscheinlich, weil es einfach überflüssig ist. Wenn man einfach gar nichts angibt funktioniert es auch.
Sorry, ich bin aber gerade in den USA und hier sind es seit drei Tagen ca. 45 Grad. Da sollte man nicht mehr am Computer sitzen oder keine Beitäge mehr schreiben.
Tut mir echt leid:shame:
 
Sind diese Korrekturen für IE wirklich notwendg? so kompliziert ist deine Seite doch gar nicht aufgebaut. (sag ich mal so hier nächtens zwischen 4-9 Grad).
 
Sind diese Korrekturen für IE wirklich notwendg?

ich persönlich bin ja der meinung NEIN, die paar IE User sind selbst schuld *g*

Aber viele wissen es einfach nicht besser, die haben einen PC, machen den einmal in der Woche an und gehen "in das Internet" und das ist für die der IE, denn sie wissen gar nicht, dass der IE ein Browser ist und es bessere und sicherere Alternativen gibt.

Also muss man leider auch zusehen, dass es im IE ansehbar ist, des reicht dann aber auch *g*
 
Hallo Luzzy, Ich weiß jetzt auch woran es liegt, dass der CSS-Validator streikt, und weshalb IE das stylesheet fast komplett ignoriert.
Code:
a:active {
	font-size:12px; 
	font-family:sans-serif; 
	line-height:26px;
	color:#FFFFFF;
	padding:0px;
	text-decoration:none; 
	text-align:left;
}¿¿ <-- \x00\x00
Nach a:active sind zwei Binär-Zeichen versteckt.

Ich habe mir das CSS und die Seitenstruktur mal näher angesehen und bin der Meinung, dass du dir viele Angaben wirklich sparen kannst, indem du ein paar allgemeine Angaben am Anfang bringst. Die IE-Hacks würde ich erstmal vollständig entfernen.

CSS
Code:
* {
	padding: 0;
	margin: 0;
}

body {
	margin: 10px;
	background: #fff;
	font-family: sans-serif;
	color:#669900;
}

ul {
	list-style: none;
}


table {
	text-align: center;
	margin: 10px auto;
}

td {
	width: 110px;
	height: 110px;
	border: 1px solid #000; 
	text-align: center;
}

.
.
.
Vielmehr Angaben braucht du für die Tabellen eigentlich nicht; position:absolute Angaben können entfallen, float:left reicht aus ...

HTML-Gerüst
Code:
<div> (Kopfteil margin-bottom:6px) </div>
<div> (Menü) </div>
<div> (Inhaltbox feste breite = links + rechts + browserinfo + marginangaben)
	<div> (linke Spalte  float:left; margin-right:6px) </div>
	<div> (rechte Spalte float:left) 
		<table></table>
		<div> (containertext) </div>
	</div>
	<div> (browserinfo   float:left) </div> <- kann ja entfallen
</div>
 
Sind diese Korrekturen für IE wirklich notwendg? so kompliziert ist deine Seite doch gar nicht aufgebaut. (sag ich mal so hier nächtens zwischen 4-9 Grad).

Die Korrekturen habe ich deswegen eingefügt weil ich wollte, dass das Layout auch bei IE-Usern (ab Version 5) bis auf das Pixel mit dem Layout im Firefox übereinstimmt. Und das ist nicht der Fall (Ich glaube man nennt das auch den 3-Pixel-Bug). Bis ich festgestellt habe, dass nur der IE für Mac die Seite korrekt anzeigt, der Windows IE ignorriert komplett das ganze CSS-file nach der ersten Angabe (scheint auch üblich zu sein bei Windows IE soweit ich das gegoogelt habe).
Da aber Mac-User keinen IE benutzen machen die im Moment wirklich keinen Sinn und ein Script gibt eine Empfehlung für einen anderen Browser aus.

Wenn man mit Windows und IE (Javascript nicht aktiviert) meine Seite anschaut sieht man da nicht viel, aber das ist wahrscheinlich auch für jeden HTML-programmierer der "Customer of Hell".

Jetzt funktioniert der CSS-Check auch, ich habe mir so etwas schon gedacht aber mein Editor hat die binären Zeichen nicht angezeigt (nur das übliche Tabs und Leerzeichen). Ich glaube mit dem CSS-File muss ich mich noch mal ausführlicher beschäftigen, vielleicht mache ich dann auch ein neues Thema auf (CSS und IE für Windows)

Ich mache ja eher selten Webseiten aber mich würde schon mal interessieren wie man das richtig professionell macht. Also wie tolerant man gegenüber Windows-IE-Usern und anderen exotischen und älteren Browsern ist bzw. solchen Leuten die auch Javascript nicht aktivieren.

So, das war jetzt lang
lg Luzzy
 
Ich mache ja eher selten Webseiten aber mich würde schon mal interessieren wie man das richtig professionell macht. Also wie tolerant man gegenüber Windows-IE-Usern und anderen exotischen und älteren Browsern ist bzw. solchen Leuten die auch Javascript nicht aktivieren.
Tja, einfache Antwort: ich mache Webseiten für das Internet. Und eine Seite zu gestalten, die komfortabler mit, aber dennoch auch ohne, Javascript funktioniert, ist gar nicht sooo schwer.
 
Aber mal zu XML Tag. Ich brauche den leider öfters, weil ich ungern hernehme. Eben wegen der besagten Problematik! Was nehme ich am Besten her?
@ThaHammer, nur noch mal nachgefragt: Was meinst du mit XML Tag? Vielleicht hab ich das ja völlig falsch verstanden.
 
Zurück
Oben Unten