Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Подпункты левой части каркаса


Автор: Golovastik 26.7.2010, 01:59
Не получается сделать подпункты в левой части сайта.
Пробую так не выходит.
Код

<!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
Код

body{background-image:url(img/bg.gif);}

.tab{border-collapse:collapse; background:white;}

p.menu{ border-collapse:collapse;
padding:100px; 
}


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

Автор: bazzjr 26.7.2010, 11:18
Вот тут накидал по быстрому пример кода:


Код

<style>
.menu{list-style:none; width:178px/*width-можо указывать а можно нет*/}
    .menu li{list-style:none; margin:4px 0; padding:2px 5px; border:#9A9A9A     solid 1px; background:#F6F6F6; font-weight:bold}
        .menu li a{text-decoration:none; color:#333} .menu li a:hover{font-weight:bold; text-decoration:none; color:#CCC}
    .menu .nav{background:#A72E37; color:#FFF; text-align:center}
</style>
<body>

<!---------Левое меню-------------->
<!--2 строка 1 -ый столбец-->
  <td width="178px" height="500px" valign="top">
  <!--Внутренняя таблица для меню-->
                <ul class="menu">
                  <li class="nav">НАВИГАЦИЯ</li>
                 <li><a href="#">Главная</a></li>
                 <li><a href="#">Статьи</a></li>
                 <li><a href="#">Уроки</a></li>
                 <li><a href="#">О нас</a></li>
                </ul>
   </td>
  <td width="788"> ggggg</td>
  </tr>
 
  
<tr>
<td colspan="2">  <img src="img/footer.jpg"> </td>
</tr>
</table>

Автор: Golovastik 26.7.2010, 16:12
А таблицей нельзя,только списком делают такое?

Автор: bazzjr 26.7.2010, 16:58
таблицей - это полный изврат!

можно и пешком пойти из Ростова до Москвы, только этого никто не делает  smile 

Автор: Golovastik 26.7.2010, 17:34
Код

   <div class="u">Menu1</div>
    <div class="u"> Menu2</div>
    <div class="u"> Menu3</div>
    <div class="u">Menu4 </div>


Скажите а так делают люди или нет?

Автор: bazzjr 26.7.2010, 17:48
Golovastik, люди делают очень разными способами. Все дело в том, что желает добиться веб мастер от сайта, и каково требование заказчика.

Автор: ksnk 26.7.2010, 18:22
Golovastik, так люди не делают. Причина проста. Поисковики в выдаче найденных результатов выкидывают сайтовые стили напрочь и если сайт в результатах гугла выглядит отвратительно, то и народ к нему не потянется  smile 

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

Автор: Golovastik 26.7.2010, 21:50
Хорошо,как сделать через нумерованный список,только чтоб был как на моей картинке выше, просто если создаёшь список, там перед каждым словом списка,какой-то значок или кружочек или цифра 1, а как убрать, чтоб списком сделать как на картинке?

Автор: bazzjr 27.7.2010, 10:29
Golovastik, а вы мой пример кода не смотрели?

Автор: Golovastik 27.7.2010, 15:58
Я встретил у вас такой тег.
Код

list-style

Вы не скажите что оно даёт я так и не понял и где его применять?

Автор: bazzjr 27.7.2010, 17:18
Почему просто нельзя взять мой пример и использовать?

    
list-style - говорит браузеру как отображать список

Автор: Golovastik 27.7.2010, 20:31
Пробую просто по разному пробовать создавать.

Встретил ещё такой стиль:
Код


#coolmenu a{
font: bold 13px Verdana; /*Шрифт текста*/
padding: 2px; /*Внутренний отсутп текста ссылки от краев ячейки*/
padding-left: 4px;/*Внутренний отсутп текста ссылки от левого края ячейки*/
display: block;
width: 100%; /*Ширина ячейки*/
color: #000000;  /*Цвет текста*/
text-decoration: none; /*Подчеркивание у ссылок - нет*/
border-bottom: 1px solid gray;
}

html>body #coolmenu a{ 
width: auto;
}

#coolmenu a:hover{
background-color: #cccccc; /*Фоновый цвет ячейки при наведение курсора*/
color: #ffffff;  /*Цвет текста при наведении курсора*/
}   


Скажите вот в первом случае 
Код

#coolmenu a{ //Это объявление идентификатора для тега а

А вот здесь:
Код

#coolmenu a:hover{

Снова свойства идентификатором колменю для тега а задаются, это что переопределение происходит или что?

Автор: bars80080 27.7.2010, 20:35
Цитата(Golovastik @  27.7.2010,  20:31 Найти цитируемый пост)
Снова свойства идентификатором колменю для тега а задаются, это что переопределение происходит или что?

если однажды открыть книжку по сss, то мало того, что исчезнут вопросы разъясняемые в на первых страницах, так ещё и откроете для себя много нового

http://stepbystep.htmlbook.ru/?id=58

Автор: Golovastik 28.7.2010, 01:11
Попробовал сам с нуля создать меню. Вылаживать много кода будет. Вот как сделал.
http://www.sharemania.ru/0162693
Проблема такая, у меня уже есть созданное меню,но нижняя граница каждой строки таблицы меню толстая, это произошло из-за стыковки верхней и нижней границы каждой ячейки,после  каждой строки ячейки, не могу убрать, подскажите пож. как.

2)Проблема с расположением меню синего в браузере Ие, в др. нормально толкьо в Ие меню синее идёт как-т овправо и немного длинее чем меню с подпунктами ниже. подскажите как одолеть это?
Заранее благодарю.

Автор: subudai 28.7.2010, 08:37
Golovastik
нарисуй в фотошоп меню и кинь сюда psd формат. я его тебе сверстаю так как надо

Автор: Golovastik 29.7.2010, 00:39
Извиняюсь, по поводу меню, когда я использовал margin-top:-2px; вроде как на картинке,первая менюшка которая отображается во всех браузерах кроме браузера ИЕ,
если у величить минуса, тогда в Ие одном будет тонкая граница, а в других юраузерах толстая, что-то кручусь так и не вышло.
Вот вылаживаю,запустите в Ие, а потом в др. браузерах.
http://www.sharemania.ru/0288983

Автор: Golovastik 29.7.2010, 01:13
Я слышал что можно как-то условными комментариями хтмл это сделать, но как не знаю.

Автор: Golovastik 29.7.2010, 01:36
Наконец-то сработало, прочитал статейку про комментарии, заработало, спс, буду всегда теперь коментарии использовать. 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)