Nu denk ik dat ik eindelijk alles goed heb... Krijg ik de afstanden niet goed.
Mijn active link wil niet even ver uit elkaar staan als de normale links.
/********************MENU*********************/
/* hack for IE6 */
* html div#menu_horiz {
/* hide ie/mac \*/
height: 1%;
/* end hide */
}
div#menu_horiz {
width: 800px;
height: 33px;
margin-top: -14px;
}
div#menu_horiz ul {
list-style-type: none;
margin: 0;
padding-top: 10px;
color: #FFF;
font-style: none;
}
/* menu list items */
div#menu_horiz li {
/* makes the list horizontal */
float: left;
/* remove any default bullets */
list-style: none;
/* still no margin */
margin-left: 5px;
}
/* the links, that is each list item */
div#menu_horiz a {
/* pushes li out from the text, sort of like making links a certain size, if you give them a set width and/or height you may limit you ability to have as much text as you need */
padding: 10px 5px 10px 0px;
/* still no margin */
margin: 0;
/* removes default underline */
text-decoration: none;
/* default link color */
color: #FFF;
/* makes it hold a shape, IE has problems with this, fixed above */
display: block;
}
/* hover state for links */
div#menu_horiz li a:hover {;
/* set your image here, dark grey image with white text set above*/
text-decoration: underline;
color: #FFF;
list-style-type: none;
margin: 0;
padding-top: 10px;
color: #FFF;
font-style: none;
}
div#menu_horiz a span {
/* compensates for no left padding on the "a" */
padding: 0px 0px 0px 0px;
color: #FFF
list-style-type: none;
margin-left: 0px;
padding-top: 10px;
color: #FFF;
font-style: none;
}
div#menu_horiz li.parent a span {
/* no left padding on the "a" we can set it here, it lets us use the span for an image */
padding-right: 10px;
/* set your image here, down arrow to note it has children, left side of text */
color: #FFF;
list-style-type: none;
margin: 10;
padding-top: 10px;
color: #FFF;
font-style: none;
}
div#menu_horiz li.parent a:hover span {
padding-left: 5px;
/* hover replaces default with right arrow image */
list-style-type: none;
margin: 0;
padding-top: 10px;
color: #FFF;
font-style: none;
color: #FFF;
}
div#menu_horiz li.menuactive a span {
padding-left: 5px;
/* menuactive replaces default with right arrow image */
list-style-type: none;
margin: 10;
padding-top: 10px;
color: #FFF;
font-style: none;
padding-right: 0px;
}
/* active parent, that is the first level parent of a child page that is the current page */
div#menu_horiz li.menuactive, div#menu_horiz li.menuactive a:hover {
/* set your image here, light image with #000/black text set below*/
font-weight: bold;
list-style-type: none;
margin: 0;
padding-top: 10px;
color: #FFF;
font-style: none;
color: #FFF;
padding-left: 10px;
}
Last edited by bigbrodesign on Thu Oct 08, 2009 7:45 pm, edited 1 time in total.
Nu denk ik dat ik eindelijk alles goed heb... Krijg ik de afstanden niet goed.
Mijn active link wil niet even ver uit elkaar staan als de normale links.
/********************MENU*********************/
/* hack for IE6 */
* html div#menu_horiz {
/* hide ie/mac \*/
height: 1%;
/* end hide */
}
div#menu_horiz {
width: 800px;
height: 33px;
margin-top: -14px;
}
div#menu_horiz ul {
list-style-type: none;
margin: 0;
padding-top: 10px;
color: #FFF;
font-style: none;
}
/* menu list items */
div#menu_horiz li {
/* makes the list horizontal */
float: left;
/* remove any default bullets */
list-style: none;
/* still no margin */
margin-left: 5px;
}
/* the links, that is each list item */
div#menu_horiz a {
/* pushes li out from the text, sort of like making links a certain size, if you give them a set width and/or height you may limit you ability to have as much text as you need */
padding: 10px 5px 10px 0px;
/* still no margin */
margin: 0;
/* removes default underline */
text-decoration: none;
/* default link color */
color: #FFF;
/* makes it hold a shape, IE has problems with this, fixed above */
display: block;
}
/* hover state for links */
div#menu_horiz li a:hover {;
/* set your image here, dark grey image with white text set above*/
text-decoration: underline;
color: #FFF;
list-style-type: none;
margin: 0;
padding-top: 10px;
color: #FFF;
font-style: none;
}
div#menu_horiz a span {
/* compensates for no left padding on the "a" */
padding: 0px 0px 0px 0px;
color: #FFF
list-style-type: none;
margin-left: 0px;
padding-top: 10px;
color: #FFF;
font-style: none;
}
div#menu_horiz li.parent a span {
/* no left padding on the "a" we can set it here, it lets us use the span for an image */
padding-right: 10px;
/* set your image here, down arrow to note it has children, left side of text */
color: #FFF;
list-style-type: none;
margin: 10;
padding-top: 10px;
color: #FFF;
font-style: none;
}
div#menu_horiz li.parent a:hover span {
padding-left: 5px;
/* hover replaces default with right arrow image */
list-style-type: none;
margin: 0;
padding-top: 10px;
color: #FFF;
font-style: none;
color: #FFF;
}
div#menu_horiz li.menuactive a span {
padding-left: 5px;
/* menuactive replaces default with right arrow image */
list-style-type: none;
margin: 10;
padding-top: 10px;
color: #FFF;
font-style: none;
padding-right: 0px;
}
/* active parent, that is the first level parent of a child page that is the current page */
div#menu_horiz li.menuactive, div#menu_horiz li.menuactive a:hover {
/* set your image here, light image with #000/black text set below*/
font-weight: bold;
list-style-type: none;
margin: 0;
padding-top: 10px;
color: #FFF;
font-style: none;
color: #FFF;
padding-left: 10px;
}
het is inderdaad handiger om gewoon door te gaan in de post, dus naar beneden te werken. Voor degenen die later in de post vallen, is het anders lastig het verhaal te volgen. Het lijkt dan of bepaalde antwoorden nergens op passen.
Dus een nieuwe post zou kunnen, als het een nieuw onderwerp is, of anders verder gaan in de bestaande post, maar liever niet een origineel post aanpassen naar een nieuwe vraag.
Eehm ik heb de ruimte tussen de links gelijk proberen te krijgen.
Maar op een of andere manier heb ik bij de active link dat de ruimte ertussen kleiner is,
dan bij de gewone link.
En ik heb overal al de padding etc. proberen aan te passen, maar ik krijg het nog niet echt voor mekaar.
/* Start of CMSMS style sheet 'Energie in balans [Menu]' */
/********************MENU*********************/
/* hack for IE6 */
* html div#menu_horiz {
/* hide ie/mac \*/
height: 1%;
/* end hide */
}
div#menu_horiz {
width: 800px;
height: 33px;
margin-top: -14px;
}
div#menu_horiz ul {
list-style-type: none;
margin: 0;
padding-top: 10px;
color: #FFF;
font-style: none;
}
/* menu list items */
div#menu_horiz li {
/* makes the list horizontal */
float: left;
/* remove any default bullets */
list-style: none;
/* still no margin */
margin-left: 5px;
}
/* the links, that is each list item */
div#menu_horiz a {
/* pushes li out from the text, sort of like making links a certain size, if you give them a set width and/or height you may limit you ability to have as much text as you need */
padding: 10px 5px 10px 0px; <=========== padding: 10px 5px 10px 5px; ===========
/* still no margin */
margin: 0;
/* removes default underline */
text-decoration: none;
/* default link color */
color: #FFF;
/* makes it hold a shape, IE has problems with this, fixed above */
display: block;
}
/* hover state for links */
div#menu_horiz li a:hover {;
/* set your image here, dark grey image with white text set above*/
text-decoration: underline;
color: #FFF;
list-style-type: none;
margin: 0;
padding-top: 10px;
color: #FFF;
font-style: none;
}
div#menu_horiz a span {
/* compensates for no left padding on the "a" */
padding: 0px 0px 0px 0px;
color: #FFF
list-style-type: none;
margin-left: 0px;
padding-top: 10px;
color: #FFF;
font-style: none;
}
div#menu_horiz li.parent a span {
/* no left padding on the "a" we can set it here, it lets us use the span for an image */
padding-right: 10px;
/* set your image here, down arrow to note it has children, left side of text */
color: #FFF;
list-style-type: none;
margin: 10;
padding-top: 10px;
color: #FFF;
font-style: none;
}
div#menu_horiz li.parent a:hover span {
padding-left: 5px; <----------------------------------
/* hover replaces default with right arrow image */
list-style-type: none;
margin: 0;
padding-top: 10px;
color: #FFF;
font-style: none;
color: #FFF;
}
div#menu_horiz li.menuactive a span {
padding-left: 5px; <------------------------------------------
/* menuactive replaces default with right arrow image */
list-style-type: none;
margin: 10;
padding-top: 10px;
color: #FFF;
font-style: none;
padding-right: 0px;
}
/* active parent, that is the first level parent of a child page that is the current page */
div#menu_horiz li.menuactive, div#menu_horiz li.menuactive a:hover {
/* set your image here, light image with #000/black text set below*/
font-weight: bold;
list-style-type: none;
margin: 0;
padding-top: 10px;
color: #FFF;
font-style: none;
color: #FFF;
padding-left: 10px;
}
/* End of 'Energie in balans [Menu]' */
Er zijn tools waarmee je dynamisch een css kunt aanpassen en daarmee direct kunt zien wat het effect van je wijziging is. Die hoef je dan 'slechts' nog in je stylesheet op je site te plaatsen en daarmee heb je een werkend resultaat. Ik gebruik op de Mac daarvoor het programma CSSEdit. Wellicht is er voor Windows iets soortgelijks.
