0 / 0 / 0
Регистрация: 14.01.2015
Сообщений: 4
1

Исчезает фон меню, когда к селектору идентификаторов menu ul li применяю значение float: left;

14.01.2015, 01:17. Показов 1222. Ответов 5
Метки нет (Все метки)

Добрый день, уважаемые участники форума. Я в вёрстке пока ещё новичок, и очень прошу ваш совет.
А дело вот в чём. Я нашла хороший урок по вёрстке в HTML и CSS, повторила все шаги, но возникли трудности на этапе с меню. Не буду ходить вокруг да около, сразу скину код index.html и код style.css

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Моя первая вёрстка</title>
        <link href="css/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
       <div id="wrapper">
           <div id="header">
               <div id="logo">
                   <a href="index.html"><img src="https://www.cyberforum.ru/images/logo.png" alt="Логотип"/></a>
               </div>
               <div id="menu">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li>Call us: +33 123 45 6789</li>
                    </ul>
               </div>
           </div>
           <div id="content"></div>
           <div id="footer"></div>
       </div>
    </body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@import url(reset.css);
 
#wrapper {
    width: 960px;
    margin: 0 auto;
}
 
#logo {
    width: 204px;
    height: 135 px;
    float: left;
    margin-left: -2px;
}
 
#menu {
    width: 960px;
    height: 70 px;
    background: url(../images/menu_bg.png) no-repeat;
}
 
#menu ul li {
    float: left;
}
Вот ссылка на сам видео урок в нужном месте, чтобы было понятнее, о чём речь:
https://www.youtube.com/watch?... LK9o#t=554

Я проделала все шаги также, как это сделал автор видео, но результат у меня получился совершенно другой.
Должно быть как на скриншоте 1 (так получилось у автора видео). А у меня получилось как на скриншоте 2, то есть фон меню вообще куда-то пропал после того, как я написала в коде CSS следующее:
CSS
1
2
3
#menu ul li {
    float: left;
}
Пожалуйста, подскажите как быть и что делать
Миниатюры
Исчезает фон меню, когда к селектору идентификаторов menu ul li применяю значение float: left;   Исчезает фон меню, когда к селектору идентификаторов menu ul li применяю значение float: left;  
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
14.01.2015, 01:17
Ответы с готовыми решениями:

Когда делаю Float left пропадает фон у родительского элемента, точнее он есть но браузеру на него все равно
Вобщем верстал футер он у меня должен быть вот таким пока он у меня вот такой но как только...

Menu ставится автоматически float:left
Здравствуйте. Хочу вставить меню по центру, но автоматически подставляется свойство float:left. ...

Задаю float:left - не показывает фон родителя
Почему когда задаю float: left class'у Block, то у меня не показывает фон wraperr'a? &lt;html&gt;...

почему сбрасывается background родителя, когда в нем 3 элемента с float:left?
http://jsfiddle.net/7MTZf/ вот собственно, с двумя флоатами работает, с третьим бэкграунд...

5
0 / 0 / 0
Регистрация: 14.01.2015
Сообщений: 4
14.01.2015, 02:13  [ТС] 2
Всё, я разобралась
Вместо этого:
CSS
1
2
3
#menu ul li {
    float: left;
}
лучше использовать это:
CSS
1
2
3
#menu li {
    display:inline-block;
}
Скриншот того, что у меня получилось, прилагается.
Миниатюры
Исчезает фон меню, когда к селектору идентификаторов menu ul li применяю значение float: left;  
0
39 / 39 / 26
Регистрация: 11.01.2014
Сообщений: 343
14.01.2015, 03:03 3
Лучший ответ Сообщение было отмечено MalkiaMmoja как решение

Решение

float:left и display:inline-block; используются в разных случаях.
кстате есть способ "починить" верстку даже если вы используете float:left, мой вам совет понять как это сделать...

Добавлено через 8 минут
а не работало у вас изза
CSS
1
2
     height: 135 px;
     height: 70 px;
а надо
CSS
1
2
     height: 135px;
     height: 70px;
и да, разница есть
2) лучше использовать классы а не id, лично я в своей практике использую id для js или слайдеров css
1
0 / 0 / 0
Регистрация: 14.01.2015
Сообщений: 4
14.01.2015, 16:19  [ТС] 4
Al_lord, большое спасибо! Это ещё больше прояснило ситуацию
0
33 / 33 / 28
Регистрация: 04.04.2011
Сообщений: 333
15.01.2015, 22:53 5
Лучший ответ Сообщение было отмечено MalkiaMmoja как решение

Решение

float, хорошая штука. inline-block, в разных браузерах ведет себя по разному, а точнее в firefox появляются загадочные отступы, но возможно это не баг(bug) а фича(feature)!
1
0 / 0 / 0
Регистрация: 14.01.2015
Сообщений: 4
16.01.2015, 03:26  [ТС] 6
Вовчек, спасибо, буду знать)
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.01.2015, 03:26

Невозможно вставить явное значение для столбца идентификаторов, когда IDENTITY_INSERT имеет значение OFF
Не хочет заполнять вторую строчку в таблице , кажись новый ключ не хочет генерироваться. Ошибка...

Исчезает фон меню, либо оно становится лесенкой
Ребята, я новичок в этом деле) Хотелось бы от вас прочитать дельный совет как разобраться с этим...

Ошибка при создании трех колонок (float:left, float:right и margin:0 auto;)
3-й час бьюсь, но никак не могу понять, что не так делаю. почему оранжевый блок опускается? ...

float:left
у меня есть блок не фиксированной высоты с определенным фоном , внутри блоки с float:left (в них...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.