Ищу красивое решение

HUNTERxp · May 18, 2010

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

Пришёл за советом о том, как лучше сверстать часть стандартного макета.

<body>
 <div class="wrapper">
  <div class="header"></div>
  <div class="menu">здесь меню, которое на картинке</div>
  <div class="content"></div>
 </div>
 <div class="footer"></div>
</body>

Приводить весь CSS-код самого макета смысла не вижу, единственное, что хочу уточнить это:

.wrapper {
margin: 0 auto;
width: 100%;
}

.header, .content, .footer {
margin: 0 auto;
width: 991px;
}

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

С минимальным количеством CSS- и HTML-кода.

На данный момент, я рассмотрел два варианта:

1. На таблицах (думаю, что вы представляете, и приводить код в подробностях - смысла нет):

<table style="width: 100%">
 <tr>
  <td style="text-align: center;">
   <div style="width: 991px;">icon</div>
   </td>
 </tr>
 <tr>
  <td style="background-color: #666; text-align: center;">
	<div style="width: 991px;">text</div>
  </td>
 </tr>
</table>

2. На списках:

div.menu {
 width: 100%;
}

div.menu ul {
 margin: 0 auto;
 width: 991px;
}

div.menu ul li {
 float: left;
 overflow: hidden;
 width: 75px;
}

div.wider {
 background-color: #666;
}

<div class="wrapper">
 <div class="menu">
  <ul>
   <li>block</li>
   <li>block</li>
   ....
   <li>block</li>
  </ul>
  <div class="wider">
   <ul>
	<li>text</li>
	<li>text</li>
	....
	<li>text</li>
   </ul>
  </div>
 </div>
</div>

3. На таблицах или списках, с эмуляцией в виде бэкграунда

.menu {
 background: url('white75px.png') #666 0 0 repeat-x;
 height: 100px;
 width: 100%;
}

<div class="menu">
 <table>
  <tr>
   <td style="height: 75px;"><div class="icons"></div></td>
  </tr>
  <tr>
   <td style="height: 25px;"><div class="text"></div></td>
  </tr>
 </table>
</div>

или

<div class="menu">
 <ul style="height: 75px; overflow: hidden;">
  <li style="float: left; overflow: hidden; width: 75px;">icon</li>
 </ul>
 <ul style="height: 25px; overflow: hidden;">
  <li style="float: left; overflow: hidden; width: 75px;">text</li>
 </ul>
</div>

Но уверен, что эти решения - не идеал. Поэтому, буду рад выслушать все мнения на этот счёт.

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

Заранее спасибо всем откликнувшимся!

psywalker · May 18, 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	*{ margin: 0; padding: 0;}
	ul{ list-style: none; overflow: hidden;}
		ul li {float: left;margin: 0 10px;}
		ul li span { 
			margin: 0 auto; 
			background: red; 
			display: block; 
			width: 30px; 
			height: 30px;
		}
		ul li a { 
			display:block;
			text-align: center;
			border: 1px solid #000;
			margin: 10px 0 0;
		}
</style>
<title>Документ без названия</title>
</head>

<body>
	<ul>
		<li><span></span><a href="#">СсылкаСсылка</a></li>
		<li><span></span><a href="#">Ссылка</a></li>
		<li><span></span><a href="#">Ссылка ылка</a></li>
		<li><span></span><a href="#">Ссылка</a></li>
		<li><span></span><a href="#">Ссылка</a></li>
		<li><span></span><a href="#">Ссылка</a></li>
		<li><span></span><a href="#">Ссылка</a></li>
		<li><span></span><a href="#">Ссылка</a></li>
		<li><span></span><a href="#">Ссылка</a></li>
	</ul>
</body>
</html>

HUNTERxp · May 18, 2010

А растягивающийся бэкграунд забыли.

Основная задача, как раз состоит в том, как правильно реализовать эту "подложку".

psywalker · May 18, 2010

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

Ну я бы вырезал полоску просто фон и повесил быы на UL по оси-х

HUNTERxp · May 19, 2010

Сомневаюсь, что это оптимально, но всё равно спасибо за мнение.

SelenIT · May 21, 2010

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

<!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" />
<style type="text/css">
	*{ margin: 0; padding: 0;}
	ul{
		list-style: none;
		background: #888;
		border-top: 75px solid #ccc;
		border-bottom: 1em solid #ccc;
		text-align: center;
		white-space: nowrap;
	}
	   ul li {
		display: inline-block;
		margin-top: -75px;
	   }
		ul li span {
			margin: 0;
			display: block;
			width: 55px;
			height: 55px;
		   border: 10px solid #ccc;
		}
		ul li a {
			display:block;
		   margin: 0;
			text-align: center;
			padding: 4px;
		   color: #fff;
		   background: #888;
		   border-left: 1px solid #ccc;
		   text-decoration: none;
		}
		ul li:first-child a {
			border: none;
		}
		ul li a:hover {
			background: transparent;
		}

	*+html ul li { /* IE7 */
		display: inline;
		min-height: 1px;
	}
	* html ul li { /* IE6 (optional) */
		display: inline;
		height: 1px;
	}
</style>
<title>Документ без названия</title>
</head>

<body>
	<p>Контент до менюшки</p>
	<ul>
		<li style="background: red"><span></span><a href="#">Ссылка</a>
		</li><li style="background: yellow"><span></span><a href="#">Ссылка</a>
		</li><li style="background: green"><span></span><a href="#">Ссылка</a>
		</li><li style="background: orange"><span></span><a href="#">Ссылка</a>
		</li><li style="background: lime"><span></span><a href="#">Ссылка</a>
		</li><li style="background: maroon"><span></span><a href="#">Ссылка</a>
		</li><li style="background: black"><span></span><a href="#">Ссылка</a>
		</li><li style="background: teal"><span></span><a href="#">Ссылка</a>
		</li><li style="background: orangered"><span></span><a href="#">Ссылка</a></li>
	</ul>
	<p>Контент после менюшки</p>
</body>
</html>

psywalker · May 22, 2010

SelenIT

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

mishka · May 22, 2010

SelenIT
Проблема твоего решения в том, что если текст в ссылках будет длинее, то фон LI будет заполнять больше пространства, из-за которого вся картина портится.

Если спану вместо ширины поставить минимальную ширину, то все будет гуд.

SelenIT, красавчег, шикарный подход с минимум html и отсутствием графики. Супер.

Edited May 22, 2010 by mishka2

psywalker · May 22, 2010

1) Если задача планируется всегда одной высоты, то полоска фона подходит куда лучше, чем отрицательны отступы и большие границы.

2) Если на то пошло, то я бы искал решение от пункта 1.

SelenIT · May 22, 2010

psywalker, с замечанием согласен, на полную универсальность метода и не претендовал. В основном я хотел показать возможности inline-block и центрирования его с помощью text-align (плюс запрет переноса этих блоков на другую строку).

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

psywalker · May 23, 2010

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

1) Если задача планируется всегда одной высоты, то полоска фона подходит куда лучше, чем отрицательны отступы и большие границы.

Если задачу возможно решить более лёгким путём, то я пойду именно по нему.

Sign In

Ищу красивое решение

Question

Link to comment

Share on other sites

10 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

Join the conversation

Обсуждения

Important Information