在列表菜单中居中背景图像 [英] Centering background-image in list menu
问题描述
锚定标签中心与我的链接文本为垂直列表
菜单。如果我使用背景的水平/垂直属性或者
" background-image"，定位仅适用于指定
像素。
如果我指定垂直位置以像素为单位，图像在底部被截止
。我不知道该怎么做，并且会感激任何人的帮助。特别是与id =menu相关的代码。和id =" about"
有3个单独的图像（对于每个点击/悬停状态）并且是20 X
20像素并且是.png格式。提前致谢：
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：朗= QUOT;恩" lang =" en">
< head>
< title> HTML模板< / title>
< link href =" style.css"的rel ="样式表"类型= QUOT;文本/ 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 id =" leftNav">
< ul class =" navLink">
< li>< a id =" menu" HREF =" HTTP：//www.google.com" target =" _blank">< img
src =" blank.png" />菜单< / a>< / li>
< li>< a id =" about" HREF =" HTTP：//www.msn.com" target =" _blank">< img
src =" blank.png" />关于我们< / 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 repreptderit velitate 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 ="＃"> ;主页< / a>< / li>< li>< a href ="＃">菜单< / a>< / li>
< li>< ; a href ="＃">关于我们< / a>< / li>< li>< a href ="＃">联系我们< /
a>< / li>
< li>< a href ="＃"> < / ul>
< / div>
< span class =" copyright">版权所有？ 2008 Java Junction Cafe< / span>
< /正文>
< / html>
CSS：
正文{
背景颜色：＃FFFEF5;
}
#wrapper {
float：left;
保证金：0px 125px;
身高：200px;
宽度：731px;
}
.orange {
float：left;
background-color：＃CF9623;
border-bottom：3px坚固＃483303;
身高：200px;
宽度：25px;
}
。 flash {
float：left;
border：3px solid＃483303; border-top：none;
身高：200px;
宽度：500px;
}
.topLinks {
float：left;
background-color：＃647813;
border-bottom：3px solid＃483303;
身高：200px;
宽度：200px;
}
.topLinks img {
宽度：150px;
身高：150px;
保证金：20px 0 0 20px;
}
#leftNav {
浮动：左;
背景颜色：＃514484;
border-right：3px坚固＃483303;
身高：400px;
宽度：250px;
颜色：#FFF;
}
ul.navLink {
list-style-type：none;
}
ul.navLink li a {
display：block;
text-decoration：none;
color：#FFFFFF;
}
.txtBody {
float：left;
background-color：＃EFDE3F;
身高：400px;
宽度：478px;
}
.footer {
float：left;
background-color：＃483303;
身高：20px;
宽度：100％;
}
.footer ul {
保证金：0px;
填充：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;
颜色：#FFFFFF;
背景颜色：＃483303;
字体大小：.75em;
}
.footer ul li a：悬停{
背景颜色：＃CF9623;
颜色： ＃483303;
}
/ *以下这部分是给我的东西* /
img {margin：0;身高：20px;宽度：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：visit img {background-image：url（3.png）;}
#about < b> ：访问过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;
颜色：＃514484;
}
stevedude写道：
CSS新手了。我有一个问题，试图获取咖啡杯图像
锚定标签中心与我的链接文本为垂直列表
菜单。如果我使用背景的水平/垂直属性或者
" background-image"，定位仅适用于指定
像素。
如果我指定垂直位置以像素为单位，图像在底部被截止
。我不知道该怎么做，并且会感激任何人的帮助。特别是与id =menu相关的代码。和id =" about"
有3个单独的图像（对于每个点击/悬停状态）并且是20 X
20像素并且是.png格式。在此先感谢：
HTML：
< snip code>
好的，然后不要通过发布代码，发布URL来增加你的无知。我们
没有您的图片和所有。
-
保重，
Jonathan
-------------------
小作品工作室
http://www.LittleWorksStudio.com
5月17日下午1:03，Jonathan N. Little < lws4 ... @ central.netwrote：
stevedude写道：
CSS newbie again。我有一个问题，试图获取咖啡杯图像
锚定标签中心与我的链接文本为垂直列表
菜单。如果我使用背景的水平/垂直属性或者
" background-image"，定位仅适用于指定
像素。
如果我指定垂直位置（以像素为单位），图像会在底部被截止
。我不知道该怎么做，并且会感激任何人的帮助。特别是与id =menu相关的代码。和id =" about"
有3个单独的图像（对于每个点击/悬停状态）并且是20 X
20像素并且是.png格式。提前致谢：
HTML：
< snip code>
好的，然后不要通过发布代码，发布URL来加剧你的无知。我们
没有您的图片和所有。
-
保重，
Jonathan
-------------------
LITTLE WORKS STUDIOhttp：//www.LittleWorksStudio。 com
像你这样的白痴漫游互联网太糟糕了。我是新手，请求
寻求帮助。我没有域名可以发布 - 或者你没想到
那个smartass。现在，如果有人想发布有用的信息，我很乐意学习...
stevedude写道：
5月17日下午1:03，Jonathan N. Little < lws4 ... @ central.netwrote：
>好吧那不要让你的无知更加复杂化通过发布代码，发布URL。我们没有您的图像和所有。
< snipped my signature>
这是太糟糕的白痴喜欢你在互联网上漫游。我是新手，请求
寻求帮助。我没有域名可以发布 - 或者你没想到
那个smartass。现在，如果有人想发布有用的信息，我是
准备学习...
无价格！
好的，这是我能想到的最有用的链接：
http://www.html-faq.com/all/
alt.html常见问题解答：常见问题
当你准备好玩的时候回来...
-
保重，
Jonathan
-------------------
小作品工作室
http://www.LittleWorksStudio.com
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;
}
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
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.comIt''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...
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
这篇关于在列表菜单中居中背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
