Probleme mit CSS + valides HTML

Dieses Thema Probleme mit CSS + valides HTML im Forum "Webentwicklung, Hosting & Programmierung" wurde erstellt von Sahne, 23. Juli 2003.

Thema: Probleme mit CSS + valides HTML Hallo, Ich habe die BETA-Version von meiner Homepage online gestellt .. www.freewebs.com/sahne . Auf verschiedenen...

  1. Hallo,

    Ich habe die BETA-Version von meiner Homepage online gestellt .. www.freewebs.com/sahne .

    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 www.schattenbaum.net/css 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. 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?

    [hr]
    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.

    [hr]
    Mach ich, nachdem alles funktioniert.

    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,

    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.

    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 www.freewebs.com/sahne

    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
     
  7. Hallo PCDSmartie,

    Zum Programm:
    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
     
  8. 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
     
Die Seite wird geladen...

Probleme mit CSS + valides HTML - Ähnliche Themen

Forum Datum
SEHR DRINGEND: Probleme bei Upgrade auf Windows 7 Windows Vista Forum 13. Nov. 2016
W10M - Glance Screen & DTTWU Probleme Windows 10 Forum 4. Nov. 2016
probleme mit windows 7 update bitte um hilfe. Windows 7 Forum 4. Nov. 2016
Probleme mit .NET Framework 3.5 installation Windows 10 Forum 19. Okt. 2016
Windows 10 Bluetooth Probleme Windows 10 Forum 17. Okt. 2016