Valerievna
Moderator
- Регистрация
- 28.09.2009
- Сообщения
- 859
Начала изучать css по уроку http://www.websovet.com/blochnaya-verstka-urok-1
Судя по комментариям на том сайте, не у меня одной не получилось.
Вот код css файла:
А вот index:
Автор пишет, что все должно быть так: в контейнере 760 px сверху расположена шапка, а под ней один блок обтекаемый слева, другой справа. И соответственно текст в левом. И все выровнено по середине.
Получается что правый блок сползает под левый, а текст прилипает к левой части экрана, а не центрируется.
Я не могу понять смысл, по какому принципу блоки становятся рядом, и как все отцентровать.
Судя по обьясненияим автора, если ширина контейнера задана, значит все должно умещаться внутри. А у меня вылазит.
Все сделала, как написано в уроке. В чем причина? Как это устранить?
Судя по комментариям на том сайте, не у меня одной не получилось.
Вот код css файла:
Код:
/*© PIG.RU, 2007 | piggs@pig.ru */
* {
margin: 0;
padding: 0;
border: 0;
}
body {
padding: 2% 0 0;
background: #ccc;
color: #333;
font-family: “Comic Sans MS”, Verdana, Arial, Helvetica, sans-serif;
}
#container {
width: 760px;
margin: 0 auto;
}
#header {
background-image: url(header00.jpg);
width: 760px;
height: 158px;
}
#nav {
width: 760px;
margin: 0 auto;
background: url(bg_nav00.jpg) repeat-x;
color: #f00;
font-size: 10pt;
font-weight: bold;
line-height: 1.8em;
text-align: center;
}
#nav ul {
list-style-type: none;
}
#nav li {
display: inline;
margin: 0 8px;
}
#nav li a {
color: #0c0;
}
#nav li a:hover {
color: #f00;
}
a {
text-decoration: none;
}
#text {
width: 545px;
font-size: .8em;
color: #333;
margin: 10px auto;
float: left;
}
#text p {
text-align: justify;
text-indent: 1.5em;
margin: 0;
padding: 0 15px;
}
#text a {
color: #396;
}
#text a:hover {
color: #f36;
border-bottom: #f36 dotted 1px;
}
.img1 {
width: 200px;
height: 287px;
margin: 0 0 0 15px;
float:right;
}
.img2 {
width: 200px;
height: 200px;
margin: 10px 10px 0 15px;
float: left;
}
.venzel {
width: 300px;
height: 23px;
margin: 10px 10px 0 15px;
float: left;
}
#members {
width: 300px;
height: 190px;
float: right;
}
#members h2 {
color: #f60;
font-size: 103%;
font-weight: bold;
text-align: center;
}
#members ol {
color: #999;
font-size: 103%;
margin: 10px;
float: right;
}
#members li {
margin: 0 5px;
}
#members li a {
color: #0c0;
}
#members li a:hover {
color: #f00;
}
.line {
width: 304px;
height: 13px;
float: right;
}
#news {
background: #ffc;
width: 185px;
color: #665;
margin: 10px 5px;
float: right;
}
#news h3 {
color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}
#news ul {
list-style: url(marker.jpg) inside;
}
#news li {
font-size: 75%;
padding: 5px 10px;
}
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="description" content="Сайт о поросенках-летунах и счастливой летучей жизни." />
<meta name="keywords" content="летать, свин-летун, пиггсы, полёты, лёччики, пилоты." />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Пиггасы | Главная</title>
</head>
<body>
<div id="container">
<div id="header">
</div>
</div>
<div id="nav">
<ul>
<li>Главная</li>
<li><a href="#">О нас</a></li>
<li><a href="#">О летучести</a></li>
<li><a href="#">О везучести</a></li>
<li><a href="#">Свинки-герои</a></li>
<li><a href="#">Подружиццо</a></li>
</ul>
</div>
<div id="text">
<img class="img1" src="pig1.jpg" alt="Летящий свин" />
<p>Летать всегда! Летать везде! Летать много, очень-очень много и всегда с улыбкой на морде лица — вот наше кредо!</p>
<p>Все пиггасы рано или поздно приходят к осмыслению никчемной жизни в грязной луже и подаются в лёччики-пилоты. Причём для летания вовсе не нужна никакая посторонняя техника. Только сильное и несокрушимое желание, а также упорство, спортивная злость и немного вредности. Оно того стоит! Уж поверьте.</p>
<p>Всего лишь после недели тренировок на брезентовом батуте и трёх зачотных прыжков с крыши сарая, адепт получает звание летуна-прыгуна. При этом заработанные синяки, ссадины и шишки также засчитываются в +</p>
<img class="venzel" src="venzel.gif" alt="" />
<img class="img2" src="pig2.jpg" alt="Пиггсы на проводе" />
<div id="members">
<h2>Список новых учаснегов:</h2>
<ol>
<li><a href="#">Рыжий</a></li>
<li><a href="#">Брат Корнелий</a></li>
<li><a href="#">Муха</a></li>
<li><a href="#">Пигфлай</a></li>
<li><a href="#">Нигга Боб</a></li>
<li><a href="#">Помидорка</a></li>
</ol>
<ol>
<li><a href="#">Косолапыч</a></li>
<l><a href="#">Тушка</a></li>
<li><a href="#">Свин Полезный</a></li>
<li><a href="#">Сало</a></li>
<li><a href="#">Кнопка</a></li>
<li><a href="#">Васёк</a></li>
</ol>
</div>
<img class="line" src="line.gif" alt="" />
</div>
<div id="news">
<h3>Самые распоследние новости:</h3>
<ul>
<li>Всю прошедшую неделю лил жуткий дождь, и полёты временно приостановились. Самые безбашенные пиггасы, однако, всё равно кучковались стаями на проводах местной радиолинии и дружно создавали помехи. Малаццы!</li>
<li>Пиггас Хмурый Пятак снова хмурый. Обещал всех урыть. Злой сильно.</li>
<li>У нашего друга Боббса завтра ДР! Поздравления и подарочки просил вручать возле новой будки и непременно на виду у соседского пса Мухомора, чтобы тому завидно стало. Пляски намечаются до самого утра. При наличии на небе луны — будет весело.</li>
</ul>
</div>
<div class="clearfloat"></div>
</body>
</html>Получается что правый блок сползает под левый, а текст прилипает к левой части экрана, а не центрируется.
Я не могу понять смысл, по какому принципу блоки становятся рядом, и как все отцентровать.
Судя по обьясненияим автора, если ширина контейнера задана, значит все должно умещаться внутри. А у меня вылазит.
Все сделала, как написано в уроке. В чем причина? Как это устранить?
