• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navi mit Liste realisieren

A

assmaje

Neues Mitglied
Da meine Website beim Qualidator nur etwa 75% erreicht, versuche ich jetzt, ein paar Fehler auszubessern.

Aufeinanderanderfolgende Links

Richtlinie 10.5 der Zugänglichkeitsrichtlinien für Web-Inhalte 1.0 W3C-Empfehlung, 5. Mai 1999 besagt: "Bis Benutzeragenten (einschließlich assistiver Technologien) beieinanderliegende Links getrennt darstellen, platzieren Sie druckbare Zeichen, die nicht zu einem Link gehören, umgeben von Leerzeichen, zwischen Links." Zugänglichkeitsrichtlinien für Web-Inhalte 1.0.

Dies bedeutet, dass aufeinanderfolgende Links entweder mit einem druckbaren, nicht verlinkten und von Leerschlägen umgebenen Zeichen voneinander abgegrenzt werden müssen. Sauber und einfach lässt sich diese Problematik lösen, wenn die Links in einer Navigationsliste als Liste <ul> ausgezeichnet sind.

Weiterführende Infos unter:
Vorsprung durch Webstandards | Accessibility nach Vorschrift: Wenn Web-Entwickler zu Bürokraten werden;
SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Listen
Bei der getesteten Website wurden viele ungenügend separierte aufeinanderfolgende Links festgestellt.
Zum Vergrößern anklicken....
Seit der Liste bekomme ich das ganze Navi-Zeuch aber nicht mehr richtig zentriert...

HTML:
Code: 
        <div id="navi">

          <ul id="downloads">

            <li><a rel="nofollow" id="demos" class="orange" href="index.php?page=demos" title="Demos">Demos</a></li>
            <li><a rel="nofollow" id="programme" class="orange" href="index.php?page=programme" title="Programme">Programme</a></li>
            <li><a rel="nofollow" id="flash" class="orange" href="index.php?page=flash" title="Flash">Flash</a></li>
            <li><a rel="nofollow" id="homebrew" class="orange" href="index.php?page=homebrew" title="Homebrew">Homebrew</a></li>
            <li><a rel="nofollow" id="themes" class="orange" href="index.php?page=themes" title="Themes">Themes</a></li>
            <li><a rel="nofollow" id="wallpaper" class="orange" href="index.php?page=wallpaper" title="Wallpaper">Wallpaper</a></li>

          </ul>

          <br class="clear">

          <span id="navi_title_first">Demos</span>
          <span class="navi_title">Programme</span>
          <span class="navi_title">Flash</span>
          <span class="navi_title">Homebrew</span>
          <span class="navi_title">Themes</span>
          <span class="navi_title">Wallpaper</span>

          <br class="clear">

        </div>
CSS:
Code: 
div#navi
{
  [I][COLOR=Red]margin:0px auto;[/COLOR][/I]
  padding:40px 0px 30px 0px;
  background:url(images/navi.png) repeat-x;
}

ul#downloads
{
  display:block;
[I][COLOR=Red]  width:500px;
  margin:0px auto;[/COLOR][/I]
  list-style:none;
}

a#demos, a#programme, a#flash, a#homebrew, a#themes, a#wallpaper
{
  display:block;
  width:64px;
  height:64px;
  float:left;
  font-size:0px;
}

a#demos
{
  background:url(images/navi/demos.png) no-repeat;
}

a#programme
{
  margin-left:10px;
  background:url(images/navi/programme.png) no-repeat;
}

a#flash
{
  margin-left:10px;
  background:url(images/navi/flash.png) no-repeat;
}

a#homebrew
{
  margin-left:10px;
  background:url(images/navi/homebrew.png) no-repeat;
}

a#themes
{
  margin-left:10px;
  background:url(images/navi/themes.png) no-repeat;
}

a#wallpaper
{
  margin-left:10px;
  background:url(images/navi/wallpaper.png) no-repeat;
}

#demos:hover, #programme:hover, #flash:hover, #homebrew:hover, #themes:hover, #wallpaper:hover
{
  background-position:-64px 0px;
}

span#navi_title_first, span.navi_title
{
  display:block;
  float:left;
  width:64px;
  font:11px Arial;
  text-align:center;
}

span.navi_title
{
  margin-left:10px;
}
Warum werden die Icons bei etwa width:500px zentriert? Und warum funktioniert margin:0px auto nicht? Der Text unter den Icons soll durch das margin:0px auto in div#navi zentriert werden.

Hoffentlich könnt ihr mir (trotz meines negativen Renommee-Modifikators) helfen, bin am Verzweifeln. :(
 
Werbung:
Bin ich wirklich so unbeliebt oder weiß tatsächlich niemand die Antwort? Die letzten drei von mir erstellten Threads (inklusive diesem hier) bekamen keine Antwort. Liegt das am Renommee-System oder was soll das.
 
Nö. Sicher nicht.
Als erstes liegt es daran, dass Du viel langweiligen Code postest, ohne einen Link zur Seite. Bist doch schon ein wenig dabei, dass Du weißt, was hier immer gefragt wird ;-)

Dann sehe ich im Code eine Liste, mehrere <br>-Tags (Abstand macht man mit CSS) und einige Texte, die nur mit <span> ausgezeichnet wurde, wo also die Semantik fehlt.

Da frag ich mich als erstes: Wolltest Du nicht den Tipp vom Qualidator befolgen, und aus Deinem Menü eine Liste machen? Denn, bevor wir die CSS-Fragen klären, brauchen wir einen validen und semantisch sinnvollen HTML-Code.

:-)
 
Werbung:
Efchen schrieb:
Nö. Sicher nicht.
Als erstes liegt es daran, dass Du viel langweiligen Code postest, ohne einen Link zur Seite. Bist doch schon ein wenig dabei, dass Du weißt, was hier immer gefragt wird ;-)
Zum Vergrößern anklicken....
Du hast anscheinend am Anfang des Posts das verlinkte Wort "Website" übersehen.

Efchen schrieb:
Dann sehe ich im Code eine Liste, mehrere <br>-Tags (Abstand macht man mit CSS) und einige Texte, die nur mit <span> ausgezeichnet wurde, wo also die Semantik fehlt.
Zum Vergrößern anklicken....
Die br-Tags haben die Eigenschaft clear:both, da jeweils vor ihnen gefloatet wurde. Ich erzeuge mit ihnen keinen Abstand, nur einen Zeilenumbruch nach den Icons bzw. nach den Namen der Icons. Was soll daran nicht semantisch sein? Die von dir als "Texte" bezeichneten Wörter sind in Wirklichkeit die zu den Icons gehörenden Namen, um den Besuchern Klarheit zu verschaffen (die Icons sind ja nicht selbsterklärend) und für den Fall, dass die Bilder nicht angezeigt werden. Für weitere Funktionen der <span>s kannst du ja den CSS-Schnipsel lesen. Ich finde <span> für diesen Zweck eigentlich recht gut geeignet, denn ein <p> oder <div> oder sonst was wäre eindeutig unpassend. Wenn du mir ein entsprechendes Tag nennen kannst, würde ich mich natürlich freuen. :-)

Efchen schrieb:
Da frag ich mich als erstes: Wolltest Du nicht den Tipp vom Qualidator befolgen, und aus Deinem Menü eine Liste machen? Denn, bevor wir die CSS-Fragen klären, brauchen wir einen validen und semantisch sinnvollen HTML-Code.
Zum Vergrößern anklicken....
Ja, davor bestanden die Navi-Icons nur aus entsprechend formatierten Links. Nach der Umwandlung in eine Liste (Qualidator-Ratschlag) ergeben sich aber die schon im ersten Post genannten Probleme, die ich ohne eure Hilfe nicht lösen kann.

Der HTML-Code ist valide und meiner Meinung nach auch semantisch korrekt. Falls du nach der obigen Erklärung den Code immer noch teilweise nicht semantisch findest, würde ich mich über ein paar Vorschläge freuen.
 
assmaje schrieb:
Ja, davor bestanden die Navi-Icons nur aus entsprechend formatierten Links. Nach der Umwandlung in eine Liste (Qualidator-Ratschlag) ergeben sich aber die schon im ersten Post genannten Probleme, die ich ohne eure Hilfe nicht lösen kann.

Der HTML-Code ist valide und meiner Meinung nach auch semantisch korrekt. Falls du nach der obigen Erklärung den Code immer noch teilweise nicht semantisch findest, würde ich mich über ein paar Vorschläge freuen.
Zum Vergrößern anklicken....

Nein, die Semantik kannst Du noch deutlich verbessern. Die einzelnen Wörter, die
rein optisch halbwegs unter Deinen Icons stehen, stehen in Wirklichkeit ohne
jeglichen Zusammenhang willkürlich irgendwo im Quelltext.

Ich würde es so machen:
Code: 
<ul id="downloads">
<li><a id="demos" href="#" title="Demos"><img src="demos.jpg" alt="" height="xy" width="xy"><span>Demos</span></a></li>
<li><a id="programme" href="#" title="Programme"><img src="programme.jpg" alt="" height="xy" width="xy"><span>Programme</span></a></li>
<li><a id="flash" href="" title="Flash"><img src="flash.jpg" alt="" height="xy" width="xy"><span>Flash</span></a></li>
<li><a id="homebrew" href="#" title="Homebrew"><img src="homebrew.jpg" alt="" height="xy" width="xy"><span>Homebrew</span></a></li>
<li><a id="themes" href="#" title="Themes"><img src="themes.jpg" alt="" height="xy" width="xy"><span>Themes</span></a></li>
<li><a id="wallpaper" href="#" title="Wallpaper"><img src="wallpaper.jpg" alt="" height="xy" width="xy"><span>Wallpaper</span></a></li>
</ul>
(ich hab mir jetzt nicht die Mühe gemacht, in Deinem Stylesheet nachzuschauen, wie die Bilder heißen...)

Da alle Links in der Liste die Klasse "orange" haben, kannst Du diese weglassen
und sie sinnvoller ansprechen mit:
Code: 
ul#downloads li a {}
Die Bilder habe ich als Vordergrundbilder eingefügt, weil sie so gleich geladen werden
und Du Dir leichter tust, eine sinnvolle CSS-Datei für media="print" zu erstellen.
Code: 
ul#downloads li a img {
display:block;
visibility:hidden;
}
ul#downloads li a span {
margin:0.5em auto;
}
Den :hover bekommst Du sicher alleine hin...

Grüße
Bernhard
 
Bernhard schrieb:
Die einzelnen Wörter, die
rein optisch halbwegs unter Deinen Icons stehen, stehen in Wirklichkeit ohne
jeglichen Zusammenhang willkürlich irgendwo im Quelltext.
Zum Vergrößern anklicken....
Was heißt "halbwegs"? Die Wörter sind jeweils in "unsichtbaren Boxen" zentriert. Diese Boxen sind genau so breit wie die Icons und haben den selben Abstand zueinander wie die Icons. Sie passen also perfekt unter die Icons (bzw. seit der Liste usw. nicht mehr). ;-)

Bernhard schrieb:
Ich würde es so machen:
Code: 
<ul id="downloads">
<li><a id="demos" href="#" title="Demos"><img src="demos.jpg" alt="" height="xy" width="xy"><span>Demos</span></a></li>
<li><a id="programme" href="#" title="Programme"><img src="programme.jpg" alt="" height="xy" width="xy"><span>Programme</span></a></li>
<li><a id="flash" href="" title="Flash"><img src="flash.jpg" alt="" height="xy" width="xy"><span>Flash</span></a></li>
<li><a id="homebrew" href="#" title="Homebrew"><img src="homebrew.jpg" alt="" height="xy" width="xy"><span>Homebrew</span></a></li>
<li><a id="themes" href="#" title="Themes"><img src="themes.jpg" alt="" height="xy" width="xy"><span>Themes</span></a></li>
<li><a id="wallpaper" href="#" title="Wallpaper"><img src="wallpaper.jpg" alt="" height="xy" width="xy"><span>Wallpaper</span></a></li>
</ul>
(ich hab mir jetzt nicht die Mühe gemacht, in Deinem Stylesheet nachzuschauen, wie die Bilder heißen...)

Die Bilder habe ich als Vordergrundbilder eingefügt, weil sie so gleich geladen werden
und Du Dir leichter tust, eine sinnvolle CSS-Datei für media="print" zu erstellen.
Code: 
ul#downloads li a img {
display:block;
visibility:hidden;
}
ul#downloads li a span {
margin:0.5em auto;
}
Den :hover bekommst Du sicher alleine hin...
Zum Vergrößern anklicken....
Mit deiner Methode gibt es aber beim Hovern ein lästiges Nachladen, weshalb ich schon seit langer Zeit die Variante mit dem background-Verschieben verwende. Das mit den <span>s in den Links klappt irgendwie nicht, die Wörter erscheinen nicht unter den Icons (auch nach entsprechender Änderung des Codes). Wenn die Hauptprobleme gelöst sind, werde ich mich noch einmal darum kümmern.

Bernhard schrieb:
Da alle Links in der Liste die Klasse "orange" haben, kannst Du diese weglassen
und sie sinnvoller ansprechen mit:
Code: 
ul#downloads li a {}
Zum Vergrößern anklicken....
Okay, werde ich demnächst verbessern.

---

Das alles beantwortet allerdings nicht meine Fragen:

assmaje schrieb:
Warum werden die Icons bei etwa width:500px zentriert? Und warum funktioniert margin:0px auto nicht? Der Text unter den Icons soll durch das margin:0px auto in div#navi zentriert werden.
Zum Vergrößern anklicken....
Trotzdem danke für die Verbesserungsvorschläge!! :smile:
 
Werbung:
assmaje schrieb:
Du hast anscheinend am Anfang des Posts das verlinkte Wort "Website" übersehen.
Zum Vergrößern anklicken....
Das ist wohl wahr. Aber vielleicht ging es anderen so wie mir :-)

Die br-Tags haben die Eigenschaft clear:both, ... Was soll daran nicht semantisch sein?
Zum Vergrößern anklicken....
Wie Du wissen solltest, hat die Semantik nichts mit CSS zu tun, sondern nur mit HTML. Und wenn man den HTML-Code analysiert, sieht man einen Zeilenumbruch, dessen Nutzung bestenfalls umstritten ist. Wie der in CSS formatiert wird, ist für die Semantik irrelevant. Es wäre wohl besser, daraus ein leeres <div> zu machen, was ja als das "allgemeine Block-Element" bekannt ist.

Die von dir als "Texte" bezeichneten Wörter sind in Wirklichkeit die zu den Icons gehörenden Namen, um den Besuchern Klarheit zu verschaffen
Zum Vergrößern anklicken....
Jemand oder etwas, das den Quelltext analysiert, erkennt keinen Zusammenhang.

für den Fall, dass die Bilder nicht angezeigt werden.
Zum Vergrößern anklicken....
Dafür gibt es im <img>-Tag das alt-Attribut.

Für weitere Funktionen der <span>s kannst du ja den CSS-Schnipsel lesen.
Zum Vergrößern anklicken....
Eine Suchmaschine z.B. macht sich diese Mühe auch nicht. Trennung von Inhalt und Layout. Hier wirfst Du etwas durcheinander.

Ich finde <span> für diesen Zweck eigentlich recht gut geeignet, denn ein <p> oder <div> oder sonst was wäre eindeutig unpassend. Wenn du mir ein entsprechendes Tag nennen kannst, würde ich mich natürlich freuen. :-)
Zum Vergrößern anklicken....
Die Texte müssen da stehen, wo sie dazugehören, offensichtlich ja zu den Links, also sollten sie auch in den Links stehen. Darin kannst Du dann <span> benutzen, das ist richtig so.
 
Bernhard schrieb:
Da alle Links in der Liste die Klasse "orange" haben, kannst Du diese weglassen
und sie sinnvoller ansprechen mit:
Code: 
ul#downloads li a {}
Zum Vergrößern anklicken....
Erledigt.
Efchen schrieb:
Wie Du wissen solltest, hat die Semantik nichts mit CSS zu tun, sondern nur mit HTML. Und wenn man den HTML-Code analysiert, sieht man einen Zeilenumbruch, dessen Nutzung bestenfalls umstritten ist. Wie der in CSS formatiert wird, ist für die Semantik irrelevant. Es wäre wohl besser, daraus ein leeres <div> zu machen, was ja als das "allgemeine Block-Element" bekannt ist.
Zum Vergrößern anklicken....
Ja, aber irgendwie bin ich jetzt verwirrt... ich erzeuge damit einen Zeilenumbruch, dafür ist es doch da. Ich verwende ja auch nicht <div>s sondern <p>s für Absätze. Egal, ich habs in ein <div> geändert.

Efchen schrieb:
Jemand oder etwas, das den Quelltext analysiert, erkennt keinen Zusammenhang.
Zum Vergrößern anklicken....
Okay.



Efchen schrieb:
Dafür gibt es im <img>-Tag das alt-Attribut.
Zum Vergrößern anklicken....
Ist mir bewusst, aber damit es beim Hovern kein lästiges Nachladen gibt, verwende ich die Variante mit dem background-Verschieben (habe ich schon im vorigen Post erwähnt).

Die Texte müssen da stehen, wo sie dazugehören, offensichtlich ja zu den Links, also sollten sie auch in den Links stehen. Darin kannst Du dann <span> benutzen, das ist richtig so.
Zum Vergrößern anklicken....
Gut, ich habe das jetzt folgendermaßen umgesetzt:

Efchen schrieb:
Das ist wohl wahr. Aber vielleicht ging es anderen so wie mir
icon_smile.gif
Zum Vergrößern anklicken....
>> PSP-SPIELEBASE | Startseite <<

HTML:
Code: 
        <div id="navi">

          <ul id="downloads">

            <li><a rel="nofollow" id="demos" href="index.php?page=demos" title="Demos"><span class="navi_title">Demos</span></a></li>
            <li><a rel="nofollow" id="programme" href="index.php?page=programme" title="Programme"><span class="navi_title">Programme</span></a></li>
            <li><a rel="nofollow" id="flash" href="index.php?page=flash" title="Flash"><span class="navi_title">Flash</span></a></li>
            <li><a rel="nofollow" id="homebrew" href="index.php?page=homebrew" title="Homebrew"><span class="navi_title">Homebrew</span></a></li>
            <li><a rel="nofollow" id="themes" href="index.php?page=themes" title="Themes"><span class="navi_title">Themes</span></a></li>
            <li><a rel="nofollow" id="wallpaper" href="index.php?page=wallpaper" title="Wallpaper"><span class="navi_title">Wallpaper</span></a></li>

          </ul>

          <div id="clear"></div>

        </div>
CSS:
Code: 
div#clear
{
  clear:both;
}

div#navi
{
  margin:0px auto;
  padding:42px 0px 42px 0px;
  background:url(images/navi.png) repeat-x;
}

ul#downloads
{
  display:block;
  width:500px;
  margin:0px auto;
  list-style:none;
}

ul#downloads li a:link, ul#downloads li a:visited { color:#000; text-decoration:none; }
ul#downloads li a:focus, ul#downloads li a:hover, ul#downloads li a:active { color:#666; }

span.navi_title
{
  display:block;
  padding-top:64px;
}
Ist das jetzt alles in Ordnung? :)
Hoffentlich... ._.

---

Trotzdem reden wir alle am Thema vorbei. :mrgreen: Gut, einige Sachen haben sich schon geklärt, aber ich weiß immer noch nicht, warum das margin:0px auto in div#navi bzw. ul#downloads nicht funktioniert und die Icons nur zentriert werden, wenn ich ul#downloads eine Breite von etwa 500px gebe.

---

EDIT:
Habe die Website gerade vom Qualidator checken lassen, sie hat aufgrund mangelnder Suchmaschinenoptimierung 2% verloren und liegt somit insgesamt unter 75%.
http://renderer.geotek.de/image.php?imgid=726777769&browser=ie6
 
Zuletzt bearbeitet:
assmaje schrieb:
Ja, aber irgendwie bin ich jetzt verwirrt... ich erzeuge damit einen Zeilenumbruch, dafür ist es doch da. Ich verwende ja auch nicht <div>s sondern <p>s für Absätze. Egal, ich habs in ein <div> geändert.
Zum Vergrößern anklicken....
Das ist ja das Umstrittene. Ein Zeilenumbruch ist keine Bedeutung für den Inhalt ist keine Semantik. Deswegen sind ja einige der Ansicht, dass man <br> gar nicht mehr verwenden sollte. Andere sehen das nicht ganz so eng, ich finde es sinnvoll eingesetzt z.B. bei Gedichten, wo der Zeilenumbruch vorgegeben ist oder bei Adressen. Jede Zeile einer Adresse mit <address> ausgezeichnet oder innerhalb von <address> für jede Zeile ein <p> zu setzen, halte ich für falsch.

Gut, ich habe das jetzt folgendermaßen umgesetzt:
Zum Vergrößern anklicken....
So siehts quelltechnisch gesehen viel besser aus!

Trotzdem reden wir alle am Thema vorbei.
Zum Vergrößern anklicken....
Nein, wir haben grundlegende Fehler bereinigt. CSS funktioniert nur anständig, wenn die Basis aus HTML valide und semantisch sinnvoll ist.

assmaje schrieb:
ich weiß immer noch nicht, warum das margin:0px auto in div#navi bzw. ul#downloads nicht funktioniert und die Icons nur zentriert werden, wenn ich ul#downloads eine Breite von etwa 500px gebe.
Zum Vergrößern anklicken....
Wieso? Funktioniert doch alles. Natürlich erscheinen die Icons nicht zentriert, wenn Du ul#downloads keine Breite gibst. Weil "margin:0 auto" ja auch nicht die Icons zentriert, sondern die Liste. Und weil Block-Elemente (wie ul) nunmal 100% breit, und damit immer zentriert sind, wenn sie keine Breitenangabe bekommen. :-)
Und text-align:center zieht nicht, weil die Links (Icons) sich wie Block-Elemente verhalten sollen. Deswegen bleibt nur die Möglichkeit, der Liste eine feste Breite zu geben. Die Icons kannst Du nicht zu Inline-Elementen machen, weil Du dann die Größe nicht festlegen kannst.

Wenn Du, statt die
[Anm.: Keine Ahnung mehr, was ich hier schreiben wollte und warum ich es nicht vollendet habe :-)]
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Efchen schrieb:
Das ist ja das Umstrittene. Ein Zeilenumbruch ist keine Bedeutung für den Inhalt ist keine Semantik. Deswegen sind ja einige der Ansicht, dass man <br> gar nicht mehr verwenden sollte. Andere sehen das nicht ganz so eng, ich finde es sinnvoll eingesetzt z.B. bei Gedichten, wo der Zeilenumbruch vorgegeben ist oder bei Adressen. Jede Zeile einer Adresse mit <address> ausgezeichnet oder innerhalb von <address> für jede Zeile ein <p> zu setzen, halte ich für falsch.
Zum Vergrößern anklicken....
Okay, danke für die Erklärung. :smile:

Efchen schrieb:
So siehts quelltechnisch gesehen viel besser aus!
Zum Vergrößern anklicken....
:smile:


Efchen schrieb:
Wieso? Funktioniert doch alles. Natürlich erscheinen die Icons nicht zentriert, wenn Du ul#downloads keine Breite gibst. Weil "margin:0 auto" ja auch nicht die Icons zentriert, sondern die Liste. Und weil Block-Elemente (wie ul) nunmal 100% breit, und damit immer zentriert sind, wenn sie keine Breitenangabe bekommen. :-)
Und text-align:center zieht nicht, weil die Links (Icons) sich wie Block-Elemente verhalten sollen. Deswegen bleibt nur die Möglichkeit, der Liste eine feste Breite zu geben. Die Icons kannst Du nicht zu Inline-Elementen machen, weil Du dann die Größe nicht festlegen kannst.
Zum Vergrößern anklicken....
Ach so, mhhh, na dann ist ja alles in Ordnung. ^^

Efchen schrieb:
Wenn Du, statt die
Zum Vergrößern anklicken....
Vielleicht noch mal editieren. ;)

---

Danke euch beiden!! :smile:
 
assmaje schrieb:
Da alle Links in der Liste die Klasse "orange" haben, kannst Du diese weglassen
und sie sinnvoller ansprechen mit:
Code:
ul#downloads li a {}
Zum Vergrößern anklicken....
Erledigt.
Zum Vergrößern anklicken....
Hast Du auch verstanden, warum? Du hast jetzt wieder allen spans in der
ul mit der id "downloads" eine Klasse gegeben, obwohl das überflüssig ist...
assmaje schrieb:
Ja, aber irgendwie bin ich jetzt verwirrt... ich erzeuge damit einen Zeilenumbruch, dafür ist es doch da. Ich verwende ja auch nicht <div>s sondern <p>s für Absätze. Egal, ich habs in ein <div> geändert.
Zum Vergrößern anklicken....
Das sehe ich weniger verbissen...
assmaje schrieb:
Ist mir bewusst, aber damit es beim Hovern kein lästiges Nachladen gibt, verwende ich die Variante mit dem background-Verschieben (habe ich schon im vorigen Post erwähnt).
Zum Vergrößern anklicken....
Dann hatte ich meinen Beitrag schlecht geschrieben:
ich lade das :hover-Bild mit visibilty:hidden; - damit hält es mir den Platz frei und ist
bereits im Cache, wird also nicht erst beim :hover nachgeladen.
Wobei beide Wege nach Rom führen und ich mal die eine und mal die andere Methode
verwende, jenachdem welche mir gerade sinnvoller erscheint (Stichwort print)
assmaje schrieb:
Gut, ich habe das jetzt folgendermaßen umgesetzt:


>> PSP-SPIELEBASE | Startseite <<

Ist das jetzt alles in Ordnung? :)
Hoffentlich... ._.

---

Trotzdem reden wir alle am Thema vorbei. :mrgreen: Gut, einige Sachen haben sich schon geklärt, aber ich weiß immer noch nicht, warum das margin:0px auto in div#navi bzw. ul#downloads nicht funktioniert und die Icons nur zentriert werden, wenn ich ul#downloads eine Breite von etwa 500px gebe.

---

EDIT:
Habe die Website gerade vom Qualidator checken lassen, sie hat aufgrund mangelnder Suchmaschinenoptimierung 2% verloren und liegt somit insgesamt unter 75%.
Zum Vergrößern anklicken....

Ich würde nicht zu viel auf den Qualidator geben.
Er hat jetzt natürlich sechs wichtige Keywords einmal weniger im Quelltext gefunden...

Normal nicht meine Art, aber ich hab mir jetzt tatsächlich Dein ganzes Stylesheet vorgeknöpft:
Code: 
/* Allgemeines START */

* {
  margin:0px;
  padding:0px;
  border:none;
}
body {
  font:12px Arial;
  color:#333;
  background:#333 url(images/background.png) repeat-x;
}
a:link, a:visited { color:#FF8C00; text-decoration:none; }
a:focus, a:hover, a:active { text-decoration:underline; }

a.orange:link, a.orange:visited, a.orange:focus, a.orange:hover, a.orange:active { color:#FF8C00; text-decoration:none; }

h1 {
  margin-bottom:12px;
  font:bold 12px Arial;
  color:#000;
}
h2 {
  margin-bottom:12px;
  font:italic 12px Arial;
  color:#000;
}
p {
  margin-bottom:12px;
  text-align:justify;
}
span.tab {
  width:100px;
  float:left;
}
div#clear {
  clear:both;
}

/* Allgemeines ENDE */

/* Layout START */

div#wrapper {
  position:relative;
  width:720px;
  margin:0px auto;
  padding-top:20px;
  padding-bottom:40px;
  background:url(images/top.png) 0px 20px no-repeat;
}
div#website {
  width:700px;
  margin:0px 10px 0px 10px;
  background:#FFF;
}
div#header {
  background:#FF8C00;
}
a#logo {
  display:block;
  width:406px;
  height:62px;
  margin:0px auto;
  font-size:0px;
  background:url(images/logo.png);
}
div#content {
  min-height:300px;
  height:auto !important;
  height:300px;
  padding:20px;
}
div#footer {
  width:700px;
  font:11px/40px Arial;
  text-align:center;
  color:#000;
  background:#333 url(images/footer.png);
}
div#footer a:link, div#footer a:visited { color:#000; text-decoration:none; }
div#footer a:focus, div#footer a:hover, div#footer a:active { color:#FFF; }

/* Navigation START */

div#navi {
  margin:0 auto;
  padding:0;
  background:url(images/navi.png) repeat-x;
}
ul#downloads {
  width:624px;
  margin:0 auto;
  list-style:none;
}
ul#downloads li {
  margin:0 20px 0 20px;
  float:left;
}

ul#downloads li a:link, ul#downloads li a:visited { color:#000; text-decoration:none; }
ul#downloads li a:focus, ul#downloads li a:hover, ul#downloads li a:active { color:#666; }

ul#downloads li a {
  display:block;
  width:64px;
  height:64px;
  font-size:11px;
  text-align:center;
}
a#demos {
  background:url(images/navi/demos.png) no-repeat;
}
a#programme {
  background:url(images/navi/programme.png) no-repeat;
}
a#flash {
  background:url(images/navi/flash.png) no-repeat;
}
a#homebrew {
  background:url(images/navi/homebrew.png) no-repeat;
}
a#themes {
  background:url(images/navi/themes.png) no-repeat;
}
a#wallpaper {
  background:url(images/navi/wallpaper.png) no-repeat;
}
ul#downloads li a:hover {
  background-position:-64px 0px;
}
ul#downloads li a span {
  display:block;
  padding-top:64px;
}

/* Navigation ENDE */

/* Layout ENDE */
Hab's nur im Firefox ausprobiert, evtl. musst Du für IE noch kleinere Anpassungen machen...
Und sicher lässt sich auch noch mehr optimieren...

Grüße
Bernhard
 
Bernhard schrieb:
Normal nicht meine Art, aber ich hab mir jetzt tatsächlich Dein ganzes Stylesheet vorgeknöpft:
Code: 
/* Allgemeines START */

* {
  margin:0px;
  padding:0px;
  border:none;
}
body {
  font:12px Arial;
  color:#333;
  background:#333 url(images/background.png) repeat-x;
}
a:link, a:visited { color:#FF8C00; text-decoration:none; }
a:focus, a:hover, a:active { text-decoration:underline; }

a.orange:link, a.orange:visited, a.orange:focus, a.orange:hover, a.orange:active { color:#FF8C00; text-decoration:none; }

h1 {
  margin-bottom:12px;
  font:bold 12px Arial;
  color:#000;
}
h2 {
  margin-bottom:12px;
  font:italic 12px Arial;
  color:#000;
}
p {
  margin-bottom:12px;
  text-align:justify;
}
span.tab {
  width:100px;
  float:left;
}
div#clear {
  clear:both;
}

/* Allgemeines ENDE */

/* Layout START */

div#wrapper {
  position:relative;
  width:720px;
  margin:0px auto;
  padding-top:20px;
  padding-bottom:40px;
  background:url(images/top.png) 0px 20px no-repeat;
}
div#website {
  width:700px;
  margin:0px 10px 0px 10px;
  background:#FFF;
}
div#header {
  background:#FF8C00;
}
a#logo {
  display:block;
  width:406px;
  height:62px;
  margin:0px auto;
  font-size:0px;
  background:url(images/logo.png);
}
div#content {
  min-height:300px;
  height:auto !important;
  height:300px;
  padding:20px;
}
div#footer {
  width:700px;
  font:11px/40px Arial;
  text-align:center;
  color:#000;
  background:#333 url(images/footer.png);
}
div#footer a:link, div#footer a:visited { color:#000; text-decoration:none; }
div#footer a:focus, div#footer a:hover, div#footer a:active { color:#FFF; }

/* Navigation START */

div#navi {
  margin:0 auto;
  padding:0;
  background:url(images/navi.png) repeat-x;
}
ul#downloads {
  width:624px;
  margin:0 auto;
  list-style:none;
}
ul#downloads li {
  margin:0 20px 0 20px;
  float:left;
}

ul#downloads li a:link, ul#downloads li a:visited { color:#000; text-decoration:none; }
ul#downloads li a:focus, ul#downloads li a:hover, ul#downloads li a:active { color:#666; }

ul#downloads li a {
  display:block;
  width:64px;
  height:64px;
  font-size:11px;
  text-align:center;
}
a#demos {
  background:url(images/navi/demos.png) no-repeat;
}
a#programme {
  background:url(images/navi/programme.png) no-repeat;
}
a#flash {
  background:url(images/navi/flash.png) no-repeat;
}
a#homebrew {
  background:url(images/navi/homebrew.png) no-repeat;
}
a#themes {
  background:url(images/navi/themes.png) no-repeat;
}
a#wallpaper {
  background:url(images/navi/wallpaper.png) no-repeat;
}
ul#downloads li a:hover {
  background-position:-64px 0px;
}
ul#downloads li a span {
  display:block;
  padding-top:64px;
}

/* Navigation ENDE */

/* Layout ENDE */
Hab's nur im Firefox ausprobiert, evtl. musst Du für IE noch kleinere Anpassungen machen...
Und sicher lässt sich auch noch mehr optimieren...

Grüße
Bernhard
Zum Vergrößern anklicken....
Wow, danke!! :) Ich habe deine Verbesserungen in meinem Quellcode entsprechend verändert. (habe aber den Abstand zwischen den Icons wieder kleiner gemacht)
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben