Page 2 of 3
Re: M E N U
Posted: Sat Aug 07, 2010 8:48 pm
by iStevo
Jos,
ik voel het, we zijn er bijna.
En wonderwel snap ik het ook een beetje (wat de bedoeling was)
menu 2 staat nu op 11em maar is nog langer dan menu 1.
menu 3 overlapt menu 2 wat inderdaad niet de bedoeling was.
Ga proberen volgende week een verticaal menu te maken met de verkregen info.
Re: M E N U
Posted: Sat Aug 07, 2010 9:22 pm
by Jos
Mr_Stevo wrote:
Ga proberen volgende week een verticaal menu te maken met de verkregen info.
Het is leuk om mee te spelen en te ontdekken wat je met css kan bereiken, maar Steven, probeer alsjeblieft geen uitklapmenu zelf te maken want dat is echt het ingewikkeldste wat je kan bedenken.
Je ziet zelf nu al dat als je een overlappinkje op het derde niveau wilt invoegen, dat dat direct consequenties heeft voor de rest van je menu... zo verrekte lastig om daar goed uit te komen.
Ik begin er zelf niet eens aan :-\
Het beste kun je kijken wat de verschillende mogelijkheden van de standaard meegeleverde css-menu's zijn. Daar kun je de kleurtjes van aanpassen en je bent verzekerd van de goede werking. Ook als je ineens besluit om een extra subniveau in je pagina's aan te brengen.
Re: M E N U
Posted: Sat Aug 07, 2010 9:37 pm
by iStevo
Jos, dat begrijp ik.
Ben blij dat ik zit waar ik nu zit en heb er toch iets van opgestoken.
Hoop dat we de laatste 2 foutjes kunnen oplossen.
Re: M E N U
Posted: Sat Aug 07, 2010 9:43 pm
by Jos
Mr_Stevo wrote:
en heb er toch iets van opgestoken.
Daar was het om te doen
Heb je een link naar een site waar je je menu hebt draaien?
Re: M E N U
Posted: Sat Aug 07, 2010 10:23 pm
by Jos
Link via PM ontvangen
Ik zie dat het veroorzaakt wordt door de 20px padding in
Code: Select all
#menu a, #menu h2 {
padding: 5px 0 5px 20px;
Hoe op te lossen... dat is dus lastig.
#menu a, #menu h2 { heeft ook een
width: 100%. Eigenlijk zou die de breedte moeten hebben van het li kader waar het in zit, minus de horizontale padding en minus de breedte van de border, dus 12em - 20px - 2*1px
Dat gaat dus niet.
Als je in plaats van 12em bijvoorbeeld 200px gebruikt, dan kan het rekensommetje wel en kom je uit op een width van 178px
Resultaat: geen overlap meer in je hoofdmenu-items, maar ook geen overlap meer in je derde menu-niveau
Dat bedoel ik dus... je komt van het één in het ander

Re: M E N U
Posted: Sun Aug 08, 2010 6:47 am
by iStevo
Gesnopen en gesnapt.
Alles ziet er goed uit.
Heb structuur ongeveer door en ga voor in de toekomst de tip van Rolf volgen
Als je een TEST website maakt, installeer dan eens een oude versie CMSMS vóór 1.6 -> Versie 1.5.4 dus.
Deze is voorzien van eenvoudigere menu en html sjablonen. Om te leren zijn deze gemakkelijker te doorgronden.
Bedankt Jos
Re: M E N U
Posted: Mon Aug 09, 2010 7:46 am
by iStevo
Rolf wrote:
ps.
De bestaande menu sjablonen zijn meestal al voorzien van allerlei hacks voor de browser compatibiliteit. En werken daardoor in alle recente browser. Bij een zelf gemaakt menu heb je die garantie (nog) niet.
Mijn vader beweert dat hij menu niet kan gebruiken.
Ik vermoed dat hij een IE versie heeft (6 of 7) want IE 8 werkt wel, alsook Chrome, FF
Re: M E N U
Posted: Mon Aug 09, 2010 8:12 am
by Rolf
Internet Explorer 6 wordt niet meer ondersteund.
Maar welk menu (link/pm) dan kan ik ook eens kijken in verschillende browsers...
Rolf

Re: M E N U
Posted: Mon Aug 09, 2010 2:09 pm
by Rolf
(Link ontvangen via PM)
Klopt, het menu gaat in IE7 de mist in...
Even wat me zo opvalt:
#menu li {
position: relative;
width: 200 px; ul>li { [/b] hier??[/color]
width: 12em;
float: left;
}
Grt. Rolf
Re: M E N U
Posted: Mon Aug 09, 2010 2:29 pm
by iStevo
Rolf wrote:
#menu li {
position: relative;
width: 200 px; ul>li { [/b] hier??[/color]
width: 12em;
float: left;
}
Zonder dit staat het menu onder elkaar.
Is er een oplossing voor IE 7?
Een extra code in stylesheet opnemen?
Re: M E N U
Posted: Mon Aug 09, 2010 2:40 pm
by Rolf
Mr_Stevo wrote:
Rolf wrote:
#menu>ul>li { [/b] hier??[/color]
width: 12em;
float: left;
}
Zonder dit staat het menu onder elkaar.
Dat geldt alleen voor de
float: left hierdoor wordt het horizontaal.
Maar de
> in
#menu>ul>li dat zegt mij niets... (nou zegt dat ook niet alles natuurlijk

)
Is deze er met een reden in gezet (door Jos) als een hack o.i.d.?
Wat gebeurt er (in IE7) als je gewoon
#menu ul li doet?
Dit bedoel ik nou met:
Rolf wrote:
De bestaande menu sjablonen zijn meestal al voorzien van allerlei hacks voor de browser compatibiliteit. En werken daardoor in alle recente browser. Bij een zelf gemaakt menu heb je die garantie (nog) niet.
grt. Rolf

Re: M E N U
Posted: Mon Aug 09, 2010 2:54 pm
by Jos
De > in #menu>ul>li is er door Jos expres in gezet.
Het betekent dat de css alleen wordt toegepast als er een directe parent-child relatie is
In het geval van het menu wil ik alleen het eerste menu-niveau stylen, en juist niet alle onderliggende li elementen.
Dat een spatie tussen 200 en px niet mag is mij niet bekend.
Re: M E N U
Posted: Mon Aug 09, 2010 2:59 pm
by Rolf
Jos wrote:
De > in #menu>ul>li is er door Jos expres in gezet.
Het betekent dat de css alleen wordt toegepast als er een directe parent-child relatie is
In het geval van het menu wil ik alleen het eerste menu-niveau stylen, en juist niet alle onderliggende li elementen.
Dat vermoedde ik al.
Ik kende het nog niet

Ook weer wat geleerd.
Maar gaat IE7 er ook goed mee om?
Jos wrote:
Dat een spatie tussen 200 en px niet mag is mij niet bekend.
Wordt gezien als 200px 0px... (W3c)
grt. Rolf

Re: M E N U
Posted: Mon Aug 09, 2010 3:08 pm
by Jos
Rolf wrote:
Maar gaat IE7 er ook goed mee om?
Ja... ik denk dat we het meer in de borders, paddings en/of de margins moeten zoeken, dan wel niet het compenseren daarvan in de hoogte-instellingen

Re: M E N U
Posted: Thu Aug 12, 2010 10:02 am
by iStevo
ik heb dus nog steeds geen idee hoe de foutmelding met IE7 op te lossen.
Misschien best de raad van Rolf opvolgen en daarom heb ik cms ms 1.5.4 gedownload waar ik dan menu kan 'lenen'.
Maar hoe breng ik dit over naar mijn website?
Ik vind de css code
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: #ECECEC;
border-bottom: 1px solid #C0C0C0;
width: 100%;
}
/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
width: 200px;
}
/* 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: left;
}
#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: 0px;
padding: 5px 10px;
text-decoration: none;
color: #006699;
}
#primary-nav li a {
border-right: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
}
#primary-nav li li a {
border: 1px solid #C0C0C0;
}
#primary-nav li, #primary-nav li.menuparent {
background-color: #ececec;
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
background-color: #C7C7C7;
}
/* 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: #E7AB0B;
}
/* 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%;
}
maar wat moet ik hiermee??
Code: Select all
{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}
<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
{* The above JavaScript is required for CSSMenu to work in IE *}
Of hoe gaat dat juist in zijn werk?