Hello,
I've always made my menu buttons with the text built into the image but is there a better way to do it?
Thanks for the help.
Full Version: Text on the menu button images or....
Sure, use CSS, using a background-image (without built-in text) on the link.
See for exemples http://css.maxdesign.com.au/listamatic/, and http://wellstyled.com/css-nopreload-rollovers.html.
See for exemples http://css.maxdesign.com.au/listamatic/, and http://wellstyled.com/css-nopreload-rollovers.html.
QUOTE(Frederiek @ Aug 13 2009, 11:38 AM) 
Pity though that the navigation list doesn't stay on one line. Wasn't that you asking about using images without built-in text, in another thread of yours? Would avoid using <span> and inline images.
When you say to avoid using <span> what would I use in its place? or can I just take it out?
What I have now for the nav bar is
HTML
CODE
<ul id="nav">
<li class="c1"><br /></li>
<li id="home"><a href="http://www.pgzz.gamerunion.com"><span><img src="images/onhome.gif" width="150" height="50" alt="Home" /></span></a></li>
<li id="about"><a href="http://www.pgzz.gamerunion.com"><span><img src="images/onhome.gif" width="150" height="50" alt="About" /></span></a></li>
<li id="blog"><a href="http://www.pgzz.gamerunion.com"><span><img src="images/onhome.gif" width="150" height="50" alt="Blog" /></span></a></li>
<li id="class"><a href="http://www.pgzz.gamerunion.com"><span><img src="images/onhome.gif" width="150" height="50" alt="Class" /></span></a></li>
<li id="media"><a href="http://www.pgzz.gamerunion.com"><span><img src="images/onhome.gif" width="150" height="50" alt="Media" /></span></a></li>
<li id="resources"><a href="http://www.pgzz.gamerunion.com"><span><img src="images/onhome.gif" width="150" height="50" alt="Resources" /></span></a></li>
<li id="parents"><a href="http://www.pgzz.gamerunion.com"><span><img src="images/onhome.gif" width="150" height="50" alt="Parents" /></span></a></li>
<li id="c
CSS
CODE
#nav { background: url(images/bodybackground.jpg) repeat; }
#nav, #nav li { margin: 0; padding: 0 }
#nav li { display: inline }
#nav a { color: #301b0a; background: inherit;
text-decoration: none }
#nav a:hover { border: none } /*for IE*/
#nav a span { font-size: 45px; line-height: 1 }
#nav a img { vertical-align: text-top }
#nav a:hover img { visibility: hidden }
#home a:hover span { background: url(/images/offhome.gif) no-repeat }
#about a:hover span { background: url(/images/offhome.gif) no-repeat }
#blog a:hover span { background: url(/images/offhome.gif) no-repeat }
#class a:hover span { background: url(/images/offhome.gif) no-repeat }
#media a:hover span { background: url(/images/offhome.gif) no-repeat }
#resources a:hover span { background: url(/images/offhome.gif) no-repeat }
#parents a:hover span { background: url(/images/offhome.gif) no-repeat }
#contact a:hover span { background: url(/images/offhome.gif) no-repeat }
if I add another set of css
CODE
#nav a:active span { background: url(/images/offhome.gif) no-repeat }
...
...
...
...
would that give me the effect of showing the current page thats being viewed?
edit.....
wait is active the same a showing the current page?
I think that link you sent me is better than what I have now. The code is so much smaller than what I'm using now.
#menu a {
display:block;
width:120px;
margin: 1em 0; padding:7px 0 10px 20px;
font: bold 14px/1 sans-serif;
color:#c60;
background: url("button.gif") 0 0 no-repeat;
text-decoration: none;
}
#menu a:hover {
background-position: -157px 0;
color: #E9BE75;
}
#menu a:active {
background-position: -314px 0;
color:white;
}
Your edit seems more correct to me, but you haven't applied in in your site yet. Have you tried? How does it look? And which one of the exmples I posted did you use?
a:active is the state of a link when you have your mouse down on it. See http://westciv.com/wiki/CSS_Guide:_Link_ps...class_selectors.
For a current page, a class often called "current" or "this" is often used.
a:active is the state of a link when you have your mouse down on it. See http://westciv.com/wiki/CSS_Guide:_Link_ps...class_selectors.
For a current page, a class often called "current" or "this" is often used.
I was using http://wellstyled.com/css-nopreload-rollovers.html.
but I couldn't figure out how to get the effect of the button staying down when you click it to show your current page.
So I started trying something else and it came really really close but I got stumped because I don't know how to change the size of the image/link box that should show the current page and I don't know how to move it behind my rollover images without breaking my whole page.
I'm thinking about just going with
http://wellstyled.com/css-nopreload-rollovers.html.
and not worring about having anything to point out the current page.
I was doing really well with this code at first I could adjust it with some confidence and I kinda knew what was going on but now its turned into a beast that way over my head. I haven't a clue what to do with it from here.
but I couldn't figure out how to get the effect of the button staying down when you click it to show your current page.
So I started trying something else and it came really really close but I got stumped because I don't know how to change the size of the image/link box that should show the current page and I don't know how to move it behind my rollover images without breaking my whole page.
I'm thinking about just going with
http://wellstyled.com/css-nopreload-rollovers.html.
and not worring about having anything to point out the current page.
I was doing really well with this code at first I could adjust it with some confidence and I kinda knew what was going on but now its turned into a beast that way over my head. I haven't a clue what to do with it from here.
Ok, something like this:
HTML:
CSS:
I tweaked the CSS a little bit, also to vertically center the text on the button.
Now, if you like, you could add a third part to your image to reflect a different current state.
I advice you to keep the state parts in your sprite image at equal heights, eg. as high as your links (34px). So the sprite you have now should be 68px high in total. That's easier to position the different states in the CSS.
I hope you understand now.
HTML:
CODE
<ul id="nav">
<li><a href="/" class="current">Home</a></li>
...
</ul>
<li><a href="/" class="current">Home</a></li>
...
</ul>
CSS:
CODE
#nav ul {
width:800px;
w\idth:485px;
height:34px;
margin:0 auto;
}
#nav li {
width:100px;
float:left;
padding:0;
margin:0 5px;
list-style:none;
}
#nav a {
width:100px;
height:34px;
display:block;
line-height: 34px;
text-align: center;
background:url(images/spritew.png) 0 0 no-repeat;
}
#nav a:hover, #nav a.current {
background:url(images/spritew.png) 0px -33px no-repeat; /* should be -34px */
}
width:800px;
w\idth:485px;
height:34px;
margin:0 auto;
}
#nav li {
width:100px;
float:left;
padding:0;
margin:0 5px;
list-style:none;
}
#nav a {
width:100px;
height:34px;
display:block;
line-height: 34px;
text-align: center;
background:url(images/spritew.png) 0 0 no-repeat;
}
#nav a:hover, #nav a.current {
background:url(images/spritew.png) 0px -33px no-repeat; /* should be -34px */
}
I tweaked the CSS a little bit, also to vertically center the text on the button.
Now, if you like, you could add a third part to your image to reflect a different current state.
I advice you to keep the state parts in your sprite image at equal heights, eg. as high as your links (34px). So the sprite you have now should be 68px high in total. That's easier to position the different states in the CSS.
I hope you understand now.
Nice! Thanks man
I as adding the class to each link and an id to each body tag.
Its looking good now I just need to get it centered.
Thanks for the help
I as adding the class to each link and an id to each body tag.
Its looking good now I just need to get it centered.
Thanks for the help
Well, your content block is 800px wide and your nav bar only ends up at 800px if you get rid of the 5px left/right margin you put to #nav li.
If you want to keep some space between the links, use padding: 0 5px; (instead of margin) and widen the #nav ul accordingly by 80px.
To center all that, put a div around the list and give that the id="nav", instead of to the <ul>.
Then you set margin: 0 auto; to #nav ul to center it.
BTW, there are not only men in the forums.
PS: you might need to use a reset CSS such as the one from Eric meyer at http://meyerweb.com/eric/tools/css/reset/index.html, http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ or http://meyerweb.com/eric/thoughts/2008/01/...esetting-again/ .
If you want to keep some space between the links, use padding: 0 5px; (instead of margin) and widen the #nav ul accordingly by 80px.
To center all that, put a div around the list and give that the id="nav", instead of to the <ul>.
Then you set margin: 0 auto; to #nav ul to center it.
BTW, there are not only men in the forums.
PS: you might need to use a reset CSS such as the one from Eric meyer at http://meyerweb.com/eric/tools/css/reset/index.html, http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ or http://meyerweb.com/eric/thoughts/2008/01/...esetting-again/ .
Nice thanks for your help!
It's centered now but I can't figure out why the buttons are stacked. I tried increasing the width on all my nav tags but that didn't help.
Did I miss a step?
Html
<div id="nav">
<ul>
<li><a href="/" class="current">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/blog.html">Blog</a></li>
<li><a href="/class.html">Class</a></li>
<li><a href="/media.html">Media</a></li>
<li><a href="/resources.html">Resources</a></li>
<li><a href="/parents.html">Parents</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
Css
#nav {
width: 100%;
height: 64px;
}
#nav ul {
width:880px;
w\idth:485px;
height:34px;
margin:0 auto;
}
#nav li {
width:100px;
float:left;
padding: 0 5px;
list-style:none;
}
#nav a {
width:100px;
height:34px;
display:block;
line-height: 34px;
background:url(images/spritew.png) 0 0 no-repeat;
}
#nav a:hover, #nav a.current {
background:url(images/spritew.png) 0px -34px no-repeat;
}
It's centered now but I can't figure out why the buttons are stacked. I tried increasing the width on all my nav tags but that didn't help.
Did I miss a step?
Html
CODE
<div id="nav">
<ul>
<li><a href="/" class="current">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/blog.html">Blog</a></li>
<li><a href="/class.html">Class</a></li>
<li><a href="/media.html">Media</a></li>
<li><a href="/resources.html">Resources</a></li>
<li><a href="/parents.html">Parents</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
Css
CODE
#nav {
width: 100%;
height: 64px;
}
#nav ul {
width:880px;
w\idth:485px;
height:34px;
margin:0 auto;
}
#nav li {
width:100px;
float:left;
padding: 0 5px;
list-style:none;
}
#nav a {
width:100px;
height:34px;
display:block;
line-height: 34px;
background:url(images/spritew.png) 0 0 no-repeat;
}
#nav a:hover, #nav a.current {
background:url(images/spritew.png) 0px -34px no-repeat;
}
I think it's the w\idth:485px; on #nav ul that does that. Leave it out and see what happens.
And you need to rule out the default settings of at least <ul>, because even when the links are in one line, they aren't really centered. In my Safari/Mac, they are 40px off to the right, through a default padding (-webkit-padding-start: 40px;) defined by the browser itsef.
That's why I suggested you use Eric Meyer's reset CSS. It cancels default settings (such as margin and padding) of many elements, which you then reassign to your likings and needs in your CSS.
And you need to rule out the default settings of at least <ul>, because even when the links are in one line, they aren't really centered. In my Safari/Mac, they are 40px off to the right, through a default padding (-webkit-padding-start: 40px;) defined by the browser itsef.
That's why I suggested you use Eric Meyer's reset CSS. It cancels default settings (such as margin and padding) of many elements, which you then reassign to your likings and needs in your CSS.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.