Менюшка при верстке div-ным дизайном

pulover · June 22, 2009

Привет...

Подскажите пожайлуста как при верстке дивами сделать такое меню...

при табличном дизайне все работает как положено, а при div-ном дополнительный блок просто исчезает...

что не так?

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

Nekromancer · June 22, 2009

даёж код!

П.С. видимо проблема с z-index ..

psywalker · June 22, 2009

да нихрена там не z-index; скореей всего overflow: hidden; автор на меню повесил

LunatiK · June 22, 2009

Согласен с Nekromancer

P.s. прикольно быть телепатом

psywalker · June 22, 2009

аа, кстати недоглядел, если блок прячется под центральным, то возможно и правда z-index;

pulover · June 22, 2009

вот код всего что есть....

<!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" />
<title>Верстка от AD</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id='wrapper'>
	<div id='header'>
	<!-- Содержимое хэдэра -->
	</div>
	<div id='container'>
		<div id='left'>
		<!-- Содержимое левой колонки --><?php include('blocks/menu_left1.php');?>
		</div>
		<div id='right'>
		<!-- Содержимое правой колонки -->
        Правая колонка
		</div>
		<div id='center'>
		<!-- Содержимое центральной колонки -->
        Центральный текст<p>Центральный текст</p><p>Центральный текст</p><p>Центральный текст</p><p>Центральный текст</p><p>Центральный текст</p><p>Центральный текст</p>
		</div>
	</div>
	<div class='clear'></div>
	<div id='spacer'></div>
</div>
<div id='footer'>
<!-- Содержимое футера -->
</div>
</body>
</html>

css.css имеет вид....

@charset "windows-1251";
/* CSS Document */

html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#header {height:130px; background:#06F;}
#left {float:left;width:200px; background:#960;}
#right {float:right;width:200px; background:#966;}
#center {margin:0 200px 0 200px; background:#93C;}
#spacer {height:100px; background:#FFF;}
#footer {height:100px;margin-top:-100px; background:#C9C;}
.clear {clear:both;}

.table_left_menu {
		width:180px;
		margin:0;
		border:1px solid grey;}

.title {
background-color: #2a7258;
color: #ffffff;
font-weight:bold;
margin:2px;
padding:5px;
width:180px;
}

#coolmenu
{	margin: 0;
	padding: 0;
	z-index: 30;}

#coolmenu li
{	margin: 0;
	margin-left:2px;
	width:170px;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 14px arial;
	font-weight:bold;}

#coolmenu li a
{	
	font: 14px bold "Times New Roman", Times, serif;
	font-weight:bold;
	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width:170px;
	height: 18px;
	background: #676e81;
	color: #FFF;
	text-align: center;
	text-decoration: none;}

#coolmenu li a:hover
{	background: #3C9;
	color:#565f6e;}

#coolmenu div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	margin-left: 0px;
	margin-top: 15px;
	padding: 0px;
	background: #cdcdcd;
	border: 1px solid #565f6e}

	#coolmenu div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background:#3C9;;
		color: #565f6e;
		font: 11px arial}

	#coolmenu div a:hover
	{	background: #385b96;
		color: #FFF}

.left { background:#ffffff;
		border-right:1px solid black;} /*Фон меню не ячеек а именно менюшки.*/
.right {background:#ffffff;
		border-left:1px solid black;
		padding-bottom:50%;}

.div_glav {float:left; margin-left:5%;}
#tab_glav { margin-top:15px;
			border:1px solid #dddef4}
#img_glav{
	background:#9FF;
		}
#opis_glav{
	font: 14px bold "Times New Roman", Times, serif;
	color: #6b6fba;
	text-align:left;
	vertical-align:top;
	height:150px;
	border-bottom:1px solid #e7e7e7;}
#name_glav{
	font: 14px bold "Times New Roman", Times, serif;
	font-weight:bold;
	text-align:center;
	border-bottom:1px solid #e7e7e7;
	margin-top:5px;
	height:25px;}

#cena_glav{
	font:14px bold Arial, Helvetica, sans-serif;
	color: #383a76;
	text-align:center;}

и собственнос сама менюшка, так сказать центр внимания...

<table width="230px" border="0" cellspacing="0" cellpadding="0" class='table_left_menu'>
<tr>
	<td align="left">
    <p align="center" class="title">Навигация</p>
<ul id="coolmenu">
	<li><a href="index.php" onmouseover="mopen('m1')" onmouseout="mclosetime()">Главная</a></li>
	<li><a href="fabrik.php" onmouseover="mopen('m2')" onmouseout="mclosetime()">Товары</a>
		<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
		<a href="template.php?link=artdoors&id=2">Мобильные телефоны</a>
		<a href="template.php?link=bekars&id=6">Телевизоры</a>
		<a href="template.php?link=goodwoods&id=3">DVD-плєері</a>
		</div>
	</li>
	<li><a href="bronedv.php" onmouseover="mopen('m3')" onmouseout="mclosetime()">Доставка</a></li>
	<li><a href="contacts.php" onmouseover="mopen('m4')" onmouseout="mclosetime()">Контакты</a></li>
    <li><a href="news.php" onmouseover="mopen('m1')" onmouseout="mclosetime()">О нас</a></li>
</ul>
</td>
<td bgcolor="#666d80" align="right"></td>
</tr>
</table>

Игорь Ермаков · June 22, 2009

Объясните мне, что такое табличный дизайн, а что дивный?

pulover · June 22, 2009

табличный это когда мы размечаем нашу страницу с помощью таблицы, типа header в верхнюю строку таблицы, footer в нижнюю, центр для всего прочего, div-ный это тоже самое только с помощью div.

Edited June 22, 2009 by pulover

Игорь Ермаков · June 22, 2009

Вот я же говорю, вы просто не понимаете когда нужно использовать, то когда другое.

pulover · June 22, 2009

Да возможно это так...

а по поводу кода, что исправить что б заработало? может у кого пример есть где такая штука работает?

pulover · June 22, 2009

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

вод код для самого меню

<div id="dropnav"><div class='title'>Навигация</div>
<ul id="coolmenu">
<li><a href="#">Ссылки</a>
<ul>
<li>
<a href="#" >Ссылка</a>
<br>
<a href="#" >Ссылка2</a>
<br>
<a href="#" >Ссылка3</a>
</li>
</ul>
</li>
<li><a href="#">Ссылки</a>
<ul>
<li>
<a href="#">Ссылка</a>
<br>
<a href="#">Ссылка2</a>
<br>
<a href="#">Ссылка3</a>
</li>
</ul>
......

а вот для css все описано...

.title {
text-align:center;
color: #ffffff;
font-size:17px;
font-weight:bold;
margin:2px;
padding:0px;
width:180px;
}

div#dropnav {
display:block;
background:#639;
width:200px;
height:24px;
font-family:Arial;
font-weight:bold;
font-size:12px;
margin:0px;
padding:0px;
border:1px solid #999;
}

#dropnav li:hover ul, #dropnav li li:hover ul, #dropnav li li li:hover ul, #dropnav li.sfhover ul, #dropnav li li.sfhover ul, .sfhover ul {
left:192px;
margin-top:-12px;
}

#coolmenu
{	margin: 0;
	padding: 0;
	z-index: 30;}

#coolmenu li
{	
	vertical-align:top;
	margin: 0;
	margin-left:1px;
	margin-top:3px;
	padding:2px;
	width:100px;;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 14px arial;
	font-weight:bold;}

#coolmenu li a
{	
	font: 14px bold "Times New Roman", Times, serif;
	font-weight:bold;
	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width:170px;
	height: 22px;
	background:#C60;
	color: #FFF;
	text-align: center;
	text-decoration: none;}

#coolmenu li a:hover
{	background:#666;;
	color:#CCC;}

#coolmenu li ul li a {
display: block;
text-decoration: none;
height:22px;
background:#0C3;
margin:0px;
padding:0px;
width:50px;
}

#coolmenu li ul li a:hover {
display: block;
text-decoration: none;
height:22px;
}
#coolmenu li ul {
position: absolute;
left:-900%;
width:50px;
padding: 0;
margin-top:0px;
text-align:left;
background:#FC6;
}

очень прошу помощи..

Int · June 23, 2009

Ну за это вообще margin отвечает

Searcher · June 23, 2009

height:22px; - это зачем?

полный бардак в стилях... восновном повторные объявления как в одном классе так и в псевдоклассах.

Sign In

Менюшка при верстке div-ным дизайном

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information