Positionierungsfehler & Header-Verlinkung

meuse1990

Hallo Wordpress-Community!

Vielleicht findet ihr ja eine Lösung für meine 2 Probleme:

1. Positionierungsfehler IE - Firefox

Fehler: In der Navigation werden die Menüpunkte nicht richtig positioniert

Erläuterung: Auf meiner Seite http://www.sichtraum.com/sichtraum habe ich Trennstriche (jpg) verwendet, um die Menüpunkte zu gliedern. Ich habe img verwendet, weil mit border-right auch nach dem letzten Menüpunkt ein "Trennstrich" gesetzt wird.

Folgender Code steht im Header:

PHP

<div id="navi">
          <?php wp_list_categories('orderby=order&title_li=<h2>' . __(' ', 'kubrick') . '</h2>'); ?>
<img src="[URL="http://www.sichtraum.com/sichtraum/wp-content/themes/default/images/linie_header.jpg"][COLOR=#0000ff]http://www.sichtraum.com/wp-content/themes/default/images/linie_header.jpg[/COLOR][/URL]" style="position:relative;top:-31px; left:118px" />
<img src="[URL="http://www.sichtraum.com/sichtraum/wp-content/themes/default/images/linie_header.jpg"][COLOR=#0000ff]http://www.sichtraum.com/wp-content/themes/default/images/linie_header.jpg[/COLOR][/URL]" style="position:relative;top:-31px; left:258px" />
<img src="[URL="http://www.sichtraum.com/sichtraum/wp-content/themes/default/images/linie_header.jpg"][COLOR=#0000ff]http://www.sichtraum.com/wp-content/themes/default/images/linie_header.jpg[/COLOR][/URL]" style="position:relative;top:-31px; left:309px" />
</div>

Und im CSS diese Positionierung (momentan im Firefox korrekt):

Code

#navi {
        position: relative;
        text-align: left;
        left: 54px;
        top: -104px
}
#navi li{
        display: inline;
        list-style: none;
        padding: 3px 8px;
}
#navi h2 {
 margin: 5px 0 0;
 padding: 0;
 }

Alles anzeigen

Vergeblich hab ich mit IE-Hacks rumprobiert, habt ihr eine Lösung / seht ihr einen Fehler?

2. Header-Verlinkung (auf die Startseite)

Ich habe ein Link um das Header-Img gelegt, jedoch wird nur ein Teil des Logos anwählbar:

Code

<div id="page">
<div id="header">
<a href=[URL]http://www.sichtraum.com[/URL]>
 <div id="headerimg">      
 </div>
</a>
...

Ich hoffe ich habe meine Probleme verständlich formuliert und bitte um Hilfe :)

Danke im Vorraus!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

bgeissler

Bearbeite mal die Fehler:
http://validator.w3.org/check?verbose=…%2Fsichtraum%2F

Du hast 3 div im Header defininiert, die sich überdecken: #header, #headerimg und #navi. Damit wird auch der Link überdeckt.

meuse1990

Oh, nettes Tool.

Habe jetzt die Fehler bearbeitet. Bin von 29 auf 6 runter gekommen. Wobei 5 von den 6 Fehlern durch das Plugin (NextGen Gallery) ausgelöst werden.

Der erste Fehler kommt von der automatischen Auflistung (Funktion) der Kategorien (Menüpunkte), aber wie ich das beheb, darüber seh ich nicht hinaus:

PHP

<?php wp_list_categories('orderby=order&title_li=<h2>' . __(' ', 'kubrick') . '</h2>'); ?>

(Ist aber verm. nicht der Fehler, der die falsche Positionierung verursacht)

Außerdem habe ich den <a> link rausgenommen, das Bild (statt im CSS als Hintergrundbild) in das <div id=headerimg> eingefügt und verlinkt.

Code

<div id="headerimg">
         <a href="http://www.sichtraum.com/sichtraum"><img src="http://www.sichtraum.com/sichtraum/wp-content/themes/default/images/kubrickheader.jpg" alt="sichtraum.com" title="sichtraum.com"/></a>
</div>

Damit ist Problem 2 gelöst. Hast du eine Vermutung, wie ich die Trennstriche richtig positionieren kann (zb. im IE verschieben) oder die richtige Positionierung der Menüpunkte einstelle? Bei mir reagieren die Menüpunkte anderst auf die gleichen Padding/Margin-Werte.

alchymyth

dieser thread behandelt die idee, etwas in die mitte zwischen den listenelementen einzubauen (im thread nur ein sonderzeichen, kann aber zu einem bild erweitert werden, oder zu einem element, das dann mit css mit einem hintergrundbild versehen werden kann):
http://wordpress.org/support/topic/244544?replies=20

meuse1990

Funktioniert!

@ alchymyth:
Habe mir deinen Link angesehen und versucht, die Hilfestellung auf meinen Code umzulegen. Es hat geklappt, jedoch ist diese Lösung wohl nicht "Error-Frei", im Tool von bgeissler werden jetzt 33 statt den zuvor 6 fehlern angezeigt. Vermutlich weil ich li-Tags in li-Elementen öffen.

PHP

<?php
$categories = wp_list_categories('orderby=order&title_li=<h2>&echo=0');
$categories = explode('</li>', $categories); //create array from string returned by wp_list_categories
array_pop($categories); //pop last element off array
array_pop($categories);
echo implode('<img src="http://www.sichtraum.com/sichtraum/wp-content/themes/default/images/linie_header.jpg" alt="|" style="position:relative;top:6px; left:6px" />', $categories);
?></h2>

Naja, it works. Ich versuche die Fehler auch noch hinzukriegen. Habe aber noch ein (größeres) Problem, werde dafür aber ein neues Thema öffnen.

Danke an euch beide!
meuse1990

alchymyth

Zitat

Es hat geklappt, jedoch ist diese Lösung wohl nicht "Error-Frei"

ich hab den code mal ein bischen aufgeraeumt:
der h2 tag kann da so nicht stehen - den style (font-size, etc.) musst du mit css machen; daher 'title_li=' ohne h2; die /h2 am ende auch weg.
explode 'verliert' den separator (/li); daher muss der wieder rein beim implode.
und den inline style wuerde ich in die style.css auslagern.

PHP

<?php
$categories = wp_list_categories('orderby=order&title_li=&echo=0');
$categories = explode('</li>', $categories); //create array from string returned by wp_list_categories
array_pop($categories); //pop last element off array
echo implode('</li><img src="http://www.sichtraum.com/sichtraum/wp-content/themes/default/images/linie_header.jpg" alt="|" class="separator" />', $categories);
?>

in der style.css:

Code

img.separator {position:relative;top:6px; left:6px}

ich hoffe, ich habe nichts uebersehen, und die validierung wird wieder besser ;-)

meuse1990

Danke, habs eingefügt und angepasst über die CSS-Datei.

Sind jetzt "nur mehr" 19 Fehler ;)

Mein nächstes Problem steht in Konfiguration geschrieben. Also keine Angst, wenn die Navi momentan komisch aussieht ;)

alchymyth

ich bin wahrscheinlich heute nicht ganz wach 8-):
mir ist erst jetzt aufgefallen, dass die liste nicht mit 'ul' tags umgeben ist, und ich auch ein schliessenes '/li' vergessen hatte:
version 1.2

PHP

<ul>
<?php
$categories = wp_list_categories('orderby=order&title_li=&echo=0');
$categories = explode('</li>', $categories); //create array from string returned by wp_list_categories
array_pop($categories); //pop last element off array
echo implode('</li><img src="http://www.sichtraum.com/sichtraum/wp-content/themes/default/images/linie_header.jpg" alt="|" class="separator" />', $categories).'</li>';
?>
</ul>

ausserdem war das verfahren nicht fuer eine cat nav mit child elements vorgesehen - da sind jetzt auch zwischen den 'child' elementen die separator bilder - das kann evtl. in der style.css ausgeblendet werden:

Code

ul.children img.separator { display:none; }

meuse1990

Link im ersten Post bitte auf: [COLOR=#0000ff]www.sichtraum.com[/COLOR] ändern (aufgrund Google-Abfragen), Danke @ Foren-Moderatoren.

---

EDIT: Ging jetzt selbst, hatte zuerst ne Fehlermeldung. Danke!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Positionierungsfehler & Header-Verlinkung

Jetzt mitmachen!