Hier ist die Testseite, um die es geht.
Ich habe eine waagrechte Menüleiste, die eigentlich aus drei Teilen besteht, aber aussehen soll wie aus zwei Teilen. Ich habe ein Bild,
Das sind die Bestandteile:
- Seitenlinks (links)
- Funktion des Plugins qTranslate (rechts)
- Ein Seitenlink zu einer Seite auf Arabisch (rechts)
As gibt keine arabischen Beiträge, sondern nur eine einzige arabische Seite, aber trotzdem sollen 2 und 3 wie ein zusammenhängendes Menü aussehen.
Problem:
- Wenn man auf die Testseite geht, fällt auf dass, der arabische Seitenlink aus dem rechten Menücontainer fällt; ich bekomme ihn einfach nicht in eine Linie.
- So sollen die Trennlinien verteilt sein: Deutsch | Englisch | Arabisch, ich kriege es aber nicht dargestellt.
- Die Trennlinie zwischen Deutsch und Englisch ist eine Spur zu kurz, verglichen mit denen in der Seitennavigation links; außerdem sind auch die Eigenschaften der Links etwas anders.
Wieso werden ul und li des Plugins nicht vollständig vom Stylesheet angesprochen? Es gibt da ein Widget, das ebenfalls die Klasse qtrans_langauge_chooser enthält, aber ich nutze ja kein Sidebar Widget, und ich sehe in den Plugin-Dateien auch keine CSS-Definitionen.
Code des Menüs:
<div id="menu">
<ul id="menu-left">
<li <?php if(is_front_page()){echo 'class="page_item current_page_item"';} else { echo 'class="page_item"';}; ?>><a href="<?php bloginfo('url'); ?>/" title="Home">Home</a></li>
<?php wp_list_pages('title_li=&exclude=29,33,78,79,80,85,86,87,37'); ?>
</ul>
<div id="menu-right">
<?php echo qtrans_generateLanguageSelectCode('') ; ?>
<ul><?php wp_list_pages('title_li=&include=37'); ?>
</ul>
</div>
</div>
CSS
#menu {
width: 720px;
margin-right: auto;
margin-top: 0;
margin-left: auto;
border-top: 1px solid #f4630e;
margin-bottom: 15px;
padding: 4px 0 4px 30px;
background-color: #d2ffe6;
font-size: 0.8em;
height: 20px;
}
#menu ul {
padding: 0px;
margin: 0;
}
#menu li {
display: inline;
border-left: 1px solid #f4630e;
padding: 3px;
}
#menu li:first-child {
border-left-style: none;
}
#menu a {
color: #4c3b01;
text-decoration: none;
padding: 10px;
}
#menu a:hover {
color: #f4630e;
text-decoration: none;
}
#menu .current_page_item a {
color: #f4630e;
text-decoration: none;
font-weight: bold;
}
#menu-left {
clear: none;
float: left;
}
#menu-right {
width: 200px;
float: right;
}
#menu-right li:first-child {
display: inline;
border-left: 1px solid #f4630e;
padding: 3px;
}
#menu-right .page_item {
position: relative;
left: 130px;
}