CSS Menü Frage

[dimat66]

Hallo ich habe ein horizontales Menü eingebaut.
Ich möchte das die einzelnen Menüpunkte mit einer Border getrennt werden.

Hier mein CSS Code

Code:

#nav ul li {
float: left;   
font-weight: normal;
border-right:dotted #666666 1px;
}

Wie kann ich verhindern das die Border nach dem letzten Menüpunkt angezeigt wird?

[dbs]

Hi, der letzte Menüpunkt ist laut SM2-Anleitung "menu-last".
vielleicht:

Code:

.menu-last{ border-right: none; }

http://www.websitebakers.de/sm2/media/README.de.html

[dbs]

Ein SM2-Aufruf in der Art erspart dir extra-CSS:

Code:

<?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, ' | [a][menu_title]</a>', '', '', '', '[a][menu_title]</a>');?>

[dimat66]

Hallo dbs,

zuerst habe ich die CSS-Anweisung ausprobiert.
Leider war das ohne Ergebnis.
Der SM2 Aufruf setzt zwar schön Trennzeichen zwischen die Menüknöpfe aber zerschißt das ganze Menü.
Dropdown funktioniert nicht mehr.

So sieht meins im Moment aus:

Code:

<?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, '<span class="[class]"><li><a href="[url]" class="[class] navlev[level]">[menu_title]</a>', "</li>", '<ul class="ullev[level]">', "</ul>", true, '<ul id="header_menu" class="menu">');?>

Danke

[dbs]

bei Dropdown hatte ich das noch nicht angewendet. dann doch vielleicht css in der art:

Code:

.menu-last{ border-right: 0px!important; }

ein link zum testen wäre nicht schlecht.

[jacobi22]

du hast jetzt für alle <li> ein border definiert. mach das mal einzeln
.menu-sibling {border-left :1px solid #000000; }
ggf. auch noch für menu-first bzw. menu-last, je nachdem, wo dein Balken erscheinen sollen

[frank76]

Hallo zusammen,

ich nutze den Thread hier mal um eine Lösung für mein Problem zu erhalten.

Ich habe ein horizontales drop down Menü, welches vom Grunde her auch prima funktioniert.

nur die drop down Liste bereitet mir etwas Kopfzerbrechen.

Das ist mein Menü:



Soweit alles klar. So sieht mein Menü in ausgeklapptem Zustand aus:



Was mich jetzt stört ist, dass links neben dem "Testlink 1" ein border-left von 1px ist, welcher das Menü eingerückt aussehen lässt. Grundsätzlich möchte ich den border-left nur im Top-Menü haben (also im nicht ausgeklappten Zustand)

Dass ist der CSS-Part:

Code:

#navoben .menu-first {
border-left: 1px solid #F5F0E8;   /*Strich links neben dem ersten Link*/
}

Könnt ihr mir sagen was ich da anpassen muss, damit die drop-down Liste keinen Rahmen enthält?

Vielen Dank.

Frank

[dbs]

Moin, ein Link sagt mehr als tausend Bilder. 
Gibts einen?

[frank76]

Link kann ich leider keinen geben, da sich die Seite noch lokal bei mir auf dem Rechner befindet.

Was für Infos benötigst du denn noch?

LG
Frank

[kweitzel]

Du hast Dir Deine Antwort ja schon fast selbst gegeben ... entweder nimmst Du diese Deklaration ganz rasu, dann bekommt das Menü alles von oben vererbt oder Du setzt diese Border explizit auf 0 px ... vorausgesetzt, das ist die richtige Stelle im CSS

Gruß

Klaus

[jacobi22]

verpass doch dem ganzem Menüblock oder dem ul einen border-left an passender Stelle

[frank76]

@ jacobi: dem ul einen border zu verpassen funktioniert nicht.

@kweitzel: wenn ich die o. g. css anweisung komplett lösche, hat die drop-down-liste keinen left-border mehr ... aber auch das top-menü hat neben dem "Home" keinen left-border mehr.

und genau den will ich ja beibehalten.

hier mal mein komplettes css:

Code:

#navoben {
width:850px;    /*Menuebreite*/
/* float:left; ---- auskommentiert da keine Auswirkung */
padding-bottom:0px; /*Abstand zwischen Navi und Contentbeginn */
}

#navoben ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin:-2px;
padding-left:3px;
list-style-type:none;
}

#navoben ul li {
float:left;
border-right:solid 1px #F5F0E8;
}

#navoben ul li a {
display:block;
height:2.3em;
line-height:2.1em;
padding:0 16px 0 16px;
text-decoration:none;
font-weight:bold;
color: #ffffff;
}

#navoben ul li:hover a {
font-weight:bold;  /*Schriftstärke beim Hovereffekt */
text-decoration:none;
color:#ffffff;     /*Schriftfarbe beim Hovereffekt*/
}

#navoben ul li ul {
display:none;
}

/* #navoben .menu-current { */
/* background: url(images/subback.gif) repeat-x 0 -1px; */
/* } */

#navoben .menu-first {
border-left: 1px solid #F5F0E8;   /*Strich links neben dem ersten Link*/
}


#navoben ul li:hover ul {
display:block;
position:absolute; z-index:999;
top:2.3em;
margin-top:0.0em;
left:0.0em;           /*Submenue Einrückung*/
}

#navoben ul li:hover ul li a {
white-space:normal;
display:block;
width:150px;
height:26px;
line-height:26px;
padding:0px 16px 0px 16px;
/* border-left:solid 1px #F5F0E8; */
font-weight:bold;
color: #ffffff; /*Schriftfarbe Submenue*/
/* border-bottom:solid 1px #F5F0E8; */
background: url(images/subback.gif) repeat-x 0 -1px;   /*Hintergrundbild dop-down*/
}

#navoben ul li:hover ul li a:hover {
/* background-color:#F5F0E8; */
text-decoration:underline;
color: #ffffff; /* Submenue Hover-Farbe */
}

#navoben ul li:hover {
position:relative;
}

#navoben ul li a:hover {
background: url(images/tophover.gif) repeat-x 0 -1px; /*Hoverhintergrund der ersten Navigation*/
text-decoration:none;
}

oder hab ich da jetzt was falsch verstanden?

gruß

frank

[jacobi22]

gib mal den Menü-Aufruf inkl. eventueller Blocks noch mit dazu, gern auch ber PM den kompletten Code. Ich hab das schon öfter so oder ähnlich gemacht, das geht 

[frank76]

Hier der menüaufruf

Code:

<div id="navoben"><?php show_menu2(1, SM2_ROOT, SM2_CURR+1, SM2_ALL|SM2_PRETTY, '<li class="[class]"><a href="[url]">[menu_title]</a>','</li>','<ul>','</ul>',false,false); ?>
</div>

[jacobi22]

simpelste Variante ist das Hinzufügen einer weiteren Klasse abhängig vom z.b. Seitentitel
der geänderte Menüaufruf

Code:

<div id="navoben"><?php show_menu2(1, SM2_ROOT+1, SM2_CURR+1, SM2_ALL|SM2_PRETTY, '<li class="[class] p[menu_title]"><a href="[url]">[menu_title]</a>','</li>','<ul>','</ul>',false,false); ?>
</div>

geändert ist das hier
<li class="[class] p[menu_title]">


der CSS-Part dafür

Code:

.pHome a{border-left: solid 1px #F5F0E8; }

[frank76]

dein lösungsansatz mit einigen kleinen korrekturen hat den erfolg gebracht.

Code:

<div id="navoben"><?php show_menu2(1, SM2_ROOT, SM2_CURR+1, SM2_ALL|SM2_PRETTY, '<li class="[class] p[menu_title]"><a href="[url]">[menu_title]</a>','</li>','<ul>','</ul>',false,false); ?>

nicht wie von dir angegeben SM2_ROOT+1 sondern nur SM2_ROOT und das löschen der css anweisung für "menu-first"

das passt.

vielen dank

frank

[jacobi22]

ja, stimmt, sorry   
habe in meinem Test-CMS noch eine Sprachauswahl davor

[frank76]

nix sorry 

danke nochmal