разрыв позиционирования CSS - PullRequest
Новая
       0

разрыв позиционирования CSS

0 голосов
/ 08 мая 2011

Возиться с CSS, пытаясь научиться чему-то, потому что раньше я ничего не делал, и я столкнулся с проблемой, когда у меня есть небольшое пространство между тегом изображения и тегом ul, и я не могу понятькак избавиться от него.

enter image description here

Я говорю о расстоянии между изображением и черной полосой, как показано на рисунке выше.

Исходный код для этой страницы выглядит следующим образом (в 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>

Мой CSS выглядит следующим образом 

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;
}

Я перепутался с различными отступами, полями и т. Д., Нокажется, не могу избавиться от этого, также в панели инструментов веб-разработчика IE на панели макета он показывает, что есть смещение (и ничего больше), но когда я его изменяю, это не влияет.

IЯ думаю, это маленькая вещь, по которой я скучаю, но был бы признателен за помощь.

Приветствия

Ответы [ 3 ]

2 голосов
/ 08 мая 2011 
#header img {
    display:block;
}

просто так

0 голосов
/ 08 мая 2011 
#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
}
0 голосов
/ 08 мая 2011

Поместите свой тег <img> в div следующим образом:
<div class="myimg"><img src="img_url" /></div>

CSS

.myimg { width: IMG_WIDTH px; height: IMG_HEIGHT px; overflow: none; }

Это должно избавить вас от белогопространство

...