First, am I using the right technique? I used images b/c the font is not standard. I tried a sprite for each nav – normal and hover state – but couldn’t get that to work. Then, I tried what’s up there now – separate images for normal and hover state but not sure what’s happening there or why the images won’t show.
Also, while you’re there, what’s the reason Chrome shows bottom left footer text bigger than the other browsers?
You need to clear the icons and then give them a width for IE unfortunately.
#social_media {clear:both;width:330px}
For your footer text you are probably running into the minimum font-size issue on some browsers. I think in Firefox mine is set to 9px which may be the default - I’m not sure. Other browsers will have similar settings that may or may not be on by default.
Therefore its best not to make anything smaller than that and allow room anyway to display if text is set larger.
It does. Thanks. I didn’t design this. Wouldn’t have done that either.
In IE6 and 7 the top links (FB, Twitter, etc) drop to two lines but not in other browsers. Not sure what the problem is. I tried a disply:inline but that didn’t resolve it.
Also, any great way to get the bottom right footer text to display better in all major browsers? I know they all render fonts differently but when I make smaller in one, it’s unreadable in the other. Or, when I increase in one, it drops to a second line in a couple of the browsers. Or, do I just need to make do and play with it until I find a happy medium?
Yup, that’s “about all there is to it”. Right . This is pretty challenging.
Questions:
#1 - Why is the nav image coming up short on both sides even though the sprite I created is 1024 wide (by 72 high) and the container and nav are 1024 px wide? See here.
#2 - What do I need to change to make the hover match up with the white lines on the nav bar? I tried changing the horizontal position on the #nav li. elements but obviously, I don’t get it b/c it didn’t work.
I don’t understand the span, the em or why spam em is the current state. I would have never have guessed that. What’s the anchor in “To make a ‘current’ state for the current page you could add a current class to the anchor and style it”?
I just added this to Russ’s forum suggesting that he teach this in his upcoming CSS class.
I’m not sure what you mean by coming up short but you have applied a 35px negative left margin to the nav which seems to be because you forgot to remove the default padding from the ul. You must remove margins and padding from the ul (as mentioned a number of times in the css course ;)).
Unlike the demo I put up you have made all the widths of the nav elements slightly different and therefore you must size each element accordingly or it won’t fit. You should have kept them all the same instead of changing them by a few pixels because the difference is hardly noticeable. You can’t leave them all at 201px because that is not their size.
#2 - What do I need to change to make the hover match up with the white lines on the nav bar? I tried changing the horizontal position on the #nav li. elements but obviously, I don’t get it b/c it didn’t work.
The first menu element on your sprite is 30px from the left of the sprite so to have that element line up in your list element you would need to shift the sprite by 30px to the left - e.g. background-position: -30px 0;
The list element is just a window through which you can see the background. To see different parts of a background you must move the image past the window so to speak.
I don’t understand the span, the em or why spam em is the current state. I would have never have guessed that. What’s the anchor in “To make a ‘current’ state for the current page you could add a current class to the anchor and style it”?
There’s nothing complicated here. All I have done is remove the anchor from the current page because the current page should not be a link. That is almost a number one accessibility point which a lot of users forget.
Because I have removed the anchor I need to insert another element to use for styling the current state and that’s why the span is inserted.
There is nothing complicated going on. The anchor is removed so another element must take its place or we won’t have a hook to style.
As I said in the demo you could just add a class to the anchor that said class=“current” and then style that anchor differently to show the current page. The problem is that if someone clicks that link then the same page re-loads which is a waste of everybodys time.
Here is the nav code re-done to suit your nav.
/*nav*/
#nav {
width:100%;/* width of nav */
height:36px;/* half sprite height*/
margin:0;
padding:0;
background:url(http://www.charlotteswebservices.com/temp/http-pakbara/images/nav.gif) no-repeat 0 0;/* multiple sprite image*/
}/* Initial image added to nav so that it stretches full width and we will overlay the other images on top and position them to match. */
#nav li, #nav li a, #nav li em, #nav li span {
width:203px;/* width of image*/
height:36px;/* height of image = half sprite height*/
text-decoration:none;
float:left;
overflow:hidden;/* hide text if zoomed*/
position:relative;/* stacking context for absolute element*/
cursor:pointer;
}
#nav li em {
background-image:url(http://www.charlotteswebservices.com/temp/http-pakbara/images/nav.gif);/* multiple sprite image*/
background-repeat:no-repeat;
position:absolute;
left:0;/* place image on top of text to hide it */
top:0;
width:100%;
}
#nav li.go{margin-left:30px;display:inline}
#nav li.go em {
background-position: -30px 0
}/* position of sprite within the image*/
#nav li.product, #nav li.product a, #nav li.product span {
width:212px
}
#nav li.product em {
background-position:-233px 0
}/* position of sprite within the image*/
#nav li.inspired, #nav li.inspired a, #nav li.inspired span {
width:203px
}
#nav li.inspired em {
background-position:-444px 0
}/* position of sprite within the image*/
#nav li.blog, #nav li.blog a, #nav li.blog span {
width:182px
}
#nav li.blog em {
background-position:-647px 0
}/* position of sprite within the image*/
#nav li.contact, #nav li.contact a, #nav li.contact span {
width:191px
}
#nav li.contact em {
background-position:-829px 0
}/* position of sprite within the image*/
#nav li a:hover {
visibility:visible
}/* IE6 fix to make inner element show on hover*/
/* now swap image position on hover to show other image and sset up a current state in a span instead of an anchor.*/
/* the image needs to be dragged upwards by 36px to reveal the over state */
#nav li.go a:hover em, #nav li.go span em {
background-position:-30px -36px
}/* position of sprite within the image*/
#nav li.product a:hover em, #nav li.product span em {
background-position:-233px -36px
}/* position of sprite within the image*/
#nav li.inspired a:hover em, #nav li.inspired span em {
background-position:-444px -36px
}/* position of sprite within the image*/
#nav li.blog a:hover em, #nav li.blog span em {
background-position:-647px -36px
}/* position of sprite within the image*/
#nav li.contact a:hover em, #nav li.contact span em {
background-position:-829px -36px
}/* position of sprite within the image*/
/*content*/
The widths and background positions have all been changed to match your image (more or less as I wasn’t that careful).
The first nav element is shifted 30 px away from the left edge because of the awkward way you produced the first white bar with an offset. For that reason I have applied the background image to the nav itself otherwise we would have a blank space at the start of the nav.
Not sure what to call the class/selector for “selected”. I’d like it to be the same as hover.
Even though the images are 36 px in height, if I set the #nav to height:36px; the border-left white vertical line on the a element doesn’t go all the way down and you can tell there’s a lot of extra space underneath image. I’d like the nav to be higher to match design.
How do I hide the a link text? I tried using span {display:hidden} around nav text but the images disappeared also.
To get the first (Just Go!) blue hover and selected link, should I cut the image all the way to left to make the left part turn blue or is there another way? Same with the last (Contact) link - create a longer image so that it will turn blue on the far right of nav when selected and hovered?
Wait…before I recreate ALL the buttons for the sprites, how should I handle the white line b/w each link? Add it to the sprite or put it in the CSS?
…I’m looking at what you have. The only thing is that there isn’t an explanation so I’m not sure why you’ve done some of the things you’ve done. Also, it’s much different than how Russ taught it so kind of confused.
As you click on each of those links view the page source and you will see a class on the body element. That body class is what highlights the nav link for each page.
There is an ID for each <li> and the sprite image gets hooked to the span which is nested in each anchor. It is an image replacement method that allows the nav to work with images off.
Pay attention to the BG positions changing on hover and on the current links. Of course they are set for that demo sprite and you would have to tailor it to your needs.
. This is pretty challenging.![The design is here and [URL=“http://www.charlotteswebservices.com/temp/http-pakbara/index.html#”]the build is here](http://www.charlotteswebservices.com/temp/http-pakbara/images/_source/design.png){kind=link}