Горизонтальное меню на едином фоне - Не получается

oocamba · July 17, 2012

Здравствуйте, я еще совсем новенькая, пытаюсь разобраться.

Хочу создать меню. Фон - для всего меню один, длинный (может как фон div?). Поверх его горизонтально хочу разместить пункты меню (картинками, не словами, хоть не имеет это значение). Не получается наложить на фон эти картинки правильно относительно друг друга.

Это единый фон

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

Пример надписи-картинки

Спасибо!

oocamba · July 17, 2012

Я сделала так, но не выходит

#header {
	height: 126px;
}

#menu-box{
	line-height:73px;
	background:url(images/menu-bg.png);
	background-repeat:no-repeat;
	background-position:center;
	padding-top:36px;
	}

#menu-text{

	}

<div id="header">


   <div id="menu-box">
   <div id="menu-text"><img src="images/home-button.png"></div>


   </div>

	</div><!-- #header-->

Получается так. Я ведь же должна по середине его сделать и сверху немного отступить

Edited July 17, 2012 by oocamba

Avalon4eg · July 17, 2012

padding-top:36px; выталкивает за придел фона

oocamba · July 17, 2012

padding-top:36px; выталкивает за придел фона

Так если его убрать, то не сдинется же блок. Да и сами надписи начинаются от края страницы.

Temiks · July 17, 2012


<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css" >
            #box {
				overflow: hidden;
				margin: 0;
				padding: 0;
				list-style: none;
				background: url(путь к bg) no-repeat 0 0;
			}
			#box li {
				float: left;
			}
        </style>
    </head>
    <body>
			<ul id="box" >
				<li>
					<a href="#"><img alt="" src="путь к картинке1" > </a>
				</li>
				<li>
					<a href="#"><img alt="" src="путь к картинке2" > </a>
				</li>
				<li>
					<a href="#"><img alt="" src="путь к картинке3" > </a>
				</li>
				<li>
					<a href="#"><img alt="" src="путь к картинке4" > </a>
				</li>
				<li>
					<a href="#"><img alt="" src="путь к картинке5" > </a>
				</li>
			</ul>
    </body>
</html>

Отступы уже сами допилите?..

ps. Шрифт лучше подключит, т.к картинки не есть хорошо.

Edited July 17, 2012 by Temiks

nemo59 · July 17, 2012

padding-top:36px;

Может, вы имели в виду padding-left?

Sign In

Горизонтальное меню на едином фоне - Не получается

Question

oocamba

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

oocamba

Link to comment

Share on other sites

Avalon4eg

Link to comment

Share on other sites

oocamba

Link to comment

Share on other sites

Temiks

Link to comment

Share on other sites

nemo59

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information