By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,536 Members | 1,504 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,536 IT Pros & Developers. It's quick & easy.

Centering background-image in list menu

P: n/a
CSS newbie again. I have a problem trying to get coffee mug images
within anchor tags to center with my link text for a vertical list
menu. If I use the horizontal/vertical properties of "background" or
"background-image", the positioning only works with specifying
pixels.

If I specify the vertical position in pixels, the image gets cut-off
at the bottom. I don't know what to do and would appreciate anyone's
help. Specifically the code pertaining to id="menu" and id="about"
There are 3 separate images (for each click/hover state) and are 20 X
20 pixels and are in .png format. Thanks in advance:

The HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>HTML Template</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="cache-control" content="max-age=0, must-
revalidate" />
<script language="JavaScript" src="flash_check.js"></script>

</head>

<body>
<div id="wrapper">
<div class="orange"></div>
<div class="flash"><OBJECT classid="clsid:D27CDB6E-
AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,40,0"
WIDTH="500" HEIGHT="200" id="myMovie"><PARAM NAME=movie
VALUE="Movie2.swf"><PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor
VALUE=#FFFFFF><EMBED src="Movie2.swf" quality=high bgcolor=#FFFFFF
WIDTH="500" HEIGHT="200"
NAME="myMovie" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></
OBJECT>
</div>

<div class="topLinks"><img src="topLinks.jpg" / ></div>
<div id="leftNav">
<ul class="navLink">
<li><a id="menu" href="http://www.google.com" target="_blank"><img
src="blank.png" />Menu</a></li>
<li><a id="about" href="http://www.msn.com" target="_blank"><img
src="blank.png" />About Us</a></li>
</ul>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo.
</div>

<div class="txtBody">"Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>

<div class="footer">
<ul>
<li><a href="#">Home</a></li><li><a href="#">Menu</a></li>
<li><a href="#">About Us</a></li><li><a href="#">Contact Us</
a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
<span class="copyright">Copyright© 2008 Java Junction Cafe</span>

</div<!--end of wrapper -->

</body>

</html>

The CSS:

body {
background-color: #FFFEF5;
}

#wrapper{
float: left;
margin: 0px 125px;
height: 200px;
width: 731px;
}

.orange{
float: left;
background-color: #CF9623;
border-bottom: 3px solid #483303;
height: 200px;
width: 25px;
}

.flash{
float: left;
border: 3px solid #483303; border-top: none;
height: 200px;
width: 500px;
}

.topLinks{
float: left;
background-color: #647813;
border-bottom: 3px solid #483303;
height: 200px;
width: 200px;
}

.topLinks img{
width: 150px;
height: 150px;
margin: 20px 0 0 20px;
}

#leftNav{
float: left;
background-color: #514484;
border-right: 3px solid #483303;
height: 400px;
width: 250px;
color: #FFF;
}

ul.navLink {
list-style-type: none;
}

ul.navLink li a {
display: block;
text-decoration: none;
color: #FFFFFF;
}

.txtBody{
float: left;
background-color: #EFDE3F;
height: 400px;
width: 478px;
}

.footer{
float: left;
background-color: #483303;
height: 20px;
width: 100%;
}

.footer ul {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}

.footer ul li {
display: inline;
border:none;
}

.footer ul li a {
text-decoration: none;
padding: .05em 4em;
color: #FFFFFF;
background-color: #483303;
font-size: .75em;
}

.footer ul li a:hover {
background-color: #CF9623;
color: #483303;
}

/* This section below is what is giving me fits */

img {margin: 0; height: 20px; width: 20px; border-width: 0;
background: url(2a.png) no-repeat 0; padding-right: 5px;}

#menu img {background-image: url(2a.png);}
#about img {background-image: url(2a.png);}

#menu:visited img {background-image: url(3.png);}
#about:visited img {background-image: url(3.png);}

#menu:hover img {background-image: url(1.png);}
#about:hover img {background-image: url(1.png);}

#menu:active img {background-image: url(blank.png);}
#about:active img {background-image: url(blank.png);}

.copyright{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .65em;
color: #514484;
}
Jun 27 '08 #1
Share this Question
Share on Google+
16 Replies


P: n/a
stevedude wrote:
CSS newbie again. I have a problem trying to get coffee mug images
within anchor tags to center with my link text for a vertical list
menu. If I use the horizontal/vertical properties of "background" or
"background-image", the positioning only works with specifying
pixels.

If I specify the vertical position in pixels, the image gets cut-off
at the bottom. I don't know what to do and would appreciate anyone's
help. Specifically the code pertaining to id="menu" and id="about"
There are 3 separate images (for each click/hover state) and are 20 X
20 pixels and are in .png format. Thanks in advance:

The HTML:
<snip code>

Okay then don't compound your ignorance by posting code, post a URL. We
do not have your images and all.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jun 27 '08 #2

P: n/a
On May 17, 1:03 pm, "Jonathan N. Little" <lws4...@central.netwrote:
stevedude wrote:
CSS newbie again. I have a problem trying to get coffee mug images
within anchor tags to center with my link text for a vertical list
menu. If I use the horizontal/vertical properties of "background" or
"background-image", the positioning only works with specifying
pixels.
If I specify the vertical position in pixels, the image gets cut-off
at the bottom. I don't know what to do and would appreciate anyone's
help. Specifically the code pertaining to id="menu" and id="about"
There are 3 separate images (for each click/hover state) and are 20 X
20 pixels and are in .png format. Thanks in advance:
The HTML:

<snip code>

Okay then don't compound your ignorance by posting code, post a URL. We
do not have your images and all.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com
It's too bad idiots like you roam the Internet. I'm a newbie asking
for help. I don't have a domain to post to - or didn't you think of
that smartass. Now if anyone would like to post helpful info, I'm
ready to learn...
Jun 27 '08 #3

P: n/a
stevedude wrote:
On May 17, 1:03 pm, "Jonathan N. Little" <lws4...@central.netwrote:
>Okay then don't compound your ignorance by posting code, post a URL. We
do not have your images and all.
<snipped my signature>
It's too bad idiots like you roam the Internet. I'm a newbie asking
for help. I don't have a domain to post to - or didn't you think of
that smartass. Now if anyone would like to post helpful info, I'm
ready to learn...
Priceless!

Okay, here is the most useful link I can think of:

http://www.html-faq.com/all/
alt.html FAQ: Frequently Asked Questions

Come back when you are ready to play...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jun 27 '08 #4

P: n/a
On 17 mai, 19:03, stevedude <stevedud...@gmail.comwrote:
I'm a newbie asking
for help. I don't have a domain to post to - or didn't you think of
that smartass. Now if anyone would like to post helpful info, I'm
ready to learn...
Steve,

you are making a grave error. Johnathan is perfectly right. Post an
URL. Do not post code. If you want help, assistance, then try to be as
helpful as possible. That's furthermore important for you to do if you
are a beginner. We're only asking you to post an URL and not the code.

While at it, you should also make sure your markup code is valid and
that your CSS code is also valid.

Gérard
Jun 27 '08 #5

P: n/a
On May 17, 8:19 pm, "Jonathan N. Little" <lws4...@central.netwrote:
stevedude wrote:
On May 17, 1:03 pm, "Jonathan N. Little" <lws4...@central.netwrote:
Okay then don't compound your ignorance by posting code, post a URL. We
do not have your images and all.

<snipped my signature>
It's too bad idiots like you roam the Internet. I'm a newbie asking
for help. I don't have a domain to post to - or didn't you think of
that smartass. Now if anyone would like to post helpful info, I'm
ready to learn...

Priceless!

Okay, here is the most useful link I can think of:

http://www.html-faq.com/all/
alt.html FAQ: Frequently Asked Questions

Come back when you are ready to play...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com
Thank you for the link. Although it doesn't specifically answer my
original dilemma, I appreciate your efforts. To quote the info from
the link you sent me: "The internet is all about communication.
Communication is the eliciting of a response. Effective communication
is the eliciting of a desired response."

To all - I posted on this forum looking for specific CSS information.
I don't have a domain to post to, I specifically mentioned a 20 X 20
image that needed to be centered. Any image of that size will do with
the code I posted. Copy/Paste the code in an editor, resize any image
to 20 by 20 pixels and you can easily recreate my situation.
I am kindly asking for CSS knowledge assistance and nothing else. If
you don't have the time or knowledge, I repsect that, but post
something that relates to my oringinal question. I have no desire (nor
time) for a Pi**ing contest.

Thanks again in advance.
Jun 27 '08 #6

P: n/a
stevedude wrote:
On May 17, 8:19 pm, "Jonathan N. Little" <lws4...@central.netwrote:
<snip>
>http://www.html-faq.com/all/
alt.html FAQ: Frequently Asked Questions

Come back when you are ready to play...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com
Hmmm...
Thank you for the link. Although it doesn't specifically answer my
original dilemma,
No, but obviously you did not absorb the info there, would have gotten
you closer to getting an answer.
I appreciate your efforts. To quote the info from
the link you sent me: "The internet is all about communication.
Communication is the eliciting of a response. Effective communication
is the eliciting of a desired response."
Okay start the communication with a URL

To all - I posted on this forum looking for specific CSS information.
Not a forum, a newsgroup. Reread info at link.
I don't have a domain to post to,
<snip>

So.

http://www.google.com/search?hl=en&q...=Google+Search
free web hosting - Google Search

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jun 27 '08 #7

P: n/a
In article
<17**********************************@d45g2000hsc. googlegroups.com>,
stevedude <st*********@gmail.comwrote:
looking for specific CSS information.
I don't have a domain to post to, I specifically mentioned a 20 X 20
image that needed to be centered. ...
I am kindly asking for CSS knowledge assistance and nothing else.
There are at least couple of ways to centre an image on a page. If the
wrapper it is in (eg. div) is the width of the page, you can

div {text-align: center;}

Images are, by default, inline and this is the reason this works.

If the element that wraps the img is dimensioned to be the width of the
image or thereabouts, you can centre the element itself by

div {width: 20px; margin: auto;}

or, in some circumstances depending on what is wanted,

div {width: 20px; height: 20px; margin: auto;}

or, in other circumstances,

div {width: 20px; margin: auto;}
img {display:block;}

--
dorayme
Jun 27 '08 #8

P: n/a
In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:
In article
<17**********************************@d45g2000hsc. googlegroups.com>,
stevedude <st*********@gmail.comwrote:
looking for specific CSS information.
I don't have a domain to post to, I specifically mentioned a 20 X 20
image that needed to be centered. ...
I am kindly asking for CSS knowledge assistance and nothing else.

There are at least couple of ways to centre an image on a page. If the
wrapper it is in (eg. div) is the width of the page, you can

div {text-align: center;}

Images are, by default, inline and this is the reason this works.

If the element that wraps the img is dimensioned to be the width of the
image or thereabouts, you can centre the element itself by

div {width: 20px; margin: auto;}

or, in some circumstances depending on what is wanted,

div {width: 20px; height: 20px; margin: auto;}

or, in other circumstances,

div {width: 20px; margin: auto;}
img {display:block;}
And, noticing the title of the thread now, you can centre the element
that has the background image by use of

div {width: 20px; height: 20px; margin: auto; background: #fff
url("pic.png");} ...

You can also more or less centre a background image if you know the
width of the element it is going into.

There is some information and ideas for you to be going on with.

--
dorayme
Jun 27 '08 #9

P: n/a
On May 17, 10:45 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<doraymeRidThis-9C548E.12270418052...@news-vip.optusnet.com.au>,

dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<17fcba0d-74d4-4eaa-b383-e2491f32b...@d45g2000hsc.googlegroups.com>,
stevedude <stevedud...@gmail.comwrote:
looking for specific CSS information.
I don't have a domain to post to, I specifically mentioned a 20 X 20
image that needed to be centered. ...
I am kindly asking for CSS knowledge assistance and nothing else.
There are at least couple of ways to centre an image on a page. If the
wrapper it is in (eg. div) is the width of the page, you can
div {text-align: center;}
Images are, by default, inline and this is the reason this works.
If the element that wraps the img is dimensioned to be the width of the
image or thereabouts, you can centre the element itself by
div {width: 20px; margin: auto;}
or, in some circumstances depending on what is wanted,
div {width: 20px; height: 20px; margin: auto;}
or, in other circumstances,
div {width: 20px; margin: auto;}
img {display:block;}

And, noticing the title of the thread now, you can centre the element
that has the background image by use of

div {width: 20px; height: 20px; margin: auto; background: #fff
url("pic.png");} ...

You can also more or less centre a background image if you know the
width of the element it is going into.

There is some information and ideas for you to be going on with.

--
dorayme
Thank you! Finally an answer that is helpful. Much appreciated and
I'll try changing the parent properties and your other suggestions.
Peace out...
Jun 27 '08 #10

P: n/a
In article
<a4**********************************@k37g2000hsf. googlegroups.com>,
stevedude <st*********@gmail.comwrote:
On May 17, 10:45 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<doraymeRidThis-9C548E.12270418052...@news-vip.optusnet.com.au>,
>
Thank you! Finally an answer that is helpful.
That's because I did not see an indigestible lump of code in that
particular post and you asked a sensible question in plain English. <g>

--
dorayme
Jun 27 '08 #11

P: n/a
On 2008-05-18, dorayme <do************@optusnet.com.auwrote:
In article
<17**********************************@d45g2000hsc .googlegroups.com>,
stevedude <st*********@gmail.comwrote:
>looking for specific CSS information.
I don't have a domain to post to, I specifically mentioned a 20 X 20
image that needed to be centered. ...
I am kindly asking for CSS knowledge assistance and nothing else.
[...]
div {width: 20px; margin: auto;}
img {display:block;}
Or just

img { display: block; width: 20px; margin: auto }

which might have been what you meant.

You can also centre background images with background-position: center.
Jun 27 '08 #12

P: n/a
On May 18, 4:36 am, Ben C <spams...@spam.eggswrote:
On 2008-05-18, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<17fcba0d-74d4-4eaa-b383-e2491f32b...@d45g2000hsc.googlegroups.com>,
stevedude <stevedud...@gmail.comwrote:
looking for specific CSS information.
I don't have a domain to post to, I specifically mentioned a 20 X 20
image that needed to be centered. ...
I am kindly asking for CSS knowledge assistance and nothing else.
[...]
div {width: 20px; margin: auto;}
img {display:block;}

Or just

img { display: block; width: 20px; margin: auto }

which might have been what you meant.

You can also centre background images with background-position: center.
Thanks Ben. I tried your suggestion as well as the previous thread,
and no luck getting what I want. I possibly missed something, however,
I now have the webpage posted on a domain. The link is:
http://javajunction.awardspace.com/ As stated
originally, I want my coffee cup (background) images to be in line
with the "Menu", "About Us" anchor tag text. If I try to change the
vertical properties of the background image, IE: img { background-
image: url(2a.png) no-repeat 0 5px; } , I can get the image centered
with the text, but now the image gets cut-off at the bottom. I need to
find a way to get the image to center with the text.
Jun 27 '08 #13

P: n/a
In article
<7c**********************************@8g2000hse.go oglegroups.com>,
stevedude <st*********@gmail.comwrote:
http://javajunction.awardspace.com/ As stated
originally, I want my coffee cup (background) images to be in line
with the "Menu", "About Us" anchor tag text. If I try to change the
vertical properties of the background image, IE: img { background-
image: url(2a.png) no-repeat 0 5px; } , I can get the image centered
with the text, but now the image gets cut-off at the bottom. I need to
find a way to get the image to center with the text.
?????

--
dorayme
Jun 27 '08 #14

P: n/a
stevedude wrote:
On May 18, 4:36 am, Ben C <spams...@spam.eggswrote:
>On 2008-05-18, dorayme <doraymeRidT...@optusnet.com.auwrote:
>>In article
<17fcba0d-74d4-4eaa-b383-e2491f32b...@d45g2000hsc.googlegroups.com>,
stevedude <stevedud...@gmail.comwrote:
looking for specific CSS information.
I don't have a domain to post to, I specifically mentioned a 20 X 20
image that needed to be centered. ...
I am kindly asking for CSS knowledge assistance and nothing else.
[...]
>>div {width: 20px; margin: auto;}
img {display:block;}
Or just

img { display: block; width: 20px; margin: auto }

which might have been what you meant.

You can also centre background images with background-position: center.

Thanks Ben. I tried your suggestion as well as the previous thread,
and no luck getting what I want. I possibly missed something, however,
I now have the webpage posted on a domain. The link is:
http://javajunction.awardspace.com/ As stated
originally, I want my coffee cup (background) images to be in line
with the "Menu", "About Us" anchor tag text. If I try to change the
vertical properties of the background image, IE: img { background-
image: url(2a.png) no-repeat 0 5px; } , I can get the image centered
with the text, but now the image gets cut-off at the bottom. I need to
find a way to get the image to center with the text.
No need for JavaScript or the blank image. Just pad your link to
accommodate the coffee cup background and position the image.

<style type="text/css">
ul.navLink {
list-style: none; margin: 0; padding: 10px;
width: 10em; color: white; background-color: #514484;
}
/* common link styling with padding */
ul.navLink a {
display: block; text-decoration: none;
padding: 5px 0 5px 25px; color: white;
}
/* set image for link */
ul.navLink a:link {
background: transparent url(2a.png) no-repeat left center;
}
/* and for visited link */
ul.navLink a:visited {
background: transparent url(3.png) no-repeat left center;
}

/* and for hover, focus & activelink */
ul.navLink a:hover,
ul.navLink a:focus,
ul.navLink a:active {
background: transparent url(1.png) no-repeat left center;
}
</style>
<!-- this is all you need for your menu... -->
<ul class="navLink">
<li><a id="menu" href="http://www.google.com">Menu</a></li>
<li><a id="about" href="http://www.msn.com">About Us</a></li>
</ul>
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jun 27 '08 #15

P: n/a
On May 18, 10:21 pm, "Jonathan N. Little" <lws4...@central.netwrote:
stevedude wrote:
On May 18, 4:36 am, Ben C <spams...@spam.eggswrote:
On 2008-05-18, dorayme <doraymeRidT...@optusnet.com.auwrote:
>In article
<17fcba0d-74d4-4eaa-b383-e2491f32b...@d45g2000hsc.googlegroups.com>,
stevedude <stevedud...@gmail.comwrote:
looking for specific CSS information.
I don't have a domain to post to, I specifically mentioned a 20 X 20
image that needed to be centered. ...
I am kindly asking for CSS knowledge assistance and nothing else.
[...]
div {width: 20px; margin: auto;}
img {display:block;}
Or just
img { display: block; width: 20px; margin: auto }
which might have been what you meant.
You can also centre background images with background-position: center.
Thanks Ben. I tried your suggestion as well as the previous thread,
and no luck getting what I want. I possibly missed something, however,
I now have the webpage posted on a domain. The link is:
http://javajunction.awardspace.com/ As stated
originally, I want my coffee cup (background) images to be in line
with the "Menu", "About Us" anchor tag text. If I try to change the
vertical properties of the background image, IE: img { background-
image: url(2a.png) no-repeat 0 5px; } , I can get the image centered
with the text, but now the image gets cut-off at the bottom. I need to
find a way to get the image to center with the text.

No need for JavaScript or the blank image. Just pad your link to
accommodate the coffee cup background and position the image.

<style type="text/css">
ul.navLink {
list-style: none; margin: 0; padding: 10px;
width: 10em; color: white; background-color: #514484;}

/* common link styling with padding */
ul.navLink a {
display: block; text-decoration: none;
padding: 5px 0 5px 25px; color: white;}

/* set image for link */
ul.navLink a:link {
background: transparent url(2a.png) no-repeat left center;}

/* and for visited link */
ul.navLink a:visited {
background: transparent url(3.png) no-repeat left center;

}

/* and for hover, focus & activelink */
ul.navLink a:hover,
ul.navLink a:focus,
ul.navLink a:active {
background: transparent url(1.png) no-repeat left center;}

</style>

<!-- this is all you need for your menu... -->
<ul class="navLink">
<li><a id="menu" href="http://www.google.com">Menu</a></li>
<li><a id="about" href="http://www.msn.com">About Us</a></li>
</ul>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com
Worked perfectly - I'm so relieved I could kiss you (but I won't) -
LOL
Everyone's input is greatly appreciated. I'm sure I'll be back as this
project develops further and I run into bumps in the road to my
learning.

Consider this thread closed.
Jun 27 '08 #16

P: n/a
stevedude wrote:
Worked perfectly - I'm so relieved I could kiss you (but I won't) -
LOL
Everyone's input is greatly appreciated. I'm sure I'll be back as this
project develops further and I run into bumps in the road to my
learning.

Consider this thread closed.
A lot easier to see what you were attempting *after* you posted a URL.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jun 27 '08 #17

This discussion thread is closed

Replies have been disabled for this discussion.