- This topic is empty.
-
AuthorPosts
-
July 23, 2011 at 9:35 am #33609
tobeeornot
MemberHi 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!
TobyJuly 23, 2011 at 12:08 pm #83822furrball1383
Memberumm 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 #83823tobeeornot
MemberThanks 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 #83825furrball1383
Memberwell 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 #83826tobeeornot
Memberok 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 #83827tobeeornot
MemberBTW – dumb question, what is a fiddle and where do I find it?
July 23, 2011 at 1:52 pm #83828chrisburton
ParticipantJuly 23, 2011 at 2:46 pm #83830tobeeornot
MemberThanks 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 #83831tobeeornot
Membernever mind. It looks like it was an issue with Opera.
July 23, 2011 at 2:52 pm #83832tobeeornot
MemberIs it possible to add images with Fiddle?
July 23, 2011 at 2:54 pm #83833furrball1383
Memberwell 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 #83834tobeeornot
Memberi don’t have any hosting space atm so i guess that rules this out then?
July 23, 2011 at 2:58 pm #83835chrisburton
ParticipantJuly 23, 2011 at 3:19 pm #83836tobeeornot
Memberok, great – here is the link.
July 23, 2011 at 3:44 pm #83837furrball1383
Memberok 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 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.