Подпункты левой части каркаса

@Golovastik · Регистрация: 25.05.2009

Author24 — интернет-сервис помощи студентам

Не получается сделать подпункты в левой части сайта.
Пробую так не выходит.

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title></title></head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<table width="972" align="center" border="1" class="tab" >
<tr>
  <td colspan="2">
  <img src="img/header.jpg"> 
  </td>
       </tr>
       
       
<tr >
<!---------Левое меню-------------->
<!--2 строка 1 -ый столбец-->
 
  <td width="178" height="500px" valign="top">
 
  <!--Внутренняя таблица для меню-->
  <p class="menu">
  <table align="center" border="1" >
  <tr><td >Главная </td></tr>
  <tr><td>Фото</td> </tr> 
  <tr><td>Видео</td> </tr>
  <tr> <td>Контакты </td></tr>
  </table>
  </p>
 
   </td>
 
 
 
 
 
  <td width="788"> ggggg</td>
  </tr>
 
  
<tr>
<td colspan="2">  <img src="img/footer.jpg"> </td>
</tr>
</table>
</body>
</html>

style.css

CSS

body{background-image:url(img/bg.gif);}
 
.tab{border-collapse:collapse; background:white;}
 
p.menu{ border-collapse:collapse;
padding:100px; 
}

Общий вид и расстояние хочу сделать таким как это меню.

@MaD1z · 27.07.2010, 01:04

Вот подправил:

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title></title>
 
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
 
<table width="972" align="center" border="1" class="tab" >
<tr>
  <td colspan="2">
  <img src="img/header.jpg"> 
  </td>
       </tr>
           
           
<tr >
<!---------Левое меню-------------->
<!--2 строка 1 -ый столбец-->
 
  <td width="178" height="500px" valign="top">
 
  <!--Внутренняя таблица для меню-->
  
  <!--Меню-->
 
  <div id="rrr">
    
  <table class="tab1" height="25" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td  align="center"><b>Навигация</b></td>
  </tr>
</table>
  <table class="tab2" width="100%" align="center" cellpadding="0" cellspacing="0"  >
  <tr><td>Главная </td></tr>
  <tr><td>Фото</td> </tr> 
  <tr><td>Видео</td> </tr>
  <tr><td>Контакты </td></tr>
  </table>
  
  </div>
 
  <!--Конец меню-->
 
   </td>
 
 
 
 
 
  <td width="788"> ggggg</td>
  </tr>
 
  
<tr>
<td colspan="2">  <img src="img/footer.jpg"> </td>
</tr>
</table>
</body>
</html>

CSS

body{background-image:url(img/bg.gif); font-family:Arial, Helvetica, sans-serif;}
 
.tab{background:white;}
 
#rrr{ margin:30 5 0 5;}
 
.tab1{margin: 0 0 5 0; background: #C00; color:#FFF; font-size:12px; height:2em;}
 
.tab2 td{font-size:12px; border:1px #999 solid; padding:3 3 3 3;}

@Golovastik · 27.07.2010, 01:28 **[ТС]**

Объясните, что означает вот такое:

Код

margin: 0 0 5 0;

и такое:

Код

padding:3 3 3 3;}

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

Добавлено через 43 секунды
Такой код будет индексироваться поисковиками гугл,и другими?

@MaD1z · 27.07.2010, 01:59

CSS

1	margin: 0 0 5 0;

означает отступ снаружи блока. цифры значат следущее: 0(сверху) 0(справа) 5(снизу) 0(слева), это все в пикселях.

CSS

1	padding:3 3 3 3;

означает отступ внутри блока. аналогично с предыдущим.

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

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

Такой код будет индексироваться поисковиками гугл,и другими?

будет.

@Golovastik · 27.07.2010, 02:05 **[ТС]**

Я слышал что создают менюшки с использованием xml, скажите xml часто используют без него меню в осоновном на сайтах-порталах не делают?

@MaD1z · 27.07.2010, 02:08

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

посмотрите в общих чертах, если Вам интересно тут

@Alorian · 27.07.2010, 06:40

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

CSS

1	margin: 0 0 5 0;

означает отступ снаружи блока. цифры значат следущее: 0(сверху) 0(справа) 5(снизу) 0(слева), это все в пикселях.

Суть вы правильно указали, но то что это все в пикселях — неверно.
В спецификации четко сказано:

The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.

То есть только после нуля можно не указывать еденицы измерения.
Так же советую посмотреть вот эту статью — 15 верных путей чтобы сломать ваш CSS

Про меню.
Меню лучше всего создавать с помощью списков. Это намного удобнее и нагляднее.
Меню созданное с помощью списков будет выглядеть примерно так:

HTML5

<ul>
    <li><a href="/">Первый пункт меню</a></li>
    <li><a href="/">Второй пункт меню</a></li>
    <li><a href="/">Третий пункт меню</a></li>
    <li><a href="/">Четвертый пункт меню</a></li>
</ul>

По умолчанию такое меню не очень красиво смотрится. Об основных принципах работы со списками и о том как сделать меню более привлекательным можно прочитать здесь — Укрощение списков

@MaD1z · 27.07.2010, 11:04

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

Суть вы правильно указали, но то что это все в пикселях — неверно.
В спецификации четко сказано:
The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.
То есть только после нуля можно не указывать еденицы измерения.

Спасибо, однако, на практике размеры были в пикселях (Опера, Мозила 100% понимают без приписки px после нуля), и моей задачей было добиться требуемого внешнего вида внеся изменения в существующий код, а не написании с нуля оптимизированного)

Vovan-VE · 27.07.2010, 14:25

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

margin:30 5 0 5;

Надо всегда (кроме нуля) указывать единицы измерения!

CSS

1	... { margin:30px 5px 0 5px; }

Т.е. у нуля можно, но не обязательно.

@Golovastik · 27.07.2010, 17:08 **[ТС]**

А если я хочу сделать такое как на картинке, маркированным списком как вы предлагаете, но у меня перед каждым словом будет что-то, а если я хочу просто в первой строке, второй, 3-ей, как на картинке.

@Alorian · 28.07.2010, 06:43

Golovastik, Перечитайте свой пост. Потом перескажите каждую мысль/вопрос в отдельном абзаце. Чем яснее свои мысли выражаешь, тем больше вероятность что их поймут и ответят.

На какой картинке? Если вы про картинку из первого поста, то с помощью списков можно сделать в точности такое меню. Внутри тэгов <li> можно помещать любые другие тэги html.

@Golovastik 11 / 11 / 2 Регистрация: 25.05.2009 Сообщений: 435
	27.07.2010, 01:28 [ТС]	3
	Объясните, что означает вот такое: Код margin: 0 0 5 0; и такое: Код padding:3 3 3 3;} Добавлено через 3 минуты 2)Скажите, а разве правильно оформлять навигацию как одну таблицу подпункты 2-ую таблицу? Так все делают на сайтах когда меню создают? Добавлено через 43 секунды Такой код будет индексироваться поисковиками гугл,и другими? 0

@Golovastik 11 / 11 / 2 Регистрация: 25.05.2009 Сообщений: 435
	27.07.2010, 02:05 [ТС]	5
	Я слышал что создают менюшки с использованием xml, скажите xml часто используют без него меню в осоновном на сайтах-порталах не делают? 0

@MaD1z 8 / 8 / 0 Регистрация: 23.10.2009 Сообщений: 53
	27.07.2010, 02:08	6
	его часто использую в динамических скриптах и подобное, это как бы сказать, тоже язык, имеющий свои хорошие и не очень стороны. посмотрите в общих чертах, если Вам интересно тут 0

@MaD1z 8 / 8 / 0 Регистрация: 23.10.2009 Сообщений: 53
	27.07.2010, 11:04	8
	Сообщение от Alorian Суть вы правильно указали, но то что это все в пикселях — неверно. В спецификации четко сказано: The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional. То есть только после нуля можно не указывать еденицы измерения. Спасибо, однако, на практике размеры были в пикселях (Опера, Мозила 100% понимают без приписки px после нуля), и моей задачей было добиться требуемого внешнего вида внеся изменения в существующий код, а не написании с нуля оптимизированного) 0

@Golovastik 11 / 11 / 2 Регистрация: 25.05.2009 Сообщений: 435
	27.07.2010, 17:08 [ТС]	10
	А если я хочу сделать такое как на картинке, маркированным списком как вы предлагаете, но у меня перед каждым словом будет что-то, а если я хочу просто в первой строке, второй, 3-ей, как на картинке. 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	28.07.2010, 06:43	11
	Golovastik, Перечитайте свой пост. Потом перескажите каждую мысль/вопрос в отдельном абзаце. Чем яснее свои мысли выражаешь, тем больше вероятность что их поймут и ответят. На какой картинке? Если вы про картинку из первого поста, то с помощью списков можно сделать в точности такое меню. Внутри тэгов <li> можно помещать любые другие тэги html. 0