Jump to content
  • 0

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


oocamba
 Share

Question

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

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

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

b12729ffc197.jpg

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

c8bd37ea6961.jpg

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

c577b46d51e7.png

Спасибо!

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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

#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-->

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

1342513233-clip-131kb.jpg

Edited by oocamba
Link to comment
Share on other sites

  • 0


<!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 by Temiks
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy