Выпадающее меню и таблица

hAhol · November 25, 2009

Приветствую.

Имеется любопытное выпадающее меню на CSS/JQuery. А у меня страничка с таблицей на всю область экрана.

При верстке я получаю - таблица закрывает собой меню. Если установить таблице (или её содержимому) z-index, равный скажем "-1", то я вижу меню. Но только элементы-папки. Содержимого нет (равно как и стрелочки вниз). И по наведению/клику не разворачивается (выпадает). Если же не ставить таблице/содержимому z-index, а задать его для менюшки (отдельно в стилях моей страницы либо в тексте css-файла, являющегося частью меню) скажем в значение "5", то не отображается опять же.

Вопрос в том, где мне порыться, где покопать, чтоб смочь сверстать как необходимо (менюшка, полностью функциональная, сверху всего содержимого)

Вот CSS моей странички:


.ch1 {
position: absolute;
left: 0%;
top: 0%;
width: 50%;
height: 50%;
z-index: 1;
}
.ch2 {
position: absolute;
left: 50%;
top: 0%;
width: 50%;
height: 50%;
z-index: 1;
}
.ch3 {
position: absolute;
left: 0%;
top: 50%;
width: 50%;
height: 50%;
z-index: 1;
}
.ch4 {
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 50%;
z-index: 1;
}
#web5 {
display: none;
}
#web6 {
display: none;
}
#web7 {
display: none;
}
#web8 {
display: none;
}
A {
 color: #808080;
}
A:visited {
 color: #808080;
}
#t {
position: absolute;
left: 0px;
top: 0px;
border: 0px;
}
.pic {
width: 100%;
height: 100%
border: 0px;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

Первые 4 класса (chX) - для задания размеров ячеек таблицы (их 4, таблица 2х2); t - это собственно сама таблица; pic - для масштабирования изображений под размер/разрешение браузера/монитора (цепляется за размер div'а).

В таком виде я вижу менюшку только доли секунды, пока грузится страничка. Потом таблица полностью перекрывает её.

Валидаторы ругаются на менюшку - "End tag for ... omitted, but OMITTAG NO was specified", всего две ошибки таких - на тег li и тег ul. Есть еще ошибки на скрипт LightWindow, теги caption. Но это всё стандартно :huh: . Больше ошибок нет. Доктайп -

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

Отдельно от моей странички менюшка работает, абсолютно так, как мне нужно. А вот объединить не получается. Заранее спасибо.

Clayton · November 25, 2009

а html-код?

hAhol · November 25, 2009


<!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>
<link rel="shortcut icon" href="images/favicon.ico"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<title>...</title>

<script type="text/javascript">
function refr() {
    var bk = document.getElementById("t");
    if(!bk) return false;
    var el = bk.getElementsByTagName("img");
    if(!el) return false;
    var ell = el.length;
    var d = new Date();
    var par = d.getHours() + "" + d.getMinutes();
    for(var i = 0; i < ell; i++) {
        el[i].src = el[i].src + "?par=" + par;
  }
}
var tm = setInterval("refr()", 1000);
</script>

<style type="text/css">
.ch1 {
position: absolute;
left: 0%;
top: 0%;
width: 50%;
height: 50%;
z-index: 1;
}
.ch2 {
position: absolute;
left: 50%;
top: 0%;
width: 50%;
height: 50%;
z-index: 1;
}
.ch3 {
position: absolute;
left: 0%;
top: 50%;
width: 50%;
height: 50%;
z-index: 1;
}
.ch4 {
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 50%;
z-index: 1;
}
#web5 {
display: none;
}
#web6 {
display: none;
}
#web7 {
display: none;
}
#web8 {
display: none;
}
A {
 color: #808080;
}
A:visited {
 color: #808080;
}
#t {
position: absolute;
left: 0px;
top: 0px;
border: 0px;
}
.pic {
width: 100%;
height: 100%
border: 0px;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
</head>

<body onload="refr();" bgcolor="#808080">

<table id="t">
<tr><td><div class="ch1">
<div id="web1"><a href="1.html" params="lightwindow_width=740,lightwindow_height=580,lightwindow_loading_animation=
true,lightwindow_type=external" class="lightwindow" title="" caption=""><img src="" title="" alt="" class="pic"/></a></div>
</div>
</td>

<td>
<div class="ch2">
<div id="web2"><a href="2.html" params="lightwindow_width=740,lightwindow_height=580,lightwindow_loading_animation=
true,lightwindow_type=external" class="lightwindow" title="" caption=""><img src="" title="" alt="" class="pic"/></a></div>
</div>
</td></tr>

<tr><td><div class="ch3">
<div id="web3"><a href="3.html" params="lightwindow_width=740,lightwindow_height=580,lightwindow_loading_animation=
true,lightwindow_type=external" class="lightwindow" title="" caption=""><img src="" title="" alt="" class="pic"/></a></div>
</div>
</td>

<td><div class="ch4">
<div id="web4"><a href="4.html" params="lightwindow_width=740,lightwindow_height=580,lightwindow_loading_animation=
true,lightwindow_type=external" class="lightwindow" title="" caption=""><img src="" title="" alt="" class="pic"/></a></div>
</div>
</td></tr>
</table>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>

<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.5</a></li>
  <li><a href="#">Sub Item 1.6</a></li>
  <li><a href="#">Sub Item 1.7</a></li>
  <li><a href="#">Sub Item 1.8</a></li>
  </ul>
</li>

<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Sub Item 2.2</a></li>
  <li><a href="#">Sub Item 2.3</a></li>
  <li><a href="#">Sub Item 2.4</a></li>
  <li><a href="#">Sub Item 2.5</a></li>
  <li><a href="#">Sub Item 2.6</a></li>
  <li><a href="#">Sub Item 2.7</a></li>
  <li><a href="#">Sub Item 2.8</a></li>
  </ul>
</li>

<li><a href="#">Folder 3</a>
  <ul>
  <li><a href="#">Sub Item 3.1</a></li>
  <li><a href="#">Sub Item 3.2</a></li>
  <li><a href="#">Sub Item 3.3</a></li>
  <li><a href="#">Sub Item 3.4</a></li>
  <li><a href="#">Sub Item 3.5</a></li>
  <li><a href="#">Sub Item 3.6</a></li>
  <li><a href="#">Sub Item 3.7</a></li>
  <li><a href="#">Sub Item 3.8</a></li>
  </ul>
</li>

<li><a href="#">Folder 4</a>
  <ul>
  <li><a href="#">Sub Item 4.1</a></li>
  <li><a href="#">Sub Item 4.2</a></li>
  <li><a href="#">Sub Item 4.3</a></li>
  <li><a href="#">Sub Item 4.4</a></li>
  <li><a href="#">Sub Item 4.5</a></li>
  <li><a href="#">Sub Item 4.6</a></li>
  <li><a href="#">Sub Item 4.7</a></li>
  <li><a href="#">Sub Item 4.8</a></li>
  </ul>
</li>

<br style="clear: left" />
</div>
</body>
</html>

Clayton · November 25, 2009

Чувак, что нужно? меню должно быть в таблице, или просто сверху всего конетнта?

Clayton · November 25, 2009

Короче, не знаю что у тебя там в таблице должно быть, вот код:

<!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>
<link rel="shortcut icon" href="images/favicon.ico"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<title>...</title>

<script type="text/javascript">
function refr() {
	var bk = document.getElementById("t");
	if(!bk) return false;
	var el = bk.getElementsByTagName("img");
	if(!el) return false;
	var ell = el.length;
	var d = new Date();
	var par = d.getHours() + "" + d.getMinutes();
	for(var i = 0; i < ell; i++) {
		el[i].src = el[i].src + "?par=" + par;
  }
}
var tm = setInterval("refr()", 1000);
</script>

<style type="text/css">
.ch1 {
position: absolute;
left: 0%;
top: 0%;
width: 50%;
height: 50%;
z-index: 1;
}
.ch2 {
position: absolute;
left: 50%;
top: 0%;
width: 50%;
height: 50%;
z-index: 1;
}
.ch3 {
position: absolute;
left: 0%;
top: 50%;
width: 50%;
height: 50%;
z-index: 1;
}
.ch4 {
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 50%;
z-index: 1;
}
#web5 {
display: none;
}
#web6 {
display: none;
}
#web7 {
display: none;
}
#web8 {
display: none;
}
A {
 color: #808080;
}
A:visited {
 color: #808080;
}
#t {
position: relative;
left: 0px;
top: 0px;
border: 0px;
width:800px;
margin: 0 auto;
z-index:1;
}
.pic {
width: 100%;
height: 100%
border: 0px;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
#myslidemenu {position:relative; z-index:2;)
</style>

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
</head>

<body onload="refr();" bgcolor="#808080">
<div id="myslidemenu" class="jqueryslidemenu">
<ul>

<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.5</a></li>
  <li><a href="#">Sub Item 1.6</a></li>
  <li><a href="#">Sub Item 1.7</a></li>
  <li><a href="#">Sub Item 1.8</a></li>
  </ul>
</li>

<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Sub Item 2.2</a></li>
  <li><a href="#">Sub Item 2.3</a></li>
  <li><a href="#">Sub Item 2.4</a></li>
  <li><a href="#">Sub Item 2.5</a></li>
  <li><a href="#">Sub Item 2.6</a></li>
  <li><a href="#">Sub Item 2.7</a></li>
  <li><a href="#">Sub Item 2.8</a></li>
  </ul>
</li>

<li><a href="#">Folder 3</a>
  <ul>
  <li><a href="#">Sub Item 3.1</a></li>
  <li><a href="#">Sub Item 3.2</a></li>
  <li><a href="#">Sub Item 3.3</a></li>
  <li><a href="#">Sub Item 3.4</a></li>
  <li><a href="#">Sub Item 3.5</a></li>
  <li><a href="#">Sub Item 3.6</a></li>
  <li><a href="#">Sub Item 3.7</a></li>
  <li><a href="#">Sub Item 3.8</a></li>
  </ul>
</li>

<li><a href="#">Folder 4</a>
  <ul>
  <li><a href="#">Sub Item 4.1</a></li>
  <li><a href="#">Sub Item 4.2</a></li>
  <li><a href="#">Sub Item 4.3</a></li>
  <li><a href="#">Sub Item 4.4</a></li>
  <li><a href="#">Sub Item 4.5</a></li>
  <li><a href="#">Sub Item 4.6</a></li>
  <li><a href="#">Sub Item 4.7</a></li>
  <li><a href="#">Sub Item 4.8</a></li>
  </ul>
</li>
</ul>
<br style="clear: left" />
</div>
<table id="t">
<tr><td><div class="ch1">
<div id="web1"><a href="1.html" params="lightwindow_width=740,lightwindow_height=580,lightwindow_loading_animation=
true,lightwindow_type=external" class="lightwindow" title="" caption=""><img src="" title="" alt="" class="pic"/></a></div>
</div>
</td>

<td>
<div class="ch2">
<div id="web2"><a href="2.html" params="lightwindow_width=740,lightwindow_height=580,lightwindow_loading_animation=
true,lightwindow_type=external" class="lightwindow" title="" caption=""><img src="" title="" alt="" class="pic"/></a></div>
</div>
</td></tr>

<tr><td><div class="ch3">
<div id="web3"><a href="3.html" params="lightwindow_width=740,lightwindow_height=580,lightwindow_loading_animation=
true,lightwindow_type=external" class="lightwindow" title="" caption=""><img src="" title="" alt="" class="pic"/></a></div>
</div>
</td>

<td><div class="ch4">
<div id="web4"><a href="4.html" params="lightwindow_width=740,lightwindow_height=580,lightwindow_loading_animation=
true,lightwindow_type=external" class="lightwindow" title="" caption=""><img src="" title="" alt="" class="pic"/></a></div>
</div>
</td></tr>
</table>

</body>
</html>

Имей ввиду, что тот css, который в стилях меню я не трогал. Только твой html-файл.

1) Пользуйся валидатором, у тебя не закрыт ul был

2) В твоем случае не зачем абсолютным позиционированием пользоваться. Я сделал относительным - нечего не закрывает =)

hAhol · November 25, 2009

Просто сверху. А таблица (как единственный элемент контента) под ним. Как бы я могу сделать, что меню будет наверху. Но оно не функционально - не выпадают списки с элементами папок, однако код менюшки не меняется, только игра с z-index. Все мои идеи (z-index: х, position: х) разбились о неработоспособность меню. Потому решился спросить тут.

Clayton · November 25, 2009

Ну на данном этапе проблема решилась, или еще есть?

hAhol · November 25, 2009

Большое спасибо.

Меню стало сверху, но выпадающие списки отсутствуют. Как будто заданы папки (элементы Folder) но нет суб-элементов (тех, по 8 в каждой папке). И опять же - не отображаются даже стрелки около названия папок. Т.е., складывается впечатление, что браузер считает список суб-элементов отсутствующим. Хотя отдельно от моей странички - все работает (и после Вашей поправки насчет тега, валидна).

Я также после опробывания Вашего совета попробовал изменить css самого меню:


.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 392px;
margin:0 auto;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
z-index: 100;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
z-index: 100;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
z-index: 100;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
z-index: 100;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
z-index: 100;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
z-index: 100;
}

Для изображений стрелок, элементов первого уровня и элементов всех уровней вложенности добавил "z-index: 100". Такой совет, в том числе, мелькал в блоге, где я увидел данное меню. Только там речь шла об одновременной работе двух таких менюшек. Однако мне не помогает - вложенные списки отсутствуют. Я вижу только элементы самого верхнего уровня.

Edited November 25, 2009 by hAhol

Clayton · November 25, 2009

значит зэтындекс 100 убирай, и все что ты там изменил, запакуй в архив все свои файлы и выложи куданить.

Edited November 25, 2009 by Clayton

hAhol · November 25, 2009

Да, действительно - z-index можно убрать. Я еще покопался - проблема из-за некой несовместимости данной менюшки с LightWindow. Если я удаляю строки, подключающие его файлы - все работает, менюшка там, где должна быть и работает так, как должна.

Так что большое Вам спасибо, вопрос попросту меняется. Буду придумать, как их подружить. Есть идеи - это вообще возможно?

Clayton · November 25, 2009

Хм... Мне кажется конфликтов быть не должно... Слишком много подключений скриптов у тебя, я бы просмотрел, и постарался объединить.

Этот вопрос лучше в разделе для явы задай, мож кто-нить из спецов поможет :huh:

Попробуй кстать лайтбокс еще, я его юзаю, вроде никогда еще проблем не было, функционал схожий

hAhol · November 25, 2009

Проблема решилась использованием ShadowBox'а. Большое спасибо за помощь :huh:

Clayton · November 25, 2009

Хм, круто, только что-то скорости я не заметил рахваленой... Лайтбокс куда живее работает...

hAhol · November 25, 2009

Я не в курсе :huh: Лайтбокс и тинибокс были отклонены потому, что не могут того, что мне надо. Потому пришел к лайтвиндоу. А скорость шэдоу меня вполне устраивает, тем более она настраивается, как я понял.

Clayton · November 25, 2009

А какая цель у тебя?

hAhol · November 25, 2009

Можно я здесь же спрошу про саму менюшку?

Вот её css:


.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
min-width: 392px;
width: 392px;
max-width: 500px;
margin:0 auto;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

Мои изменения - min-width, max-width и значение width в описании первого класса. Мне нужно, чтоб полосочка, на которой располагается меню (первый класс её описывает, как я понимаю) автоматически изменяла ширину под содержимое, что там будет. Ну и не зависела от разрешения/размера. Как это сделать?

Вместо всех width'ов можно вставить float:left, и это решает задачу, но тогда меню не по центру...

И я не могу пользоваться связкой left: 50% + margin-left: -xx, так как ширина не фиксирована

Edited November 25, 2009 by hAhol

Clayton · November 25, 2009

т.е. и что б по центру, и что б ширина была не фиксированная, и тянулась от контента? К чему такая задача

DDX · November 25, 2009

А это чистый CSS или с JS? Я похожее меню в страницу вставлял, только вот задержки перед открытием меню не наблюдаю, как такого результата добились?

Clayton · November 25, 2009

какого именно эффекта? менюха не тормозит, галерея просто не очень быстрая - та что он выбрал, мне так показалось)

DDX · November 25, 2009

Чтобы меню выпадало с замедлением и с замедлением исчезало, последнее важней, но в общем и без этого не плохо.

Clayton · November 25, 2009

Ну да, это делается с JQuery )

DDX · November 25, 2009

Жаль, а то я JS вообще не знаю, вот и пришлось делать меню на HTML/CSS.

Clayton · November 25, 2009

я тоже не знаю) юзайте готовые скрипты по началу...

DDX · November 25, 2009

А если попробовать это делать на VBS, то нормально получится? Мне кажется визуал бейсик (скрипт) проще будет в освоении, я как то давно ставил его, покрутил чего то, простенькие вещи получаются вроде, мне кажется меню на нём слепить не сложно будет.

hAhol · November 25, 2009

Экспериментирование - самое главное Как правило именно там рождается истина. Или очередной велосипед :-D

По теме - да, мне желательно резиновый width и по центру верхнего края экрана. Первое - из-за того, что данное меню на другом разрешении выглядит не так - расползается на две строчки (последний Folder переносится на "новую" строку). А по центру - из-за эргономики и любви к симметрии У меня там преимущественно картинки в ячейках, если не по центру (а как в случае "float: left" слева) то одна из ячеек частично перекрывается. Я понимаю, очень мало, но тем не менее. Не эстетично. Плюс заказчик тоже кривит личность...

Clayton · November 25, 2009

Экспериментирование - самое главное Как правило именно там рождается истина. Или очередной велосипед :-D
По теме - да, мне желательно резиновый width и по центру верхнего края экрана. Первое - из-за того, что данное меню на другом разрешении выглядит не так - расползается на две строчки (последний Folder переносится на "новую" строку). А по центру - из-за эргономики и любви к симметрии У меня там преимущественно картинки в ячейках, если не по центру (а как в случае "float: left" слева) то одна из ячеек частично перекрывается. Я понимаю, очень мало, но тем не менее. Не эстетично. Плюс заказчик тоже кривит личность...

ну диржЫ:

<!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>Untitled Document</title>
<style>
body {margin:0 100px 0 100px;}
div {margin: 0 auto; background:#999; width:100%;}
</style>
</head>

<body>
<div>sdfsdf</div>
</body>
</html>

Sign In

Выпадающее меню и таблица

Question

Link to comment

Share on other sites

28 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information