Очередной вопрос начинающего

Bizon4ik · November 12, 2012

Доброе время суток.

Я тут наночь глядя написал вот такую радость

Подскажите плз почему между меню и рисунком получился пробел и почему меню не двигается вправо под дейсвием комадны li:first-child a

Заранее спасибо.

Вот код

HTML


<body>
<div id="main">
 <a href="#"><img src="img/logo.png" alt="альтернативный текст"/> </a>


<div class="menu">
    <ul>
        <li ><a href="#">Home</a></li>
        <li ><a href="#">Portfolio</a></li>
        <li ><a href="#">Become a member</a></li>
        <li ><a href="#">Partners</a></li>
        <li ><a href="#">About us</a></li>
        <li ><a href="#">Contacs</a></li>
    </ul>
</div>
</div>

</body>

CSS


body {
    margin:0;
    padding:0;
    background:white; 
    }
#main {
       margin:0 auto;
       width: 960px;
       border: 1px black solid;
}
#main img {
    border: 1px black solid;
     }

#main a {
    padding-left: 20px;
      }

.menu {
    background:#AFAFAF;
    overflow: hidden;   
} 

.menu ul {
    list-style:none;
    margin: 0;
    padding:0;

    }
.menu li {
    float:left;    
}
.menu a{
    text-decoration: none;
    font-size: 18px;
    font-family: arial;
    color:#fff;
    display:block;
    line-height: 42px;
    padding:0 41px;    
}

.menu li:first-child a {
    padding: 0 41px 0 50px;
}

Edited November 12, 2012 by Bizon4ik

FEL · November 13, 2012


.menu ul:first-child {
    padding: 0 41px 0 50px;
}

так надо

Edited November 13, 2012 by FEL

FEL · November 13, 2012

ul и так блочный элемент, оборачивать его в div не нужно.

А пробел скорее всего появился от того что, вы напутали где-то с полями/отступами.

Bizon4ik · November 13, 2012

C first-child я разобрался, убрав строку


#main a {
    padding-left: 20px;
      }

и все заработало

Осталась проблема с пробелом между картинкой и миню. Причем на FireFox ее нет

а на IE 8 есть

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

а вот здесь http://jsfiddle.net/Bizon4ik/sDXeE/ пробела опять таки нет.

Кто знает как убрать этот пробел во всех браузерах?

Edited November 13, 2012 by Bizon4ik

Molotok2391 · November 13, 2012

Так как картинка выше меню и чтобы не было отступа между ними, нужно прописать в css: что отступ снизу (margin-bottom:0;) картинки, и отступ от самого меню сверху тоже чтобы был ноль: (margin-top:0;) Прописываете это: здесь:

#main img {

border: 1px black solid;

padding-left:20px;

margin-bottom:0;

}

и Здесь:

.menu {

background:#AFAFAF;

overflow: hidden;

margin-top:0;

}

И думаю - Заработает)

Edited November 13, 2012 by Molotok2391

Bizon4ik · November 13, 2012

Так как картинка выше меню и чтобы не было отступа между ними, нужно прописать в css: что отступ снизу (margin-botton:0;) картинки, и отступ от самого меню сверху тоже чтобы был ноль: (margin-top:0;) Прописываете это: здесь:
#main img {
border: 1px black solid;
padding-left:20px;
margin-bottom:0;
}
и Здесь:
.menu {
background:#AFAFAF;
overflow: hidden;
margin-top:0;
}
И думаю - Заработает)

Не работает

Molotok2391 · November 13, 2012

Попробуйте задать самой картинке Идентификатор: ID

В стилях пропишите:

#imageslogo {

margin:0;

}

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

Bizon4ik · November 13, 2012

Попробуйте задать самой картинке Идентификатор: ID
<a href="#"><img src="img/logo.png" alt="альтернативный текст"/ id="imageslogo"> </a>
В стилях пропишите:
#imageslogo {
margin:0;
}
Или скиньте мне в личку ссылку на сайт, я посмотрю обязательно.

Зачем создвать картинке индикатор если есть


#main img

Спасибо за твои старанния, но я думаю мне нужен совет от кого то более опытного

Все я решил проблепу путем добавления vertical-align


#main img {
    border: 1px black solid;
	vertical-align:top;

Всем спасибо. Тему можна закрыть.

Edited November 13, 2012 by Bizon4ik

Sign In

Очередной вопрос начинающего

Question

Bizon4ik

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

FEL

Link to comment

Share on other sites

FEL

Link to comment

Share on other sites

Bizon4ik

Link to comment

Share on other sites

Molotok2391

Link to comment

Share on other sites

Bizon4ik

Link to comment

Share on other sites

Molotok2391

Link to comment

Share on other sites

Bizon4ik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information