Javascript-форум - Меню на дивах

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Меню на дивах (https://javascript.ru/forum/xhtml-html-css/11702-menyu-na-divakh.html)

Golovastik

08.09.2010 14:02

Меню на дивах

Вложений: 2

Вот решил попробовать создать меню на дивах,страно, но чего-то не выходит, хотя читал что нужно использовать 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>

Хочу сделать чтоб с двух сторон меню было с правой и с левой стороны и не выходит.

ksa	08.09.2010 14:21

Цитата:

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

Хочу сделать чтоб с двух сторон меню было с правой и с левой стороны

Оно?

<!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">
/*Стили для сайта*/
* {
	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; height:34px; background:url(img/videoyroki.png) no-repeat;}
#left{float:left; width:213px; height:34px; background:url(img/videoyroki.png) no-repeat;}
#center{}
</style>
</head>
<body class="marginpadding">
<div class="shapkafon">
<div class="shapka"></div>
</div>
<div id="left">
	<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="right">
	<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>
</body>
</html>

Golovastik

08.09.2010 14:34

1)Извиняюсь, что-то не могу въехать, а что вы изменили чтоб 2-ая картинка полетела вправо и прижалась туда?

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

Golovastik

08.09.2010 14:37

Ещё вопрос, скажите, это я разместил левое меню и правое, а как добавить текст в центр?

ksa	08.09.2010 14:39

Цитата:

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

а что вы изменили чтоб 2-ая картинка полетела вправо и прижалась туда?

Твой вариант...

<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="left">
	<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>

Т.е. ты блок закрыл. А его содержимое разместил ниже...

ksa	08.09.2010 14:46

Цитата:

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

а как добавить текст в центр?

Как вариант...

<!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">
/*Стили для сайта*/
* {
	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; 

.item {
	height:34px; 
	background:url(img/videoyroki.png) no-repeat;
}
#center{
	margin-left: 213px;
	margin-right: 213px;
}
</style>
</head>
<body class="marginpadding">
<div class="shapkafon">
<div class="shapka"></div>
</div>
<div id="left">
	<div class='item'>Пункт 1</div>
	<div class='item'>Пункт 2</div>
	<div class='item'>Пункт 3</div>
	<div class='item'>Пункт 4</div>
	<div class='item'>Пункт 5</div>
	<div class='item'>Пункт 6</div>
	<div class='item'>Пункт 7</div>
	<div class='item'>Пункт 8</div>
	<div class='item'>Пункт 9</div>
	<div class='item'>Пункт 10</div>
</div> 
<div id="right">
	<div class='item'>Пункт 1</div>
	<div class='item'>Пункт 2</div>
	<div class='item'>Пункт 3</div>
	<div class='item'>Пункт 4</div>
	<div class='item'>Пункт 5</div>
	<div class='item'>Пункт 6</div>
	<div class='item'>Пункт 7</div>
	<div class='item'>Пункт 8</div>
	<div class='item'>Пункт 9</div>
	<div class='item'>Пункт 10</div>
</div>
<div id='center'>
	<p>content</p>
</div>
</body>
</html>

Golovastik

08.09.2010 15:04

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

<!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=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="description" content="content" />
<meta name="keywords" content="content"  />
<title>Главная</title>
</head>
<body class="marginpadding">
<div class="shapkafon">
<div class="shapka"></div>
</div>
<div class="item"></div>
<div id="left ">
    <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 class="item"></div>
<div id="right ">
	<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">
Привет мир!
</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; }
.item{height:34px; background:url(img/videoyroki.png) no-repeat;
}
#center{margin-left:213px; margin-right:213px;}

ksa	08.09.2010 15:11

Цитата:

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

только опять правая часть меню переместилась в левую.

У тебя там "лишний" блок затясался... :)

</div> 

<div class="item"></div>
<div id="right ">

Golovastik

08.09.2010 15:14

Нет, вы не поняли, слева, должна быть картинка и ниже её 10 пунктов и справа та же картинка и 10 пунктов, а по центру Привет Мир, в этом загвоздка.

ksa	08.09.2010 15:21

Оно?

<!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" />
<title>Главная</title>
</head>
<body class="marginpadding">
<div class="shapkafon">
	<div class="shapka"></div>
</div>
<div id='container'>
	<div id="left">
		<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="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>
</body>
</html>

/*Стили для сайта*/
* {
    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; }
.title{height:34px; background:url(img/videoyroki.png) no-repeat;
}
#center{margin-left:213px; margin-right:213px;}

Golovastik

08.09.2010 15:27

Скажите, а где описан этот идентификатор в стилях?
#container?

ksa	08.09.2010 15:41

Цитата:

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

а где описан этот идентификатор в стилях?
#container?

В том варианте что он есть сейчас, ничего в стилях ему писать не нужно... Вот если появятся какие-то еще задумки - возможно придется написать что-то и ему. :)

Golovastik

08.09.2010 16:50

Извиняюсь, как-то не ясно, а как вы используете <div id='container'>
не описывая его в стилях?
Каким образом происходит переход другого меню на правую сторону?

Golovastik

08.09.2010 18:16

Ещё проблема с футером,копирайтом то есть не получается разместить его правильно,чтоб он было ниже 2-ух колонок.

ksa	08.09.2010 18:35

Цитата:

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

Извиняюсь, как-то не ясно, а как вы используете <div id='container'>
не описывая его в стилях?

Т.к. пока хватает его дефолтных стилей...

Цитата:

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

Каким образом происходит переход другого меню на правую сторону?

Он это делает согласно спецификации... Т.е. по другому он просто неможет. :)

ksa	08.09.2010 18:36

Цитата:

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

Нарисуй на картинке как ты его хочешь расположить...

Golovastik

08.09.2010 19:14

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

ksa	09.09.2010 11:28

Цитата:

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

Вот такое вообще хотел

Как вариант...

<!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" />
<title>Главная</title>
</head>
<body class="marginpadding">
<div class="shapkafon">
	<div class="shapka"></div>
</div>
<div id='container'>
	<div id="left">
		<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="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>
<div id='footer'></div>
</body>
</html>

/*Стили для сайта*/
* {
    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; }
.title{height:34px; background:url(img/videoyroki.png) no-repeat;
}
#center{margin-left:213px; margin-right:213px;}
#footer {
    clear: both;
    height: 100px;
    border: 1px solid;
}

Golovastik

09.09.2010 13:29

Вложений: 1

Спасибо, надеюсь что вот это свойство clear: both;
во всех браузерах будет работать.
Вот архив, который я выложил на бесплатный хост и попробовал воспроизвести сайт и получилась проблема с кодировкой, не скажете, что можно сделать вот вроде всё правильно написал.

Вот если поставить такую строку:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
или поставтить такую строку:
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
Отображает кракозябрами, что можно сделать?
Вот сайт: http://xai.hut2.ru

ksa	09.09.2010 14:30

Golovastik, все примеры, что были тут вот в этой кодировке

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />

Golovastik

09.09.2010 17:19

Странно,вроде заработало.

Golovastik

09.09.2010 20:03

Вложений: 2

Столкнулся ещё с небольшой трудностью, не получаеться разместить рамку, таким образом, нарисовал на фото.Вот код.
Файл 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; }

Golovastik

09.09.2010 21:03

Пришлось ещё в один контейнер див засунуть,каждый пункт меню.

Golovastik

09.09.2010 21:44

Ой, или тут где-то ошибка, что-то правая навигация улетела влево и оно какая-то очень странное вышло. Подскажите как исправить.

<!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 ramka'></div> 

<div class="ramka">
<div class="menu" id="ikonka_menu1"><a href="#">Пунтк 1</a></div>
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1/a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a> </div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1/a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</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>

Файл стилей

Код:

/*Стили для сайта*/

* {

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

.ramka{border:1px solid #CCCCCC;}

.ramka:hover{background-color:#CCFFCC;}

.title{height:34px; background:url(img/videoyroki.png) no-repeat;

border:1px solid black;}

#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; 

}

ksa	09.09.2010 21:47

Цитата:

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

Пришлось ещё в один контейнер див засунуть,каждый пункт меню.

Ну и напрасно... У ДИВов ведь есть еще и отступы. ;)

Golovastik

09.09.2010 21:52

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

ksa	09.09.2010 21:57

Это пример с бордюром...

<html>
<head>
<style>
* {
	margin: 0;
	padding: 0;
}
#menu {
	width: 200px;
}
.item {
	margin: 5px;
	border: 1px solid;
}
</style>
</head>
<body>
<div id='menu'>
	<p class='item'>Item 1</p>
	<p class='item'>Item 2</p>
	<p class='item'>Item 3</p>
</div>
</body>
</html>

ksa	09.09.2010 21:59

Цитата:

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

Что-то вообще каша вышла

Значит откатывайся до предыдущего рабочего варианта. После чего опять пробуй что-то делать, но пошагово.
Т.о. можно понять что сделало кашу. ;)

Golovastik

10.09.2010 00:11

Вложений: 1

Попробовал не добавлять дополнительного контейнера див, а написать так в коде.

<!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=utf-8" />
<title>Главная</title>
</head>
<body>
<div class="shapkafon">
	<div class="shapka"></div>
</div>

	<div id="left" >
		<div class='title'></div>
	    <div class="menu" id="ikonka_menu1" ><a href="#">С новым годом</a></div>
	    <div><a href="#">Пункт1</a></div>
    
	</div> 
	<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>

/*Стили для сайта*/
* {
    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;}
.ramka{border:1px solid #CCCCCC;}
.ramka:hover{background-color:#CCFFCC;}
.title{height:34px; background:url(img/videoyroki.png) no-repeat;
border:1px solid black; border-bottom:0px;}
#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;  }
.menu a{text-decoration:none; }
#ikonka_menu1 {background:url(img/p1.jpg) no-repeat; 
border:1px solid black;  }

Получается что нельзя никак сдвинуть картинку, она прислонилась и никак не получается ею двигать.

Golovastik

10.09.2010 00:19

Всё понял, надо было вот так написать:
#ikonka_menu1 {background:url(img/p1.jpg) 5px center no-repeat;
border:1px solid black; }

Golovastik

10.09.2010 00:35

Вложений: 1

Хочу сделать чтоб именно вся область прямоугольника именно фон, закрашивался а не только ссылка, а получается закрашивается только ссылка при наведении.
#ikonka_menu1 a:hover{background-color:#CCFFFF;}
И так тоже не хочет.
#left a:hover{background-color:#CCFFFF;}

Не получается сделать так чтоб был фон одного цвета, а на нём картинка и текст, а при наведении
фон другого цвета, проблема, что закрашивается только область текста а не всё вместе, а всё вместе,кроме фото и текста не закрашивается, я имею ввиду вся ячейка,кроме картинки на фоне и текста на фоне.

ksa	10.09.2010 08:57

Цитата:

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

Получается что нельзя никак сдвинуть картинку, она прислонилась и никак не получается ею двигать.

Т.е. ты начинаешь обычный набор ДИВов плавно превращать в маркированый список... :) Хотя с него-то и нужно было начать сразу.

Вообше ты так странно используеш селекторы... :( Логика их появления мне вообще не понятна...

ksa	10.09.2010 09:07

Цитата:

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

Хочу сделать чтоб именно вся область прямоугольника именно фон, закрашивался а не только ссылка

Как вариант...

<!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>
<title>test</title>
<style>
#box {
	width: 200px;
}
#box > a {
	display: block;
	text-decoration: none;
}
#box > a:hover {
	background-color: red;
}
</style>
</head>
<body>
<div id='box'>
	<a href='#'>Test</a>
</div>
</body>
</html>

Golovastik

10.09.2010 16:51

Вложений: 1

Вот вроде сделал как я хотел, но вот хотел спросить. Посмотрите пожалуйста на файл стилей.

Цитата:

/*Стили для сайта*/
* {
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{font-family:Verdana, sans-serif; font-size:12px;
padding:3px 0px 5px 37px; }
.menu a{text-decoration:none; }
.menu a:visited{color:black;}
/*-----------------Иконки для меню---------------------------*/
#ikonka_menu1{background:url(img/p1.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
background-color:#f7f8f6;
}

#ikonka_menu2{background:url(img/p2.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC;border-bottom:0px;
background-color:#f7f8f6;
}

#ikonka_menu3{background:url(img/p3.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
background-color:#f7f8f6;
}

#ikonka_menu4{background:url(img/p4.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC;border-bottom:0px;
background-color:#f7f8f6;
}

#ikonka_menu5{background:url(img/p5.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
background-color:#f7f8f6;
}

#ikonka_menu6{background:url(img/p6.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
background-color:#f7f8f6;
}

#ikonka_menu7{background:url(img/p7.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
background-color:#f7f8f6;
}

#ikonka_menu8{background:url(img/p8.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
background-color:#f7f7f7;
}

#ikonka_menu9{background:url(img/p9.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
background-color:#f7f8f6;
}

#ikonka_menu10{background:url(img/p10.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
background-color:#f7f7f7;
}

#ikonka_menu11{background:url(img/p11.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC;border-bottom:0px;
background-color:#f7f8f6;
}

#ikonka_menu12{background:url(img/p12.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
background-color:#f7f8f6;
}

#ikonka_menu13{background:url(img/p13.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
background-color:#f7f8f6;
}

#ikonka_menu14{background:url(img/p14.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
background-color:#f7f8f6;
}

#ikonka_menu15{background:url(img/p15.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC;border-bottom:0px;
background-color:#f7f8f6;
}

#ikonka_menu16{background:url(img/p16.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
background-color:#f7f8f6;
}

#ikonka_menu17{background:url(img/p17.jpg) 5px center no-repeat;
padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
background-color:#f7f7f7;
}

#ikonka_menu1:hover{background-color:white;}

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

Это для каждого пункта меню теперь писать строку:
#ikonka_menu1:hover{background-color:white;}
Чтоб фон менялся при наведении?

ksa	10.09.2010 20:15

Цитата:

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

Это для каждого пункта меню теперь писать строку

Вообще-то существуют селекторы классов для описания чего-то однотипного. ;)

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

Golovastik

10.09.2010 21:43

На моём коде ,подскажите пож. как надо написать правильно, а то не сильно ясно, как в моё случаи это можно сделать.

Golovastik

11.09.2010 15:39

Вложений: 1

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

Цитата:

ksa	13.09.2010 09:05

Цитата:

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

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

Как вариант (с красным, с белым аналогично)...

<html>
<head>
<style>
#box {
	width: 100px;
	height: 20px;
	border: 1px solid;
}
.on {
	background-color: red;
}
</style>
</head>
<body>
<div id='box' onmouseover='this.className="on"' onmouseout='this.className=""'>
</div>
</body>
</html>

ksa	13.09.2010 09:10

Цитата:

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

1)Вот опробовал сократить, возникла проблема, не знаю как сократить вот эти строки, то есть именно вот это:

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

Это т.н. краткая запись... Вот "полная".

mySelector {
    background-image: url(img/p2.jpg);
    background-position-x: 5px;
    background-position-y: center;
    background-repeat: no-repeat;
}

Часовой пояс GMT +3, время: 04:37.