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

Вид для печати

23.02.2007, 13:24
milo

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

Цитата:

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

ну, что ж, сами просили [Only registered and activated users can see links. Click Here To Register...]
вот:

Код:

<!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'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'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>

это почти то, что вам нужно.. дальше уж сами модифицируйте, как надо [Only registered and activated users can see links. Click Here To Register...]
23.02.2007, 16:03
milo

Цитата:

Originally posted by garA@Feb 23 2007, 09:38
[b]ну, что ж, сами просили* [Only registered and activated users can see links. Click Here To Register...]

поняли мои слова слишком буквально:)
пара вопросов возникла:
1.

Код:

min-height:100%;

во всех ли браузерах работает и что означает? примерно понимаю что это минимальная высота:), но описания нигде не встречал.
2. зачем?

Код:

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

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

1.

Цитата:

Код:

min-height:100%;

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

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

Код:

*html #outer{height:100%}

2.

Цитата:

зачем?

Код:

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

если коротко, то это нужно для "позиционирования" столбцов.. вот ссылка [Only registered and activated users can see links. Click Here To Register...] ознакомьтесь, потом станет чуть понятнее.. [Only registered and activated users can see links. Click Here To Register...]
3.

Цитата:

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

проще.. можете вставить.. [Only registered and activated users can see links. Click Here To Register...]

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

Цитата:

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

:hi:
24.02.2007, 13:02
Zigzag

[Only registered and activated users can see links. Click Here To Register...]
24.02.2007, 14:44
milo

спасибо, уже сделал. эта статья ([Only registered and activated users can see links. Click Here To Register...]) помогла
25.02.2007, 09:50
Aykroyd

Цитата:

Originally posted by milo@Feb 24 2007, 14:44
спасибо, уже сделал. эта статья ([Only registered and activated users can see links. Click Here To Register...]) помогла
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Вообще, данная тема является весьма интересной. [Only registered and activated users can see links. Click Here To Register...]
Вопрос реализации средствами CSS трехколоночного макета с боковыми колонками фиксированной ширины некоторое время назад очень будоражил умы многих известных людей. Предлагались разнообразные подходы к решению данной задачи... На мой взгляд, решение, описываемое в статье на [Only registered and activated users can see links. Click Here To Register...], не является оптимальным. На сегодняшний день все это можно смоделировать намного проще:

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.
Ну и, конечно же, возможны варианты...
:hi:

[attachment=5531:attachment]

[attachment=5532:attachment]
25.02.2007, 12:02
milo

Цитата:

Originally posted by Aykroyd@Feb 25 2007, 05:50
[b]На мой взгляд, решение, описываемое в статье на [Only registered and activated users can see links. Click Here To Register...], не является оптимальным.

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

Код:

#main {margin: 0px 200px;}

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

Код:

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

зачем выставлять значение высоты в 1%? и зачем еще раз определять марджины? видимо я еще много не знаю:)
25.02.2007, 12:44
Aykroyd

Цитата:

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

Код:

#main {margin: 0px 200px;}

это значит боковые отступы по 200 пекселей от ближайших элементов?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>

Немного неверное суждение.
Во-первых, не отступы, а поля. [Only registered and activated users can see links. Click Here To Register...] Отступами обычно называют padding-и. В принципе, конечно, это личное дело каждого – как что называть. Но лучше сразу определиться, дабы в последствии не запутаться.
Во-вторых, боковые поля по 200 пикселей не от ближайших элементов, а от границ родительского элемента (контейнера). В данном случае – от левой и правой границы блока content (блок main расположен именно в нем). Поскольку блок content имеет ширину в 100% и располагается в блоке <body>, он занимает всю ширину блока <body>. Далее: поскольку блок <body> располагается в блоке <html> и ширина блока <body> не задана явно, этот блок занимает по ширине все доступное ему пространство в блоке <html>, как и подобает, в принципе, любому блочному элементу в прямом потоке. А вот у блока <html> родителя нет... [Only registered and activated users can see links. Click Here To Register...] Это самый верхний элемент в иерархии. В данном случае он занимает всю ширину окна браузера.

В конечном итоге получается, что боковые поля по 200px для блока main рассчитываются от границ окна браузера. [Only registered and activated users can see links. Click Here To Register...]

Цитата:

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

Код:

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

зачем выставлять значение высоты в 1%? и зачем еще раз определять марджины? видимо я еще много не знаю:)
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>

Это специальный хак для "самизнаетекакогобраузера" .
В данном случае он предназначается для решения проблемы, которая называется [Only registered and activated users can see links. Click Here To Register...]. Вкратце вот в чем суть:

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

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

Цитата:

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

Можно.. [Only registered and activated users can see links. Click Here To Register...] Но начальство требует, чтобы сначала шел контент, а лишь потом все остальное.. Сами знаете, для чего нужны все эти "выкрутасы"..

Цитата:

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

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

Цитата:

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

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

Цитата:

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

Да, код уменьшился многократно.. :hi:
Ну, а если отключить рисунки, что же мы у видим? Увидим, что колонки исчезли.. [Only registered and activated users can see links. Click Here To Register...]

Цитата:

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

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

Цитата:

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

Источник: [Only registered and activated users can see links. Click Here To Register...]

Цитата:

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

[Only registered and activated users can see links. Click Here To Register...]
А в спецификации написано так:

Цитата:

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

Цитата:

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

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

Цитата:

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

Источник: [Only registered and activated users can see links. Click Here To Register...]

[Only registered and activated users can see links. Click Here To Register...]
А в спецификации написано так:
И кому верить?
Мне, кажется, логичнее 1й вариант..* :hi:
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]

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

Цитата:

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

[/quote]
Знаю. И прекрасно Вас понимаю.
Может быть, конечно, мне в этом отношении проще, потому что я сам себе начальство... [Only registered and activated users can see links. Click Here To Register...] А если серьезно, всегда приходится чем-то жертвовать. Либо основной контент вверху, либо код чище, короче и понятнее. Тем более, что из-за "некоторогобраузера" и так приходится идти на кучу всяческих ухищрений... А польза от "контент вверху", конечно, определенно есть. Но совсем небольшая... [Only registered and activated users can see links. Click Here To Register...] Это исключительно моё субъективное мнение и разводить особые дискуссии на эту тему мне совсем не хочется...

Цитата:

Originally posted by garA@Feb 26 2007, 13:04
Мне тоже не нравиться плодить лишние сущности, но что поделать, если необходим эффект таблиц и чтобы контент был впереди..
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

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

Цитата:

Originally posted by garA@Feb 26 2007, 13:04
Согласен это личное дело каждого..
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
А то! [Only registered and activated users can see links. Click Here To Register...] Глупо было бы, если бы не личное, а казенное...

Цитата:

Originally posted by garA@Feb 26 2007, 13:04
Да, код уменьшился многократно..* :hi:
Ну, а если отключить рисунки, что же мы у видим? Увидим, что колонки исчезли..* [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

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

Цитата:

Originally posted by garA@Feb 26 2007, 13:04
Польностью согласен с Aykroyd, что надо определиться.. Но где правда?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Слава Богу, что хоть в чем-то согласны... [Only registered and activated users can see links. Click Here To Register...]

Цитата:

Originally posted by garA@Feb 26 2007, 13:04
Но где правда?
И кому верить?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]

Цитата:

Originally posted by Zigzag@Feb 26 2007, 15:13
лично я всегда называл margin именно отступами, т.к. они находятся на внешней стороне блока. а поля (padding), как и на листе бумаги, находятся внутри!
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

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

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

:hi:
04.03.2007, 12:15
milo

еще вопрос: какие преимущества дает контент сверху?
04.03.2007, 15:09
Zigzag

со слов известной минской 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]
04.03.2007, 18:10
milo

как я понял смысла это почти никакого не имеет...
04.03.2007, 18:26
milo

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

Код:

* html #menu

разве это

Код:

#menu

не одно и то же?
04.03.2007, 20:52
Zigzag

Цитата:

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

Код:

* html #menu

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

Код:

* html

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