Подскажите с расположением элемента

venrt · August 22, 2011

Добрый день, дорогие форумчани!

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

Помогите пожалуйста с написанием кода для данного хедера:

Имеется следующее: сам сайт будет фиксированной ширины 1024px и располагаться по центру страниц, хедер решил сделать слегка резиновым), а именно картинки бабочек и печенек сделал

repeat-x

, но основная часть та, что на картинке, располагается по центру страницы.

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

и собственно вот код:


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Магазин</title>
  <script type="text/javascript" src="js/cufon-yui.js"></script>
  <script type="text/javascript" src="js/Venecia_400.font.js"></script>
  <script type="text/javascript">
    Cufon.replace("body");
  </script>
  <style type="text/css">
  body {margin: 0px;}
header {
	display: block;
	background: #fbe4bb ;
}
.header-bg {
	background: url(img/header-bg.png) repeat-x center top; 
	height:300px;
	text-align: center;
}
.header-bg img {
	position: relative;
	top: 10px;
	left: 15px;
}
.poisk {
	position: absolute;
	width: 200px;
	height: 44px;
	top: 10%;
	right: 3.6%;
	background: #d1be90;
	text-align: left;
	font-size: 18pt;
}
</style>
  <!--[if lt IE 9]> 
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
  <!--[endif]-->
 </head>
  <body>
	<header>
	  <div class="header-bg">
		<a href="/"><img src="img/header-title.png" alt="Авторская бижутерия Эля Ручка" /></a>	
	    <div class="poisk">поиск</div>
	  </div>
	</header>
 </body>
</html>

и необходимые картинки если нужно:

CalvinKlein · August 22, 2011


.poisk {
        position: absolute;
        width: 200px;
        height: 44px;
        top: 10%; /* не совсем понятно зачем 10% */
        left: 50%;
        margin-left: ? px /* сдвигайте на определённое число пикселей */
        background: #d1be90;
        text-align: left;
        font-size: 18pt;
}

или если ширина header-bg фиксированная


.poisk {
        position: relative; /* относительное позиционирование */
        width: 200px;
        height: 44px;
        top: 10%; /* не совсем понятно зачем 10% */
        right: ? px /* отступ справа от края header-bg */
        background: #d1be90;
        text-align: left;
        font-size: 18pt;
}

Edited August 22, 2011 by CalvinKlein

venrt · August 22, 2011

Спасибо за помощь.

top: 10%; /* не совсем понятно зачем 10% */

=) это было написано вначале для пробы и потом забыл изменить на нужно значение

а как лучше его сместить вниз на нужное место: с помощью того же

top: ?px; /* сдвигая на определенные пикселы */

или же

margin-top: -? px; /* отступ снизу от края header-bg */

?

Edited August 22, 2011 by venrt

Gaspode · August 22, 2011

Просто top надёжнее тут, имхо. А то этот марджин неизвестно откуда отсчитываться будет ещё.

CalvinKlein · August 22, 2011

я имел ввиду 10% зачем? там же на фикс. высоту вроде как надо сдвинуть почему не написать top: 150px; например ?

Edited August 22, 2011 by CalvinKlein

venrt · August 23, 2011

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

И еще вопрос: как возможно сделать края поля "поиск" растушированными, у меня только возникает идея по поводу вставки картинки, может есть другой способ?

CalvinKlein · August 23, 2011

И еще вопрос: как возможно сделать края поля "поиск" растушированными, у меня только возникает идея по поводу вставки картинки, может есть другой способ?

думаю с картинкой самый практичный вариант

Sign In

Подскажите с расположением элемента

Question

venrt

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

CalvinKlein

Link to comment

Share on other sites

venrt

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

CalvinKlein

Link to comment

Share on other sites

venrt

Link to comment

Share on other sites

CalvinKlein

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information