Page 1 of 1
[Opgelost] Weer iets met het menu...
Posted: Mon Sep 28, 2009 2:24 pm
by bigbrodesign
[Nieuwe vraag]
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.
(sorry voor de vele vragen)
http://www.energieinbalans.com/index.php?page=home-2
Code: Select all
/********************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;
}
Re: Weer iets met het menu...
Posted: Mon Sep 28, 2009 2:59 pm
by deactivated010521
----------
Re: Weer iets met het menu...
Posted: Mon Sep 28, 2009 7:03 pm
by bigbrodesign
Heel erg bedankt!
Het werkt!
Dankje dankje dankje!
Re: [NIEUWE VRAAG] Weer iets met het menu...
Posted: Fri Oct 02, 2009 3:51 pm
by bigbrodesign
[Nieuwe vraag]
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.
(sorry voor de vele vragen)
http://www.energieinbalans.com/index.php?page=home-2
Code: Select all
/********************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;
}
Re: [NIEUWE VRAAG] Weer iets met het menu...
Posted: Fri Oct 02, 2009 6:39 pm
by Jos
Gezien je totaal aantal berichten van 6 hoef je je nog lang niet te schamen voor het aantal vragen.
Maar wat is het verschil met je beginpost? Die was toch opgelost?
Wat heb je zelf al geprobeerd? Op welke plek heb je wat proberen te wijzigen?
Re: [NIEUWE VRAAG] Weer iets met het menu...
Posted: Fri Oct 02, 2009 6:58 pm
by RonnyK
bigbrodesign,
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.
Ronny
Re: [NIEUWE VRAAG] Weer iets met het menu...
Posted: Fri Oct 02, 2009 8:16 pm
by Jos
Oh was dat het... dat had ik dus niet in de gaten, excuus... mijn andere vragen blijven overigens gewoon van kracht.
Re: [NIEUWE VRAAG] Weer iets met het menu...
Posted: Sun Oct 04, 2009 9:30 am
by bigbrodesign
Okee... sorry.
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.
Re: [NIEUWE VRAAG] Weer iets met het menu...
Posted: Sun Oct 04, 2009 5:42 pm
by Rolf
bigbrodesign
Wijzig
padding: 10px 5px 10px 0px; eens in
padding: 10px 5px 10px 5px;
Hierdoor zijn alle linker paddings 5px.
Code: Select all
/* 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]' */
Re: [NIEUWE VRAAG] Weer iets met het menu...
Posted: Sun Oct 04, 2009 6:39 pm
by bigbrodesign
Ik heb het geprobeert. Maar het werkt nog niet. Nu zit er 10px aan de ene kant tussen, en 5 px aan de andere kant.
Re: [NIEUWE VRAAG] Weer iets met het menu...
Posted: Mon Oct 05, 2009 5:52 am
by Gregor
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.
Gregor
Re: [NIEUWE VRAAG] Weer iets met het menu...
Posted: Mon Oct 05, 2009 11:11 am
by Rolf
En anders om?
Het blijft een kwestie van proberen...
Code: Select all
div#menu_horiz li.parent a:hover span {
padding-left: 5px; <<-------------------------------<<--- wijzig in 0px
/* 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; <<-------------------------------<<--- wijzig in 0px
/* menuactive replaces default with right arrow image */
list-style-type: none;
margin: 10;
padding-top: 10px;
color: #FFF;
font-style: none;
padding-right: 0px;
®