RaGaBaN
Новичок
Дата регистрации:
09.11.2013 21:41:38
Сообщений: 8
Доброго дня всем)
Подскажите с таким вопросом:
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Титул </title>
<link rel="stylesheet" type="text/css" href="Styles/main.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='top-menu1'>
<ul>
<li class='top-menu1'><a href='google.ru'><span>Главная</span></a></li>
<li ><a href='google.ru'><span>Меню</span></a></li>
<li ><a href='google.ru'><span>Меню</span></a></li>
<li ><a href='google.ru'><span>Меню</span></a></li>
<li ><a href='google.ru'><span>Меню</span></a></li>
<li ><a href='google.ru'><span>Меню</span></a></li>
</ul>
<div id='clear'></div>
</div>
<table id='top-head' border='1'>
<tr>
<td>
<p>Текст</p>
<p>Текст</p>
<p>Текст</p>
</td>
</tr>
</table>
</body>
</html>
CSS
@charset "utf-8";
body {
margin: 0;
padding: 0;
}
#top-menu1 ul li {
float: left;
list-style: none;
}
#top-menu1 ul li a {
text-decoration: none;
display: block;
padding: 3px 20px;
margin: 0px 15px;
background: #555;
color: #fff;
font-size: 100%;
border-radius: 6px;
}
#top-menu1 ul {
margin: 10px 200px;
padding: 0px;
}
#top-menu1 ul li.top-menu1 a, #top-menu1 ul li a:hover {
background: #777;
}
#top-menu1 ul li.top-menu1 a {
color: #7CFC00;
}
/* Отмена позицианирования */
#сlear {
clear: both;
}
Почему не действует clear: both ???
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
используйте блоки,а не таблицы.для того,чтобы отобразить блок как таблицу используйте display:table
RaGaBaN
Новичок
Дата регистрации:
09.11.2013 21:41:38
Сообщений: 8
Извините, я не до конца понял вашу мысль. Можно поподробней?
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
свойство clear актуально для плавающих элементов и блочной вёрстки. Совсем не помню табличной вёрстки с плавающими элементами.
Замените таблицу блоком <div> хотя бы
если не выйдет,то постараюсь расписать более подробно
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
ну а вообще в вашем случае всё проще. Учтите тот факт,что нельзя в именах стилей употреблять название свойства.
Попробуйте
<div id='clear'></div> заменить на <div id='cl'></div>
и вместо #clear {
clear: both; }
используйте #cl {
clear: both; }
RaGaBaN
Новичок
Дата регистрации:
09.11.2013 21:41:38
Сообщений: 8
Заменил имена clear, заменил table на div, никаких изменений((
И хочу заметить, что в видео уроке "Верстка сайта с нуля" Михаил указывает div-у именно class='clear' И у него все работает)))
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
к сожалению у меня нет данных видеоуроков.
Пожалуйста,верните таблицу на место и замените указанные места кода
У меня вышло примерно так,с кодом,представленным ниже:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Титул </title>
<link rel="stylesheet" type="text/css" href="Styles/main.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@charset "utf-8";
body {
margin: 0;
padding: 0;
}
#top-menu1 ul li {
float: left;
list-style: none;
}
#top-menu1 ul li a {
text-decoration: none;
display: block;
padding: 3px 20px;
margin: 0px 15px;
background: #555;
color: #fff;
font-size: 100%;
border-radius: 6px;
}
#top-menu1 ul {
margin: 10px 200px;
padding: 0px;
}
#top-menu1 ul li.top-menu1 a, #top-menu1 ul li a:hover {
background: #777;
}
#top-menu1 ul li.top-menu1 a {
color: #7CFC00;
}
/* Отмена позицианирования */
#cl {
clear: both;
} </style>
</head>
<body>
<div id='top-menu1'>
<ul>
<li class='top-menu1'><a href='google.ru'><span>Главная</span></a></li>
<li ><a href='google.ru'><span>Меню</span></a></li>
<li ><a href='google.ru'><span>Меню</span></a></li>
<li ><a href='google.ru'><span>Меню</span></a></li>
<li ><a href='google.ru'><span>Меню</span></a></li>
<li ><a href='google.ru'><span>Меню</span></a></li>
</ul>
<div id='cl'></div>
</div>
<table id='top-head' border='1'>
<tr>
<td>
<p>Текст</p>
<p>Текст</p>
<p>Текст</p>
</td>
</tr>
</table>
</body>
</html>
RaGaBaN
Новичок
Дата регистрации:
09.11.2013 21:41:38
Сообщений: 8
Все получилось)) да действительно проблема была именно в имени 'clear'
Спасибо за помощь!!
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
не за что.
совет на будущее,то,что можно реализовать без использования таблиц - лучше так и реализовать)
Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Уважаемый alexandrdante!
Поясните, пожалуйста, Ваш комментарий - "нельзя в именах стилей употреблять название свойства".
Как мне думается, имя id и class - может быть абсолютное любое слово, т.к. CSS не понимает имена, любые имена для CSS - это просто набор букв. Главное, чтобы имя не начиналось на цифру.
Я постоянное использую class="clear" для запрета оплывания, и ни разу не было никак проблем. В CSS пишу так.
.clear {
clear: both;
}
