Форум PHP программистов

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Golovastik

8.09.2010 - 14:08

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

Хочу сделать чтоб с двух сторон меню было с правой и с левой стороны и не выходит.
http://www.sharemania.ru/0222192
http://ipicture.ru/uploads/100908/2JfPOsZ2UO.jpg

Спустя 20 минут, 58 секунд (8.09.2010 - 13:29) трамонтана написал(а):

читая название темы если честно почему

то ожидал увидеть в теме что то типа "хочу создать сайт на дивах..не получается, помогите"

<!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}
#left{float:left}
#right div{width:213px; height:34px; background:url(img/videoyroki.png) no-repeat;}
#left div{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>Пункт 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>

зы меню это чаще всего список т.е. ul или ol

Спустя 9 минут, 1 секунда (8.09.2010 - 13:38) Golovastik написал(а):

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

Спустя 12 минут, 31 секунда (8.09.2010 - 13:51) inpost написал(а):

http://www.htmlbook.ru/css/float.html
Думаю, что можно попробовать inherit.

+ флоат должны закрываться внизу, как бы выравниваясь:

<div class="blockleft2"></div>
<div class="blockright2"></div>
<div id="bottom"></div>

css:

.blockleft2 {float:left; width:250px;font-weight:bold}
.blockright2 {float:right; width:750px;font-weight:bold}
#bottom {clear: both;}

Спустя 15 минут, 16 секунд (8.09.2010 - 14:06) 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=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;}

Спустя 11 минут, 24 секунды (8.09.2010 - 14:17) ApuktaChehov написал(а):

Гораздо удобнее использовать в качестве меню списки (ul). Дело в том, что все элементы списка тесно связаны друг с другом и их структуру сложно нарушить.
Они отлично выравниваются относительно друг друга. По этому их удобно использовать.

Вот пример: ссылка

Спустя 1 час, 9 минут, 43 секунды (8.09.2010 - 15:27) inpost написал(а):

Golovastik
Ты читал эту строчку? #bottom {clear: both;}
Я что-то не увидел у тебя эту переделку...
min-width:770px; - не работает для некоторых елементов в ИЕ7, надо проверять, когда для какой-то части ты делаешь эти требования!

Спустя 2 часа, 22 минуты, 57 секунд (8.09.2010 - 17:50) трамонтана написал(а):

inpost, а что значит эта фраза ? "+ флоат должны закрываться внизу, как бы выравниваясь:"

Спустя 10 минут, 39 секунд (8.09.2010 - 18:01) inpost написал(а):

трамонтана
рррр! Копирую эту строчку уже в третий раз.... #bottom {clear: both;}
И посмотри, как у меня распологаются дивы: сначала левый, потом правый, потом нижний (#bottom) - он и есть закрывающий 2 предыдущих.

Спустя 1 час, 13 минут, 44 секунды (8.09.2010 - 19:14) трамонтана написал(а):

не так понял

Спустя 1 день, 1 минута, 24 секунды (9.09.2010 - 19:16) Golovastik написал(а):

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

Сайт: http://www.sharemania.ru/0137823

Спустя 1 час, 30 минут, 54 секунды (9.09.2010 - 20:47) Golovastik написал(а):

-------

Спустя 1 день, 18 часов, 6 минут, 47 секунд (11.09.2010 - 14:54) Golovastik написал(а):

Проект для скачки: http://www.sharemania.ru/0290717

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;

}

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

Спустя 4 часа, 43 минуты, 5 секунд (11.09.2010 - 19:37) Golovastik написал(а):

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

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

Но что писать 17 раз по такой строке? есть какой-то выход?

Вот весь файл ксс.


/*Стили для сайта*/
* {
    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{background-color:#f7f8f6;}
.menu a{text-decoration:none; }

.menu a:visited{color:black; }



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

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

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


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

}



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

Быстрый ответ:

Здесь расположена полная версия этой страницы.