пробел в позиционировании css

#css #positioning

#css #позиционирование

Вопрос:

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

введите описание изображения здесь

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

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

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

Приветствия

1. Я вижу три черные полосы и никакого изображения, не могли бы вы уточнить, что вы хотите, чтобы произошло? РЕДАКТИРОВАТЬ: Неважно, я думаю, что понимаю.

2. Извините, что два в логотипе — это просто то, что я закрываю информацию, специфичную для компании, единственный из css — это тот, у которого есть текст «home»

Ответ №1:

 #header img {
    display:block;
}

все просто

Ответ №2:

Расположите свой <img> тег внутри div вот так:
<div class="myimg"><img src="img_url" /></div>

CSS

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

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

Ответ №3:

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