[opgelost] Spelen met menu

[iStevo]

Goedenavond,

Ben al even met menu aan het spelen, maar kan jullie kennis nu toch wel even gebruiken.
Ik heb een aantal pagina's aangemaakt om toch maar te kunnen oefenen en het resultaat te kunnen zien.

http://www.stevo.be/ais/

Code: Select all

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
   margin-left: 1px;
   margin-right: 1px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */ 
   background-color: #07558E;
   margin: auto;
   width: 60%;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
   width: 100 px;
}


/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px; 
}
#primary-nav ul { 
   position: absolute; 
   top: auto; 
   display: none; 
}
#primary-nav ul ul { 
   margin-top: 1px;
   margin-left: -1px;
   left: 100%; 
   top: 0px; 
}
	
#primary-nav li { 
   margin-left: -1px;
   float: right; 
}
#primary-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative; 
}

/* Styling the basic apperance of the menu elements */
#primary-nav a { 
   display: block; 
   width: 100px;
   margin: auto; 
   padding: 5px 20px; 
   text-decoration: none; 
   font-size: 20px;
   font-family: Verdana, Arial, Comic Sans MS, sans-serif;
   color: #FFFFFF;
}

#primary-nav li li a { 
   background-color: #FFFFFF; 
   font-size: 14px;
   font-family: Verdana, Arial, Comic Sans MS, sans-serif;
   color: #000000;
   border: 1px solid #000000;
}	
#primary-nav li, #primary-nav li.menuparent { 
   background-color: #07558E; 
}

#primary-nav li { 
   background-color: #07558E; 
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { 
   background-color: #07558E; 
   color: #FFFFFF;
   border-bottom: 5px solid red;
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, 
#primary-nav ul li.menuparent:hover, 
#primary-nav ul li.menuparenth { 
/* arrow for menuparents */
   background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat; 
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   background-color: #07558E; 
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/* 
just add 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul ul ul,
for fourth level 
*/
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}

/* add 
#primary-nav ul ul ul li:hover ul, 
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hacks */
#primary-nav li li { 
   float: left; 
   clear: both; 
}
#primary-nav li li a { 
   height: 1%; 
}

1) Ik wil graag de rode lijn even lang als de tekst van het menu en niet even lang als de block.
2) Ik wil de rode lijn niet in het submenu
3) ...

Als jullie me helpen, graag ook zeggen waarom, zodanig dat ik er iets kan van leren.

[iStevo]

en in IE is het al helemaal een ramp

[Gregor]

Nu ben ik geen css-guru, maar je zou eens kunnen 'spelen' met width van het active menu. Een tool als yslow (firefox add-on) kan je hier wellicht bij helpen.

Gregor

[brentnl]

Zet de border eens op de ipv de , en zorg dat ook de width,padding en margin op de staan (die worden anders meegenomen met de breedte van de border)

EDIT: of simpeler nog, zet de border-bottom op de . werkt ook.

[iStevo]

Zet de border eens op de ipv de , en zorg dat ook de width,padding en margin op de staan (die worden anders meegenomen met de breedte van de border)

EDIT: of simpeler nog, zet de border-bottom op de . werkt ook.

sorry, kan je dit een beetje verduidelijken want hier sla ik in de war

[iStevo]

Ik ben nog wat aan het spelen geweest.
IE is al beter, maar mijn submenu levert no problemen op.

Code: Select all

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
   margin-left: 1px;
   margin-right: 1px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */ 
   background-color: #07558E;
   margin: auto;
   width: 800 px;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
   width: 120 px;
}


/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px; 
}
#primary-nav ul { 
   position: absolute; 
   top: auto; 
   display: none; 
}
#primary-nav ul ul { 
   margin-top: 1px;
   margin-left: -1px;
   left: 100%; 
   top: 0px; 
}
	
#primary-nav li { 
   margin-left: -1px;
   float: right; 
}
#primary-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative; 
}

/* Styling the basic apperance of the menu elements */
#primary-nav a { 
   display: block; 
   margin: auto; 
   padding: 5px 20px; 
   text-decoration: none; 
   font-size: 20px;
   font-family: Verdana, Arial, Comic Sans MS, sans-serif;
   color: #FFFFFF;
}

#primary-nav li li a { 
   background-color: #FFFFFF; 
   font-size: 12px;
   font-family: Verdana, Arial, Comic Sans MS, sans-serif;
   color: #000000;
   border: 1px solid #000000;
}	
#primary-nav li, #primary-nav li.menuparent { 
   background-color: #07558E; 
}

#primary-nav li { 
   background-color: #07558E; 
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { 
   background-color: #07558E; 
   color: #FFFFFF;
   border-bottom: 5px solid red;
   width: auto;
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, 
#primary-nav ul li.menuparent:hover, 
#primary-nav ul li.menuparenth { 
/* arrow for menuparents */
   background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat; 
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   background-color: #07558E; 
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/* 
just add 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul ul ul,
for fourth level 
*/
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}

/* add 
#primary-nav ul ul ul li:hover ul, 
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hacks */
#primary-nav li li { 
   float: left; 
   clear: both; 
}
#primary-nav li li a { 
   height: 1%; 
}

[Gregor]

En wat voor 'n problemen levert dat dan op??

Gr., Gregor

[iStevo]

En wat voor 'n problemen levert dat dan op??

Gr., Gregor

mijn submenu zou een vaste waarde moeten hebben en dat is nu niet.
mijn submenu verdwijnt achter mijn flash op deze pagina www.stevo.be/ais/

[Gregor]

Het helpt om yslow in installeren onder FF, echt!

Code: Select all

#primary-nav li li {
    clear: both;
    float: left;
[font=Verdana]    width: 150px;[/font]

De width naar eigen believen instellen. Dit was slechts ter test.

Voor je flash vraag zou je eens op het forum kunnen zoeken; er staat mij bij dat die vraag eerder is langsgekomen en het te maken heeft met een parameter van je flash object.

Gr., Gregor

[iStevo]

Het helpt om yslow in installeren onder FF, echt!

Dat heb ik geïnstalleerd, maar ben mijn weg nog steeds aan het zoeken tussen de code.

Voor je flash vraag zou je eens op het forum kunnen zoeken; er staat mij bij dat die vraag eerder is langsgekomen en het te maken heeft met een parameter van je flash object.

Zo te zien heeft dat iets te maken met de Z-index.
Maar weet echt niet waar dat te moeten plaatsen.

Grt Stevo

[Gregor]

Mij heeft het altijd geholpen bij het krijgen van een antwoord, om ook de code te plaatsen. Dat levert over het algemeen gerichte feedback op. Uitzonderingen daar gelaten die bereid zijn om je persoonlijke aandacht te geven door met id en wachtwoord op je site aan de slag te gaan. Iets wat voor mij geen vanzelfsprekendheid is en ik des te meer waardeer.

Als je opmerkt dat het iets met z-index te maken heeft, plaats dan de code die je gebruikt. Voor mij is het transparantievraagstuk bijv. reden geweest om image-rotator te gaan gebruiken waar ik aanvankelijk een stukje flash in elkaar had geknutseld en dat heel aardig werkte, maar tamelijk hardnekkig weigerde om zich naar de achtergrond te laten verplaatsen. Overigens werd het beter toen ik, ook van dit forum, een UDT zag voor het aanroepen van flash. Dit heeft een tijd gewerkt tot ik de tip kreeg voor imagerotator. De lay-out is uiteindelijk ongewijzigd en blijft nu keurig op de achtergrond.

Gr., Gregor

[iStevo]

Mij heeft het altijd geholpen bij het krijgen van een antwoord, om ook de code te plaatsen.

Gregor, welke code moet je juist hebben??

Sjabloon website

Code: Select all

{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>stevo.be | events</title>
{metadata}
{stylesheet}
{literal}
<!--[if IE]>
<style type="text/css">
#footer_copyright {margin-top: 40px;}
#footer_links {margin-top: 40px;}
</style>
<![endif]-->
{/literal}
</head>
</__body>
<div id="container_holder">
        	<div id="content_holder" class="all">
                <div id="menu">{menu template='cssmenu.tpl'}</div>
                <div id="header">{content_image block='header' dir='images/event' alt='stevo.be'}</div>
                <div id="content">{content block="Flags" wysiwyg="false" oneline="true"}{content}<br /><br />{content block="Sponsor" wysiwyg="false" oneline="true"}</div>
         </div>
                <div id="footer_holder" class="links">
                           <div id="footer_copyright">{global_content name='footer'}</div>
                           <div id="footer_links">{global_content name='links'}</div>
                 </div>
</div>
{literal}
<__script__ type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-11855865-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</__script>
{/literal}
<__body>
</__html>

stylesheet website

Code: Select all

html {
       background: #07558E;
	margin: 0px;
	padding: 0px;
}

body {	
	margin: 0px;
	padding: 0px;
	color: #000;
}

.all {
	width: 950px;
	margin: 0px auto;
        background:#07558E url('uploads/images/event-body.png') repeat-y;
	overflow: hidden; 
}

#container_bg {
        width: 950px;
        margin: 0px;
	padding: 0px;
}

#container_holder {
	margin-top: 20px;
}


#header {
        width: 950px;
        background:#07558E url('uploads/images/event-top.png') no-repeat;
        height: 200px;
}

#content {
        width: 850px;
	min-height: 300px;
        font-size: 12px;
        font-family: Verdana, Arial, Comic Sans MS, sans-serif;
        margin: 10px 40px 20px 50px;
        overflow: hidden;
}

#content a {
        text-decoration: none;
        color: #07558E;
}

#content a:visited {
        text-decoration: none;
        color: #07558E;
}

#content a:active {
        text-decoration: none;
        color: #07558E;
}

#content a:hover {
        text-decoration: underline;
        color: #07558E;
}

#footer_holder {
      background:#07558E url('uploads/images/event-bottom.png') no-repeat;
      width: 950px;
      height: 80px;
      margin: auto;
      font-family: Verdana, Arial, Comic Sans MS, sans-serif;
      font-size: 12px;
      color: #FFF;
}

#footer_copyright {
        margin-top: 30px;
        margin-left: 30px;
        width: 40%;
        text-align: left;
        float: left;
}

#footer_links {
        margin-top: 30px;
        margin-right: 30px;
        width: 40%;
        text-align: right;
        float: right;

}

#footergallery_copyright {
        margin-top: 40px;
        margin-left: 30px;
        width: 40%;
        text-align: left;
        float: left;
}

#footergallery_links {
        margin-top: 40px;
        margin-right: 30px;
        width: 40%;
        text-align: right;
        float: right;

}

#search {
        width: 250px;
        font-size: 12px;
        font-family: Verdana, Arial, Comic Sans MS, sans-serif;
        margin-top: -100px;
        margin-left: 600px;
	position: relative;
        float: left;
}

#gallerylogin {
        width: 400px;
        font-size: 12px;
        font-family: Verdana, Arial, Comic Sans MS, sans-serif;
	position: relative;
	margin-right: 40px;
	margin-top: -150px;
        float: right;
}

.links a {
      font-family: Verdana, Arial, Comic Sans MS, sans-serif;
      font-size: 12px;
      text-decoration: none;
      color: #FFF;
}

.links a:visited {
      font-family: Verdana, Arial, Comic Sans MS, sans-serif;
      font-size: 12px;
      text-decoration: none;
      color: #FFF;
}

.links a:active {
      font-family: Verdana, Arial, Comic Sans MS, sans-serif;
      font-size: 12px;
      text-decoration: none;
      color: #FFF;
}

.links a:hover {
      font-family: Verdana, Arial, Comic Sans MS, sans-serif;
      font-size: 12px;
      text-decoration: underline;
      color: #FFF;
}

.tdleft {
        text-align: left;
}

stylesheet menu

Code: Select all

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
   margin-left: 1px;
   margin-right: 1px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */ 
   background-color: #07558E;
   margin: auto;
   width: 800 px;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
   width: 120 px;
}


/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px; 
}
#primary-nav ul { 
   position: absolute; 
   top: auto; 
   display: none; 
}
#primary-nav ul ul { 
   margin-top: 1px;
   margin-left: -1px;
   left: 100%; 
   top: 0px; 
}
	
#primary-nav li { 
   margin-left: -1px;
   float: right; 
}
#primary-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative; 
}

/* Styling the basic apperance of the menu elements */
#primary-nav a { 
   display: block; 
   margin: auto; 
   padding: 5px 20px; 
   text-decoration: none; 
   font-size: 20px;
   font-family: Verdana, Arial, Comic Sans MS, sans-serif;
   color: #FFFFFF;
}

#primary-nav li li a { 
   background-color: #FFFFFF; 
   font-size: 12px;
   font-family: Verdana, Arial, Comic Sans MS, sans-serif;
   color: #000000;
   border: 1px solid #000000;
}	
#primary-nav li, #primary-nav li.menuparent { 
   background-color: #07558E; 
}

#primary-nav li { 
   background-color: #07558E; 
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { 
   background-color: #07558E; 
   color: #FFFFFF;
   border-bottom: 5px solid red;
   width: auto;
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, 
#primary-nav ul li.menuparent:hover, 
#primary-nav ul li.menuparenth { 
/* arrow for menuparents */
   background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat; 
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   background-color: #07558E; 
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/* 
just add 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul ul ul,
for fourth level 
*/
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}

/* add 
#primary-nav ul ul ul li:hover ul, 
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hacks */
#primary-nav li li { 
   float: left; 
   clear: both; 
}
#primary-nav li li a { 
   height: 1%; 
}

[deactivated010521]

----------

[iStevo]

Ik meen aan de code die je gepost hebt te zien dat de basis voor het menu wat je gebruikt "CSSMenu - Horizontal" is. Deze is cross-browser en werkt in IE6,7,8,FF en Chrome, andere browsers heb ik niet getest.

Ik heb inderdaad een standaard menu genomen.
Moet dat nog allemaal wat leren.

Ik gebruik CSSMenu niet in combinatie met flash maar bij het plaatsen in een div had ik ook wat problemen met de zichtbaarheid van de sub-items.

Dit heb ik opgelost door:

Code: Select all

z-index: 2;

toe te voegen aan de css van: #menu_vert, #menuwrapper, #primary-nav li li

Dit is niet gelukt.
Heb die code overal ingevoegd, maar menu blijft nog achter de flash verborgen.


PS. Hoe kan ik ook de width voor submenu een vaste waarde geven??

[deactivated010521]

----------