✔ Problem mit Border im Menüeintrag

[julchen]

Hallo,
ich hab ein Problem mit einem border in meinem Menü. Ich hab ein Hauptmenü als Listeneinträge. Wenn ich auf eine Unterseite in dem Beispiel von der Hauptseite Hotel gelange, wird dieses Untermenü als Listeneintrag unter dem Hauptmenü eingerückt. Die Hauptmenü Listeneinträge sind mit einem Unterstrich abgetrennt, sowie auch die Untermenü Einträge. Wenn ich nun in einer Unterseite bin, hab ich das Problem, dass unter dem letzten Eintrag des Untermenüs, also Preise der Strich nicht vorne anfängt, sondern durch die Einrückung erst da wo der Untermenü Eintrag erscheint. Ich will aber das der Strich unter dem letzten Eintrag in dem Beispiel dann Preise, vorne links beginnt. Ich hoffe ihr versteht was ich meine.

Wie kann ich das in meiner css einstellen?

Hier das Beispiel:

http://www.plastisches.de/test/test.html

Gruss
Julchen

 

[Quaese]

Hi,

du könntest zwei zusätzliche Klassen einführen. Eine, die für das letzte Submenü-Element den unteren Rahmen entfernt (.last-sub) und eine weitere, die für das erste Hauptmenü-Element einen obereren Rahmen definiert (.first-top).

HTML:

<ul>
  <li><a href="#">Hotel</a></li>
  <li class="secound"><a href="../seiten/zimmer.php">Zimmer</a></li>
  <li class="secound last-sub"><a href="../seiten/preise.php">Preise</a></li>
  <li class="first-top"><a href="#">Restaurants &amp; Bars</a></li>
  <li><a href="#">Wellness/Beauty</a></li>
</ul>

Das zugehörige CSS könnte wie folgt aussehen:

/*------------------------------------------*/
/*MENU LEFT*/
#menu_sub_left{padding:10px 0px 20px 10px; margin-left:22px; display:block; margin-bottom:15px; font:normal 12px/30px "Georgia", "Tahoma", "Verdana", "Arial";}
#menu_sub_left ul{margin:0px; padding:0; list-style-type:none;}
#menu_sub_left ul li{display:block; padding:0; margin:0px 0px 0px 0px; border-bottom:1px solid #a9a9a9;}
#menu_sub_left ul li.first-top{ border-top:1px solid #a9a9a9;}
#menu_sub_left ul li a, #menu_sub_left ul li a:link, #menu_sub_left ul li a:visited, #menu_sub_left ul li a:hover { width:160px; line-height:20px; padding-left:20px; margin:0; color:#5d252a; text-decoration:none; display:block; font:normal 12px/25px "Georgia", "Tahoma", "Verdana", "Arial"; text-align:left;}
#menu_sub_left ul li a:active { width:160px; line-height:20px; padding-left:20px; margin:0; color:#5d252a; text-decoration:none; display:block; font:normal 12px/25px "Georgia", "Tahoma", "Verdana", "Arial"; text-align:left; background:url(../images/menu_bg.jpg) no-repeat;}
#menu_sub_left ul li a:hover{color:#c0a00b; background:url(../images/point_menu.gif) no-repeat left center;}
/*MENU LEFT AKTIVE SEITE HAUPTMENU*/
#menu_sub_left ul li .active{display:block; padding:0px; margin:0px 0px 0px 0px; border-bottom:0px solid #a9a9a9; background:url(../images/menu_bg.jpg) no-repeat;}
#menu_sub_left ul li .active a, #menu_sub_left ul li .active a:link, #menu_sub_left ul li .active a:visited, #menu_sub_left ul li .active a:hover { width:160px; line-height:20px; padding-left:20px; margin:0; color:#5d252a; text-decoration:none; display:block; font:normal 12px/25px "Georgia", "Tahoma", "Verdana", "Arial"; text-align:left; background:#c0a00b;}
#menu_sub_left ul li .active a:active { width:160px; line-height:20px; padding-left:20px; margin:0; color:#5d252a; text-decoration:none; display:block; font:normal 12px/25px "Georgia", "Tahoma", "Verdana", "Arial"; text-align:left;}
#menu_sub_left ul li .active a:hover{color:#c0a00b; background:url(../images/point_menu.gif) no-repeat left center;}
/*MENU LEFT AKTIVE SEITE UTERMENU*/
#menu_sub_left .secound_active {display:block; padding:0px; margin:0px 0px 0px 20px; background:url(../images/menu_secound_bg.jpg) no-repeat;}
#menu_sub_left .secound_active a, #menu_sub_left .secound_active a:link, #menu_sub_left .secound_active a:visited, #menu_sub_left .secound_active a:hover, #menu_sub_left .secound_active a:active { width:160px; line-height:20px; margin:0; color:#5d252a; text-decoration:none; display:block; font:normal 12px/25px "Georgia", "Tahoma", "Verdana", "Arial"; text-align:left; background:url(../images/point_menu.gif) no-repeat left center;}
#menu_sub_left .secound_active a:hover{color:#c0a00b; background:url(../images/menu_secound_bg.jpg) no-repeat;}
/*UNTERMENÜ*/
#menu_sub_left .secound {display:block; padding:0px; margin:0px 0px 0px 20px;}
#menu_sub_left .last-sub {border: 0 none;}
#menu_sub_left .secound a, #menu_sub_left .secound a:link, #menu_sub_left .secound a:visited, #menu_sub_left .secound a:hover, #menu_sub_left .secound a:active { width:160px; line-height:20px; margin:0; color:#5d252a; text-decoration:none; display:block; font:normal 12px/25px "Georgia", "Tahoma", "Verdana", "Arial"; text-align:left;}
#menu_sub_left .secound a:hover{color:#c0a00b;}
/*-----------------------------------------*/

Ciao
Quaese

 

[julchen]

Hallo,
ja das wäre die umständliche Variante an die ich auch schon gedacht hätte. Gibt es da keine einfachere Lösung?

Gruss
Julchen

 

[Quaese]

Hi,

es gibt auch eine andere Lösung. Allerdings müsstest du die Listen anderes organisieren (geschachtelte Listen). Weiterhin wäre das einheitliche Aussehen nicht für alle Browser gewährleistet.

Ansatz

HTML:

<ul>
  <li><a href="#">Hotel</a></li>
  <ul>
    <li class="secound"><a href="../seiten/zimmer.php">Zimmer</a></li>
    <li class="secound"><a href="../seiten/preise.php">Preise</a></li>
  </ul>
  <li><a href="#">Restaurants &amp; Bars</a></li>
  <li><a href="#">Wellness/Beauty</a></li>
</ul>

CSS:

/*------------------------------------------*/
/*MENU LEFT*/
#menu_sub_left{padding:10px 0px 20px 10px; margin-left:22px; display:block; margin-bottom:15px; font:normal 12px/30px "Georgia", "Tahoma", "Verdana", "Arial";}
#menu_sub_left ul{margin:0px; padding:0; list-style-type:none;}
#menu_sub_left ul li{display:block; padding:0; margin:0px 0px 0px 0px; border-bottom:1px solid #a9a9a9;}
#menu_sub_left ul ul+li{
  border-top:1px solid #a9a9a9;
}
#menu_sub_left ul li a, #menu_sub_left ul li a:link, #menu_sub_left ul li a:visited, #menu_sub_left ul li a:hover { width:160px; line-height:20px; padding-left:20px; margin:0; color:#5d252a; text-decoration:none; display:block; font:normal 12px/25px "Georgia", "Tahoma", "Verdana", "Arial"; text-align:left;}
#menu_sub_left ul li a:active { width:160px; line-height:20px; padding-left:20px; margin:0; color:#5d252a; text-decoration:none; display:block; font:normal 12px/25px "Georgia", "Tahoma", "Verdana", "Arial"; text-align:left; background:url(../images/menu_bg.jpg) no-repeat;}
#menu_sub_left ul li a:hover{color:#c0a00b; background:url(../images/point_menu.gif) no-repeat left center;}
/*MENU LEFT AKTIVE SEITE HAUPTMENU*/
#menu_sub_left ul li .active{display:block; padding:0px; margin:0px 0px 0px 0px; border-bottom:0px solid #a9a9a9; background:url(../images/menu_bg.jpg) no-repeat;}
#menu_sub_left ul li .active a, #menu_sub_left ul li .active a:link, #menu_sub_left ul li .active a:visited, #menu_sub_left ul li .active a:hover { width:160px; line-height:20px; padding-left:20px; margin:0; color:#5d252a; text-decoration:none; display:block; font:normal 12px/25px "Georgia", "Tahoma", "Verdana", "Arial"; text-align:left; background:#c0a00b;}
#menu_sub_left ul li .active a:active { width:160px; line-height:20px; padding-left:20px; margin:0; color:#5d252a; text-decoration:none; display:block; font:normal 12px/25px "Georgia", "Tahoma", "Verdana", "Arial"; text-align:left;}
#menu_sub_left ul li .active a:hover{color:#c0a00b; background:url(../images/point_menu.gif) no-repeat left center;}
/*MENU LEFT AKTIVE SEITE UTERMENU*/
#menu_sub_left .secound_active {display:block; padding:0px; margin:0px 0px 0px 20px; background:url(../images/menu_secound_bg.jpg) no-repeat;}
#menu_sub_left .secound_active a, #menu_sub_left .secound_active a:link, #menu_sub_left .secound_active a:visited, #menu_sub_left .secound_active a:hover, #menu_sub_left .secound_active a:active { width:160px; line-height:20px; margin:0; color:#5d252a; text-decoration:none; display:block; font:normal 12px/25px "Georgia", "Tahoma", "Verdana", "Arial"; text-align:left; background:url(../images/point_menu.gif) no-repeat left center;}
#menu_sub_left .secound_active a:hover{color:#c0a00b; background:url(../images/menu_secound_bg.jpg) no-repeat;}
/*UNTERMENÜ*/
#menu_sub_left .secound {display:block; padding:0px; margin:0px 0px 0px 20px;}
#menu_sub_left ul ul li{
  border: 0 none;
  border-top:1px solid #a9a9a9;
}
#menu_sub_left ul ul li:first-child{
  border: 0 none;
}
#menu_sub_left .secound a, #menu_sub_left .secound a:link, #menu_sub_left .secound a:visited, #menu_sub_left .secound a:hover, #menu_sub_left .secound a:active { width:160px; line-height:20px; margin:0; color:#5d252a; text-decoration:none; display:block; font:normal 12px/25px "Georgia", "Tahoma", "Verdana", "Arial"; text-align:left;}
#menu_sub_left .secound a:hover{color:#c0a00b;}
/*-----------------------------------------*/

Es kommen hierbei Selektoren für Nachbarelemente (+) sowie Pseudoklassen first-child) zum Einsatz. Diese werden allerdings wie bereits erwähnt noch nicht browserübergreifend unterstützt.

Ciao
Quaese

 

[Maik]

Hi,

Allerdings müsstest du die Listen anderes organisieren (geschachtelte Listen). [...]

Ansatz

HTML:

<ul>
  <li><a href="#">Hotel</a></li>
  <ul>
    <li class="secound"><a href="../seiten/zimmer.php">Zimmer</a></li>
    <li class="secound"><a href="../seiten/preise.php">Preise</a></li>
  </ul>
  <li><a href="#">Restaurants &amp; Bars</a></li>
  <li><a href="#">Wellness/Beauty</a></li>
</ul>

Das <ul>-Listenelement der zweiten Menüebene stellt kein Nachbarelement des Listeneintrags <li> dar

<ul>
  <li><a href="#">Hotel</a>
         <ul>
             <li class="secound"><a href="../seiten/zimmer.php">Zimmer</a></li>
             <li class="secound"><a href="../seiten/preise.php">Preise</a></li>
         </ul>
  </li>
  <li><a href="#">Restaurants &amp; Bars</a></li>
  <li><a href="#">Wellness/Beauty</a></li>
</ul>

mfg Maik

 

[Quaese]

Asche auf mein Haupt ... da hab ich wohl nur mit einem Auge hingesehen - Maik hat natürlich recht.

Tausche

#menu_sub_left ul ul+li{
  border-top:1px solid #a9a9a9;
}

durch

#menu_sub_left ul li ul{
  border-top:1px solid #a9a9a9;
  border-bottom:1px solid #a9a9a9;
}

aus.

Dann sollte es auch mit dem korrekten Markup von Maik funktionieren.

@Maik: Hat aber trotzdem gut ausgesehen ;-)

Ciao
Quaese

 

[julchen]

Hallo,
Das geht aber so noch nicht. Muss ich da noch ne Klasse verändern?

Gruss
julchen

 

[Maik]

Für welche der beiden vorgeschlagenen Lösungsansätze hast du dich nun entschieden, und was funktioniert daran in welchem Browser (im Falle des IE bitte seine Versionsnummer nennen) nicht wie gewünscht?

mfg Maik

 

[julchen]

Hallo,
na ja, ich möchte schon, dass es in allen gängigen Browsern funktioniert.

Bei deinem Beispiel würde bei dem Untermenü der Strich doch auch genauso lang wie bei den Haupteinträgen. Die Unterstiche bei den Untermenü Einträgen sollte aber so verkürzt sein, wie in meinem Beispiel. Nur die Haupteinträge sollen mit einer Trennlinie versehen werden, die über die komplette Länge geht.

Gruss
Julchen

 

[Maik]

Wie du dir das vorstellst, hast du ja schon eingangs erläutert, und wenn dir die Browserkompatibilität wichtig ist, bist du doch mit Quaeses erstem Beispiel bestens bedient.

Wir wüßten aber gerne, auf welche Weise du es nun umsetzt, wie dein aktueller Code lautet, und wobei in welchem Browser (im Falle des IE bitte seine Versionsnummer nennen) Probleme auftreten, denn in deiner eingangs verlinkten Testseite ist ja noch alles beim Alten.

mfg Maik