горизонтальное меню на CSS

Diego · November 4, 2010

Здравствуйте!

У меня проблема с горизонтальным меню, а именно ничего не получается....

по задумке должно всё выглядеть так:

а получилось у мну так:

я в отчаянии...

HTML

</p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>

  <head>
  <title>Test page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <link href="styles.css" type="text/css" rel="stylesheet">
  </head>

  <body>

  <div class="wrapper">

  <!-- место для меню -->
  <div class="menu"> 

  <ol> 
   <li><a href="rtet.htm">dgfdg</a></li>
   <li><a href="rtet.htm">fdddf</a></li>
   <li><a href="rtet.htm">xcvxcv</a></li>
   <li><a href="rtet.htm">kjljkl</a></li>
   <li><a href="rtet.htm">zcxzcz</a></li>
  </ol>

  </div>

  <!--бар и хедер-->
  <div class="bar"><img src="bar.png"></div>
  <div class="header-area"><img src="header.jpg"></div>


  <!-- контент -->
  <div class="content">

  <p>1)	Hammer on. Вы его уже изучали, а сейчас закрепим. 
  Прижмите 1ю струну  указательным пальцем левой руки на 4м ладу. 
  Дёрните её указательным пальцем правой руки. После этого средним пальцем левой руки сделайте быстро удар по струне по 5му ладу, 
  сразу же отпустив средний палец. 
  Получились 2 приёма:  «хаммер он» и «пулл офф». На табулатуре этот элемент выглядит так: 4h5p4.</p>

  <p>2)	Вибрато. Выполняется этот приём так. 
  Вы прижимаете струну на каком-либо ладу, дёргаете её, а пальцем левой руки, который прижимает струну, не поднимая его с лада, 
  водите им вдоль струны в пределах лада (но не перепендикулярно струне). 
  Водить сильно не надо – буквально десятые доли миллиметра.</p>

  <p>Чтобы более углубленно подойти к разработке скриптов и понять принцип их работы, необходимо установить сервер, подобный тому, что используется на хостингах, но в более упрощенной форме. 
  Установка локального сервера потребует от вас немного внимания и примерно 30 минут времени. Причем установка сервера заключается не в том, чтобы установить apache, но и ещё правильно прикрутить обработчик скриптов, а именно php интерпретатор. Я знаю что в интернете есть куча подобных руководств, но многие руководства либо устарели, либо тупо копированы у друг друга. Зачастую даже все что там изложено - не работает. 
  Поэтому эту статью я подготовил сам, все шаги я сопровождал скриншотами, чтобы даже новичку было достаточно понятно.</p>

  <p>Далее нас просят ввести информацию сервера, в первые два поля вводим значение localhost. 
  В третьем поле нас просят указать e-mail администратора, обычно он отображается если возникает какая нибудь внутренняя ошибка сервера, 
  поэтому для локального использования мы используем адрес почты любой, например admin@localhost:</p>

  <p>Нажимаем на файл установки и по традиции нас встретит окно приветствия установки. На самом деле процесс установки MySQL самый долгий =). 
  Чтобы не делать ошибок внимательно смотрте на скриншоты и у вас все получиться.</p>

  <p>Поздравляю, вы установили веб сервер. Т.к. мы хотим использовать apache в связке с PHP, 
  нам необходимо настроить файл конфигурации httpd.conf, но этим мы займемся позже, нам ещё необходимо установить php.</p>

  </div>

  <!-- футер -->
  <div class="footer"><img src="footer.jpg"></div>
  </div>

  </body>

  </html>
  </p><p>

CSS

</p><p>body 
  { 
  margin: 0 auto; 
  padding: 0 1.6em;
  background: url('12.jpg');
  overflow: auto;
  }

  /* все для меню */
  .menu
  {
  position: absolute;
  margin: 40px 40px 40 50px; /* необязательно именно такие значения */
  }

  ol 
  {list-style-type: none;
  display: inline;
  }

  li
  {
  background: url('buttonblue.jpg');
  width:100%;
  }

  a:hover 
  {
  background: url('buttonblue.jpg');
  }


  /*————-*/
  .wrapper
  {
  width: 766px;
  margin: 0 auto;
  }

  .header-area img
  {
  margin: 0 .1em;
  padding: 0;
  display: block;

  } 

  .bar
  {
  position: absolute;
  margin: 2.3em 2.3em;
  padding: 7.3em 0;
  }

  .content 
  { 
  background: white;
  margin: 0 .1em;
  width: 746px;
  padding: 6em .6em .6em .6em;
  } 

  p 
  { 
  text-align: justify;
  font-family: verdana, tahoma, monospace;
  font-size: 9pt;	
  } 

  .footer img 
  {
  margin: 0 0.1em;
  padding: 0;
  display: block;
  }
  </p><p>

psywalker · November 4, 2010

li {float:left;} - а ширину убрать

Lincky · November 4, 2010

для начала для li убери width:100%, поставь display:inline либо float:left;

li {float:left;} - а ширину убрать

пока я печатал, ты уже ответил...мыслим одинаково)

Edited November 4, 2010 by Lincky

psywalker · November 4, 2010

display:inline сюда не подходит, так как на пунктах ещё и фон висит, соответственно нужны блочные элементы. float: left; подходит вполне.

пока я печатал, ты уже ответил...мыслим одинаково)

Ага)

Lincky · November 4, 2010

display:inline сюда не подходит, так как на пунктах ещё и фон висит, соответственно нужны блочные элементы. float: left; подходит вполне.

пойдет для ИЕ, а для нормальных напишем inline-block;

psywalker · November 4, 2010

пойдет для ИЕ, а для нормальных напишем inline-block;

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

Diego · November 4, 2010

Спасибо, но вот еще одна проблема:

как сделать, чтобы картинки(бэкграунд) отображались полностью?

и как сделать отступы от "кнопок" побольше?

Вот мой код после редактирования:

/* все для меню */
.menu
{
position: absolute;
margin: 40px 40px 40 50px; /* необязательно именно такие значения */
}

ol 
{
list-style-type: none;
}

li
{
background: url('buttongrey.jpg');
float: left;
}

a:hover 
{
background: url('buttonblue.jpg');
}

/*————-*/

Заранее всем большое спасибо!

Edited November 4, 2010 by Diego

psywalker · November 4, 2010

Добавь паддинги, высоту можешь подрегулировать, попробуй разные варианты.

Diego · November 4, 2010

Добавь паддинги, высоту можешь подрегулировать, попробуй разные варианты.

Всё решилось! Спасибо Вам!)) Нашел похожий пример на css горизонтального меню)) И немного подогнал под себя... вроде получилось, но всё еще разбираюсь в коде...))))

вдогонку: как расположить текст по центру(в кнопках меню), если на команду text-align нет никакой реакции??

html

</p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="styles.css" type="text/css" rel="stylesheet">
</head>

<body>

<div class="wrapper">

<!-- место для меню -->
<div id="menu"> 

<ul> 
 <li><a href="rtet.htm"><span>home</span></a></li>
 <li><a href="rtet.htm"><span>portfolio</span></a></li>
 <li><a href="rtet.htm"><span>services</span></a></li>
 <li><a href="rtet.htm"><span>solutions</span></a></li>
 <li><a href="rtet.htm"><span>about us</span></a></li>
</ul>

</div>

<!--бар и хедер-->
<div class="bar"><img src="bar.png"></div>
<div class="header-area"><img src="header.jpg"></div>


<!-- контент -->
<div class="content">

<p>1)	Hammer on. Вы его уже изучали, а сейчас закрепим. 
Прижмите 1ю струну  указательным пальцем левой руки на 4м ладу. 
Дёрните её указательным пальцем правой руки. После этого средним пальцем левой руки сделайте быстро удар по струне по 5му ладу, 
сразу же отпустив средний палец. 
Получились 2 приёма:  «хаммер он» и «пулл офф». На табулатуре этот элемент выглядит так: 4h5p4.</p>

<p>2)	Вибрато. Выполняется этот приём так. 
Вы прижимаете струну на каком-либо ладу, дёргаете её, а пальцем левой руки, который прижимает струну, не поднимая его с лада, 
водите им вдоль струны в пределах лада (но не перепендикулярно струне). 
Водить сильно не надо – буквально десятые доли миллиметра.</p>

<p>Чтобы более углубленно подойти к разработке скриптов и понять принцип их работы, необходимо установить сервер, подобный тому, что используется на хостингах, но в более упрощенной форме. 
Установка локального сервера потребует от вас немного внимания и примерно 30 минут времени. Причем установка сервера заключается не в том, чтобы установить apache, но и ещё правильно прикрутить обработчик скриптов, а именно php интерпретатор. Я знаю что в интернете есть куча подобных руководств, но многие руководства либо устарели, либо тупо копированы у друг друга. Зачастую даже все что там изложено - не работает. 
Поэтому эту статью я подготовил сам, все шаги я сопровождал скриншотами, чтобы даже новичку было достаточно понятно.</p>

<p>Далее нас просят ввести информацию сервера, в первые два поля вводим значение localhost. 
В третьем поле нас просят указать e-mail администратора, обычно он отображается если возникает какая нибудь внутренняя ошибка сервера, 
поэтому для локального использования мы используем адрес почты любой, например admin@localhost:</p>

<p>Нажимаем на файл установки и по традиции нас встретит окно приветствия установки. На самом деле процесс установки MySQL самый долгий =). 
Чтобы не делать ошибок внимательно смотрте на скриншоты и у вас все получиться.</p>

<p>Поздравляю, вы установили веб сервер. Т.к. мы хотим использовать apache в связке с PHP, 
нам необходимо настроить файл конфигурации httpd.conf, но этим мы займемся позже, нам ещё необходимо установить php.</p>


</div>

<div id="rightcontent"> 

<ul> 
<li><a href="rew.htm">это интересно</a></li>
<li><a href="rew.htm">это интересно1</a></li>
<li><a href="rew.htm">это интересно2</a></li>
<li><a href="rew.htm">это интересно3</a></li>
</ul>

</div>

<!-- футер -->
<div class="footer"><img src="footer.jpg"></div>
</div>

</body>
</p><p>

css

</p><p>body 
{ 
margin: 0 auto; 
padding: 0 1.6em;
background: url('12.jpg');
overflow: auto;
}

/* все для меню */
#menu
{
	width:100%;
	margin:15px;
	position: absolute;
}

ul
{
	list-style:none;
}

#menu li
{
	list-style:none;
	display:block;
	float:left;
	margin:65px 0 0 0;
}

#menu li a{
	display:block;
	float:left;
	height:34px;
	width:122px;
	color:#fff;
	text-transform:uppercase;
	font-size:11px;
	font-weight:bold;
	background:url(buttongrey.jpg) no-repeat;
	line-height:34px;
	padding:0 0 0 9px;
	text-decoration:none;
}

#menu li a span{
	display:block;
	float:left;
	height:34px;
	color:#d2eeff;
	line-height:34px;
	padding:0 0 0 0;
}

#menu li a:hover{
	display:block;
	float:left;
	background:url(buttonblue.jpg) no-repeat;
	height:34px;
}

/*————-*/

.wrapper
{
width: 766px;
margin: 0 auto;
}

.header-area img
{
margin: 0 .1em;
padding: 0;
display: block;

} 

.bar
{
position: absolute;
margin: 2.3em 2.3em;
padding: 7.3em 0;
}

.content 
{ 
background: white;
margin: 0 .1em;
width: 616px;
padding: 6em .6em .6em .6em;
float:left;
} 

div.rightcontent {
	width: 130px;
	margin: 0;

	}

p 
{ 
text-align: justify;
font-family: verdana, tahoma, monospace;
font-size: 9pt;	
} 

.footer img 
{
margin: 0 0.1em;
padding: 0;
display: block;
}</p><p>

теперь появился другой вопрос: делаю вторую колонку, а она ни на какие команды не реагирует... будто падинги, маржины... бэкграунд даже не ставит....

psywalker · November 4, 2010

a {text-align: center;}

Diego · November 4, 2010

a {text-align: center;}

не помогло...

psywalker · November 4, 2010

#menu li a span - значит ему

Diego · November 5, 2010

#menu li a span - значит ему

тоже бесполезно... тыкал куда мог этот текст-алайн....

теперь появился другой вопрос: делаю вторую колонку, а она ни на какие команды не реагирует... будто падинги, маржины... бэкграунд даже не ставит....

Edited November 5, 2010 by Diego

deadrash · November 5, 2010

Вышли страничку, если на ней нет ничего сверх секретного, будет легче ковырять.

Diego · November 5, 2010

Вышли страничку, если на ней нет ничего сверх секретного, будет легче ковырять.

вот весь архив моего так сказать сайта)))))(с картинками и тп)

скачать мой сайт со всей лабудой для удобного ковыряния))

deadrash · November 5, 2010

Ну вот, так гораздо легче разобраться! У тебя, как у новичка, всё в общем отлично кроме может быть понимания свойства float:...

Не знаю насколько понятно смогу объяснить, но попробовать - попробую

Представь что в одном контейнере (в качестве контейнера возмём body) у тебя два элемента, первый из них div а следующий за ним span. Когда ты задаёшь float:left элементу div - элемент прижимается левым краем к левой стенке своего контейнера, и говорит следующему за сабой элементу -"прижмись левым боком к моему правому" или точнее -"обтекай мой правый край". Естественно что бы элемент span смог обтекать его справа он должен там поместится, иначе он просто расположится ниже элемента div если по габаритам не влезает, или вообще проигнорирует элемент div если своих габаритов нету (если размер span = 0px). Но ты не сможешь ничего никуда уместить если не знаешь их габариты.

Вот и получается:

Если body=100px div=70px span=30px то элемент span встанет справа от div

Если body=100px div=100% span=30px то элемент span упадёт ниже div

Если body=100px div=100% span=0px то элемент span встанет так как будто элемента div вообще нету. А если внутри span есть текст, то текст начнёт обтекать элемент div.

Теперь по делу.

Что бы текст в меню расположить по центру кнопок, уберал float у span и добаил правый padding. Не знаю какое назначение у элемента с классом bar но он перекрывает собой кнопки меню, уберал у .bar padding, поставил только margin. Добавил габариты к .footer и #rightcontent. Поставил float в .content. К навигации #rightcontent ты неправильно обращался в стилях, в место "div.rightcontent" нужно "div#rightcontent".

Ещё в меню ширину заменил со 100% на 766px, иначе появлялся нижний скролбар.

Теперь что бы в меню #rightcontent строки ссылок правильно располагались тебе нужно их уместить в свой контейнер, для этого проставь им нужные габариты и нужные margin padding для списка.

body { 
	margin: 0 auto; 
	padding: 0 1.6em;
	background: url('12.jpg');
	overflow: auto;
}

/* все для меню */
#menu{
	width:766px;
	margin:15px;
	position: absolute;
}

ul{
	list-style:none;
}

#menu li{
	list-style:none;
	display:block;
	float:left;
	margin:65px 0 0 0;
}

#menu li a{
	display:block;
	float:left;
	height:34px;
	width:122px;
	color:#fff;
	text-transform:uppercase;
	font-size:11px;
	font-weight:bold;
	background:url(buttongrey.jpg) no-repeat;
	line-height:34px;
	padding:0 0 0 9px;
	text-decoration:none;
}

#menu li a span{
	display:block;
	height:34px;
	color:#d2eeff;
	line-height:34px;
	padding-right:15px;
	text-align:center;
}

#menu li a:hover{
	display:block;
	float:left;
	background:url(buttonblue.jpg) no-repeat;
	height:34px;
}


/*————-*/



.wrapper{
	width: 766px;
	margin: 0 auto;
}

.header-area img{
	margin: 0 .1em;
	padding: 0;
	display: block;
} 

.bar
{
	position: absolute;
	margin:150px 35px 0;
}

.content{ 
	background: white;
	margin: 0 .1em;
	width: 616px;
	padding: 6em .6em .6em .6em;
	float:left;
} 

div#rightcontent {
	width:127px;
	margin: 0;
	float:right;
	}

p { 
	text-align: justify;
	font-family: verdana, tahoma, monospace;
	font-size: 9pt;	
} 
.footer{
	width:766px;
	height:94px;
	float:left;
}
.footer img {
	padding: 0;
	display: block;
}

p.s. Попробуй поставить себе https://addons.mozilla.org/ru/firefox/addon/1843/ в фаерфокс, очень удобно для отладки стилей!

p.p.s. Чёто спойлер не пашет.

Edited November 5, 2010 by deadrash

Diego · November 6, 2010

Спасибо за разъяснения!))) С шрифтом всё получилось!)))

.bar - это большая синяя штука посередине)))))

Не получилось со списком-rightcontent

такое ощущение, что float вообще побарабану...

deadrash · November 6, 2010

Не получилось со списком-rightcontent
такое ощущение, что float вообще побарабану...

Естественно по флоату она не влезет, читай внимательней мой пост

Короче делай уже.

А вообще я тебе на полном сурьёзе говорю, поставь https://addons.mozilla.org/ru/firefox/addon/1843/

Diego · November 6, 2010

Естественно по флоату она не влезет, читай внимательней мой пост
Короче делай уже.

что-то я не пойму своей ошибки...

но это я понял, что если,например, задаешь элементу(див1) float:left, то он выравнивается по левой стороне а следующий за ним(див2) обтекает его по правой, а если float:right-то наоборот... ведь так? По идее всё тогда должно быть в шоколаде, но в моем случае всё немного в другом веществе..

Edited November 6, 2010 by Diego

deadrash · November 6, 2010

=) Когда я написал делай уже - я не имел ввиду - делай сейчас. Я имел ввиду - сделай правый див поуже в ширину, тогда он влезет. Вот в том цсс который я дал, в нём всё влезло.

У тебя на самом деле давольно простой макет, я бы сверствал по другому. Вот например, никаких блоков с обсалютной пазицией и всего 3 картинки:

DIV-5 и UL находятся внутри DIV-1

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

DIV-1 cодержит в качестве бекграунда вот эту картинку -

В венхнем меню обе картинки кнопки можно объеденить в одну вот такую -

Делать это нужно при помощи CSS спрайтов. http://htmlbook.ru/faq/kak-sdelat-chtoby-k...avedenii-na-nee

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

Edited November 7, 2010 by deadrash

Sign In

горизонтальное меню на CSS

Question

Link to comment

Share on other sites

19 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

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