вопро по "плавающему" горизонтальному списку-меню

sashakiselev · February 21, 2010

Привет, собственно сабж, но думаю пояснить суть вопроса стоит ):

вместо варианта с display:inline, я пребегнул к плавающим элементам - Если цеплять к левому краю(float:left) - вопросов не возникает,

НО если мне нужно к правому (float:right), контент содержащийся в тегах списка <li> инвертируется.. т.е. вместо первого получаю второе

1. главная - новости - прайс - о магазине - контакты

2. контакты - о магазине - прайс - новости - главная

какое может быть решение?

Yahoo! · February 21, 2010

Не пробовал, думаю пустой спан перед списком c float: right

DjTarik · February 21, 2010

Привет, собственно сабж, но думаю пояснить суть вопроса стоит ):
вместо варианта с display:inline, я пребегнул к плавающим элементам - Если цеплять к левому краю(float:left) - вопросов не возникает,
НО если мне нужно к правому (float:right), контент содержащийся в тегах списка <li> инвертируется.. т.е. вместо первого получаю второе
1. главная - новости - прайс - о магазине - контакты
2. контакты - о магазине - прайс - новости - главная
какое может быть решение?

ul - float: right;

li - float: left;

По идее так, если правильно понял. (если нет - давай ссылку или картинку =)

Ещё есть вариант с inline-block;

sashakiselev · February 21, 2010

не друзья не работает, только вариант с пустым спаном не пробывал, да и как то идея решения

не очень..

DjTarik · February 21, 2010

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

Что значит не работает?

Что именно нужно получить?

Как на картинке - там вообще нечего делать.

sashakiselev · February 21, 2010

Что значит не работает?
Что именно нужно получить?
Как на картинке - там вообще нечего делать.

картинка это собственно процесс, т.е. то что имею.

а нужно прижать текст меню к правому краю, про флоат-райт писал выше, решения не нашел, вариант с вставкой чегото пустого не нравиться сам по себе, т.е. ищется "правильный вариант" без лишнего кода.

ну и вариант менять контент местами в самом хтмл тоже не очень симпатичен)

Edited February 21, 2010 by sashakiselev

DjTarik · February 21, 2010

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

Может я тебя не понимаю, но ещё раз про 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>
	<title>Тестовая страница - Tarik (21.02.2010)</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css" media="all">
	/* <![CDATA[ */
	/* — global — */
	html {
		font-size: 100.01%;
	}
	body {
		font-size: 62.5%;	/* - '1em' = '10px' - */
	}
	.wrapper {
		width: 1000px;
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0px auto;
		background: #ddd;
		overflow: hidden;
	}
	/* — // global // — */
	/* — test — */	
	ul {
		padding: 0px;
		margin: 20px;
		list-style-type: none;
		float: right;

		border: 1px solid red;
	}
		ul li {
			margin: 20px;
			float: left;

			border: 1px solid red;
		}

	p {
		margin: 20px;
		font-size: 1.6em;
	}
	/* — // test // — */
	/* ]]> */
	</style>
</head>
<body>

	<div class="wrapper">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam quis nulla nec diam suscipit sagittis. Phasellus iaculis euismod orci, sit amet mollis risus scelerisque eget.
Vestibulum volutpat sem nec sapien pharetra tristique. Vestibulum augue quam, semper eget fringilla et, commodo vitae eros.
Duis tincidunt quam sit amet massa scelerisque elementum. Proin arcu ipsum, gravida pharetra blandit vulputate, tincidunt sit amet est.
Vestibulum placerat lacinia ultricies. Mauris non diam magna, a congue nisl. Pellentesque sit amet augue sem, in vulputate felis.
Nulla blandit dignissim bibendum. Cras semper sodales velit, ac consequat urna ornare id. Praesent diam massa, sagittis at posuere id, malesuada in arcu.
In hendrerit faucibus tempus. Vestibulum ut turpis nisl. Morbi ac mi tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Aliquam erat volutpat.</p>
		<ul>
			<li><a href="#" title="Пункт_1">Пункт_1</a></li>
			<li><a href="#" title="Пункт_2">Пункт_2</a></li>
			<li><a href="#" title="Пункт_3">Пункт_3</a></li>
			<li><a href="#" title="Пункт_4">Пункт_4</a></li>
			<li><a href="#" title="Пункт_5">Пункт_5</a></li>
			<li><a href="#" title="Пункт_6">Пункт_6</a></li>
			<li><a href="#" title="Пункт_7">Пункт_7</a></li>
			<li><a href="#" title="Пункт_8">Пункт_8</a></li>
			<li><a href="#" title="Пункт_9">Пункт_9</a></li>
			<li><a href="#" title="Пункт_10">Пункт_10</a></li>
		</ul>
		<p>Sed faucibus interdum convallis. Praesent feugiat dui ac metus hendrerit vitae interdum libero feugiat.
Nullam eleifend luctus lectus eget viverra. Donec tincidunt purus ut nibh pellentesque ut imperdiet ipsum tempor.
Nam at nibh mauris. Sed in lectus nibh, eu rhoncus purus. Praesent imperdiet iaculis lorem ut facilisis.
Vivamus eget massa vitae mi imperdiet imperdiet et a ligula. Nullam bibendum cursus odio et venenatis.
Nam egestas, velit quis semper suscipit, ipsum odio mollis justo, sit amet interdum sem sapien vitae diam.
Aenean in quam eget dui tempus molestie. 
</p>		
	</div>

	<!-- // © Tarik, 2010 // -->

</body>
</html>

Перепроверь...

Edited February 21, 2010 by DjTarik

sashakiselev · February 21, 2010

DjTarik, спасибо тебе за пример.. но он не очень удобоваримый, позволь привести свой).

по поводу флоат райта - еще раз проверял.. у меня 0 эффекта, если везде указать райт, то инвертируется контент - о чем собственно и топик.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Plitka</title>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251;charset=windows-1251">

  <style type="text/css">
* {
  margin:0;
  padding:0;
  font-size: 8pt; font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
}

a {
  text-decoration:none;

}

ul {
  list-style:none;
}

#wrapper {
  width: 870px;
  margin:0 auto;
  padding:0 12px;
  text-align:center;
}

#mainNav { 
   width: 870px; 
   height:0px; 
}

#mainNav ul { 
  width: 870px; 
  background:#111; 
  padding:0;
  margin:0;
  float:left;
} 
#mainNav ul li { 
  float:left; 
}

#mainNav ul a {
  display:block;
  padding-left:2.2em;
  padding-right:1.8em;
  line-height: 3.2em; 
  color: #fff;
} 

#mainNav ul a.first {
  background: none;
}

#mainNav ul a:hover {
  text-decoration: underline; 
}
  </style>
</head>
<body>
 <div id="wrapper">
  <div id="mainNav">
	<ul>
	 <li><a class="first" href="#">Главная</a></li>
	 <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>
	 <li><a href="#">Контакты</a></li>
	</ul>
  </div>
 </div>
</body>
</html>

DjTarik · February 21, 2010

Да блин... Всё же просто:

<!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>
	<title>Тестовая страница - Tarik (21.02.2010)</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
* {
  margin:0;
  padding:0;
  font-size: 8pt; font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
}

a {
  text-decoration:none;

}

ul {
  list-style:none;
}

#wrapper {
  width: 870px;
  margin:0 auto;
  padding:0 12px;
  text-align:center;
}

#mainNav {
   width: 870px;
   [color="#FF0000"]/*height:0px;*/[/color]
   [color="#FF0000"]background:#111;[/color]
   [color="#FF0000"]overflow: hidden;[/color]
}

#mainNav ul {
  [color="#FF0000"]/*width: 870px;*/[/color]
  background:#111;
  padding:0;
  margin:0;
  [color="#FF0000"]float: right;[/color]
}
#mainNav ul li {
  float:left;
}

#mainNav ul a {
  display:block;
  padding-left:2.2em;
  padding-right:1.8em;
  line-height: 3.2em;
  color: #fff;
}

#mainNav ul a.first {
  background: none;
}

#mainNav ul a:hover {
  text-decoration: underline;
}
  </style>
</head>
<body>
<div id="wrapper">
  <div id="mainNav">
    <ul>
     <li><a class="first" href="#">Главная</a></li>
     <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>
     <li><a href="#">Контакты</a></li>
    </ul>
  </div>
</div>
</body>
</html>

1. Ширину списку - не нужно.

2. Списку - float: right; Тогда всё станет на свои места.

3. Диву обёртке - убираем высоту.

4. Диву обёртку - такой же фон, как и у списка - тогда эффект, что он тянется на всю ширину.

5. Див обертку любым способом делаем так, чтобы на схлопывался (с моём случае - самое простое - overflow: hidden;)

6. Всё.

Edited February 21, 2010 by DjTarik

sashakiselev · February 22, 2010

Сейчас времени все проверить нет, но уже счастлив).. тот привер сверстал уже с инлайн-блок..

огромное спасибо за помощь!!

Sign In

вопро по "плавающему" горизонтальному списку-меню

Question

sashakiselev

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Yahoo!

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

sashakiselev

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

sashakiselev

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

sashakiselev

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

sashakiselev

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information