Bin geschockt. Mein Entwurf sieht ja beim IE sehr fehlerhaft aus.
http://www.salzbergen-web.de/weikersheim/
Da müssen ja einige IE-Patches nötig sein, aber wo und was?
Die CSS-Datei wurde als CSS level 2.1 validiert!

Könnt ihr mir da ein paar Tipps aus der Praxis geben? Ich fürchte der Kund ebetrachte die Seite mit dem IE!

Vielen Dank

Norbert

Hallo Norbert,

der HTML-Code enthält Fehler:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.salzbergen-web.de%2Fweikersheim%2F

Hallo Norbert,

ich konnte nur einige grundsätzliche Fehler sehen, ansonsten müsste ich beide Dateien selber bearbeiten könnnen.

1. du darfst der Liste nicht "absolute" geben, darum sind alle Grossnavigationspunkte (Badmington... auf einem Fleck)
Dem Div absolute zu geben reicht da auch schon, die Liste muss ja als "box" gesetzt untereinander stehen können, das kann sie aber nur, wenn nicht jedes "li" den selben Punkt auf der Anzeige hat. Also das li rausnehmen aus der absoluten Positonierung...
Auch wenn "position" nicht vererbt wird, behaupte ich mal, dass du durch die mehrfache Zuweisung (z.B. #navi, #navi ul, #navi ul li) auch die Positonierung übergibst. Trenn doch diese Werte einfach...

2. Du kannst den Scrollbalken auch abstellen indem du z.B. im CSS das so machst.

Code

html { 
  overflow: hidden; 
} 

Und erst in den nötigen Bereichen wieder "overflow: auto"; oder scroll setzt. Das hidden im html verhindert die Anzeige der Scrollbalken auch im IE.

Noch etwas Grundstätzliches: Wenn du z.B. eine Navigation machst, so erstellst du ja normalerweise einen Div darum, warum gibst du nicht dem Div einfach ein "Padding: ...;" mit? So werden die Abstände von Ihnhalt zum Div-Rand gesteuert, anstatt danach jedes einzelne Element zu setzen. Zudem hat das setzen von Padding und Margin beim li völlig andere Bedeutung als wenn du das im Div machst.

Wenn du den ersten Punkt beachtest, wird sich die Anzeige schon fast in wohlgefallen auflösen :-)

Ich glaube damit solltest du wenigstens einen Ansatz haben wo du beginnen kannst. Viel Arbiet beim CSS ist halt auch probieren.

Gruss

minou

P.S. du hast das li zwar nicht direkt absolut gesetzt, aber durch den Zusammenzug der Div und ul/li hat das sicher auch Auswirkungen auf die Unterlemente, diese "bekommen" ja wahrscheinlich schon zugewiesene Formatierung "zwangsläufig" vererbt. Zudem ist der Div der Navi verschieden gesetzt (relative und absolute).

Ja, danke. Find euch alle super hier! Was wäre ich ohne euch.

Ich hatte mit dem Webdeveloper von Firefox- Extra-lokales CSS validieren.
http://jigsaw.w3.org/css-validator/validator validiert und der hat mir gratuliert!
Naja, Firefox hatte ja auch keine Probleme.

Aber wie bekomme ich die Mouseovereffekte mittels CSS hin?
Die sind jetzt ja weg! Du hast bestimmt eine saubere CSS-Idee.

Bin gespannt
Vielen Dank im voraus

Norbert

Hallo Norbert,

für normale Linkeffekte musst du hover und focus gleichermassen setzen, oder was für Effekte meinst du genau?

Du kannst auch den Links Klassen geben, indem du z.B. anstatt a:link einfach a.klasse:link schreibst...

Du musst unbedingt die Reihenfolge der Aufstellung einhalten und setzt diese Zeilen einfach unten in dein CSS File. Für jede Linkformatierung solltest du alle Zustände auch in dieser Reihenfolge setzen.

Gruss

minou

Code

Beispiel: 
(Farben, Schrifgrösse und weiteres musst du nur im a: setzen (ev auch im a:link), wenn sich diese nicht verändern, werden Formatierungen übernommen. Ansonsten einfach neue Farbe setzen, z.B. beim visited und focus/hover. 
Die Reihenfolge ist einfach sehr wichtig... 
 
 
a: {}  // setzen des a allgemein 
a:link {}  // setzen des Links allgemein 
a:visited {} // Besucht 
a:focus {} // im Focus 
a:hover {} // d.o. (im Focus) 
a:active {} // laden, möchtest du aktiv bis zum nächsten Aufruf "halten, so gibt es einfache Tricks mit JS, oder PHP. 

Hallo Norbert,

das sieht schon sehr gut aus, aber im FF ist links ein zu grosser Abstand.

Dazu würde ich folgendes versuchen (der Rand links bei Badmingont... kommt von einem Padding. (wahrschenlich zwischen Div und li)

gib doch direkt in den lins das Padding an, so 2-3 Pixel in alle Richtungen, wenn dann der Text nach links rutscht, löst du dies mit "margin-left: ...;"

Du musst dir immer vorstellen padding ist innerhalb, also padding: 3px macht rundum einen Rand von 3px und dort ist dann der "Rand" des Links. Bei margin geht es um den Abstand ausserhalb dieses Padding-Randes, also kannst du:

1. mit z.B. padding: 3px; den Rahmen rundum auf 3px setzen.
2. mit margin-left: ...px setzt du das Element wieder nach rechts.

Ich hoffe dass ich dir helfen konnte. Obige Formatierungen würde ich direkt in die Linkklassen schreiben, mach lieber eine Klasse für diese Links und kopiere einfach alles ohne Klasse, damit die normalen Links noch stimmen...

Lange Rede - kurzer Sinn. Ich hoffe du konntest mein Anstatz einigermassen nachvollziehen.

Gruss

minou

Ich bin jetzt von den verschiedenen Mousover-Effetken mit CSS (http://www.salzbergen-web.de/weikersheim/index_mit_div_badminton_etc.html) weggegangen. Ist mir zu kompliziert. Das Problem war ja, dass die Grafiken höher als die Buttons waren. Deswegen auch das margin-bottom: -10px.
Habe jetzt einheitliche a:hover gesetzt.
Aber jetzt noch ein Probleme:
Warum sind im IE die Buttons oben Vorstand etc. nicht genauso wie Termine etc.
Die haben doch beide "padding: 3px 5px 3px 5px;".

Danke

Norbert

Hallo Norbert,

in deinem Screenshot sind keine solchen Links auch nicht im Quelltext.
Aber so wie du das beschreibst, sind es zwei verschiedene Menüs. Es kommt jetzt darauf an, in was du die Menüs packst.

Vielleicht hilft dir der Code unten weiter, wenn du die Links in einer Zeile haben möchtest, so floate diese doch einfach. Das
Beispiel läuft so und ist getestet. Falls du Teile davon einsetzt, kannst du ja das CSS in deine CSS Datei machen.
Ansonsten könntest du auch die Links in eine Zeile setzen, aber dann darfst du keine Blockelemente im Code dazwischen haben. Darum wirst du auch das padding -10px gebraucht haben.
Obwohl, ich finde das nicht so schlimm, wenn auch mal ein - im padding ist.

Ich hoffe ich konnte dir ein wenig den Weg aufzeigen.

Gruss

minou

P.S.

Die Höhe der Zeile (bei Texten) setzt du am besten mit
line-height: 1.2em; //dies wären 1.2 Zeilen
oder:
line-height: 20px; //usw..

Code

<html> 
  <head> 
 
    <style type="text/css"> 
    div { 
      width: 400px; 
      border: 1px solid black; 
    } 
 
    .left { 
      float: left; 
      padding: 5px; 
    } 
 
    .right { 
      float: right; 
      padding: 5px; 
    } 
    </style> 
 
  </head> 
  <body> 
    <div> 
    
      <a class="left" href="...">text 
      <a class="left" href="...">text 
      <a class="left" href="...">text 
      <a class="right" href="...">text 
      <a class="right" href="...">text 
 
    </div> 
    <br style="clear: both;" /> 
  </body> 
</html> 

Hallo Norbert,

du kannst natürlich die Browserinterne Formatierung nehmen. Aber diese Formatierung der Links ist DIE Grundformatierung.
Ich denke dass du vielleicht nicht weisst, was du in etwa angeben kannst.

Ich stelle dir hier einfach mal drei Beispiele rein, vielleicht bringt dich das dann weiter, danach muss ich leider. Wenn du nicht auf der ganzen Site blaue und violette Standardlinks haben möchtest, so würde ich das wirklich mit diesen Vorgaben formatieren.
Aber ich möchte dir natürlich nicht dreinreden :-)



Schöne Grüsse

minou

Code

a               {padding: 2px 3px; line-height: 1.4em; font-family: vera-sans, verdana, sans-serif;} 
a:link          {padding: 2px 3px;} 
a:visited       {padding: 2px 3px;} 
a:focus         {padding: 2px 4px 2px 2px;} 
a:hover         {padding: 2px 4px 2px 2px;} 
a:active        {padding: 2px 3px; } 
 
 
a.menu          {padding: 2px 3px; margin: 2px 3px; line-height: 1.15em;} 
a:link.menu     {color: #000; padding: 2px 3px; margin: 2px 3px;} 
a:visited.menu  {color: #000; padding: 2px 3px; margin: 2px 3px;} 
a:focus.menu    {color: #666; padding: 2px 4px 2px 2px; margin: 2px 3px;} 
a:hover.menu    {color: #666; padding: 2px 4px 2px 2px; margin: 2px 3px;} 
a:active.menu   {padding: 2px 4px 2px 2px; margin: 2px 3px; color: #efefef;} 
 
 
a.menu2         {padding: 2px 2px 2px 10px; margin: 2px 3px; line-height: 1.2em;} 
a:link.menu2    {color: #333; padding: 2px 10px; margin: 2px 3px;} 
a:visited.menu2 {color: #333; padding: 2px 10px; margin: 2px 3px;} 
a:focus.menu2   {color: #999; padding: 3px 2px 1px 10px; margin: 2px 3px;} 
a:hover.menu2   {color: #999; padding: 3px 2px 1px 10px; margin: 2px 3px;} 
a:active.menu2  {padding: 2px 4px 2px 10px; margin: 2px 3px; color: #eee;} 

Es sind natürlich noch diverse weitere Dinge möglich, ich versuche dir mal die meisten auf zu zählen.

border, height, width, display, color, background-color, font-size, font-family, font-weight, text-transform, text-decoration, word-spacing, letter-spacing, position,
...

1. http://www.salzbergen-web.de/weikersheim/

Antwort auf [ gassnergrafik ]

Warum sind im IE die Buttons oben "Vorstand etc." nicht genauso wie "Termine etc."
Die haben doch beide "padding: 3px 5px 3px 5px;".

Das verstehe ich immer noch nicht.
Ich habe jetzt

#kopfzeile #nav_oben a {
line-height:20px;}

und mit

#kopfzeile #nav_oben {
position:absolut; bottom:-4px;

wieder rangeschoben. Klappt!

Bei #inhalt #textbereich #nav_oben2 a{} habe ich es bei dem padding belassen. Klappt nur hier aber auch !!!

2. Abgesehen davon habe ich Probleme nur beim Firefox ?!?!? :
Die Buttons oben übernehmen als a:active den a:hover Zustand von den linken Buttons. Was habe ich denn da falsch gemacht? Da muss doch ein kleiner Fehler in meiner CSS-Datei sein, oder?

3. Ich habe alle Navis mit ul li angelegt. Wie es auf vielen LernVideos gezeigt wird. Nur habe ich noch nicht den entscheidenden Vorteil gesehen. Ich wäre froh, die Vorteile zu erkennen. Geb mir ja viel Mühe!

Lieben Gruß und Danke

Norbert

Hallo Norbert,

du solltest immer die Reihenfolge einhalten, hover und focus sind bei dir vertauscht.
Ich hatte zwar noch nie solche Probleme, darum nehme ich mal an, es liegt an der falschen Reihenfolge. Zudem verträgt nicht jeder Browser, wenn du Linkangaben mit Klassen und ID Angaben mischst?!?

normale Reihenfolge:

Code

a               {padding: 2px 3px; line-height: 1.4em; font-family: arial;} 
a:link          {padding: 2px 3px;} 
a:visited       {padding: 2px 3px;} 
a:focus         {padding: 2px 4px 2px 2px;} 
a:hover         {padding: 2px 4px 2px 2px;} 
a:active        {padding: 2px 3px; } 

Wenn du ein Klasse angeben möchtest, so solltest du das so machen:

Code

a.menu          {padding: 2px 3px; margin: 2px 3px; line-height: 1.15em;} 
a:link.menu     {color: #bb3300; padding: 2px 3px; margin: 2px 3px;} 
a:visited.menu  {color: #990000; padding: 2px 3px; margin: 2px 3px;} 
a:focus.menu    {color: #aa3300; padding: 2px 4px 2px 2px; margin: 2px 3px;} 
a:hover.menu    {color: #aa3300; padding: 2px 4px 2px 2px; margin: 2px 3px;} 
a:active.menu   {padding: 2px 4px 2px 2px; margin: 2px 3px; color: #efefef;} 

Die Formatierungen sind von einer Site, hab es einfach mal stehen lassen...


Gruss minou

Hallo Norbert,

wegen dem Border, das ginge noch etwas einfacher...

du kannst das auch so angeben:

Code

border-left: 1px solid black; 

oder einfach bei allen:

Code

border: 1px solid black; 

Du hast eine etwas ungewöhnliche Art, die Bereiche anzugeben, wahrscheinlich ist dies auch die Ursache für die Probleme:
Warum gibst du denn nicht einfach so etwas an:

Code

#inhalt { 
... 
} 
 
#textbereich { 
... 
} 
 
#nav_oben { 
... 
} 

Falls du das machst, weil es mehrere Bereiche gibt, so solltest du Klassen und keine IDs verwenden. Eine ID sollte immer nur einmal vorkommen, Klassen sind egal.

Oder bei der Angabe #inhalt #....en2 a {
...
}
Das [b]a ist Teil einer ganzen Formatierungsreihe, was wahrscheinlich auch Probleme bereitet. Also ich würde Links nicht mit anderen Formatierungen mischen.

Für eine klare Formatierung würde auch die Angabe

Code

#nav_oben2 a { 
... 
} 

vollkommen ausreichen.

Oder mach doch einfacher eine Klasse für die Links. Leider kann ich dir sonst auch nicht weiterhelfen, aber beachte immer, in CSS ist weniger oft mehr, zudem ist es unnötig immer die ganzen Elternelemente mit anzugeben.

Gruss nochmal

minou :-)

Zunächst einmal vielen Dank für deine Mühe! Habe schon viel gelernt!

Ich habe deine Ratschläge umgesetzt. Die CSS-Formatierung habe ich von der LernDVD Little-Boxes. Ich habe jetzt aber alle überflüssigen IDs entfernt und die Kommentierung entsprechend erweitert.
Dann habe ich die a, a:link, a:visited, a:hover, a:active in die richtige Reihenfolge eingefügt.
Dann hat die Seite noch mehr gesponnen.
Als nächstes habe ich wieder link, visited, active rauskommentiert. Wieder Chaos, aber anderer.
Dann habe ich wieder a:hover, a:focus (falsche Reihenfolge) gesetzt. Ging wieder bedingt. Und jetzt habe ich a:focus rausgeschmissen! Alles geht bei allen Browsern.

Hat mir keine Ruhe gelassen
Jetzt habe ich focus separat eingefügt. Und ALLES GEHT !!!
Die Kommentierung von a:link, a:visited, wieder weggenommen und ALLES GEHT !!!

Es gab also bei meiner Konstellation Probleme mit
a:hover, a:focus {} in einer Zeile. Warum auch immer, ist mir jetzt echt egal.
Ich bin jetzt erstmal happy!!!

Kannst du dir das erklären?

Noch eine nervige Frage:
Beim IE rückt die Seite beim ersten Klick, egal auf welchen Button, ca. 3px nach links. Ist nicht schlimm, aber jetzt bin ich doch ein wenig ehrgeizig geworden.

Nochmal tausend Dank und entschuldige für die Nerverei

Norbert

Anbei zum, ich hoffe, letzen Mal meine CSS-Datei

Hallo Norbert,

Das mit den Links würde ich effektiv ändern (jeder Zustand eine Zeile, besser gesagt - ein Formatierungsblock), zudem würde ich diese Formatierungen zuletzt vergeben. Wenn du diese Zustände zusammennimmst, kann der Browser diese anscheinend nicht mehr genau bestimmen und beginnt zu spinnen. Aber meines Wissens müsste sogar das möglich sein, aber ohne weitere Containerangaben oder sonstiges.

Das ist ja auch einfach zu erklären, z.B. ist active ein anderer Zustand als focus, hover ist nochmal ein wenig anders (IE konnte hover früher nichtmal).

Du musst dir vorstellen dass du durch einen Klick nun hover UND focus vergibst, was soll der Browser mit dieser Anweisung anfangen? Soll er nun hover oder focus nehmen? Folge ist wahrscheinlich was du beschreibst.

Die drei Pixel nach links rutschen würde ich auch auf das zurückführen, weil du immer noch Container mit Linkzuständen vermischt. In dem Moment wo du anklickst, werden ja die Padding Werte überschrieben und alle sonst bestehenden Werte, die erneut definiert werden.

Wenn ich dich wäre würde ich wirklich Linkformatierungen strikte von anderen Formatierungen trennen. Sonst kannst du es mal versuchen, gib z.B. einem Container auch eine Linkanweisung, schon ist der Teufel los (das hast du ja jetzt).
Zudem hast du glaube ich nur eine Sorte Linkangaben, da ist eine weitere Angabe vollkommen überflüssig das führt wirklich nur zu Problemen. Wie willst du denn bestimmen, was der Container bekommen soll und was der Link? -> das geht so eben gar nicht, vor allem der FF verträgt mehrschichtige Angaben oft nicht wie #... a:... {...}.

Ich möchte dir hier keine Vorschriften machen, oder deinen Code vermiesen, aber versuchen würde ich es wirklich einmal und du wirst sehen, dass die Probleme gelöst sind, wenigstens die Linkprobleme.

Bei den Angaben top, left und bottom, right solltest du darauf achten, dass du die Vorgaben einhältst. Entweder sollte man left, top oder/und bottom, right einsetzen, aber nicht z.B. "bottom und left", wenn du es so machen musst, würde ich wennschon mal zu

bottom:...;
right: auto;
und anstatt left halt ein margin-left:...; setzen. oder du gibst alle Werte an und bei den "leeren" gibst du auto an.

Falls es der Hintergrund ist der verrutscht (mal von den Links abgesehen, die wahrscheinlich diese Verschiebung machen), so würde ich das so machen:

background-image: url(...);
background-attachment: ....; (fixieren oder scrollend)
background-position: top, left, bottom, right, center(middle)

beim background-position: kannst du auch die Werte:

...: top: 20px left: 50px;

oder sonstwas vergeben, aber Achtung! Nicht alle Browser schlucken das.

Wenn du das Layout nicht hinbekommst, kannst du mir sonst eine PM oder Email senden mit der HTML und der CSS-Datei, dann könnte ich dir das mal als Beispiel schreiben. :-)

Trenne doch wirklich mal die Links von den anderen Werten, ich kann mir das nicht anders erklären.

Schöne Grüsse

minou

P.S. du kannst auch den Scrollbalken im IE wegnehmen, anstatt jedem so etwas zu geben. Einfach im HTML (101% rausnehmen) overflow: hidden; geben. Fast besser -> Nur für den IE kannst du overflow-y: hidden; (oder x für horizontal) vergeben, dies ist eine CSS3 Angabe, welche aber im IE 6 und 7 geht.
(die Formatierung stammt von MS). im Content-Container kannst du dann wieder
(nur für ie, die anderen Browser sind ja nicht betroffen oder formatiert worden -> overflow-y: scroll/auto; angegeben.)
Ein Problem hat diese Angabe aber, es wird nicht validiert, auch wenn es ohne Probleme funktioniert (CSS3 ist ja noch nicht offiziell).


Ist ein wenig ein Durcheinander geworden, ich hoffe du kannst mein Geschreibsel noch lesen :-)