X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Сайт на дивах
people2010
people2010
Topic Starter сообщение 8.9.2010, 13:52; Ответить: people2010
Сообщение #1


Вот решил попробовать создать меню на дивах,страно, но чего-то не выходит, хотя читал что нужно использовать float:left и float:right для навигации с правой и левой стороны, у меня что-то вообще не то получилось. Подскажите пожалуйста, как его исправить.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="content" />
<meta name="keywords" content="content"  />
<title>Главная</title>
<style type="text/css">
/*Стили для сайта*/
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
#right{float:right; width:213px; height:34px; background:url(img/videoyroki.png) no-repeat;}
#left{float:left; width:213px; height:34px; background:url(img/videoyroki.png) no-repeat;}
#center{}
* {margin:0; padding:0;}
  body{min-width:770px;}
img {border: none;}

</style>
</head>

<body class="marginpadding">

<!--  -->
<div class="shapkafon">
<div class="shapka"></div>
</div>

<!--  -->
<div id="left"><div>
<div>Пункт 1</div>
<div>Пункт 2</div>
<div>Пункт 3</div>
<div>Пункт 4</div>
<div>Пункт 5</div>
<div>Пункт 6</div>
<div>Пункт 7</div>
<div>Пункт 8</div>
<div>Пункт 9</div>
<div>Пункт 10</div>

<div id="right"><div>
<div>Пункт 1</div>
<div>Пункт 2</div>
<div>Пункт 3</div>
<div>Пункт 4</div>
<div>Пункт 5</div>
<div>Пункт 6</div>
<div>Пункт 7</div>
<div>Пункт 8</div>
<div>Пункт 9</div>
<div>Пункт 10</div>


</body>
</html>


Хочу сделать чтоб с двух сторон меню было с правой и с левой стороны и не выходит.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LifeUP
LifeUP
сообщение 8.9.2010, 14:47; Ответить: LifeUP
Сообщение #2


меню создаются на <ul></ul>

Вариант по линию:
<style type="text/css">
* {padding:0; margin:0;}
ul, li {list-style:none;}
ul {}
li {
    float:left;
    margin:2px;
    background-color:#BACEB5;
}
li a {
    display:block;
    padding:2px 5px;
}
</style>

<ul>
    <li><a href="#">Ссылка 1</a></li>
    <li><a href="#">Ссылка 2</a></li>
    <li><a href="#">Ссылка 3</a></li>
    <li><a href="#">Ссылка 4</a></li>
    <li><a href="#">Ссылка 5</a></li>
</ul>


Вариант в столбик:
<style type="text/css">
* {padding:0; margin:0;}
ul, li {list-style:none;}
ul { width:100px;}
li {
    margin:2px;
    background-color:#BACEB5;
}
li a {
    display:block;
    padding:2px 5px;
}
</style>
<ul>
    <li><a href="#">Ссылка 1</a></li>
    <li><a href="#">Ссылка 2</a></li>
    <li><a href="#">Ссылка 3</a></li>
    <li><a href="#">Ссылка 4</a></li>
    <li><a href="#">Ссылка 5</a></li>
</ul>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
people2010
people2010
Topic Starter сообщение 9.9.2010, 20:19; Ответить: people2010
Сообщение #3


Столкнулся ещё с небольшой трудностью, не получаеться разместить рамку, таким образом, нарисовал на фото.Вот код.
Файл index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Главная</title>
</head>
<body>
<div class="shapkafon">
<div class="shapka"></div>
</div>

<div id="left">

<div class='title'></div>

<div class="menu ramka" id="ikonka_menu1"><a href="#">Новости жизни</a></div>
<div><a href="#">Про клоунов из Москвы</a></div>
<div><a href="#">О жизни Таиси Лапиной</a> </div>
<div><a href="#">О Ефросиньи</a></div>
<div><a href="#">Про Деда Мороза</a></div>
<div><a href="#">Платёжные системы</a></div>
<div><a href="#">Работа с видео и аудио</a></div>
<div><a href="#">О жизни Мистер Бина</a></div>
<div><a href="#">Кто такой Джин?</a></div>
<div><a href="#">Создание моб.телефонов</a></div>
<div><a href="#">Какие бывают зайцы</a></div>
<div><a href="#">Психология</a></div>
<div><a href="#">Красота</a></div>
<div><a href="#">Спорт и здоровье</a></div>
<div><a href="#">Бизнес дяди Пети</a></div>
<div><a href="#">Сетевой маркетинг</a></div>
<div><a href="#">О детях из Украины</a></div>
</div>
</div> <!-- Закрываем id="left"-->
<div id="right">
<div class='title'></div>
<div>Пункт 1</div>
<div>Пункт 2</div>
<div>Пункт 3</div>
<div>Пункт 4</div>
<div>Пункт 5</div>
<div>Пункт 6</div>
<div>Пункт 7</div>
<div>Пункт 8</div>
<div>Пункт 9</div>
<div>Пункт 10</div>
</div>
<div id="center">
<p></p>
</div>
<div id="footer"></div>
</body>
</html>

Файл style.css
/*Стили для сайта*/
* {
margin:0;
padding:0;
}
body {
min-width:770px;
}
img {
border: 0;
}
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
#right{float:right; width:213px; }
#left{float:left; width:213px; border:1px solid black;}
.ramka{border:1px solid black; }
.title{height:34px; background:url(img/videoyroki.png) no-repeat;}
#center{margin-left:213px; margin-right:213px;}
#footer{background:url(img/footer.jpg); repeat-x; height:45px; clear:both;}
.menu{font-family:Verdana, sans-serif; font-size:14px;
padding:3px 0px 5px 18px; margin:6px; }
.menu a{text-decoration:none; }
#ikonka_menu1{background:url(img/p1.jpg) no-repeat ; margin-left:7px; }
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
people2010
people2010
Topic Starter сообщение 9.9.2010, 21:47; Ответить: people2010
Сообщение #4


________
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
people2010
people2010
Topic Starter сообщение 11.9.2010, 15:48; Ответить: people2010
Сообщение #5


1)Вот опробовал сократить, возникла проблема, не знаю как сократить вот эти строки, то есть именно вот это:
5px center no-repeat;

из этого:
#ikonka_menu1{background:url(img/p13.jpg) 5px center no-repeat;

Как оформить правильно чтоб не было дублирования?

2)Не знаю как правильно сделать чтоб при наведении мышкой на один из пунктов меню, пункт меню делался белым. Дело в том, что
я для всего меню задал фон: .menu{background-color:#f7f8f6;}
А как сделать чтоб именно на определённый навести пункт и он менял свой цвет, не получается никак.
Вот переделанный мною код:
Файл index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Главная</title>
</head>
<body>
<div class="shapkafon">
<div class="shapka"></div>
</div>

<div id="left" >
<div class='title'></div>
<div class="menu">
<div id="ikonka_menu1"> <a href="#">Пункт</a></div>
<div id="ikonka_menu2"> <a href="#">Пункт</a></div>
<div id="ikonka_menu3"> <a href="#">Пункт</a> </div>
<div id="ikonka_menu4"> <a href="#">Пункт</a></div>
<div id="ikonka_menu5"> <a href="#">Пункт</a></div>
<div id="ikonka_menu6"> <a href="#">Пункт</a></div>
<div id="ikonka_menu7"> <a href="#">Пункт</a></div>
<div id="ikonka_menu8"> <a href="#">Пункт</a></div>
<div id="ikonka_menu9"> <a href="#">Пункт</a></div>
<div id="ikonka_menu10"><a href="#">Пункт</a></div>
<div id="ikonka_menu11"><a href="#">Пункт</a></div>
<div id="ikonka_menu12"><a href="#">Пункт</a></div>
<div id="ikonka_menu13"><a href="#">Пункт</a></div>
<div id="ikonka_menu14"><a href="#">Пункт</a></div>
<div id="ikonka_menu15"><a href="#">Пункт</a></div>
<div id="ikonka_menu16"><a href="#">Пункт</a></div>
<div id="ikonka_menu17"><a href="#">Пункт</a></div>
</div>
</div> <!--Закрываем id="left"-->
<div id="right">
<div class='title'></div>
<div>Пункт 1</div>
<div>Пункт 2</div>
<div>Пункт 3</div>
<div>Пункт 4</div>
<div>Пункт 5</div>
<div>Пункт 6</div>
<div>Пункт 7</div>
<div>Пункт 8</div>
<div>Пункт 9</div>
<div>Пункт 10</div>
</div>
<div id="center">
<p>Привет мир!</p>
</div>

<div id="footer"></div>
</body>
</html>


Файл style.css
/*Стили для сайта*/
* {
margin:0;
padding:0;
}
body {
min-width:770px;
}
img {
border: 0;
}
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
#right{float:right; width:213px; }
#left{float:left; width:213px; }

#center{margin-left:213px; margin-right:213px;}
.title{height:34px; background:url(img/videoyroki.png) no-repeat;
border:1px solid black;}

#footer{background:url(img/footer.jpg); repeat-x; height:45px; clear:both;}
.menu div{font-family:Verdana, sans-serif; font-size:12px;
padding:3px 0px 5px 37px; padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
}

.menu a{text-decoration:none; background-color:#f7f8f6;}
.menu{background-color:#f7f8f6;}

.menu a:visited{color:black; }


/*-----------------Иконки для меню---------------------------*/

#ikonka_menu1{background:url(img/p1.jpg) 5px center no-repeat;
}

#ikonka_menu2{background:url(img/p2.jpg) 5px center no-repeat;

}

#ikonka_menu3{background:url(img/p3.jpg) 5px center no-repeat;
}

#ikonka_menu4{background:url(img/p4.jpg) 5px center no-repeat;

}

#ikonka_menu5{background:url(img/p5.jpg) 5px center no-repeat;

}

#ikonka_menu6{background:url(img/p6.jpg) 5px center no-repeat;
}

#ikonka_menu7{background:url(img/p7.jpg) 5px center no-repeat;
}

#ikonka_menu8{background:url(img/p8.jpg) 5px center no-repeat;

}

#ikonka_menu9{background:url(img/p9.jpg) 5px center no-repeat;

}

#ikonka_menu10{background:url(img/p10.jpg) 5px center no-repeat;

}

#ikonka_menu11{background:url(img/p11.jpg) 5px center no-repeat;

}

#ikonka_menu12{background:url(img/p12.jpg) 5px center no-repeat;

}


#ikonka_menu13{background:url(img/p13.jpg) 5px center no-repeat;

}

#ikonka_menu14{background:url(img/p14.jpg) 5px center no-repeat;

}

#ikonka_menu15{background:url(img/p15.jpg) 5px center no-repeat;

}

#ikonka_menu16{background:url(img/p16.jpg) 5px center no-repeat;
}

#ikonka_menu17{background:url(img/p17.jpg) 5px center no-repeat;

}



/*--------------------------------------------------------------*/


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Ваш сайт блокирует Роскомнадзор?
 28 hollywooduk 5850 Вчера, 20:56
автор: 100ftd
Открытая тема (нет новых ответов) Прототипирование + дизайн + вёрстка = красивый и эффективный сайт под ключ
 0 bunneh 453 16.4.2024, 18:02
автор: bunneh
Открытая тема (нет новых ответов) Если в сайт с одними ключами, которые там долго, добавить новую рубрику с новыми ключами
 2 Tutich 1319 16.4.2024, 8:27
автор: Tutich
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлы[Услуги] Баннер/Графика/Сайт
 240 FillPlay 180595 31.3.2024, 22:58
автор: FillPlay
Открытая тема (нет новых ответов) Тысячи ботовых переходов на сайт
 18 Suagaring 4622 26.3.2024, 21:42
автор: c4p1t4l15t


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 24.4.2024, 0:00

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet