Как правильно сделать кнопки в меню навигации (CSS)?

xilol · October 24, 2008

Нужно сделать менюшку навигации на css слоями.

Вот такую:

Написал сие:

Пункты оформил списком

<div id="navigation" class="navigation">
	<ul>
	 <li><a href="about.html"><b>О нас</b></a></li>

	 <li><b>Пациенту</b></li>
	   <ul>
		 <li><a href="">Клиника заболеваний</a></li>
		 <li><a href="">Информированное согласие</a></li>
	   </ul>

	 <li><b>Врачу</b></li>
	   <ul>
		 <li><a href="">Обучение</a></li>
		 <li><a href="">Литература</a></li>
	   </ul>

	 <li><b>Услуги</b></li>
	   <ul>
		 <li><a href="">Эндоскопия во сне</a></li>
		 <li><a href="">Высокие технологии</a></li>
		 <li><a href="">ФЭГДС</a></li>
		 <li><a href="">ФЭД</a></li>
		 <li><a href="">ФБС</a></li>
	   </ul>

	</ul>
   </div>

Стиль css (без шрифтов пока)

#navigation {
 border: 8px solid #ffffff;
 position: relative;
 top: 200px;
 left: 150px;
 padding: 5px;
 float: left;
 text-align: justify;
 background-color: #EBEBEB;
 }

 li {
 width: 200px; 
 padding: 2px;					
 list-style-type: none;				 
 }

 li b{
 width: 203px; 
 padding: 2px;					
 list-style-type: none;
 background-image: url('bar.png');
 background-repeat: no-repeat;
 background-position: center top;				 
 }

 ul {
 margin: 0;
 padding: 0;
 }

Получилось вот так:

IE

Firefox

Как сделать правильно (что б как на исходной картинке)?

Изображение кнопки:

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

Pavel_html · October 25, 2008

<html>
<head>
<style type="text/css">
#navigation {
border: 8px solid #ffffff;
position: relative;
top: 200px;
left: 150px;
padding: 5px;
float: left;
text-align: justify;
background-color: #EBEBEB;
width:173px;
}

.act{
width: 203px;   
height:22px;
margin-bottom:10px;				  
list-style-type: none;   
display:block;				 
background-image: url('bar.jpg');
background-repeat: no-repeat;
background-position: center top;				  
}

.act a{
	 text-decoration:none;
}

li{
 list-style-type: none;   
}

.n_act a{
	text-decoration:none;
	color:#838383;
	font-family:arial;
	font-size:14px;
	margin-left:20px;
	margin-bottom:5px;
	display:block;
	width: 160px;
}

li b{
width: 100%; 
text-align:left;
margin-left:10px;
padding: 10px;
color:#636363;				
}

#con{
	margin-left:-17px;
}

ul {
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="navigation">
<div id="con">
	<ul>
	 <li class="act"><a href="about.html"><b>О нас</b></a></li>

	 <li class="act"><b>Пациенту</b></li>
	   <ul>
		 <li class="n_act"><a href="">Клиника заболеваний</a></li>
		 <li class="n_act"><a href="">Информированное согласие</a></li>
	   </ul>

	 <li class="act"><b>Врачу</b></li>
	   <ul>
		 <li class="n_act"><a href="">Обучение</a></li>
		 <li class="n_act"><a href="">Литература</a></li>
	   </ul>

	 <li class="act"><b>Услуги</b></li>
	   <ul>
		 <li class="n_act"><a href="">Эндоскопия во сне</a></li>
		 <li class="n_act"><a href="">Высокие технологии</a></li>
		 <li class="n_act"><a href="">ФЭГДС</a></li>
		 <li class="n_act"><a href="">ФЭД</a></li>
		 <li class="n_act"><a href="">ФБС</a></li>
	   </ul>

	</ul>
</div>
   </div>
</body>
</html>

сделал за 10 мин. смотрел пока тока в Google Chrome в котором обычно работаю

xilol · October 25, 2008

Круто.

[плачет и бьется головой об стол]

xilol · October 25, 2008

Тогда еще вопрос

Как сделать на css на фоне страницы градиент вверху и внизу? То есть сверху переход от цвет к белому фону, а внизу страницы от белого к цвету. Верхний градиент я прописал в body {}, а что делать с нижним?

Dimitry Wolotko · October 26, 2008

сделал за 10 мин. смотрел пока тока в Google Chrome в котором обычно работаю

Под него научились делать плагины для верстальщиков? Или это модно?

Верхний в html, нижний в body, но нужно смотреть какие градиенты.

xilol · October 28, 2008

Еще одна проблема. Нужна помощь.

Сделал верстку (использовал менюху от Pavel_html и готовый резиновый макет отсюда http://www.pixy.cz/blogg/clanky/css-3col-layout/):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Областная клиническая онкологическая больница</title>

<style type="text/css">

 html {
 height: 100%;
 background-image: url('fon_bottom.jpg');
 background-repeat: repeat-x;
 background-position: center bottom;} 

 body {
 margin: 0 0 0 0;
 font-family: arial;
 font-size: 14px;
 background-image: url('fon_top.jpg');
 background-repeat: repeat-x;
 background-position: center top;
}

 #header {
 margin:0; padding:0;
}

 .htext {
 padding: 10px;
 text-align: center;
 font-size: 24px;
 color: #3E95D3;
}

 .htext i{
 font-style: normal;
 text-align: center;
 font-size: 20px;
}

 .bgtext {
 margin-left: 10%; 
 margin-right: 10%; 
 height: 93px;
 width: 80%;
 border: 8px solid #ffffff;
 background-color: #EBEBEB;
 background-image: url('glass.png');
 background-repeat: repeat-x;
 background-position: center center;
}

 .glass {
 height: 110px;
 background-image: url('glass.png');
 background-repeat: repeat-x;
 background-position: center center;
}

 .search-in {
 margin-top: 2%;
 margin-left: 10%;
}

 .search {
 float: left;
}

 .contacts {
 width: 50%; 
 float: right;
}

 img {border: 0px;
}

 #main1 {
 margin-top: 10%; padding:0;
}
 #main2 {
 margin: 0; padding:0;
}
#left {
 margin-left: 3%;
 float:left;
 width: 200px;
 padding:0;
 }

 #navigation {
 border: 8px solid #ffffff;
 padding: 5px;
 float: left;
 text-align: justify;
 background-color: #EBEBEB;
 width:173px;
}

 .act{
 width: 203px;  
 height:22px;
 margin-bottom: 10px;				  
 list-style-type: none;  
 display:block;			
 background-image: url('bar.png');
 background-repeat: no-repeat;
 background-position: center top;				  
}

 .act a{
 text-decoration:none;
}

 li{
 list-style-type: none;  
}

 .n_act a{
 text-decoration:none;
 color:#838383;
 font-family: arial;
 font-size: 14px;
 margin-left: 20px;
 margin-bottom: 5px;
 display:block;
 width: 160px;
}

 li b{
 width: 100%;
 text-align:left;
 margin-left: 10px;
 padding: 10px;
 color: #000000;				
}

 #con{
 margin-left:-17px;
}

 ul {
 margin:0;
 padding:0;
}		

 #right {
 position: absolute;
 right: 0px;
 top: 80px;
 float:right;
 margin: 0; 
 padding:0;
}

 .cons {margin: 0px;
}

 #consul {border: 0px solid red;
 width: 277px;
 float: left;
}

 .conscontent {
 border: 8px solid #ffffff;
 padding: 10px;
 text-align: center;
 background-color: #EBEBEB;
 line-height: 1.5;
}

 .bord {
 border: 2px solid #EBEBEB;
}

 .consimage {
 height: 285px;
 background-image: url('consultant.png');
 background-repeat: no-repeat;
 background-position: right top;
}

 #middle {border: 0px solid red;
 margin-left: 24%;
 margin-right: 280px;
}

 .content {
 font-size: 14px;
 text-align: justify;
 padding: 10px;
 float: left;
}

 .column-in {
 margin: 0px; padding:0;
}

 .cleaner {
 clear:both;
 height:1px;
 font-size:1px;
 border:none;
 margin:0; padding:0;
 background:transparent;
}

 h1,h2,h3,h4 { margin: 0 }
 p { margin: 0}
 a { color:black }
</style>
</head>

<body>

<div id="header"><div class="column-in">  
  <div class="glass">
  <div class="bgtext">
  <div class="htext">Областная клиническая онкологическая больница<br><i>Отделение диагностической и оперативной эндоскопии</i></div>
  </div>  
  </div>

  <div class="search-in">
  <div class="search">
	<form>
	<a href="site_map.html"><img src="sitemap.png" alt="карта сайта" class="png"></a>
	<a href=""><img src="homepage.png" alt="Сделать стартовой страницей" class="png"></a>
	   
	<img src="search.png" alt="Поиск по сайту" class="png">
	Поиск
	<input type="text">
	</form>
  </div>
  </div>

  <div class="contacts">
   <p>Телефон, факс: <b>8 (4852) 72-12-94</b><br>ул. Чкалова 4а, корпус №1</p>
  </div>
</div></div>

<div id="main1"><div id="main2">
<div id="left"><div class="column-in">

  <div id="navigation">
	<div id="con">
	 <ul>
	   <li class="act"><a href="about.html"><b>О нас</b></a></li>

	   <li class="act"><b>Пациенту</b></li>
		 <ul>
		   <li class="n_act"><a href="">Клиника заболеваний</a></li>
		   <li class="n_act"><a href="">Информированное согласие</a></li>
		 </ul>

	   <li class="act"><b>Врачу</b></li>
		 <ul>
		   <li class="n_act"><a href="">Обучение</a></li>
		   <li class="n_act"><a href="">Литература</a></li>
		 </ul>

	   <li class="act"><b>Услуги</b></li>
		 <ul>
		   <li class="n_act"><a href="">Эндоскопия во сне</a></li>
		   <li class="n_act"><a href="">Высокие технологии</a></li>
		   <li class="n_act"><a href="">ФЭГДС</a></li>
		   <li class="n_act"><a href="">ФЭД</a></li>
		   <li class="n_act"><a href="">ФБС</a></li>
		 </ul>

	  </ul>
	 </div>
	</div>
</div></div>

	<div id="right"><div class="column-in">
		<div id="consul">
	  <div class="consimage"></div> 
	  <div class="bord">
	  <div class="conscontent">
		<b>Он-лайн консультант</b><br>Советует вам пройти эндоскопию во сне<br>и не спать ночью на сосне<br>
		Лучше купить хороший матрас<br>Не знаешь где?<br>
		Спроси у нас!:-)
	  </div>
	  </div>
	  </div>
	</div></div>

<div id="middle"><div class="column-in">
  <div id="content">
<h2>Лечение заболеваний пищевода</h2>
<p>Желудок (лат. ventriculus, gaster) — полый мышечный орган, 
расположенный между пищеводом и двенадцатиперстной кишкой. 
Представляет собой мешкообразное расширение пищеварительного канала, 
в котором скапливается и переваривается проглоченная пища. Выделяемый 
железами слизистой желудка желудочный сок содержит пищеварительные ферменты, 
соляную кислоту и другие вещества, переваривает белки, частично жиры, оказывает 
бактерицидное действие. Кроме того, в желудке происходит механическое измельчение пищи.<br><br>
Объём пустого желудка составляет около 500 мл. После принятия пищи он обычно растягивается 
до одного литра, но может увеличиться и до четырёх.<br><br>
Желудок отделён от пищевода нижним пищеводным сфинктером, лат. ostium cardiacum, 
а от двенадцатиперстной кишки — так называемым привратником желудка, лат. ostium pyloricum.</p>
  </div>
</div></div>
</div></div>	

<div id="footer"><div class="column-in"></div></div>

</body>
</html>

В Firefox все красиво:

В IE фигня:

Появляется отступ справа, меню "ломается".

Страничку здесь выложил: http://xilol.front.ru/index.html

Не дайте пропасть

xilol · October 28, 2008

Все. Проблему уже сам решил. Убрал DOCTYPE и поменял padding и margin в списке. На работу возьмут, как думаете? Как начинающего?

Sign In

Как правильно сделать кнопки в меню навигации (CSS)?

Question

xilol

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Pavel_html

Link to comment

Share on other sites

xilol

Link to comment

Share on other sites

xilol

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

xilol

Link to comment

Share on other sites

xilol

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information