CSS Menu: nét niet...

**Bernard van Heusden** · 05-06-2010, 13:31

Amice,

Kort kan ik het zeker houden;

Hou het menu er uit zou moeten zien:
http://www.pinklady.pixelsparadise.com/

Hoe het menu er uit ziet:
http://www.bammert.nl/joomla/

Graag een slimmerd die doorheeft wat er fout staat waardoor mijn menu niet stijlvol is en praktisch onbruikbaar is geworden...

Groot is mijn dank bij voorbaat al!

**Jos van Marrewijk** · 05-06-2010, 13:41

Kan je misschien de css van je menu plaatsen, of vertellen hoe je het menu hebt gemaakt?
Ik weet niet of je je menu met ul/li hebt gemaakt? Daarmee is het in ieder geval makkelijk om een goede mouseover te maken.

**Michiel S.** · 05-06-2010, 14:25

Zoiets zal je missen bij je li

padding: 4px 4px 4px 4px;
width: 150;

**A. Hamers** · 05-06-2010, 14:37

misschien de maker van de template contacteren? Gezien dit pixelparadise is en het om een commercieel product gaat, gaan ze je heus wel helpen als je ervoor betaald hebt?

**Bernard van Heusden** · 05-06-2010, 19:23

Well, de CSS van topmenu zijn voor zover ik weet exact gelijk als die in de template! Dat is gecheckt.

Veel code maar ook veel extra info die je kunt skippen.
De code is ook gewoon te zien op
http://bammert.nl/joomla/templates/p.../css/basic.css
http://bammert.nl/joomla/templates/p...css/custom.css

Support van het bedrijf is .JS .PHP etc only, geen CSS achtige...

HTML:

PHP Code:


<div class="topmenu">

<ul class="menu" id="nav">

<li id="current" class="active item1">

<a href="http://bammert.nl/joomla/"><span>Home</span></a>

</li>

<li class="parent item82">

<a><span>Nieuws</span></a></li>

<li class="parent item83">

<a><span>Kalender</span></a><ul>

<li class="item54">

<a href="/joomla/index2.php?option=com_jevents&amp;view=day&amp;task=day.listevents&amp;Itemid=54" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,');return false;"><span>Kalender (dag)</span></a></li>

<li class="item55">

<a href="/joomla/index2.php?option=com_jevents&amp;view=week&amp;task=week.listevents&amp;Itemid=55" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,');return false;"><span>Kalender (week)</span></a></li>

<li class="item56">

<a href="/joomla/index2.php?option=com_jevents&amp;view=month&amp;task=month.calendar&amp;Itemid=56" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,');return false;"><span>Kalender (maand)</span></a></li></ul></li>

<li class="parent item71"><a><span>Bestanden</span></a><ul>

<li class="item88">

<a href="/joomla/index.php?option=com_phocadownload&amp;view=section&amp;id=3&amp;Itemid=88"><span>Informatie</span></a></li></ul></li>

<li class="parent item90"><a><span>Links</span></a>

<ul>

<li class="item48">

<a href="/joomla/index.php?option=com_weblinks&amp;view=categories&amp;Itemid=48"><span>Links bekijken</span></a></li></ul></li>

<li class="parent item41">

<a><span>FAQ</span></a><ul>

<li class="item92">

<a href="/joomla/index.php?option=com_content&amp;view=section&amp;id=3&amp;Itemid=92"><span>FAQ bekijken</span></a></li>

<li class="item93">

<a href="/joomla/index.php?option=com_content&amp;view=article&amp;layout=form&amp;Itemid=93"><span>Vraag stellen</span></a></li></ul></li></ul>                

</div>

CSS CUSTOM

PHP Code:


.topmenu {background-color:#fff;}

.topmenu ul li a:link, .topmenu ul li a:visited {color:#444;text-decoration: none;display:block;padding:3px 10px;margin-right:1px;}

.topmenu ul li a:hover {background-color:#de3fa5;color:#fff;}

.topmenu ul li#current a:link, .topmenu ul li#current a:visited, ul#nav li ul li a:link, ul#nav li ul li a:visited, ul#nav li.active ul li a:link, ul#nav li.active ul li a:visited  {background-color:#de3fa5;color:#fff;}

.topmenu ul li#current a:hover, ul#nav li.active ul li a:hover, ul#nav li ul li a:hover {background-color:#999;color:#fff;}

ul#nav li ul {background-color:#de3fa5;}

a.readon {text-decoration: none;background-color:#de3fa5;color:#fff;padding:0px 8px;float:left;display:block;margin-top:5px;}

a.readon:hover {background-color: #009fd0;}

CSS BASIS:

PHP Code:


/************** Navigation styles **************/

.topmenu {position:relative; z-index:1000;}

.topmenu ul{float:right;padding:0;margin:0;}

.topmenu ul li {float:left;list-style: none;}

.topmenu ul li a {color:#111;text-decoration: none;display:block;}

**Jackie Xu** · 05-06-2010, 19:36

In de code van de template staan de vier '25%' kolommen onder elkaar in de code. Dat wil zeggen dat deze 100% zullen maken, indien gebruik gemaakt wordt van de normale 'flow'. In jouw code staat tussen die vier div's echter een andere div, die waar 'Maurits' Studiebegeleiding' in staat.

**Bernard van Heusden** · 05-06-2010, 21:34

Bedankt voor je (jullie) reply(s).

Dat divje waar JXu het over had is nu weg, maar het probleem niet helaas!

**Jackie Xu** · 05-06-2010, 22:31

Heel dom van mij, ik lees nu pas dat het over het menu gaat... Mijn excuses daarvoor.

Ten eerste kun je het cursor-icoontje veranderen, zodat het niet meer lijkt alsof je tekst wilt gaan veranderen door dit toe te passen:

Code:

{cursor: pointer;}

Overigens verwijzen 'Nieuws', 'Kalender' etc. zelf nergens naartoe, ik neem aan dat dit de bedoeling is?

Het menu wat jij nu gebruikt mist de padding (en margin).

Het referentie model heeft dit nog in de code staan:

Code:

.topmenu ul li a:link, .topmenu ul li a:visited{
margin-right: 1px;
padding: 3px 10px;
}

**Bernard van Heusden** · 05-06-2010, 22:54

Top, ik test het direct, je hoort binnen tien minuten meer van me :)
Alles verwijst ergens naar, alleen de items moeten een pull down zijn, zonder klikfunctie. Of is dat vreemd?

Tot zo!

//edit

Sorry, maar in mijn CUSTOM.CSS staat gewoon:
.topmenu ul li a:link, .topmenu ul li a:visited {color:#444;text-decoration: none;display:block;padding:3px 10px;margin-right:1px;}

**Jackie Xu** · 05-06-2010, 23:34

'Nieuws' staat wel in een <a></a> anchor tag, maar zonder href.

Vreemd, die custom.css.

Wat momenteel werkt op die <a>Nieuws</a>:

PHP Code:


background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
color: #111;
cursor: pointer;
display: block;
float: none;
font-family: Arial, FreeSans, Helvetica, Verdana, sans-serif;
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 18px;
line-height: 18px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-decoration: none;
vertical-align: baseline;
width: 37px;

Daar blijven padding en margin 0. Vandaar dan ook dat die items op elkaar geplakt zijn. De verwijzing naar het bestand custom.css klopt wel. Dus dit is vreemd.

#EDIT

Overigens, niet helemaal relevant, maar faq.css staat niet eens in het <head></head> gedeelte.

Een wanhopige poging:
Misschien dat er tóch nog href="" inzetten helpt? <a href="#">Nieuws</a>

Het is wat aan de late kant, kan zijn dat het brein niet goed aan het functioneren is...

**P. Beulque** · 06-06-2010, 12:26

Ja, href="#" moet erin.

Dat komt omdat de links met a:link worden opgeroepen.

De pseudoclass :link selecteert enkel elementen met een href attribuut.

**Bernard van Heusden** · 06-06-2010, 17:16

Top mensen, het is gefixt (door de # als link!).
Nu is het helaas nog wel zo dat het menu dichtklapt zodra je van een item langzaam omlaag gaat, dan is het pulldown gebeuren verdwenen. Door die tussenruimte!

Veel weet ik er niet van maar het zal wellicht ergens een margin 1px ofzo of 3px zijn?

CSS Menu: nét niet...