X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Вопрос по уроку верстки (прикрепленному)
Banderas
Banderas
Topic Starter сообщение 9.1.2012, 14:40; Ответить: Banderas
Сообщение #1


Сделал все как на уроке, даже код копировал... в итоге получилась такая бяка.
Прикрепленное изображение

Это моя первая практика в верстке сайта. Как я понял, ошибка в позиционирование. Поскольку если в #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
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sogologo
sogologo
сообщение 9.1.2012, 14:45; Ответить: sogologo
Сообщение #2


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

честно вам скажу не самый лучший вы урок нашли ;) хотя, смотря какую цель вы хотели добиться?? какой конечный результат то должен быть? ;)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Banderas
Banderas
Topic Starter сообщение 9.1.2012, 15:05; Ответить: Banderas
Сообщение #3


ссылку прикрепил, там есть конечный результат и весь код...
если у вас есть, был бы рад выучить ещё несколько ;)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 9.1.2012, 20:24; Ответить: yury_mw
Сообщение #4


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)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Banderas
Banderas
Topic Starter сообщение 9.1.2012, 22:38; Ответить: Banderas
Сообщение #5


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Вопрос - платное размещение баннеров на сайте
 10 WGN 3182 14.12.2020, 14:20
автор: Peterson
Открытая тема (нет новых ответов) Вопрос по рекламе в "инстаграме"
Только активные аккаунты могут создавать или редактировать рекламу
 8 Zubkov 16048 17.1.2020, 17:49
автор: Forumacc
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВопрос-ответ о работе форума
 307 dos1k 43320 9.11.2019, 17:59
автор: heks
Открытая тема (нет новых ответов) Жена логопед, собрался ей приводить клиентов. Встал вопрос, куда приводить.
В теме перечисление доступного мне продвижения, но с чего начать?
 9 memeplex 3725 16.2.2019, 15:45
автор: zyzy
Открытая тема (нет новых ответов) Предлагаю размещение качественных ссылок на форумах и сервисах вопрос ответ
 21 ПроФФи 5018 2.3.2018, 20:56
автор: ShowPrint


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 19.4.2024, 2:34

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet