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



 

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

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

Открыть тему
Тема закрыта
> Декорирование блочного резинового шаблона
Rean1mator
Rean1mator
Topic Starter сообщение 7.12.2011, 22:45; Ответить: Rean1mator
Сообщение #1


Доброго времени суток.

Сразу признаюсь: я начинающий в сайтостроении и ещё много чего не знаю.

Столкнулся с проблемой декора сайта. Сайт сделан div-блочным и "резиновым".
Хотел сделать декорации для внешнего вида навигации, контента, короче всего что будет тянуться. Хотел сделать декорировать навигацию прямоугольником с сточенными углами и нижний угол загнутый.
В коде навигации сделал схему "блок в блоке", т.е. верх и низ навигации воткнул в один блок так чтоб серединка была пустая и свободна для ссылок и тд. Сделал в CSS background-repeat:repeat-y. Да, картинка репитнулась нормально, но общий вид навигации страшный, тк репитнулось оно и под вложенными блоками. Короче получилось такое:

[IMG]http://imglink.ru/thumbnails/07-12-11/dc888948c5bfbdff388e6010cc9e757d.jpg[/IMG]

Вопрос: как обойти вложенные блоки и сделать их внешними чтоб три div-блока стьояли слева от контента и чётко друг под другом ? У меня это не получилось. Новые блоки вытеснили навигацию и устаканить сей беспорядок у меня не получается.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pavelsc
pavelsc
сообщение 7.12.2011, 23:18; Ответить: pavelsc
Сообщение #2


Rean1mator, а код?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Rean1mator
Rean1mator
Topic Starter сообщение 7.12.2011, 23:24; Ответить: Rean1mator
Сообщение #3


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<link href="Style/StBolnica.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

<div id="header"> </div>

<div id="NavLtop">Верх</div>

<div id="nav">Навигация
<ul id="NavUl">
<li>Кнопка</li>
<li>Кнопка</li>
<li>Кнопка</li>
<li>Кнопка</li>
</ul>
</div>

<div id="NavLtop">Верх</div>
<div id="navLbott">Низ</div>


<div id="Rblock"> <div id="RblokTop">Верх</div> Правая панель <p>
<ul id="RUl">
<li>Кнопка</li>
<li>Кнопка</li>
<li>Кнопка</li>
<li>Кнопка</li>
<li>Кнопка</li>
<li>Кнопка</li>
<li>Кнопка</li>
<li>Кнопка</li>
<li>Кнопка</li>
<li>Кнопка</li>
<li>Кнопка</li>
<li>Кнопка</li>
<li>Кнопка</li>
<li>Кнопка</li>
</ul>
<div id="RblokBott"> Низ</div>
</div>


<div id="content">
<div id="ContentTop"> Верх</div>

Тема сегодняшнего поста является весьма актуальной как для рядовых веб-мастеров, так и для веб-мастеров с СЕОшным уклоном. Более того, поскольку верстка сайтов с недавнего времени для меня является основным родом деятельности, то это и моя самая любимая тема.

О том и поговорим.

Поскольку вопросы оптимизации сайта при его разработке для меня всегда стоят не на последнем месте, важный начальный шаг в этом процессе – создание кода страниц оптимального размера, то бишь использование как можно меньшего количества параметров для тэгов с вынесением их в отдельный файл каскадных таблиц стилей (CSS).

Практика 3-х с лишним лет опыта показала – как ни пытайся уменьшить размер страницы при табличном способе верстки, все-таки количество самих тегов используется просто огромное, потому что приходится множественно вкладывать одни таблицы в другие для получения требуемого результата.

Ведь по сути таблицы придуманы именно для вывода табличных данных, а не для разметки элементов страницы.Тема сегодняшнего поста является весьма актуальной как для рядовых веб-мастеров, так и для веб-мастеров с СЕОшным уклоном. Более того, поскольку верстка сайтов с недавнего времени для меня является основным родом деятельности, то это и моя самая любимая тема.

О том и поговорим.

Поскольку вопросы оптимизации сайта при его разработке для меня всегда стоят не на последнем месте, важный начальный шаг в этом процессе – создание кода страниц оптимального размера, то бишь использование как можно меньшего количества параметров для тэгов с вынесением их в отдельный файл каскадных таблиц стилей (CSS).

Практика 3-х с лишним лет опыта показала – как ни пытайся уменьшить размер страницы при табличном способе верстки, все-таки количество самих тегов используется просто огромное, потому что приходится множественно вкладывать одни таблицы в другие для получения требуемого результата.

Ведь по сути таблицы придуманы именно для вывода табличных данных, а не для разметки элементов страницы.

То, что расположено в таблице:
<div id="ContentBott">Низ</div>
</div>

<div id="clear"> &nbsp; </div>

<div id="footer"> Подвал сайта </div>
</div>
</body>
</html>


И CSS:

@charset "utf-8";
/* CSS Document */

#container {
margin:0px auto;
text-align:center;
width:1000px;
height:auto;}

#header {
margin:0 auto;
width:700px;
height:120px;
background-image:url(header_bolnica.png);}

#NavLtop {
background-image:url(Navleft_top.png);
float:left;
width:170px;
height:65px;
text-align:left;}


#nav {
background-image:url(NavLcenter.png);
background-repeat:repeat-y;
float:left;
margin-top:100px;
width:170px;
text-align:left;}

#navLbott {
background-image:url(Navleft_bottom.png);
float:left;
width:170px;
height:65px;
text-align:left;}



#Rblock {
margin-top:20px;
background-color:#CF9;
float:right;
width:180px;}

#content {
margin-top:20px;
background-color:#0FF;
text-align:left;
margin-left:190px;
margin-right:190px;}

#clear {
}

#footer {
background-color:#333;
margin:0px auto;}

#NavUl {
text-align:left;}



Это грубый вариант, но и он у мну не хочет стоять как надо(((((
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Rean1mator
Rean1mator
Topic Starter сообщение 8.12.2011, 1:30; Ответить: Rean1mator
Сообщение #4


Префразирую свой сложный вопрос.

Как правильно писать шаблон в котором должно быть несколько div-блоков в правой части сайта, либо в левой, либо в обеих сторонах должно быть несколько раздельных div-блоков?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pavelsc
pavelsc
сообщение 8.12.2011, 18:08; Ответить: pavelsc
Сообщение #5


Не сопоставляется у меня ваша картинка с кодом и рассказом в единое целое ну совсем никак. Есть у слоев айдишники - по ним и называйте блоки, а то верх-низ-серединка. И id должен быть только один на странице. Кстати для того чтобы вставить код на форуме есть специальные теги HTML и CSS.
Вот пример трехколоночной верстки, где ничего не съезжает:
<!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>Простой трехколоночный макет</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body {margin:0;color:#fff;font:bold 17px Tahoma;text-align:center}
.all {min-width:800px;margin:0 50px}
.left {width:195px;float:left;background:#555}
.right {width:195px;float:right;background:#555}
.content {margin:0 200px;background:#999}
.left, .right, .content {min-height:500px}
</style>
</head>
<body>
<div class="all">
<div class="left">Лево</div>
<div class="right">Право</div>
<div class="content">Центр</div>
</div>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Rean1mator
Rean1mator
Topic Starter сообщение 8.12.2011, 20:21; Ответить: Rean1mator
Сообщение #6


Проблемку порешал.
Помог простой способ запихнуть 3блока в один родительский
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
http://
http://
сообщение 10.12.2011, 23:21; Ответить: http://
Сообщение #7


Такой вариант вёрстки как "запихнуть 3блока в один" не очень актуален, в плане компактности кода.

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Верстка шаблона Битрикс
 0 bat 1419 26.9.2023, 6:22
автор: bat
Открытая тема (нет новых ответов) Как изменить цветовую гамму основного шаблона?
 1 partua 8155 13.11.2021, 1:40
автор: Silverspam
Открытая тема (нет новых ответов) Продам два шаблона PSD не дорого всего за 1200 рублей.
 0 WerHover 3587 7.3.2018, 15:16
автор: -Алексей.1-
Открытая тема (нет новых ответов) Верстка из PSD в HTML от 1000 руб. Натяжка шаблона html > DataLife Engine(DLE)
 2 Reriter 3668 16.2.2018, 12:14
автор: Reriter
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыИзменение дизайна шаблона Joomla
 0 neesupermario 1817 3.1.2018, 15:20
автор: neesupermario


 

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

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

RSS Текстовая версия Сейчас: 20.4.2024, 4:32

Дизайн

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