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

Страница 1 из 4

Последняя »

Показывать 40 сообщений этой темы на одной странице

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

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

Страница 1 из 4

Последняя »

Показывать 40 сообщений этой темы на одной странице