Перейти из форума на сайт.

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?
Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация
Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Запутался с дивами

Модерирует : Cheery

 Версия для печати • Подписаться • Добавить в закладки

Открыть новую тему     Написать ответ в эту тему

qwaka1

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Доброго времени суток. Столкнулся с проблемой, по ТЗ есть изображение, где надо порезать на кнопки и переходящие ссылки. Я нарезал фотошопом, всё быстренько накидал ApDivами.  
 
 Всё работает, кроме 1 маленькой детальки: сайт намертво прилеплен к левой стороне экрана. Пробывал text-align: center + margin: 0 auto; /* задаем отступ слева и справа auto чтобы сработало выравнивание по центру */. Ноль эмоций, потому что каждый расположенный див имеет свои настройки в таблице стилей

Код:
 (#apDiv1 {
    position:absolute;
    left:11px;
    top:15px;
    width:702px;
    height:213px;
    z-index:1;
}
#apDiv2 {
    position:absolute;
    left:355px;
    top:13px;
    width:357px;
    height:217px;
    z-index:2;
}
#apDiv3 {
    position:absolute;
    left:717px;
    top:14px;
    width:301px;
    height:149px;
    z-index:3;
}).

 В теле пробывал всё взять в центр, тоже не помогло.  
Основное изображение висит как фон. Страница сделана только с использованием HTML.
Посоветуйте , что можно применить в данном случае для отображения страницы в браузере по центру?
P.S. Есть ли CMS для вывода страниц HTML по центру, или чтото в этом духе?
Всего записей: 14 | Зарегистр. 18-04-2013 | Отправлено: 23:36 18-04-2013 | Исправлено: Cheery, 23:42 18-04-2013
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
qwaka1
ссылка где?  
 

Цитата:
 что можно применить в данном случае для отображения страницы в браузере по центру?  

зависит от того, HTML или XHTML  
 

Цитата:
Есть ли CMS для вывода страниц HTML по центру, или чтото в этом духе?

брр.. при чем тут CMS? это все дело HTML+CSS и шаблона (если речь о CMS)

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 23:43 18-04-2013
qwaka1

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
ссылки нету, делаю на локальном серве http://yadi.sk/d/sEVx4B3F4A5-a (сам код)
 
если нужно весь хлам, то архивну, голова уже болит от всего этого
 
в работе использую только HTML
 
cms я не использую, просто поинтересовался =)
Всего записей: 14 | Зарегистр. 18-04-2013 | Отправлено: 00:05 19-04-2013
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
qwaka1
неужели все нужно делать с абсолютным позиционированием?
 
оберните все сразу в <div style='margin: 0 auto; position: relative; width: 300px'>
где ширину задайте ту, что вам нужна.

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 00:12 19-04-2013
qwaka1

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
оберните все сразу в <div style='margin: 0 auto; position: relative; width: 300px'>  
где ширину задайте ту, что вам нужна.

получается интересный эффект, в разных браузерах по разному и исчезает фон =(
просто погуглив, я не увидел других вариантов с див тегами.  
есть ли другие способы по размещению на изображении ссылок и кнопок?
Всего записей: 14 | Зарегистр. 18-04-2013 | Отправлено: 11:27 19-04-2013
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
qwaka1

Цитата:
в разных браузерах по разному и исчезает фон =(  

что говорит о том, что делаете что то не так.
картинок же нет, поэтому в примере не видно, что и как у вас на фоне

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 16:16 19-04-2013
qwaka1

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
картинок же нет, поэтому в примере не видно, что и как у вас на фоне

я погуглил ещё немного, но проблемы на подобие моей ни у кого нет =( (с одной стороны хорошо, что никто не мучается как я )
http://yadi.sk/d/UK9rqZlS4Fnx3
это полный фарш что я успел сделать
Всего записей: 14 | Зарегистр. 18-04-2013 | Отправлено: 17:34 22-04-2013 | Исправлено: qwaka1, 19:03 22-04-2013
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
qwaka1
как все запущено то..
 
в современном html нет смысла резать картинку как есть (тем более с кнопками).
если есть повторяющиеся элементы, то их проще сделать отдельно.
 
 
насчет центровки - я же вам указал..  
после <body>
написать
Цитата:
<div style='margin: 0 auto; position: relative; width: 300px'>  

где ширину указываете в том количестве символов, что нужно (997 пикселей, судя по картинке)
 
перед </body>
дописываете </div>
 
 
остальное же - сейчас уже можно делать круглые углы у прямоугольников, то есть кнопки, картинки слева можно сделать средствами самого HTML + CSS, просто поверх наложить надписи или разместить картинки.
 
но сдается мне, что вы слишком рано взялись за подобное.
 
и если уж картинками, то лучше не в jpeg - видна же потеря качества (особенно на девушке)
но это вам решать, как и что вы хотите видеть )

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 21:59 22-04-2013 | Исправлено: Cheery, 22:07 22-04-2013
qwaka1

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
но сдается мне, что вы слишком рано взялись за подобное.  

я уже сам жалею , что взялся =(
я уже делал такое но попроще, таблицами размещал - здесь как раз из за девушки таблицей не получается =(

Цитата:
и если уж картинками, то лучше не в jpeg - видна же потеря качества (особенно на девушке)  

прихоть заказчика, я предлагал в png или bmp на худой конец сделать
изображения, он сам мне присылает, так что изменять их мне низя =(
Всего записей: 14 | Зарегистр. 18-04-2013 | Отправлено: 09:48 23-04-2013
qwaka1

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Может пригодиться кому нибудь - разобрался с проблемой.
Все див теги должны находиться в body после строки
<div style='margin: 0 auto; position: relative; width: 997px'>
 
любой элемент сбивает эту строку, если все дивы под ней -всё нормально.
 перед /body  нужна пустая строка и передней /div
 
и получиться всё идеально =)
Всего записей: 14 | Зарегистр. 18-04-2013 | Отправлено: 16:48 25-04-2013 | Исправлено: qwaka1, 16:51 25-04-2013
berkut9737



Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
qwaka1

Цитата:
Может пригодиться кому нибудь - разобрался с проблемой.  
Все див теги должны находиться в body после строки  
<div style='margin: 0 auto; position: relative; width: 997px'>  
 
любой элемент сбивает эту строку, если все дивы под ней -всё нормально.  
 перед /body  нужна пустая строка и передней /div  
 
и получиться всё идеально =)

 
Просто, надо делать записи, типа:
 
<!--Блок wrapper-->
 
<div id="wrapper">  
 
<!--Блок header-->
 
<div id="header"><p></p> </div>
 
<!--Конец блока header-->
 
</div>
 
<!--Конец блока wrapper-->
 
и т.д..
В общем, как-то так  
Блоку "wrapper"(обёртка)  задаёте в таблице стилей такие параметры, чтобы выровнять весь сайт по центру:
 
#wrapper {
width: 900 px; (ширину задаёте сами)
margin-left: auto;
margin-right: auto;
}
Всего записей: 1140 | Зарегистр. 05-04-2009 | Отправлено: 19:08 25-04-2013 | Исправлено: berkut9737, 19:09 25-04-2013
qwaka1

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Блоку "wrapper"(обёртка)  задаёте в таблице стилей такие параметры, чтобы выровнять весь сайт по центру

Спасибо, сча попробую.
Всего записей: 14 | Зарегистр. 18-04-2013 | Отправлено: 20:16 25-04-2013
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
qwaka1

Цитата:
Спасибо, сча попробую.

это тоже самое, лишь css вынесен в отдельное описание

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 20:29 25-04-2013
qwaka1

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
лишь css вынесен в отдельное описание

Я плохо знаю css, поэтому визуально только делаю с помощью программы =)
Всего записей: 14 | Зарегистр. 18-04-2013 | Отправлено: 09:52 26-04-2013
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Запутался с дивами


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru