css positioning gap
Messing around with some CSS trying to learn some stuff as I haven't done much before and I've come across an issue where I have a small amount of space开发者_JAVA百科 between an image tag and a ul tag and can't figure out how to get rid of it.
I'm talking about the space between the Image and the black bar as seen in the picture above.
Source code for that page is as follows (in asp.net mvc3)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="header">
<img src="@Url.Content("~/Content/b.png")" alt="Infomaster" />
<ul id="menu" >
<li>Home</li></ul>
</div>
<div id="content">
@RenderBody()
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
My css looks as follows
html, body
{
font-size: 1.0em;
font-family: Arial, sans-serif, Verdana, Garamond, "Segoe UI";
color: #232323;
background-color: #414042;
height: 100%; /* needed for container min-height */
}
div#container
{
position: relative; /* needed for footer positioning*/
margin: 0 auto; /* center, not in IE5 */
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%; /* real browsers */
background-color: White;
border-radius: 15px;
min-width: 920px;
width: 52%;
}
div#header
{
padding: 1% 1% 0px 1%;
margin: 0px;
}
div#footer
{
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
}
#menu
{
background-color: Black;
color: White;
list-style: none;
margin: 0px;
padding: 0px;
}
I've messed around with various paddings, margins etc but can't seem to get rid of it, also in IE web developer tool bar in the layout pane it shows me there is an offset (and nothing else) but when I change it it has no affect.
I think its a small thing I'm missing but would appreciate some help.
Cheers
#header img {
display:block;
}
simple as that
Position your <img> tag within a div like so:
<div class="myimg"><img src="img_url" /></div>
CSS
.myimg { width: IMG_WIDTH px; height: IMG_HEIGHT px; overflow: none; }
That should get rid of your white space
#menu
{
background-color: Black;
color: White;
list-style: none;
margin: 0px;
padding: 0px;
display:block;
margin-top:-??px; //Here ?? is the unwanted space between the image and the bar
}
加载中,请稍侯......
精彩评论