Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Problems aligning nav rollovers with header using css

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 24 total)
1 2
  • Author
    Posts
  • July 23, 2011 at 9:35 am #33609
    tobeeornot
    Member

    Hi all,

    I am new to this forum. It looks very helpful. Any solutions to this problem would be greatly appreciated.

    I have created a main nav area set just below the header container to reveal rounded rollover images as buttons using css but I am having a lot of trouble aligning the links (an unordered list in the html) and the buttons/rollover images to the images that are placed above on the header (I also want the link titles centered within each button). Essentially, I want to give the effect that the rollover buttons and links are connected to the images above and are evenly spaced. I have managed to get three of the five links in place but the rollover effects (especially the second state) break down and become distorted after the first link.

    I am fairly new to design but would really like understand why this isn’t working and find a solution as I have spent a week working on it, mainly playing with the padding settings within css and the size of the nav container.

    For your information, the size of images on the header that I want to correspond to the buttons below are W: 110px H: 115px and spaced apart by 10px. The width of the nav container below is 590px to correspond with the images above. The rollover image is W: 110px and H:60 (30px for each button) where one is sitting on top and the other directly below ).

    The relevant html and css is listed below.

    HTML


    

    

    

    


    < code>
    

    
#mainNav {
    
position: absolute;
    
background-color: #8DADAF;
    
left: 231px;
    
width: 590px;
    
bottom: -29px;
    
height: 29px;
    
}
    

    
#mainNav ul {
    
float: left;
    
margin: 0; /
    
padding: 0;
    
list-style: none;/* ~~ removes bullets ~~ */
    
}
    

    
#mainNav li {
    
padding: 0;
    
margin: 0;
    
display: block;
    
float: left;/* ~~ makes list horizontal ~~ */
    
}
    

    
#mainNav li a:link, #mainNav li a:visited {
    
padding: 0em 4.0em 0em 1.0em;
    
font-family: Verdana, Geneva, sans-serif;
    
font-size: 0.8em;
    
font-weight: bold;
    
color: #8dadaf;
    
text-decoration: none;
    
display: block;
    
line-height: 30px;
    
background: url(../_images/nav_rollover.jpg) no-repeat left top;
    
}
    

    
#mainNav li a:hover {
    
color: #b11f44;
    
background: url(../_images/nav_rollover.jpg) right bottom;
    
border: none;
    
}

    Many thanks in advance!
    Toby

    July 23, 2011 at 12:08 pm #83822
    furrball1383
    Member

    umm dude you may want to present your code within < pre>< code> < /code >< /pre > tags. (Note I have added extra spaces within the tags so they show up as text here). meanwhile, are you trying to have a vertical nav or horizontal one? if so, you may want to take a look at this discussion https://css-tricks.com/forums/discussion/comment/49408#Comment_49408 in which i explain it with the coding. as far as i can see, the only difference from what i have shown there would be you having to center the text for the link within the block element for which i believe it should be text-align center.

    July 23, 2011 at 12:39 pm #83823
    tobeeornot
    Member

    Thanks for the comment furrball. Apologies for the coding disaster – wasn’t sure how it is presented in this forum. Amended above.

    I am making a horizontal nav ( hence the float: left in the #mainNav li) for the nav below the header.

    I have tried text-align center but it hasn’t worked it out.

    July 23, 2011 at 1:40 pm #83825
    furrball1383
    Member

    well in any case, why don’t you plug your code and the graphics into a fiddle and link to it and then we can fiddle with it till it works :D and do look up the link i put in my previous post, i think it went quite in depth into making your horizontal nav, the sprites and positioning of the sprites within the css

    July 23, 2011 at 1:47 pm #83826
    tobeeornot
    Member

    ok furrball, shall do. To be honest I was a little lost by some of the lengthy comments but I am really determined to do this so your help will be greatly appreciated. :)

    July 23, 2011 at 1:50 pm #83827
    tobeeornot
    Member

    BTW – dumb question, what is a fiddle and where do I find it?

    July 23, 2011 at 1:52 pm #83828
    chrisburton
    Participant

    http://jsfiddle.net

    July 23, 2011 at 2:46 pm #83830
    tobeeornot
    Member

    Thanks Chris.

    I am trying to drop code into fiddle from Dreamweaver but it isn’t working. Do I need to do it manually?

    July 23, 2011 at 2:48 pm #83831
    tobeeornot
    Member

    never mind. It looks like it was an issue with Opera.

    July 23, 2011 at 2:52 pm #83832
    tobeeornot
    Member

    Is it possible to add images with Fiddle?

    July 23, 2011 at 2:54 pm #83833
    furrball1383
    Member

    well what you’d have to do is upload the images to a site that allows you to do so and then use the link for them as the images url
    also for making your sprites, you may want to try this application, although i make mine in photoshop, this website is quite useful
    http://www.spritecow.com/

    July 23, 2011 at 2:57 pm #83834
    tobeeornot
    Member

    i don’t have any hosting space atm so i guess that rules this out then?

    July 23, 2011 at 2:58 pm #83835
    chrisburton
    Participant

    use http://tinypic.com

    July 23, 2011 at 3:19 pm #83836
    tobeeornot
    Member

    ok, great – here is the link.

    July 23, 2011 at 3:44 pm #83837
    furrball1383
    Member

    ok from the results page i can’t really figure out what the problem is because i don’t know what the two states are supposed to look like, so if you wouldn’t mind posting the link to the sprite itself as well then I can figure it out.
    never mind i can see it now the hover sprites aren’t lining up still post a link with the spriteso i can fiddle with the graphic too. Ofcourse the easiest way would be to add identifying features such as a number to each hover tab so then you can see what position is showing up for each link and adjust the x co-ordinates accordingly

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 24 total)
1 2
  • The forum ‘CSS’ is closed to new topics and replies.