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

Golovastik

Дата 26.7.2010, 01:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 389
Регистрация: 19.7.2009

Репутация: нет
Всего: 0

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

Код


<!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; 
}

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

Присоединённый файл ( Кол-во скачиваний: 21 )

clip_image002.jpg 10,27 Kb

bazzjr

Дата 26.7.2010, 11:18 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

Вот тут накидал по быстрому пример кода:

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 389
Регистрация: 19.7.2009

Репутация: нет
Всего: 0

А таблицей нельзя,только списком делают такое?

bazzjr

Дата 26.7.2010, 16:58 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

таблицей - это полный изврат!

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

Golovastik

Дата 26.7.2010, 17:34 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 389
Регистрация: 19.7.2009

Репутация: нет
Всего: 0

Код


   <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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

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

ksnk

Дата 26.7.2010, 18:22 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

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

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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Golovastik

Дата 26.7.2010, 21:50 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 389
Регистрация: 19.7.2009

Репутация: нет
Всего: 0

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

bazzjr

Дата 27.7.2010, 10:29 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

Golovastik, а вы мой пример кода не смотрели?

Golovastik

Дата 27.7.2010, 15:58 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 389
Регистрация: 19.7.2009

Репутация: нет
Всего: 0

Я встретил у вас такой тег.

Код


list-style

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

bazzjr

Дата 27.7.2010, 17:18 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

Почему просто нельзя взять мой пример и использовать?

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

Golovastik

Дата 27.7.2010, 20:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 389
Регистрация: 19.7.2009

Репутация: нет
Всего: 0

Пробую просто по разному пробовать создавать.

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

Код



#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 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Цитата(Golovastik @ 27.7.2010, 20:31

)

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

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

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

Golovastik

Дата 28.7.2010, 01:11 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 389
Регистрация: 19.7.2009

Репутация: нет
Всего: 0

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

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

Это сообщение отредактировал(а) Golovastik - 28.7.2010, 01:12

subudai

Дата 28.7.2010, 08:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 37
Регистрация: 26.7.2010

Репутация: нет
Всего: нет

Golovastik
нарисуй в фотошоп меню и кинь сюда psd формат. я его тебе сверстаю так как надо

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »