резиновый дизайн и меню с картинками

**milo** · 23.02.2007, 13:24

привет всем. я делаю трехколоночную верстку, навигация находится слева. при этом таблицы не использую (все на div`ах). чтобы дизайн был "резиновым" приходится параметр width указывать в процентах. когда ширина всех трех колонок указана в процентах я горя не знаю. НО! я хочу кнопочки в менюшке оформить графикой, при этом мне придется ширину левой колонки делать фиксированной, а отсюда вытекает проблема: при изменении разрешения третья колонка съезжает под вторую

. я не хочу отказываться от использования графических кнопочек. таблицы использовать тоже не хочу. может можно как-нибудь извратиться?

**garA** · 23.02.2007, 13:38

может можно как-нибудь извратиться?

ну, что ж, сами просили

вот:

Код:

<!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=windows-1251" />
<title>3 колонки и футер пребит к низу</title>
<style type="text/css">
*{
 * *margin:0;
 * *padding:0;
}
/* mac hide*/
html, body{height:100%}
/* end hide */
html, body{
 * *width:100%;
 * *height:100%;
}
body{
 * * * *color:#000;
****text-align:center;
****font:small.18px Arial, Helvetica, Tahoma, Verdana, sans-serif; 
****background:#F2E3EE;
}
*html body{
****font-size:x-small;
****font-size:small;
}
#outer{
****min-height:100%;
****margin-left:160px;
****margin-right:160px;
****background:#fff;
****border-left:1px solid #000;
****border-right:1px solid #000;
****margin-bottom:-52px;
****color:#000;
}

*html #outer{height:100%} /*IE treats height as min-height anyway*/
.outerwrap{
****float:left;
****width:100%;
****position:relative;
}
#centrecontent{
****float:right;
****width:100%;
****position:relative;
****padding-top:72px;/* space for header*/
}

#header{
****position:absolute;
****top:0;
****left:0;
****width:100%;
****height:70px;
****background:#33C;
****border-top:1px solid #000;
****border-bottom:1px solid #000;
****overflow:hidden;/* fixed height so hide overflow*/
****color:#000;
}
#left{
****float:left;
****position:relative; /* Needed for IE/win */
****width:160px; */*same as margin on outer */ *
****margin-left:-159px; /*must be 1px less than width otherwise won&#39;t push footer down */ * 
****left:-1px;/* line it up exactly*/
****padding-top:72px;/* space for header*/
}
#left{margin-right:-3px;}/* 3 px jog for ie (also fixes mozilla issue with float drop)*/
#left p{padding:3px;}

#right{
****float:right;
****position:relative; /* Needed for IE/win */
****width:160px; */*same as margin on outer */ *
****margin-left:-160px; /*must be 1px less than width otherwise won&#39;t push footer down */ * 
****right:-158px;/* line it up exactly*/
****padding-top:72px;/* space for header*/
}
#right{margin-right:-3px;}/* 3 px jog for ie (also fixes mozilla issue with float drop)*/
#right p{padding:3px;}

#footer{
****width:100%;
****clear:both;
****height:50px;
****border-top:1px solid #000;
****border-bottom:1px solid #000;
****background-color:#FF8080;
****color:#000;
****text-align:center;
****position:relative;
}
* html #footer {/*only ie gets this style*/
****height:52px;/* for ie5 */
****height:50px;/* for ie6 */
}
#clearfooter{clear:both;height:52px;}/*needed to make room for footer*/
</style>
</head>
<body>
<div id="outer">
****<div class="outerwrap">
 *<div id="centrecontent">
 *****
 *****

2 column layout.
This layout has main content first in the html:This layout has main content first in the html: This layout has main content first in the html: This layout has main content first in the html: This layout has main content first in the html: This layout has main content first in the html: This layout has main content first in the html: This layout has main content first in the html: This layout has main content first in the html: This layout has main content first in the html: This layout has main content first in the html:</p>
 *</div>
 *<div id="left">
 *****

Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes
goes here : Left content goes here : </p>
 *</div> *
****</div>
 *<div id="right" style="color:red;">
 *****

Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes
goes here : Left content goes here : </p>
 *</div>****
****
****
****
</div>




</body>
</html>

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

**milo** · 23.02.2007, 16:03

Originally posted by garA@Feb 23 2007, 09:38
[b]ну, что ж, сами просили*

поняли мои слова слишком буквально

пара вопросов возникла:
1.

Код:

min-height:100%;

во всех ли браузерах работает и что означает? примерно понимаю что это минимальная высота

, но описания нигде не встречал.
2. зачем?

Код:

position:relative;
margin-left:-159px;

3. и зачем сначала делать пустое место для футера, а потом туда его вставлять? не проще ли сразу его туда вставить?
хоть и изврат натуральный, а работает на вра

**garA** · 23.02.2007, 16:35

1.

Код:

min-height:100%;

во всех ли браузерах работает и что означает? примерно понимаю что это минимальная высота

, но описания нигде не встречал.

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

Код:

*html #outer{height:100%}

2.

зачем?

Код:

position:relative;
margin-left:-159px;

если коротко, то это нужно для "позиционирования" столбцов.. вот ссылка [Только зарегистрированные пользователи могут видеть ссылки. ] ознакомьтесь, потом станет чуть понятнее..

3.

и зачем сначала делать пустое место для футера, а потом туда его вставлять? не проще ли сразу его туда вставить?

проще.. можете вставить..

на самом деле код приведеннй выше достаточно "сырой", зато универсальный, и его можно "заточить" под свои нужды.. и примерно об этом я уже писал выше:

это почти то, что вам нужно.. дальше уж сами модифицируйте, как надо cool.gif

**Zigzag** · 24.02.2007, 13:02

[Только зарегистрированные пользователи могут видеть ссылки. ]

**milo** · 24.02.2007, 14:44

спасибо, уже сделал. эта статья ([Только зарегистрированные пользователи могут видеть ссылки. ]) помогла

**Aykroyd** · 25.02.2007, 09:50

Originally posted by milo@Feb 24 2007, 14:44
спасибо, уже сделал. эта статья ([Только зарегистрированные пользователи могут видеть ссылки. ]) помогла
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Вообще, данная тема является весьма интересной.

Вопрос реализации средствами CSS трехколоночного макета с боковыми колонками фиксированной ширины некоторое время назад очень будоражил умы многих известных людей. Предлагались разнообразные подходы к решению данной задачи... На мой взгляд, решение, описываемое в статье на [Только зарегистрированные пользователи могут видеть ссылки. ], не является оптимальным. На сегодняшний день все это можно смоделировать намного проще:

1. Можно спокойно обойтись без отрицательных полей.
2. Совершенно нет никакой необходимости плодить лишние обрамляющие блоки (container, wrapper и outer_wrapper) для задания фонового цвета (или изображения) методом Faux Columns. Для этой цели можно спокойно использовать элементы <html> и <body>.
3. Совсем не обязателен дополнительный "выключающий" блок div.clearing...

Вот совсем небольшой шаблон, выработанный мной некоторое время назад:

Код:

* {margin: 0px; padding: 0px;}
html {background: url(bg_left.gif) #FFFFCC repeat-y left top; height: 100%;}
body {background: url(bg_right.gif) repeat-y right top; min-width: 776px; min-height: 100%; position: relative;}
* html body {height: 100%;}
#header {background: #D5EAFF; width: 100%; height: 100px;}
#content {width: 100%; padding-bottom: 70px; overflow: hidden;}
#menu {width: 200px; float: left;}
* html #menu {margin-right: -3px;}
#news {width: 200px; float: right;}
* html #news {margin-left: -3px;}
#main {margin: 0px 200px;}
* html #main {height: 1%; margin: 0px 197px;}
#footer {background: #66FFCC; width: 100%; height: 70px; position: absolute; bottom: 0px;}
* html #footer {bottom: -1px;}

Код:

<div id="header">Header</div>
<div id="content">
****<div id="menu">Menu</div>
****<div id="news">News</div>
****<div id="main">Main</div>
</div>
<div id="footer">Footer</div>

Отрицательные поля здесь присутствуют в иных целях – исключительно для решения проблемы с трехпиксельными отступами у float-ов в IE.
Ну и, конечно же, возможны варианты...

[attachment=5531:attachment]

[attachment=5532:attachment]

**milo** · 25.02.2007, 12:02

Originally posted by Aykroyd@Feb 25 2007, 05:50
[b]На мой взгляд, решение, описываемое в статье на [Только зарегистрированные пользователи могут видеть ссылки. ], не является оптимальным.

на мой тоже. мне понадобилось несколько часов чтобы полностью разобраться в коде.
1. мне непонятно назначение сточки

Код:

#main {margin: 0px 200px;}

это значит боковые отступы по 200 пекселей от ближайших элементов? но почему тогда блок распологается как надо? он считает отступ от другой границы? я немного запутался, объясните, пожалуйста...
2. еще одна строчка

Код:

* html #main {height: 1%; margin: 0px 197px;}

зачем выставлять значение высоты в 1%? и зачем еще раз определять марджины? видимо я еще много не знаю

**Aykroyd** · 25.02.2007, 12:44

Originally posted by milo@Feb 25 2007, 12:02
мне непонятно назначение сточки

Код:

#main {margin: 0px 200px;}

это значит боковые отступы по 200 пекселей от ближайших элементов?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

Немного неверное суждение.
Во-первых, не отступы, а поля.

Отступами обычно называют padding-и. В принципе, конечно, это личное дело каждого – как что называть. Но лучше сразу определиться, дабы в последствии не запутаться.
Во-вторых, боковые поля по 200 пикселей не от ближайших элементов, а от границ родительского элемента (контейнера). В данном случае – от левой и правой границы блока content (блок main расположен именно в нем). Поскольку блок content имеет ширину в 100% и располагается в блоке <body>, он занимает всю ширину блока <body>. Далее: поскольку блок <body> располагается в блоке <html> и ширина блока <body> не задана явно, этот блок занимает по ширине все доступное ему пространство в блоке <html>, как и подобает, в принципе, любому блочному элементу в прямом потоке. А вот у блока <html> родителя нет...

Это самый верхний элемент в иерархии. В данном случае он занимает всю ширину окна браузера.

В конечном итоге получается, что боковые поля по 200px для блока main рассчитываются от границ окна браузера.

Originally posted by milo@Feb 25 2007, 12:02
еще одна строчка

Код:

* html #main {height: 1%; margin: 0px 197px;}

зачем выставлять значение высоты в 1%? и зачем еще раз определять марджины? видимо я еще много не знаю
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

Это специальный хак для "самизнаетекакогобраузера" .
В данном случае он предназначается для решения проблемы, которая называется [Только зарегистрированные пользователи могут видеть ссылки. ]. Вкратце вот в чем суть:

Если текст (прямой поток) обтекает float, например, c левой стороны, то на всем вертикальном протяжении float-а текст в прямом потоке имеет неприятный дополнительный отступ в 3 пиксела (рассматривается ситуация, когда весь блок текста имеет левый margin, не заходит под float по его завершению, а продолжается вниз одной колонкой).

Именно это и лечится при помощи * html #main {height: 1%; margin: 0px 197px;} в связке с * html #menu {margin-right: -3px;} и * html #news {margin-left: -3px;}...

**garA** · 26.02.2007, 13:04

1. Можно спокойно обойтись без отрицательных полей.

Можно..

Но начальство требует, чтобы сначала шел контент, а лишь потом все остальное.. Сами знаете, для чего нужны все эти "выкрутасы"..

2. Совершенно нет никакой необходимости плодить лишние обрамляющие блоки (container, wrapper и outer_wrapper) для задания фонового цвета (или изображения) методом Faux Columns. Для этой цели можно спокойно использовать элементы <html> и <body>.

Мне тоже не нравиться плодить лишние сущности, но что поделать, если необходим эффект таблиц и чтобы контент был впереди..

3. Совсем не обязателен дополнительный "выключающий" блок div.clearing...

Согласен это личное дело каждого..

Вот совсем небольшой шаблон, выработанный мной некоторое время назад:

Да, код уменьшился многократно..

Ну, а если отключить рисунки, что же мы у видим? Увидим, что колонки исчезли..

Во-первых, не отступы, а поля. smile.gif Отступами обычно называют padding-и. В принципе, конечно, это личное дело каждого – как что называть.Но лучше сразу определиться, дабы в последствии не запутаться.

Польностью согласен с Aykroyd, что надо определиться.. Но где правда?

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

Источник: [Только зарегистрированные пользователи могут видеть ссылки. ]

padding
Устанавливает значение полей вокруг содержимого элемента.

[Только зарегистрированные пользователи могут видеть ссылки. ]
А в спецификации написано так:

Свойства отступов: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' и 'padding'

Свойства полей: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin'

И кому верить?
Мне, кажется, логичнее 1й вариант..

**Zigzag** · 26.02.2007, 15:13

Originally posted by garA@Feb 26 2007, 11:04
Польностью согласен с Aykroyd, что надо определиться.. Но где правда?

Источник: [Только зарегистрированные пользователи могут видеть ссылки. ]

[Только зарегистрированные пользователи могут видеть ссылки. ]
А в спецификации написано так:
И кому верить?
Мне, кажется, логичнее 1й вариант..*
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

лично я всегда называл margin именно отступами, т.к. они находятся на внешней стороне блока. а поля (padding), как и на листе бумаги, находятся внутри!

**Aykroyd** · 26.02.2007, 16:07

Originally posted by garA@Feb 26 2007, 13:04
Можно..* Но начальство требует, чтобы сначала шел контент, а лишь потом все остальное.. Сами знаете, для чего нужны все эти "выкрутасы"..
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Знаю. И прекрасно Вас понимаю.
Может быть, конечно, мне в этом отношении проще, потому что я сам себе начальство...

А если серьезно, всегда приходится чем-то жертвовать. Либо основной контент вверху, либо код чище, короче и понятнее. Тем более, что из-за "некоторогобраузера" и так приходится идти на кучу всяческих ухищрений... А польза от "контент вверху", конечно, определенно есть. Но совсем небольшая...

Это исключительно моё субъективное мнение и разводить особые дискуссии на эту тему мне совсем не хочется...

Originally posted by garA@Feb 26 2007, 13:04
Мне тоже не нравиться плодить лишние сущности, но что поделать, если необходим эффект таблиц и чтобы контент был впереди..
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
В данном случае уход от лишних сущностей благодаря элементам <body> и <html> ни коим образом не отражается на "эффекте таблиц" и "контент впереди"...

Originally posted by garA@Feb 26 2007, 13:04
Согласен это личное дело каждого..
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
А то!

Глупо было бы, если бы не личное, а казенное...

Originally posted by garA@Feb 26 2007, 13:04
Да, код уменьшился многократно..*
Ну, а если отключить рисунки, что же мы у видим? Увидим, что колонки исчезли..*
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
И очень хорошо, что исчезли. Если кто-то любит браузить с отключенными изображениями – этот факт его ни коим образом не расстроит... Хочется даже провести параллели:
Ну, а если отключить стили, что же мы у видим?

Originally posted by garA@Feb 26 2007, 13:04
Польностью согласен с Aykroyd, что надо определиться.. Но где правда?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Слава Богу, что хоть в чем-то согласны...

Originally posted by garA@Feb 26 2007, 13:04
Но где правда?
И кому верить?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Originally posted by Zigzag@Feb 26 2007, 15:13
лично я всегда называл margin именно отступами, т.к. они находятся на внешней стороне блока. а поля (padding), как и на листе бумаги, находятся внутри!
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
ОБЪЯВЛЕНИЕ:
"Меняю шило на мыло. По договоренности."

ОБЪЯВЛЕНИЕ:
"Меняю часы на трусы. Возможны варианты."

**milo** · 04.03.2007, 12:15

еще вопрос: какие преимущества дает контент сверху?

**Zigzag** · 04.03.2007, 15:09

со слов известной минской seo-блогерши seobaby следует:

Zigzag (11:29:05 16/02/2007)
привет, выделишь мне минутку?

SeoBaby (11:29:17 16/02/2007)
одну

Zigzag (11:29:49 16/02/2007)
) пасиб, вопрос такой, правда ли что в дереве xhtml документа стоит блок с контентом поднять выше, чем меню?

Zigzag (11:29:56 16/02/2007)
для поисковиков так лучше?

SeoBaby (11:30:06 16/02/2007)
ну ты нашел чтоменя спрашивать....

Zigzag (11:30:16 16/02/2007)
=-O

Zigzag (11:30:35 16/02/2007)
ну так ты ж сео занимаешься, у кого спросить еще, у дизайнера?

SeoBaby (11:31:58 16/02/2007)
во первых я не знакома с xhtml

Zigzag (11:32:13 16/02/2007)
ну в html

Zigzag (11:32:16 16/02/2007)
это одно и тоже

Zigzag (11:32:25 16/02/2007)
ток синтаксис и правила xml

SeoBaby (11:32:26 16/02/2007)
во вторых, ладно.. не важно...

SeoBaby (11:32:38 16/02/2007)
зачем блок с контентом поднимать выше меню?

SeoBaby (11:32:44 16/02/2007)
ты мне сам объясни.

Zigzag (11:33:16 16/02/2007)
просто где-то краем уха слышал, что поисковикам контент повыше в теле документа пихать надо

SeoBaby (11:33:38 16/02/2007)
нет. он просматривает весь документ в целом.

SeoBaby (11:33:56 16/02/2007)
просто я не понимаю что значит блок контента запихнуть выше меню...

SeoBaby (11:34:08 16/02/2007)
ну то есть.. зачем)

SeoBaby (11:34:23 16/02/2007)
короче.. делай нормьный обычный сайт. такой чтобы самому было удобно.

SeoBaby (11:34:36 16/02/2007)
то главное правило сео.

Zigzag (11:34:48 16/02/2007)
<html>
<head>
</head>
<body>
<div>menu

</body>
</html

SeoBaby (11:35:02 16/02/2007)
ну пральна, зачем менять что то..

SeoBaby (11:35:16 16/02/2007)
ты ж не меняешьместами боди и хед

Zigzag (11:35:22 16/02/2007)
вот, типа если поменять в теле местами блок меню и контента, т.е. в дереве документа поднять контент вверх, то это лучше с точки зрения сео

SeoBaby (11:35:32 16/02/2007)
нет

Zigzag (11:35:34 16/02/2007)
боди и хед это другие вещи

Zigzag (11:35:43 16/02/2007)
ясно, пасиб, это все, что я хотел знать

SeoBaby (11:36:07 16/02/2007)
я те для этого... короче для... черт... преувеличения вот.

SeoBaby (11:36:56 16/02/2007)
вверзу лишь значимые слова. и то с умом.

SeoBaby (11:36:59 16/02/2007)
вверху

Zigzag (11:37:52 16/02/2007)
ясно

SeoBaby (11:38:53 16/02/2007)
тогда вперед

Zigzag (11:39:10 16/02/2007)
8-)[/quote]

**milo** · 04.03.2007, 18:10

как я понял смысла это почти никакого не имеет...

**milo** · 04.03.2007, 18:26

еще я все никак не могу понять зачем писать так:

Код:

* html #menu

разве это

Код:

#menu

не одно и то же?

**Zigzag** · 04.03.2007, 20:52

Originally posted by milo@Mar 4 2007, 16:26
[b]еще я все никак не могу понять зачем писать так:

Код:

* html #menu

это хак. правило, спрятанное за

Код:

 * html

увидит только iE6.0 и ниже

Тема: резиновый дизайн и меню с картинками

Опции темы

Поиск по теме

Отображение

Похожие темы

Дизайн меню

Резиновый флеш

Резиновый флеш

глюк с картинками во Flash ...

Проблема с ссылками-картинками

Ваши права