Probleme mit CSS-Stylesheets

Hallo,

vielleicht kann mir jemand bei meinem Problem helfen.
Ich versuch gerade für eine Website das Layout zu erstellen. Jetzt hapert es aber an 2 Dingen:

  1. Wenn ich im Firefox über die Links fahre dann erscheint immer am rechten Rand noch so ne graue Box. Ich hab keine Ahnung woher die kommt und weshalb die angezeigt wird. Hab schon etliche Einstellungen an den Styles durchprobiert ohne Erfolg.

  2. Wenn man mit dem IE bei der rechten Linkliste über die Links fährt dann schlägt da der rote Strich durch. Normalerweise dürfte er das aber nicht, da die Links und Listenelemente alle einen höheren z-index haben. Kann mir jemand erklären wieso das dennoch durchkommt?

Als Anschauungsbeispiel hab ich hier mal nen Link. www.wathergate.de/lsc/test3.php In dem Quelltext findet ihr alle CSS Formatierungen.

Wär super wenn jemand auf meine Fragen eine Antwort wüsste…

Moin,

vielleicht kann mir jemand bei meinem Problem helfen.
Ich versuch gerade für eine Website das Layout zu erstellen.
Jetzt hapert es aber an 2 Dingen:

Ich hab noch was drittes gefunden: Deine Semantik taugt nichts. Du kochst allerfeinste div-Suppe ohne einen Hauch von semantischem HTML. Dann wirds sicher einfacher und auch übersichtlicher für Dich, wenn Du nicht jedes Block-Element, wie z.B. Deine Navigation (unordered List, gute Semantik!), nochmal in ein eigenes Block-Element packst. Dass Du da nicht mehr durchsteigst, ist nicht wirklich verwunderlich.

Gruß,
-Efchen

Hallo Wathergate

zum FF:
Die Links sind einfach zu breit: Du gibst 120px als width an, dazu kommen jeweils die 4px padding links und rechts; das ergibt zusammen 128px. Wenn Du die Breite der a-Elemente auf 112px setzt, funktionierts wieder. Ich würde aber allgemein dazu tendieren, für Block-Level-Elemente so wenig feste Breiten wie möglich anzugeben. Die nehmen sich ja soviel Breite, wie sie kriegen können, da ist es häufig stressfreier, die durch ihre Eltern-Elemente zu begrenzen.

zum IE:
Keine Ahnung, aber nen lustiger Effekt… Ich würd den a-Elemenen mal ne background-color geben, vielleicht hilft das ja…

allgemein:
Ich kann Dir sehr das „FireBug“-Plugin für den FF empfehlen: ein unglaublich mächtiges Tool, was einem Stunden an Zeit ersparen kann, wenn man CSS-Bugs sucht. Du kannst einzelne Elemente ‚inspecten‘, und das Teil sagt Dir alle Regeln dazu, auch die vererbten, und Du kannst sie direkt bearbeiten und sehen, was sich verändert. Außerdem ist ein Javascript-Debugger dabei.

Hoffe, das hilft weiter, viel Erfolg,

Juan

Vielen Dank Efchen,

mein Problem ist nur dass ich das erstemal mich an reiner CSS Formatierung ranwage. Ich hab sonst immer alles mit Tabellen geordnet und Formatiert.
Das ich alles so in DIV’s packe hab ich im Netz auf so einer Hilfeseite gelesen und soll ja dafür da sein dass nach dem Anklicken des Links derjenige auch Markiert bleibt.

Wenn es besser und einfacher geht bitte ich um Starthilfe damit auch die Semantik dann etwas besser stimmt und zum Schluss alles wie gewollt funzt.

Gruss
Wathergate

Ne ne, mach Dir mal keinen Stress mit der Semantik… Das kommt Alles mit der Zeit. Hauptsache, Du steigst erstmal aus der Tabellen-Sache aus, das ist schon ein großer Schritt in die richtige Richtung. Efchen hat schon Recht, aber da bringt die Erfahrung ne Menge. Als Grundregel kann gelten: verwende so wenig Elemnte wie möglich. Und dann versuch noch ein paar rauszuschmeißen… dann bekommt man recht schnell ein Gefühl für die Elemnte, und die Struktur wird sauberer. Ähnliches gilt auch fürs CSS: je weniger Regeln für dasselbe Ergebnis, desto besser.

Was die Links betrifft: Ich schätze mal, was Du meinst ist die sog. „Pseudoklasse“ :visited. Die ist aber immer verfügbar.

Noch etwas: in Deinem Code findet sich irgendwo ein ; dafür ist das h1-Element zuständig, das ist aus vielen Gründen zu bevorzugen.

Ansonsten kann ich Dir zwei Webseiten empfehlen: einmal http://www.css4you.de/ und http://www.thestyleworks.de/ . Besonders auf letzterer gibts Unmengen an Informationen, da kann man ne Menge lernen. Es lohnt sich bei CSS sehr, ein wenig Zeit in die Grundlagen zu stecken. Du kannst ja mal die die Quizzes machen, die sind lehrreich und unterhaltsam…

Viele Grüße,

Juan

Hi Juan,
vielen Dank für die Links. Den letzteren kannte ich schon. Von dort hab ich mir auch einiges abgeschaut und dann abgeändert damit ichs für meine zwecke verwenden kann deswegen hats mich eben erstaunt dass es semantisch so schlecht sein soll und auch nicht funzt.

Mein Problem ist oft nur dass es zwar in den allgemeinen Beschreibungen alles recht Abstrakt erklärt ist, ich es aber nicht so umsetzen kann weils immer irgendwo net geht.
Ich bräuchte am besten immer nen Beispielcode (der ungefähr das machen soll was ich suche) damit ich von dort aus weitermachen kann.
So etwas hab ich aber für meinem Fall noch nicht gefunden. Auch auf den beiden Links von dir nicht. Vielleicht kannst du mir ja da nen Tipp geben.

Gruss
Wathergate

Die anderen haben ja schon sinnvolles geschrieben.
Ich wundere mich allerdings, wieviele DIVs du noch verwenden möchtest!? Du nimmst für jede keinste Sache einen DIV, statt nach einem sinnvollem Element zu suchen, und das dann zu formatieren.

Ich nenne diese Krankheit "Divitis :wink:

Gruß Marcus

mein Problem ist nur dass ich das erstemal mich an reiner CSS
Formatierung ranwage.

CSS und semantisches HTML gehören aber zusammen.
Klar, Du sollst Dir keinen Stress machen, aber ob man nun Tabellen zu Layoutzwecken missbraucht, oder div-Suppe kocht, ist beides annähernd gleich schlecht.
Außerdem blockiert es den Lernprozess bei der Gestaltung mit CSS. Viele Umsteiger kapieren nämlich nicht, dass Du CSS auf JEDES Element anwenden kannst, Du musst z.B., um eine Adresse (address) zu positionieren oder einen Rahmen drum zu ziehen, das address-Tag nicht noch mit einem div umschließen, sondern kannst die Formate gleich dem address-Tag mitgeben.

Achtest Du gleich auf die richtige Semantik, wird es noch leichter für Dich.
Und Semantik ist nichts anderes als HTML zu benutzen, wie es gedacht ist. Überschriften mit h1…h6, adressen mit address, wichtiges mit em oder strong, Text mit p.

Ich hab sonst immer alles mit Tabellen
geordnet und Formatiert.

Das ist schonmal eine weise Entscheiden, dem zu entsagen :smile:

Das ich alles so in DIV’s packe hab ich im Netz auf so einer
Hilfeseite gelesen

Dann ist die Hilfeseite aber schlecht. Die würde ich mir nicht weiter ansehen und aus meinen Bookmarks löschen.

und soll ja dafür da sein dass nach dem
Anklicken des Links derjenige auch Markiert bleibt.

Ich weiß nicht ganz, was Du meinst, aber dazu brauchts kein div.

Wenn es besser und einfacher geht bitte ich um Starthilfe
damit auch die Semantik dann etwas besser stimmt und zum
Schluss alles wie gewollt funzt.

Wie gesagt, HTML so nutzen, wie es gedacht ist. Jedes Tag hat eine Bedeutung. div z.B. hat eigentlich keine semantische Bedeutung, ist lediglich ein allgemeines Block-Element, so wie span das allgemeine Inline-Element ist. div benutzt man gewöhnlich nur zum Gruppieren. Und sowas wie ist Mist. Dazu gibt es

Viel Erfolg,
-Efchen

Hi Sven,

Ich nenne diese Krankheit "Divitis :wink:

Den merke ich mir. Danke :smile:

Ciao
Rudy