I am wondering if anyone can help me with the css / html problem.
I have a complex background image. The div menu is in the right place to overlay the background where it is in position. The entire LI has an overturning guidance image with a block type mapping. As a result, when the mouse is over the href list, the entire block polling process works.
The problem occurs when I try to add padding to create a buffer between the text of the list item and its border. Things start to laugh ... I will add a screenshot .. To move it requires laying from the border.
The second problem is that I cannot bind text to the middle without applying line height. The solution works fine until the elements fall. I need to be able to wrap the text of a menu item.
The example below shows the state with current CSS / HTML. The menu bar and rollover are pending. Change, I can’t post the image for the restrictions on placing as a new person here. However, an example can be found in 213.40.100.100/example1.jpg
The following example shows the state when an add-on or margin is added. LI seems to be completely shifted without moving the interal text.
213.40.100.100/example2.jpg
<div id="wrapper">
<div
id="header">Header</div> <div
id="menu">
<ul>
<li><a>Contact Us</a></li>
<li><a>Recommends</a></li>
<li><a>Deals</a></li>
<li><a>Home</a></li>
</ul> </div> <div id="content">Content</div>
<div id="footer">Footer</div>
</div>
@charset "utf-8"; /* CSS Document */
* { margin: 0; padding: 0; }
body {
padding-top: 10px;
background: url(background.jpg) no-repeat center top; height:100%;
}
div#wrapper {
margin: auto;
height: 100%;
width: 978px;
min-width: 978px;
}
div#header {
height: 196px;
}
div#menu {
height: 69px;
position:
relative;
}
div#menu ul {
height: 69px;
list-style-type: none;
}
div#menu ul li {
display: block;
height: 69px;
width: 140px;
float: right;
padding: 5px;
}
div#menu ul li a:hover {
display:block;
background:url(menu_red_bg.jpg) repeat-x; height: 69px; color:#FF0;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
div#menu ul li a {
text-decoration: none;
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
div#content { margin-top: 80px; }
source
share