Верстка меню

710 сообщений

#17 лет назад

Помогите пожалуста. Необходимо отверстать меню так, чтобы текст выравнивался по левой границе, а цифры - по правой. Каждый пункт меню - это текстовая ссылка.

15 сообщений

#17 лет назад

<table width=300>
<tr><td align=left width=200><a href=#>Хиты продаж</a></td><td width=100 align=right>01</td></tr>
<tr><td align=left width=200><a href=#>Новые буклеты</a></td><td width=100 align=right>02</td></tr>
<tr><td align=left width=200><a href=#>Каталог цветов</a></td><td width=100 align=right>03</td></tr>
</table>

1090 сообщений

#17 лет назад

В принципе, да, но код можно сократить раз в шесть, если использовать стили.

710 сообщений

#17 лет назад

to svip
К сожалению код не верен. Цифры 01, 02 и т.д. тоже являются ссылкой (то есть "Хиты продаж 01" - это одна ссылка).

35 сообщений

#17 лет назад

Как Вам такой вариант?

<style type="text/css">


div#menucontainer {

 width: 300px;

}


a {

  padding: 5px 0px 5px 0px;

  display: block;

  text-decoration: none;

}


.number {

 float: right;

 margin: 0px;

}


</style>



</head>


<body>



<div id="menucontainer">



  <p class="number"> <a href="index1.html"> 01 </a></p> 

  <div><a href="index1.html"> пункт меню  </a></div> 


  <p class="number"> <a href="index2.html"> 02 </a></p> 

  <div><a href="index2.html"> пункт меню  </a></div>



</div>


</body>

710 сообщений

#17 лет назад

to Domus159
Уже интереснее. Но при наведении на часть ссылки (не важно, на текст или на цифру), вся строка должна выделяться цветом.

35 сообщений

#17 лет назад

Есть конечно несколько вариантов:

меняем в теле:

  <div class="menustring">

  <p class="number"> <a href="index1.html"> 01 </a></p> 

  <div><a href="index1.html"> пункт меню  </a></div> 

  </div>

и описываем новый класс:

div .menustring:hover {

 background: red;

}

Работает в Opera и FF, а вот IE поддерживает hover лишь для <a>
поэтому дальше идет javascript специально для IE... (на onmouseover)

35 сообщений

#17 лет назад

И еще вариант:

    <a href="index1.html"> <p class="number">  01 </p> 

  <div>пункт меню  </div> </a>

соотвественно стиль к нему

a:hover {background: red;}

Но... (без но уж не обошлось) код получается не валидный

так как вкладывать теги <div> и им подобные в <a> </a> НЕЛЬЗЯ.
Хотя вроде все работает

710 сообщений

#17 лет назад

Спасибо. Сразу не подумал про "display: block;"

35 сообщений

#17 лет назад

you are welcome

3563 сообщения

#17 лет назад

Domus159, +1, по чем верстка? =)

35 сообщений

#17 лет назад

19$

710 сообщений

#17 лет назад

Вопрос такой: как сделать так, чтобы диз не уменьшался меньше порогового значения (например 1000px) без использования javascript? В опере и мозиле работает min-width, а в IE он не пашет. Установка в коде <div width="1000px"> тоже не помогает.

Html:
<body id="body1">
<div id="w1004"></div>
<div id="header"></div>
</body>

css:
#w1004 {
width: 1004px;
height: 10px;
}
#header {
width: 100%;
height: 260px;
}

1410 сообщений

#17 лет назад

Без жабоскрипта - только распоркой

710 сообщений

#17 лет назад

Так <div id="w1004"></div> и есть распорка. Но в IE какой-то баг: при уменьшении размеров окна горизонтальный скролл появляется (из-за распорки), но header, чья ширина задана в процентах, рассчитывается из конечного размера окна. Единственный вариант - этот запихнуть всю верстку в таблицу в верхнюю ячейку, а распорку - в нижнюю.

1410 сообщений

#17 лет назад

Запихните и в хеадер распорку.

710 сообщений

#17 лет назад

Цитата ("ArtLab"):

Запихните и в хеадер распорку.

При верстке каждый второй блок такой и в каждый распорок не понапихаеш. Ладно, будем считать багом.

Тогда возникает вопрос - насколько я знаю, блочную верстку используют из-за того, что при загрузке информация выводится постепенно, по мере загрузки очередного блока. Если использовать таблицу - вывод информации будет происходить как при табличной верстке (после загрузки всей таблицы)?

1410 сообщений

#17 лет назад

На самом деле так делает только ИЕ. Остальные браузеры отображают не после загрузки содержимого, а постепенно. ИЕ как всегда отличился..

441 сообщение

#17 лет назад

HTML

<ul>

<li><a href="/link1/">Хиты продаж <span>01</span></a></li>

<li><a href="/link2/">Новые букеты <span>02</span></a></li>

<li><a href="/link3/">Каталог цветов<span>03</span></a></li>

</ul>

CSS
Основная идея:
a - display: block;
a span - display: block; float: right;

У a и a span, возможно, имеет смысл принудительно указать одинаковый line-height.

Не проверял, но точно знаю, что так сделать можно :)

По поводу min-width: в IE 5-ых версий можно использовать expression в стилях. Валидацию проходить не будет, но это не страшно (пуристы могут вынести в отдельный css-файл и подгружать его через conditional comments). Делаем так:

* html #container {

	width: expression(document.body.clientWidth < 801? "800px":"100%" );

}

1410 сообщений

#17 лет назад

Цитата ("sukebe"):

По поводу min-width: в IE 5-ых версий можно использовать expression в стилях. Валидацию проходить не будет, но это не страшно (пуристы могут вынести в отдельный css-файл и подгружать его через conditional comments). Делаем так:
* html #container {

	width: expression(document.body.clientWidth < 801? "800px":"100%" );

}

А expression по вашему не джаваскрипт?:-) Вопрос был:

Цитата:

Вопрос такой: как сделать так, чтобы диз не уменьшался меньше порогового значения (например 1000px) без использования javascript?

1 2

Последняя