Перейти к содержимому

Сервис обмена электронных валют


Вопрос по уроку верстки (прикрепленному)

#1 Banderas

Banderas
  • Пользователь
  • 1 168 сообщений
  • Репутация: 1
0

Отправлено 09 Январь 2012 - 13:40

Сделал все как на уроке, даже код копировал... в итоге получилась такая бяка.
error.gif
Это моя первая практика в верстке сайта. Как я понял, ошибка в позиционирование. Поскольку если в #logo убрал absolute, сразу он стал на свое место. Для #desс такой фокус не сработал.

Мой код:
img#logo {
position: absolute;
margin: 30px;
}

div#desc {
background: url('img/fon.gif') no-repeat #339933;
width: 340px;
height: 125px;
position: absolute;
margin-left: 35.5%;
padding-left: 20px;
padding-top: 30px;
color: #fff;
}

div#lang {
position: absolute;
right: 0px;
top: 35px;
background: url('img/r-bdr.gif') no-repeat left #c2c2c2;
height: 46px;
width: 150px;
text-align: center;
padding-top: 4px;
}

div#hist {
background: url('img/fon-l.gif');
position: absolute;
width: 270px;
height: 25px;
top: 120px;
padding-left: 30px;
padding-top: 5px;
}

div#icons {
background: url('img/fon-s.gif');
position: absolute;
width: 150px;
height: 30px;
top: 120px;
right: 0px;
}

div#icons table {
width: 100%;
height: 100%;
text-align: center;
}

div#icons a {
display: block;
height: 20px;
padding-top: 6px;
}

div#icons a:hover {
background: #ccc;
}

table#main {
margin-top: 148px;
width: 100%;
}

td#menu {
padding-top: 25px;
width: 200px;
background: #F4F4D4;
text-align: center;
vertical-align: top;
}

td#content {
vertical-align: bottom;
text-align: right;
}

td#copyright {   /*это нижняя левая ячейка, с копирайтами*/
vertical-align: bottom;
padding: 25px 0;   /*верхний и нижний отступы — 25px, правый и левый — 0*/
width: 200px;
background: #f4f4d4;
text-align: center;
}

ХеТеМеЕль
<body>
<img src="img/logo.gif" id="logo" alt="Revolt" title="Тюнинг-центр Revolt">

<div id="desc">
<p>Что такое Revolt? Это тюнинговый центр, где всегда будут рады Вам. Это надежный сервис, разумные цены и отличный результат.</p>
<p>Вам нужен тюнинг? Revolt ждет Вас!</p>
</div>

<div id="lang">
<a href="#">English version</a><br>
Русская версия
</div>

<div id="hist">
<a href="index.html">Главная</a> &rarr; Контактная информация <!-- &arr; — это стрелка вправо. Спецсимволы HTML. -->
</div>

<div id="icons">
<table> <!-- чтобы между иконками было одинаковое расстояние, я засунул их в таблицу. -->
<tr>
<td>
<a href="index.html" class="img"><img src="img/home.gif" alt="На главную"></a> <!-- помните класс ссылок img? он пригодился, как видите. Не забыли атрибут alt? -->
</td>
<td>
<a href="contacts.html" class="img"><img src="img/mail.png" alt="Контакты"></a>
</td>
<td>
<a href="sitemap.html" class="img"><img src="img/sitemap.png" alt="Карта сайта"></a>
</td>
</tr>
</table>
</div>

<table id="main" cellspacing="0">
<tr>
<td id="menu">
menu
</td>
<td id="content" rowspan="2"> <!-- rowspan — это сколько строк объединяет одна ячейка -->
content
</td>
</tr>
<tr>
<td id="copyright">
2012 © Revolt<br> <!-- © — значок копирайта. Спецсимволы HTML -->
Дизайн и верстка: <a href="mailto:mail@domain.ru">Ariser</a>
</td>
</tr>
</table>

</body>

 

 

  • 0


robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Уроки для начинающих: дизайн, верстка, создание сайтов
  2. [Урок 1] Выбор макета и инструментов для верстки.
  3. [Урок 4] Часть 1. Верстка макета HTML5/CSS3

#2 sogologo

sogologo
  • Пользователь
  • 29 сообщений
  • Репутация: 0

Отправлено 09 Январь 2012 - 13:45

у меня только один вопрос ;) нафига эти position: absolute;

честно вам скажу не самый лучший вы урок нашли ;) хотя, смотря какую цель вы хотели добиться?? какой конечный результат то должен быть? ;)
  • 0

#3 Banderas

Banderas
    Topic Starter
  • Пользователь
  • 1 168 сообщений
  • Репутация: 1

Отправлено 09 Январь 2012 - 14:05

ссылку прикрепил, там есть конечный результат и весь код...
если у вас есть, был бы рад выучить ещё несколько ;)
  • 0


#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 09 Январь 2012 - 19:24

Banderas,
там урок неплохой (сам по нему немного учился когда-то), но кривоватый и устаревший, потому что половина позиционирования задается таблицами, нет нормального структурирования и семантики, и абсолютное позиционирование используется неточно. Так что ошибка не только в вашем позиционировании, но и сам урок не совсем правильный. И хром вам об этом рассказывает кривизной отображения. :)
Я бы верстал, примерно, так

<!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" xml:lang="ru" lang="ru">
<head>
<title>tst</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
<!--Технически логотип можно было и не выделять в отдельный блок, а запустить фоновым рисунком у шапки,
но семантически лучше, чтоб оно было именно так
+ иногда возникает желание на логотип ссылку повесить и/или всплывающую подсказку, см title="логотип"-->
<div id="logo" title="логотип">
</div>
<div id="desc"><div class="wrap">
<p>Что такое Revolt? Это тюнинговый центр, где всегда будут рады Вам. Это надежный сервис, разумные цены и отличный результат.</p>
<p>Вам нужен тюнинг? Revolt ждет Вас!</p>
</div></div>
<div id="lang">
<!--Это место правильнее тоже списком сверстать-->
<a href="#">English version</a><br />
Русская версия
</div>
<div id="icons">
<ul>
<li><a href="#1" id="home"></a></li>
<li><a href="#2" id="mail"></a></li>
<li><a href="#3" id="sitemap"></a></li>
</ul>
</div>
<div id="hist"><div class="wrap">
<a href="index.html">Главная</a> &rarr; Контактная информация
</div></div>
</div>
<!--Дальнейшие блоки в css почти не сверстаны, просто голый html в две колонки (меню/контент) + подвал-->
<div id="main">
<div id="menu">
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="portfolio.html">Наши работы</a></li>
<li><a href="service.html">Услуги и цены</a></li>
<li>Контактная информация</li>
<li><a href="shop.html">Магазин</a></li>
<li><a href="about.html">О компании</a></li>
<li><a href="responses.html">Отзывы</a></li>
</ul>
</div>
<div id="content">
<h2>Контактная информация</h2>

<p>Наши офисы находится по адресу:</p>

<h3>г. Бобруйск</h3>

<p>
ул. Академическая 138, корпус б, 2-й этаж<br />
тел/факс: 8 5908 908908<br />
<a href="map.html">Карта проезда</a>
</p>

<p>
ул. Еще более академическая 67<br />
тел/факс: 8 5908 908908<br />
<a href="map.html">Карта проезда</a>
</p>

<p>
проспект Гагарина 31<br />
тел/факс: 8 5908 908908<br />
<a href="map.html">Карта проезда</a>
</p>

<h3>г. Атлантик-сити</h3>

<p>
ул. Тихоокеанская, 251 м ниже уровня моря<br />
тел/факс: 8 5908 908908<br />
<a href="map.html">Карта проезда</a>
</p>

<p>
Наш e-mail: <a href="mailto:revolt@revolt.ru">revolt@revolt.ru</a>
</p>

</div>
</div>
<div id="footer">
<div id="copy"><div class="wrap">
2007 © Revolt<br>
Дизайн и верстка: <a href="mailto:mail@domain.ru">Ariser</a>
</div></div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
}
#header{
position:relative;
text-align:center;
padding:0 300px;
min-width:360px;
height:155px;
}
#logo{
position:absolute;
top:24px;
left:24px;
width:270px;
height:60px;
background:url(img/logo.gif) no-repeat;
}

#desc{
margin:0 auto;
background:#393 url(img/fon.gif) no-repeat;
width:360px;
height:155px;
}
#desc .wrap{
padding:30px 20px;
}
#desc .wrap p{
padding-bottom:1em;
text-align:left;
color:#fff;
}

#lang{
position:absolute;
right:0px;
top:35px;
background:#c2c2c2 url(img/r-bdr.gif) no-repeat left;
height:46px;
width:150px;
text-align:center;
padding-top:4px;
}

#icons{
background:url(img/fon-s.gif);
position:absolute;
width:150px;
height:30px;
top:120px;
right:0px;
}
#icons ul{
list-style:none;
}
#icons li{
float:left;
height:30px;
width:50px;
}
#icons li a{
float:left;
height:30px;
width:50px;
}
#icons li a#home{
background:url(img/home.gif) 50% 50% no-repeat;
}
#icons li a#mail{
background:url(img/mail.gif) 50% 50% no-repeat;
}
#icons li a#sitemap{
background:url(img/sitemap.gif) 50% 50% no-repeat;
}

#hist{
background:url(img/fon-l.gif) no-repeat;
position:absolute;
top:120px;
left:0;
width:300px;
height:30px;
}
#hist .wrap{
padding-left:30px;
padding-top:5px;
}

#main{
/*main.gif — это картинка, совпадающая с фоном блока menu, в данном случае — это полоска 200х1px цвета #f4f4d4*/
background:url(img/main.gif) repeat-y;
}
#menu{
float:left;
width:200px;
background:#f4f4d4;
}
#content{
margin-left:200px;
padding:18px 0 0 80px;
text-align:left;
}

#footer{
position:relative;
height:200px;
}
#copy{
position:absolute;
bottom:0;
left:0;
height:200px;
width:200px;
background: #f4f4d4 url(img/main.gif) repeat-y;
}
#copy .wrap{
text-align:center;
padding:20px 0;
}
Это самое начало верстки, более менее сверстана только шапка. На урок и полную верстку времени нет. Меню, контент и подвал еще надо доверстывать, фоновые картинки им рисовать и прочая.
Но суть такая:
* разбиваем логически страницу на структурные блоки: шапку — header, меню — menu, содержание — content, подвал — footer
* сразу в коде рисуем эти блоки (для начала пустые, можно для наглядности им бортики нарисовать: в css свойство блоку border:1px solid #000; , потом удалите)
* затем наполняем эти блоки начинкой, а оформление описываем в css:
** кнопки оформляем блоками с фоновым рисунком,
** группы ссылок, ака меню — списками (таблицы не используем, кроме как для табличных данных),
** блокам требующим отступов, как, например, для текстовых блоков с контентом, добавляем внутренний блок с полями (wrap), чтобы эти поля не влияли на размеры самих блоков.

Если что непонятно:
* зачем и почему сверстано именно так?
* в какую сторону грести дальше?
* как какие верстальческие проблемы решать (например, как делать вертикальную менюшку или подсветку кнопок, как группировать картинки в спрайты, чтоб страница быстрее грузилась и т.п.)?
— спрашивайте расскажу. Но только в конкретных местах.
Как уже говорил, для подробного урока времени нету.
  • 0

#5 Banderas

Banderas
    Topic Starter
  • Пользователь
  • 1 168 сообщений
  • Репутация: 1

Отправлено 09 Январь 2012 - 21:38

спасибо! реально очень много времени убил на корректирования.. думаю нужно этот пост добавить в тему по уроку ;)
  • 0



Оформление форума – IPBSkins.ru