[CSS] Logo in der Mitte der Navigation

[fel1x.]

Moinsen,

ich setze ääähm... möchte umsetzen ääähm... möchte probieren, meinen Fotoblog in Wordpress umzusetzen.

In CSS habe ich Kenntnisse, jedoch begebe ich mich mit dem Thema Responsive Webdesign in eine vollkommene neue Thematik des CSS.

Nun habe ich das Problem, dass ich eine Navigation als ul Liste habe. In der Mitte dieser soll mein Logo stehen.
Derzeit, siehe Screenshot, ist es auch umgesetzt, jedoch habe ich einfach drei DIV's nebeneinander gesetzt. So soll es später auch aussehen, bloß wird es damit in Wordpress einige Schwierigkeiten geben: Ich müsste drei Menüs anlegen (linke Seite, rechte Seite, vollständige Menü für Mobilansicht) und auch implementieren.

Lange Rede, kurzer Unsinn: Kann ich das Menü mit einem DIV umsetzen?

Ich bedanke mich für Ansätze, Links oder Code-Snippets

Beste Grüße,
Felix

 

[Tuxman]

Klar. Lass den <ul>-Quatsch einfach sein und nutz float.

 

[fel1x.]

Und die Naviagtionspunkte in welches Element?? :-D

 

[Kausalat]

Belasse bitte die Navigation in einer ungeordneten Liste. Dies ist semantisch sinnvoller als eine <div>-Suppe.

Mir fällt leider spontan keine semantisch perfekte Lösung für dein Problem ein, aber ich hätte da etwas, das deinen Quellcode etwas "entrümpeln" könnte.

<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Portfolio</a></li>
<li id="logo"><a href="#"><span>Name der Website</span></a></li>
<li><a href="#">Über mich</a></li>
<li><a href="#">Kontakt</a></li>
</ul>

Meine Idee:
Für li#logo wird die Logografik als Hintergrundbild nebst genauer Breite und Höhe angegeben. Die <span>-Elemente in li#logo werden per display: none; ausgeblendet. Damit klickt der Besucher zwar einen "leeren" Link an, ihm wird aber durch das Logo im Hintergrund ein entsprechender Link visualisiert.

 

[fel1x.]

Belasse bitte die Navigation in einer ungeordneten Liste. Dies ist semantisch sinnvoller als eine <div>-Suppe.

Dieser Annahme war ich auch, Danke für die Bestätigung, dass eine ul-Liste semantisch korrekt ist :-)

Meine Idee:
Für li#logo wird die Logografik als Hintergrundbild nebst genauer Breite und Höhe angegeben. Die <span>-Elemente in li#logo werden per display: none; ausgeblendet. Damit klickt der Besucher zwar einen "leeren" Link an, ihm wird aber durch das Logo im Hintergrund ein entsprechender Link visualisiert.

Danke für Deinen Lösungsvorschlag.
Das Problem ist, dass ich in dem mobile-Theme das Logo unterhalb der Navi anzeigen möchte. Wie verhält es sich mit der Semantik, das dritte Element auszulassen und dann ein div darunter einzublenden (von display none auf inline)?

 

[Kausalat]

Semantisch ist dies immer noch fragwürdig.

In der Zwischenzeit ist mir ein besserer Vorschlag eingefallen:

Vergiss den dritten Listenpunkt als Logoersatz. Im Grunde müsste nur der Abstand zwischen "Portfolio" und "Über mich" mithilfe des margins vergrößert werden, sodass das zentrierte Seitenlogo dazwischenpasst. Eventuell müsste die Navigationsliste mit einem negativen margin nach oben über das Logo geschoben werden.

Vor der Menüliste würde, semantisch die Crème de la Crème , das Seitenlogo in einer <h1>-Überschrift gebettet. Mit den <span>-Elementen verhielte es sich wie im Lösungsvorschlag oben.

<h1><a href="#"><span>Name der Seite</span></a></h1>

<ul>
...
</ul>

In deiner mobilen Ansicht könntest du die Reihenfolge der Darstellung von <h1> und <ul> mithilfe absoluter Positionierung oder einer Mischung aus positiven und negativen margins umkehren.

 

[Daaron]

Vor der Menüliste würde, semantisch die Crème de la Crème , das Seitenlogo in einer <h1>-Überschrift gebettet. Mit den <span>-Elementen verhielte es sich wie im Lösungsvorschlag oben.

Damit hättest du im Zweifel auf jeder Seite dasselbe <h1>-Element. Suchmaschinen-technisch muffelt sowas.

 

[Kausalat]

Was empfiehlt der HTML-Küchenchef stattdessen? Meckern kann ja bekanntlich jeder .

 

[Daaron]

<h1> ist die SEO-technisch wichtigste Überschrift für jede einzelne Seite bzw. jeden <article> oder jede <section>. Diese Überschrift sollte also einen direkten Bezug zum jeweiligen Inhalt haben.

Muss das Logo denn unbedingt klickbar sein? Ansonsten wäre n passend positionierter und skalierter CSS Background effektiver.

 

[fel1x.]

Muss das Logo denn unbedingt klickbar sein? Ansonsten wäre n passend positionierter und skalierter CSS Background effektiver.

Nein muss nicht.

<h1> ist die SEO-technisch wichtigste Überschrift für jede einzelne Seite bzw. jeden <article> oder jede <section>. Diese Überschrift sollte also einen direkten Bezug zum jeweiligen Inhalt haben.

Welche Lektüre kannst Du zu dieser Thematik (HTML5/SEO/Semantik) empfehlen?

 

[Daaron]

Leider keine. Das Zeug stückel ich mir alles aus Blogs, Foren und sonstigen Web-Publikationen zusammen. Außerdem gibt es ja automatisierte Analysewerkzeuge. Die Google Webmaster Tools hauen einem eine Domain schon ordentlich um die Ohren, wenn da auf 3-4 Seiten dieselbe <h1> oder derselbe <title> drin ist.

Bis XHTML gilt: Maximal eine <h1> pro Seite. Je niedriger die Zahl, desto wichtiger die Überschrift hinsichtlich der Semantik und entsprechend auch der Suchmaschinen-Gewichtung.
Für HTML5 gilt: Laut Spezifikation sollten die neuen Semantik-Elemente <section> und <article> als eigenständige Inhaltsblöcke betrachtet werden. Jeder dieser Blöcke hat sein eigenes komplettes (und komplett unabhängiges) Set von H1-6.


Folgendes Konstrukt ist in HTML5 gültig und semantisch korrekt.

<article id="artikel1">
<h1>Alles über Mäuse</h1>
<h2>Kleine pelzige Nervensägen oder wichtiger Teil des Ökosystems?</h2>
<p>Hier steht alles Mögliche über Mäuse</p>
</article>
<article id="artikel2">
<h1>Alles über Katzen</h1>
<h2>Faule Fressmaschinen oder gesellige Seelentröster?</h2>
<p>Hier steht alles Mögliche über Katzen</p>
</article>

Wie Suchmaschinen darauf reagieren steht auf einem anderen Blatt. Google und Microsoft traue ich zu, dass sie mit der HTML5-Notation klar kommen. Yandex und Baidu... na ja, die kratzt hier eh kein Schwein.

 

[Kausalat]

@ fel1x.:

Da das Logo nicht anklickbar sein muss, würde, wie von Daaron empfohlen, eine Hintergrundgrafik in Kombination mit der Menüpunktverschiebung (Beitrag #6) reichen.

 

[fel1x.]

Moin,

Danke für Eure Posts. Ich denke, dass kommt der gewünschten Lösung semantisch am besten. Natürlich ist die Navigation dadurch ein wenig starr, aber irgendwas ist ja immer ;-) (wann ändert man die schon )


Danke und beste Grüße!

 

[Cave Johnson]

Schön ist das Rumgeschubse mit margins sicher nicht, aber was solls

http://jsfiddle.net/A7Lef/

 

[Kausalat]

Ohne die Verwendung eines <img>-Tags direkt in der Navigationsliste wie bei deinem Quellcode ist das "Herumgeschiebe" der Hintergrundgrafik keineswegs unschön.

 

[Daaron]

Eben. Der Zaubertrick ist, dem <li> links der Mitte einfach einen rechten Abstand zu geben, der so breit ist wie das Logo (+ etwas Luft). Den Rest, die Positionierung des Logos, erledigt background-position.

Übrigens: li#mobile = #mobile...
Und außerdem (ok, geht im Fiddle nicht) würde so ein Konstrukt in der Realität nicht funktionieren. In der Realität geht man über Media Queries und hofft, dass der Browser die Direktiven auch versteht.

 

[Bake]

Damit hättest du im Zweifel auf jeder Seite dasselbe <h1>-Element. Suchmaschinen-technisch muffelt sowas.

Interessant. Ich dachte immer, es sei gängige Praxis, dass man das Logo so in eine h1 einbindet:

<h1><a href="index.html"><img src="logo.png" alt="titel der seite" /></a></h1>

Ist denn jetzt die Diskussion, ob ein Logo Inhalt oder Design ist, geklärt? Bindet man das Logo jetzt standardmäßig als Hintergrundgrafik ein?

 

[Daaron]

Nun, egal ob nun Design oder Content, ein H1 dafür zu nutzen ist Verschwendung.

 

[Bake]

OK, ich möchte jetzt auch keine h1 Debatte lostreten, darüber gibts schon genug zu lesen.

Mich interessiert mehr, wie Google die gleiche h1 auf allen Seiten bewertet und ob es da Unterschiede gibt, was die Seitenanzahl angeht.
Hast Du da konkrete Informationen zu?

 

[Kausalat]

Google zumindest ignoriert mehrfach vorhandene <h1>-Überschriften und orientiert sich entsprechend an den niedrigeren Überschrifträngen. Im Allgemeinen wird das Thema viel zu überbewertet. Die große Masse aller Websites ist suboptimal, wenn nicht grottenschlecht geschrieben, taucht bei Google & Co. trotzdem in den vorderen Suchergebnissen auf. "Richtige" Überschriften sind eben kein Allheilmittel. Auf das Gesamtkonzept kommt es an.