Probleme mit CSS + valides HTML

  • #1
S

Sahne

Guest
Hallo,

Ich habe die BETA-Version von meiner Homepage online gestellt .. .

Auf verschiedenen Websites, die Tipps zur Homepage-Erstellung geben, habe ich gelesen, dass zukünftig fast alle Formatierungen (z.B. Hintergrundfarbe, Schriftart) mit CSS (Cascading Style Sheets) definiert werden. Deswegen habe ich mir durchgelesen. Da dort die die grundlegenden Elemte von CSS sehr gut erklärt werden, verwende ich CSS auch für meine Homepage.

Jedoch treten nun ein paar Fehler auf.
Ich möchte, dass die Links (also auch die in der Navigation) nicht unterstrichen sind, jedoch sind am Anfang alle außer manchmal der E-Mail-Link unterstrichen - sobald man einen anderen Link anklickt (z.B. Home) sind die Links nicht mehr unterstrichen. Nun verschiebt sich aber die Tabellenzelle, in der die Navigation und der Inhalt enthalten sind, etwas nach unten und der Spalt zwischen Titelbild und Tabellenzelle wird gößer. Ich sollte jedoch darauf hinweisen, dass eine dünne lila Linie dazwischen beabsichtigt ist - also so wie diese am Anfang gewesen ist. Diese Linie ist aber direkt in der Grafik des Titelbildes enthalten.
Wenn ich einen Link anklicke ist anstelle des Against-TCPA-Banners nur ein leeres Feld zu sehen oder die Grafik verschwindet ganz.

Auch wenn ich alle Links (außer E-Mail) wieder auf die selbe Seite verlinken - nämlich index.html - dürften derartige Fehler eigentlich nicht auftreten.

Könntet ihr bitte mir sagen, wie ich die Probleme lösen kann? Ihr könnt natürlich auch meine Seite im Allgemeinen kritisieren.

.. Sahne

PS:
Diese Beschreibungen habe ich offline gemacht - online sind die Links immer unterstrichen und der Against-TCPA-Banner verschwindet nicht. Der Spalt zwischen Titelbild und der unterliegenden Tabellenzelle bleibt gleich dünn.

Offline ist mir ebenfalls aufgefallen, dass Mozilla das Titelbild nur zentriert, wenn ich den Tag <center></center> verwende, obwohl einige Zeilen darüber <table ... align=center> steht.

Wie kann man sich die Unterschiede zwischen offline und online erklären?
 
  • #2
Sahne schrieb:
Jedoch treten nun ein paar Fehler auf.
Ich möchte, dass die Links (also auch die in der Navigation) nicht unterstrichen sind, jedoch sind am Anfang alle außer manchmal der E-Mail-Link unterstrichen - sobald man einen anderen Link anklickt (z.B. Home) sind die Links nicht mehr unterstrichen.
Zum Vergrößern anklicken....

Moin,
ich habe mal auf die schnelle reingeschaut,
aufgefallen ist mir bei deinem css folgendes:
auszug deiner css
a:link { font-family:Arial, Verdana, Helvetica, sans-serif; font-size:12pt; text-decoration:none; color:#FFFFFF; }
a:visited { color:#FFFFFF; }
a:aktiv { color:#FF5F00; }

du hast bei a:link text-decoration:none
das solltest du auch bei a:visited und a:aktiv reinschreiben
somit werden die links nicht mehr unterstrichen.

ansonsten würde ich css nicht in jede datei reinschreiben sondern nur eine reine css datei erstellen. die bindest du im head bereich deiner html datei ein. bsp. <link rel=stylesheet type=text/css href=styles.css> das hat den vorteil, das du nur hier etwas ändern mußt und nicht in jeder datei. ;)

kleine anmerkung am rande, wenn du die linkunterstreichung testen willst, solltest du vor jedem test deine Temporary Internet Files löschen.

gruß
safer
 
  • #3
Hi

Änder mal
Code: 
<tr>
<center><img src=img/titelbild.png width=700 height=100 border=0 alt=></center>
</tr>
in
Code: 
<tr>
<td align=center><img src=img/titelbild.png width=700 height=100 border=0 alt=></td>
</tr>

und wegen den Links
Code: 
a:link { font-family:Arial, Verdana, Helvetica, sans-serif; font-size:12pt; text-decoration:none; color:#FFFFFF; }
a:visited { color:#FFFFFF; }
a:aktiv { color:#FF5F00; }
a:hover { color: #58677C; background-color: #C6CDDE; }
in
Code: 
a {text-decoration: none !important}
a:link { font-family:Arial, Verdana, Helvetica, sans-serif; font-size:12pt;  color:#FFFFFF; }
a:visited { color:#FFFFFF; }
a:hover { color: #58677C; background-color: #C6CDDE; }
a:active { color:#FF5F00; }

Gruß, Michael
 
  • #4
Danke für eure Antworten,

ich habe nun folgenden Code für die Links gewählt...

Code: 
a {text-decoration: none !important;  font-family:Arial, Verdana, Helvetica, sans-serif; font-size:12pt;}
a:link { color:#FFFFFF; }
a:visited { color:#FFFFFF; }
a:active { color:#FFFFFF; }
a:hover { color: #58677C; background-color: #C6CDDE; }

...und es funktioniert. Die Spalte zwischen Titelbild und der unteren Tabellenzelle verändert sich auch nicht mehr.
Muss man !important schreiben, oder ist das nur ein Kommentar?

Das
Code: 
a:aktiv { color:#FF5F00; }
war nur ein Überbleibsel vorheriger BETE-Versionen. Das habe ich in
Code: 
a:active { color:#FFFFFF; }
geändert.

Steht
Code: 
a {text-decoration: none !important;  font-family:Arial, Verdana, Helvetica, sans-serif; font-size:12pt;}
für alle
Code: 
a:*
? Wenn ja, ist es dann notwendig, die Definition der Schriftart etc. nochmals in jedem
Code: 
a:*
zu schreiben?


Wenn ich
Code: 
<tr>
<td align=center><img src=img/titelbild.png width=700 height=100 border=0 alt=></td>
</tr>
verwende, wird die gesamte Homepage gezerrt - warum?

Gibt es einen CCS-Tag, mit dem man festlegt, dass die Tabelle/Tabellenzelle/Datenzelle zentriert werden. Bisher kann ich nur die vertikale Ausrichtung mit
Code: 
table, tr, td { vertical-align:top; }
festlegen.


ansonsten würde ich css nicht in jede datei reinschreiben sondern nur eine reine css datei erstellen. die bindest du im head bereich deiner html datei ein. bsp. <link rel=stylesheet type=text/css href=styles.css> das hat den vorteil, das du nur hier etwas ändern mußt und nicht in jeder datei.
Zum Vergrößern anklicken....
Mach ich, nachdem alles funktioniert.

kleine anmerkung am rande, wenn du die linkunterstreichung testen willst, solltest du vor jedem test deine Temporary Internet Files löschen.
Zum Vergrößern anklicken....
Danke, auch wenn man auf Aktualisieren klickt, interpretiert der Browser die Seite oft immer noch so, wie sie vorher war.

.. Sahne
 
  • #5
Hi

Ups die Tabelle wird gezerrt, weil ein Attribut fehlt, muss :
<td colspan=2 align=center>
heißen.

Das !important überschreibt bei CSS Eigenschaften.
Normalerweiße ist bei a:link und den anderen festgelegt, dass sie unterstrichen sind.
wenn du nun bei a allgemein nicht unterstreichen angeben würdest, würde es nichts nützen, weil es von a:link überschrieben würde. Mit dem !important verhinderst du das.
Die Schriftart brauch deswegen dort auch nur einmal hin.

Text zentrieren in Spalten geht über:
td {text-align: center}

Gruß, Michael
 
  • #6
Hallo PCDReitz,

Ups die Tabelle wird gezerrt, weil ein Attribut fehlt, muss :
<td colspan=2 align=center>
heißen.
Zum Vergrößern anklicken....

Jetzt sieht die Seite nicht mehr verzerrt aus. Jedoch ist das Titelbild nun auch von einem Rand in der selben Farbe umgeben. Bei Opera und Mozilla sieht das gar nicht mal so schlecht aus, aber der Internet Explorer stellt das Titelbild in einem etwas dunkleren Farbton dar.
Ich habe nämlich die Grafiken mit Paint erstellt - während man das Bild erstellt ist es automatisch eine *.bmp-Datei. Da im Internet Grafiken mit kleinen Volumina besser geeignet sind, habe ich die Grafik als *.png-Datei gespeichert - daher der dunklere Farbton.
Ich möchte noch hinzufügen, dass ich mit *.png-Grafiken bessere Erfahrungen als mit *.jpg-Grafiken gemacht habe, da beim *.jpg-Format die Grafiken manchmal teilweise verschwommen wirken, was sich auf die Kompression der Datei zurückzuführen lässt. Beim *.png-Format ist das zwar auch manchmal der Fall, aber die Kompression wirkt sich nicht so stark auf die Qualität der Grafik aus als bei *.jpg-Grafiken, obwohl diese bei *.png-Dateien manchmal noch stärker ist. Jedenfalls ist das nach meinen Erfahrungen so - ich erstelle meistens auch einfachere Grafiken, also ich weiß nicht ob man das auch auf Foto-Dateien übertragen kann.

Text zentrieren in Spalten geht über:
td {text-align: center}
Zum Vergrößern anklicken....
So wird aber auch nur der Text zentriert, die Spalten bleiben stndardgemäß auf der linken Seite. Zur Veranschaulichung habe ich aus <table width=700 border=0 cellspacing=0 cellpadding=10 align=center>
align=center entfernt ... siehe

Die Schriftart brauch deswegen dort auch nur einmal hin.
Zum Vergrößern anklicken....
Also wirkt sich das !important auf alle Elemte in der geschweiften Klammer aus. Ist das egal wo !important steht, solange es in der Klammer enthalten ist?

.. Sahne
 
  • #8
Hallo PCDSmartie,

Zum Programm:
MailtoScrambler konvertiert die Klartextmailadresse in Unicode bzw. baut diese in eine JavaScript-Funktion ein.
Zum Vergrößern anklicken....
Ich habe gelesen, dass JavaScript kein valides HTML ist.
Vorher hatte ich auch die Navigation meiner Seite mit JavaScript erstellt - Da ich aber eine Homepage haben möchte, die möglichst auf allen Browsern richtig dargestellt wird, habe ich dann CSS verwendet.

.. Sahne
 
  • #10
Hi

@Sahne
Damit die Tabelle selbst zentriert ist musst du noch den CSS bei Body abändern:
body{text-align: center}

Das !important gilt nur für den Wert hinter dem es steht.

Gruß, Michael
 
  • #11
Hallo,

@ PCDReitz:
Danke, jetzt ist die gesamte Tabelle zentriert. Jedoch hatte mich das text in text-align: center ein bischen verwirrt, weil ich gedacht hatte, dass sich das nur auf Text bezieht.

Gibt es in meinem Quelltext weitere Funktionen, die ich mit CSS lösen kann?

Ich habe mit dem geprüft, ob ich meine Homepage valide erstellt habe - nach dem Ergebnis zu urteilen nicht ...
Code: 
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.freewebs.com%2Fsahne%2F
Wie kann ich das ändern?

.. Sahne
 
  • #13
Hallo PCDReitz,

Code: 
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//DE
   [url]http://www.w3.org/TR/html4/strict.dtd>[/url]
<html>
<head>

<title>| .. Sahne's digitalisierte Hausseite .. v.0.9 |</title>

<meta http-equiv=content-type content=text/html; charset=ISO-8859-1>
So richtig? - Ich weiß nicht genau ob meine Seite ...strict.dtd ist.

Jedenfalls liefert nun der Validator ein Ergebnis ... Meine Homepage ist noch nicht valid, acht Punkte muss ich ändern, aber ich weiß nicht genau wie.

Im Ergebnis steht z.B. oft there is no attribute ***. Bedeutet das, dass ich das Attribut löschen muss?

Nachtrag:
@ PCDReitz:
Danke, jetzt ist die gesamte Tabelle zentriert. Jedoch hatte mich das text in text-align: center ein bischen verwirrt, weil ich gedacht hatte, dass sich das nur auf Text bezieht.
Zum Vergrößern anklicken....
Die Tabelle wird zentriert, aber auch der Text. Damit der Text links ausgerichtet ist, habe ich nun table, tr, td { text-align:left; } geschrieben und body { text-align:center; } stehen lassen.
Trotzdem wundere ich mich, warum das nicht einfach align heißt. es heißt ja auch vertical-align und nicht vertical-text-align.


.. Sahne
 
  • #15
Hallo,

allerdings solltest du das transitional nehmen, dann gibts auch weniger Fehler
Zum Vergrößern anklicken....
Ich habe das mal ausprobiert, aber bei transitional enthält meine Homepage 97 und bei strict nur 8 Fehler.
EDIT: Von den 8 Fehlern habe ich 2 behoben (Ausrichtungsfehler).


Wegen Stylesheets lies halt mal hier nach:
Zum Vergrößern anklicken....

Danke, ich habe dort oft das Absatz-Element <p></p> in Verbindung mit Textausrichtung gesehen.
Bedeutet dass, das man z.B. eher <p style=text-align:left>Inhalt</p> statt <left>Inhalt</left> schreiben sollte? Wenn ja, was ist dann <p align=left>Inhalt</p> ?

Ist es falsch, wenn ich immer noch Text, Tabellen usw. mit Nicht-CSS-Elemten ausrichte? z.B. <table width=700 border=0 cellspacing=0 cellpadding=10>

.. Sahne
 
  • #16
Hi

Also wenn ich Transitional angebe werden nur zwei Fehler angezeigt.
<p style=text-align:left>Inhalt</p> ist das gleiche wie
<p align=left>Inhalt</p>
Das erste ist über CSS formatiert, das zweite über HTML.
Letzteres wird aber irgendwann mal wegfallen, dauert aber noch ein paar Jährchen.
<left>Inhalt</left>
Gibts den überhaupt? Wenn ja sollte er nicht mehr verwendet werden.

Im Moment macht es noch nicht Sinn alle HTML Formatierungen per CSS zu machen, Ausrichtung kann man auch noch in HTML direkt machen. Falsch davon ist nichts.

Gruß, Michael
 
  • #17
Hallo PCDReitz,

bei mir findet der Validator nun auch nur zwei Fehler - ich hatte einen Fehler im DOCTYPE.

Ich habe die Fehler auch behoben, indem ich topmargin=0 und bottommargin=0 aus dem Body-Tag entfernt habe und margin-top:0pt; margin-bottom:0pt im CSS-Body-Tag eingefügt habe.

Jetzt zeigt mir der Validator folgendes an ... This Page Is Valid HTML 4.01 Transitional!
valid-html401


Vielen Dank für die Hilfe, PCDReitz!

Bei weiteren Fragen bzw. Problemen mit HTML und CSS melde ich mich wieder im Programmierung & Webmaster - Forum.

.. Sahne


PS: Ein interessanter Artikel zu CSS ...
 
  • #18
Hallo,

mir ist aufgefallen, dass meine (gesamte) Homepage nur im Internet Explorer zentriert dargestellt wird, bei Opera und Mozilla ist diese am linken Rand zu sehen - warum?

.. Sahne
 
  • #19
Hi

Mozilla scheint noch foldendes im Stylesheet zu brauchen:
table {margin-left: auto; margin-right: auto;}

Frag mich aber nicht warum :eek:

Gruß, Michael
 
  • #20
Danke.

Jetzt wird die Seite auch mit Mozilla und Opera zentriert dargestellt.

.. Sahne
 
Thema:

Probleme mit CSS + valides HTML

ANGEBOTE & SPONSOREN

Neueste Themen

Statistik des Forums

Themen
113.840
Beiträge
707.963
Mitglieder
51.494
Neuestes Mitglied
Flensburg45
Oben