горизонтальное меню списком на всю ширину

Chas · 26.03.2007, 22:28

вопрос такой.
как сделать горизонтальное меню списком, которое растягивалось на всю ширину экрана?
т.е. есть,например, список и стиль:

Код:

<div class="m2">
  <ul>
    <li><a href="#">Item1</a></li>
	<li><a href="#">Item2</a></li>
	<li><a href="#">Item3</a></li>
  </ul>
</div>  

<style>
.m2 ul {
list-style:none;
padding:0;
margin:0;
width:100%;
}

.m2 ul li {
display:inline;
margin:2px; padding:4px; background:#FF0000;
width:100%;
}
</style>

(код выдуман из головы за пять секунд, но ручаюсь, что он выглядит как горизонтальный список)
Как заставить эту недоменюшку растянутся на всю ширину свободного пространства, ну, т.е. заставить выглядить, примерно так

Код:

<table width="100%" border="0" cellspacing="4" cellpadding="2">
  <tr>
    <td bgcolor="#FF0000"><a href="#">Item1</a></td>
    <td bgcolor="#FF0000"><a href="#">Item2</a></td>
    <td bgcolor="#FF0000"><a href="#">Item3</a></td>
  </tr>
</table>

ну это я просто пытаюсь прошарить в верстке стилями и переписать свои некоторые старые вещи под такую верстку.

All87 · 27.03.2007, 05:57

Унивирсально можно только с помощью 2 цсс, но это не вариант, тк даже мазила не хавает его по вогу.
А так

Код:

.m2 ul li {
display:inline;
float:left;
margin:2px; padding:4px; background:#FF0000;
width:33%;
}

т.е смыслл понятен, что универсальности не добиться,
а жель что 2 цсс еще нераспространен..
counter-increment: counter;
Вот этот стиль в качестве параметра counter принимает любое название переменной типом интежер, и является своеобразным счетчиком, думаю была бы непроблема считать цссом размер, вот только в мазиле он всегда 1 выдает ((, в 7 ие не тестил, тк без поддержки мазилы смысла поддержки 7 ие невижу

KidsKilla · 27.03.2007, 14:09

1) не 2й, а 3й. ксс2 ффокс держит замечательно (а так же большую часть ксс3, только вот св-ва с приставкой -moz-), опера с вебкитом тоже (-o-, -webkit-, -khtml-).

2) display:inline;
float:left;
взаимоисключающие правила. т.е. при флоате дисплей ВСЕГДА будет блочным. учите матчасть =)

All87 · 27.03.2007, 17:11

Цитата:

Сообщение от KidsKilla

2) display:inline;
float:left;
взаимоисключающие правила. т.е. при флоате дисплей ВСЕГДА будет блочным. учите матчасть =)

)) Да ошибочка выйшла

, ведь действительно.. кстати, я заметил такую фишку, что после того как флоатом поставишь, дисплей вообще указывать ненуно (так же как и с клиаром), он автоматом блоком становится 0_o (вроде бы, как я понял)

Цитата:

Сообщение от KidsKilla

1) не 2й, а 3й. ксс2 ффокс держит замечательно (а так же большую часть ксс3, только вот св-ва с приставкой -moz-), опера с вебкитом тоже (-o-, -webkit-, -khtml-).

Да.. Я тож так думал. или может, или я опять ошибаюсь, как тебе вот такой пример

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Creating a list with markers</TITLE>
     <STYLE type="text/css">
	  LI:before { 
	      display: marker;
	      content: counter(mycounter, lower-roman) ".";
	      counter-increment: mycounter;
	  }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> This is the first item.
      <LI> This is the second item.
      <LI> This is the third item.
    </OL>
  </BODY>
</HTML>

Заметь используются 2 новых свойства -
content: что поддержуется мазилой (Это контент который всегда будет выводится класс|тег : bfore {} || класс|тег : after)
counter-increment: что тоже как бы ошибки и невыдает, но свой методы не
поддерживает, сама посебе объявляет [ <identifier> <integer>? ]+ | none | inherit

В маем случае был интересен интежер
counter(а,б) - принимает в качестве параметров как бы последнние значение счетчика, и формат списка.
короче все это можно почитать вот тута сцылка
На экран по вогу должно выводить

Код:

 This is a long preceding
        paragraph ...
      
   i.   This is the first item.
  ii.   This is the second item.
 iii.   This is the third item.

        This is a long following
        paragraph ...

Логически так и должно, да че там логика, тут ВОГ
но в мазилевыводит вот что

Код:

 This is a long preceding paragraph ...

   1. i. This is the first item.
   2. i. This is the second item.
   3. i. This is the third item. 

This is a long following paragraph ...

Вот..
Возможно я в чемто ошибаюсь, если это так, то поставь на путь истенный плиз