Simple CSS Menu Troubleshooting style

alexx

alexx

alexx

Associate
Joined
18 May 2006
Posts
785
My friends just copied and pasted some code off one of those free css website for a dropdown menu.. I've got it this far but been on the computer for over 12 hours so its not what I want to be doing right now - can anyone see what is stopping the dropdown menu background colour style from being equil on both sides and why the background colour pink on the dropdowns doesnt cover all the text

thanks

http://www.dirtygirlsride.com/Dirty_Girls_Ride/Racing.html
 
The problem is in the file widget0_markup.html, this file is imported into your main html and can be found here in the directory ./Dirty_Girls_Ride/Racing_files/widget0_markup.html

at the line.

Code: 
ul.pureCssMenu ul{

        width:94.5px;

}
So change the 94.5 to auto so,

Code: 
ul.pureCssMenu ul{

        width:auto;

}
This answers the second part of your Q.
 
Last edited:
Thanks J thats sorted it however it's still padded within the background colour weirdly any ideas nows how to get the pink to pad evenly on both sides of it all

the css is from this place according to the commenting

PureCSSMenu.com
 
alexx said:
Thanks J thats sorted it however it's still padded within the background colour weirdly any ideas nows how to get the pink to pad evenly on both sides of it all

the css is from this place according to the commenting

PureCSSMenu.com
Click to expand...

Oh i see what you mean now, hold on.
 
This is probably the best you'll get it, you still will have some differences in length at each side but it's even now though.

So in the same widget0_markup.html file change,

Code: 
ul.pureCssMenu li.sep a:hover {

        display:block;

        vertical-align:middle;

        border-width:0px;

        border-style:none;

        text-align:left;

        text-decoration:none;

        [COLOR=Red]padding:0px 0px 0px 10px;[/COLOR]
      
        _padding-left:0;

        font:18px Courier New;

        color: #cccccc;

        text-decoration:none;

        cursor:default;

}
to

Code: 
ul.pureCssMenu li.sep a:hover {

        display:block;

        vertical-align:middle;

        border-width:0px;

        border-style:none;

        text-align:left;

        text-decoration:none;

    [COLOR=Red]    padding:0px 5px 0px 5px;[/COLOR]

        _padding-left:0;

        font:18px Courier New;

        color: #cccccc;

        text-decoration:none;

        cursor:default;

}
You can play around with the numbers.
 
Is it something to do with the alignment - I noticed in the code there was 2 little images being referenced which I assume would have gone to the left but I set these to 0 and can't see anywhere thats padded the text over
 
try this, change,

Code: 
ul.pureCssMenu span{
        display:block;

        background-image:url(./images/arr_white.gif);

        background-position:right center;

        background-repeat: no-repeat;

   padding-right:[COLOR=Lime]12px[/COLOR];}

to

Code: 
ul.pureCssMenu span{
        display:block;

        background-image:url(./images/arr_white.gif);

        background-position:right center;

        background-repeat: no-repeat;

   padding-right:auto;}

That evens the padding on the menu but not the dropdown, is that what you are wanting, but your also wanting the same on the dropdown items?
 
I just tried it with all this gone as its still referencing that gif


ul.pureCssMenu span{
display:block;

padding-right:auto;}

ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_white.gif);

}
ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_white.gif)}

ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_white.gif)}



Its still not central tho - did your test get it more aligned? ps thanks for your help fella
 
Not sure i know what your wanting, in this pic you can see that the pink block is equal on both sides of ABOUT US and STORE, which is what you want. But when you hover the dropdown items the pink block is not equal. ??

1fcxav.jpg
 
Ah sorry I'm using Chrome and its still showing more padding to the left - but also yes ideally the dropdown will be even padding also
 
*Pre warining, I am a noob*

I've not had a chance to look over your HTML for longer than a few seconds due to work. However if your NavMenu is held in Div"widget0" then perhaps add padding=0px to that div?

I've had similar issues in the past like this where things weren't aligned properly - turned out that it's because of the way Div's / tables render margin/padding.
 
You must log in or register to reply here.
Back
Top Bottom