Отдельный блок для баннера!

volse6nik · January 8, 2012

Здравствуйте! Создал сайт который целиком находится в блоке wrapper и теперь хочу создать специальное место под баннер, например такой блок можно встретить во мноджество шаблонов. Бок находится как бы отсраненно от сайта.

Пробовал и так и эдак, например если блоку banner задать float:right и скажем некий margin-right или padding-right, то наш блок будет выглядить по разному в зависимости разрешения экрана пользователей. Сам же wrapper всегда по середине, вне зависимости разрешения экрана. Тут нужно как бы разместить блок для баннера с права и задать ему отступление не от окна браузера, а от самого wrapper-а Народ посоветуйте пожалуйста какой-нибудь код, так как сама логика мне вроде понятна, но не хватает знания в css

Edited January 8, 2012 by volse6nik

fourty · January 8, 2012

Вот лейаут с 2 колонками, левая резиновая, правая фиксированная 200рх

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-22-fluid-fixed/

volse6nik · January 8, 2012

Вот лейаут с 2 колонками, левая резиновая, правая фиксированная 200рх
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-22-fluid-fixed/

Извините, но не совсем понятно что вы точно имеете в виду, вы не могли бы немного по подробнее? Как иначе люди реализуют подобные вещи? Видил такие шаблоны 100 раз, которые имееют место для баннера "вне сайта"

fourty · January 8, 2012

Что именно поподробнее, вот убрал все лишнее из кода, так думаю понятнее будет. Эту верстку наполните своим контентом и profit!

http://jsfiddle.net/gyc6D/

Edited January 8, 2012 by fourty

volse6nik · January 9, 2012

Что именно поподробнее, вот убрал все лишнее из кода, так думаю понятнее будет. Эту верстку наполните своим контентом и profit!
http://jsfiddle.net/gyc6D/

да но у меня wrapper стоит по середине и поэтому я не могу ему задать float:left; следовательно если баннеру задать float:left; то тогда баннер будет по левой стороне а wrapper окажется из под него., вот мой код, извиняюсь что сразу не послал:

HTML

<body>
<div id="banner"></div><!-- #banner -->
<div id="wrapper">
	<div id="header">
		<div id="logo"></div><!-- #logo-->
		<div id="topmenu"></div><!-- #topmenu-->
	</div><!-- #header-->
	<div id="content"></div><!-- #content-->
</div><!-- #wrapper -->
<div id="footer"></div><!-- #footer -->
</body>

CSS

* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body {
	height: 100%;
}
#banner {
        width: 150;
	float: right;
	padding-right: 5%; /* пока что сделал таким образом но еще не проверял как это будет с разным разрешением */ 
}
#wrapper {
	width: 800px;
	margin: 0 auto; /* wrapper по середине */
	min-width: 800px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}


/* Header
—————————————————————————--*/
#header {
	height: 225px;
}


/* Topmenu
—————————————————————————--*/
#topmenu {
	height: 40px;
}


/* Middle
—————————————————————————--*/
#content {
	padding-top: 20px;
}


/* Footer
—————————————————————————--*/
#footer {
	width: 800px;
	margin: -30px auto 0;
	height: 30px;
	position: relative;
}

Edited January 9, 2012 by volse6nik

Sign In

Отдельный блок для баннера!

Question

volse6nik

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

fourty

Link to comment

Share on other sites

volse6nik

Link to comment

Share on other sites

fourty

Link to comment

Share on other sites

volse6nik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information