Tabelle: vertical-align

Diskutiere das Thema Tabelle: vertical-align im Forum Web-Design.

  1. Luzzy

    Luzzy Thread Starter Mitglied

    Beiträge:
    45
    Zustimmungen:
    0
    Mitglied seit:
    01.03.2007
    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
     
  2. DrSteino

    DrSteino Mitglied

    Beiträge:
    1.403
    Zustimmungen:
    44
    Mitglied seit:
    27.08.2007
  3. ThaHammer

    ThaHammer Mitglied

    Beiträge:
    3.306
    Zustimmungen:
    13
    Mitglied seit:
    01.06.2004
    Validation: 133 Errors. Wundert mich das man das nicht sieht? :)

    Zum Layout was anderes. Mache statt dem Valign einfach ein Margin um die Bilder.
     
  4. Luzzy

    Luzzy Thread Starter Mitglied

    Beiträge:
    45
    Zustimmungen:
    0
    Mitglied seit:
    01.03.2007
    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
     
  5. bernie313

    bernie313 Mitglied

    Beiträge:
    22.190
    Zustimmungen:
    2.397
    Mitglied seit:
    20.08.2005
    Gib hier deine Webseite ein und du erhältst Auskunft darüber wie oft es hakt auf deiner Seite:
    http://validator.w3.org/
     
  6. UDH5

    UDH5 Mitglied

    Beiträge:
    429
    Zustimmungen:
    26
    Mitglied seit:
    05.07.2007
    <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">
     
  7. ThaHammer

    ThaHammer Mitglied

    Beiträge:
    3.306
    Zustimmungen:
    13
    Mitglied seit:
    01.06.2004
    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?
     
  8. UDH5

    UDH5 Mitglied

    Beiträge:
    429
    Zustimmungen:
    26
    Mitglied seit:
    05.07.2007
    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.
     
  9. Luzzy

    Luzzy Thread Starter Mitglied

    Beiträge:
    45
    Zustimmungen:
    0
    Mitglied seit:
    01.03.2007
    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:
     
  10. Luzzy

    Luzzy Thread Starter Mitglied

    Beiträge:
    45
    Zustimmungen:
    0
    Mitglied seit:
    01.03.2007
    das mit dem Anhang hat nicht funktioniert, ungültiges Dateiformat:

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

    Anhänge:

  11. UDH5

    UDH5 Mitglied

    Beiträge:
    429
    Zustimmungen:
    26
    Mitglied seit:
    05.07.2007
    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.
     
  12. Luzzy

    Luzzy Thread Starter Mitglied

    Beiträge:
    45
    Zustimmungen:
    0
    Mitglied seit:
    01.03.2007
    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:
     
  13. UDH5

    UDH5 Mitglied

    Beiträge:
    429
    Zustimmungen:
    26
    Mitglied seit:
    05.07.2007
    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).
     
  14. DrSteino

    DrSteino Mitglied

    Beiträge:
    1.403
    Zustimmungen:
    44
    Mitglied seit:
    27.08.2007
    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*
     
  15. UDH5

    UDH5 Mitglied

    Beiträge:
    429
    Zustimmungen:
    26
    Mitglied seit:
    05.07.2007
    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>
     
  16. Luzzy

    Luzzy Thread Starter Mitglied

    Beiträge:
    45
    Zustimmungen:
    0
    Mitglied seit:
    01.03.2007
    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
     
  17. UDH5

    UDH5 Mitglied

    Beiträge:
    429
    Zustimmungen:
    26
    Mitglied seit:
    05.07.2007
    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.
     
  18. UDH5

    UDH5 Mitglied

    Beiträge:
    429
    Zustimmungen:
    26
    Mitglied seit:
    05.07.2007
    @ThaHammer, nur noch mal nachgefragt: Was meinst du mit XML Tag? Vielleicht hab ich das ja völlig falsch verstanden.
     
Die Seite wird geladen...
Ähnliche Themen - Tabelle vertical align
  1. Escorpio
    Antworten:
    0
    Aufrufe:
    310
  2. Theo2459
    Antworten:
    4
    Aufrufe:
    1.627
  3. hightime-fan
    Antworten:
    0
    Aufrufe:
    2.384
  4. ben-pen
    Antworten:
    2
    Aufrufe:
    588
  5. wusa
    Antworten:
    4
    Aufrufe:
    1.367

MacUser.de weiterempfehlen

  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Akzeptieren Weitere Informationen...