Див, залазиющий на див

Soniclord · April 4, 2008

Здравствуйте! Подскажите пожалуйста как сделать слой, который будет поверх первого слоя и на всю ширину первого слоя?

У меня имеется первый слой -

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

.page-container {

width:99%;

margin:0px auto;

margin-top:10px;

margin-bottom:10px;

border:solid 1px rgb(150,150,150);

font-size:1.0em;

}

Storm · April 4, 2008

Получай

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#wrapper {position:relative;}
#abs {position:absolute;top:0;left:0;width:99%;height:100px;background:gray;}
#page-container {width:99%;height:100px;background:green;}
/*]]>*/
</style>
</head>

<body>
<div id="wrapper">
<div id="abs"></div>
<div id="page-container">CONTENT</div>
</div>
</body>
</html>

Soniclord · April 4, 2008

вставляю я этот код и вижу только серый слой...

Storm · April 4, 2008

Правильно, ты убери background у #abs и увидишь слой, который под ним.

Soniclord · April 4, 2008

Не получается вот стили:

header

content

.page-container {

width:99%;

margin:0px auto;

margin-top:10px;

margin-bottom:10px;

border:solid 1px rgb(150,150,150);

font-size:1.0em;

position: relative;

}

.all {

float: left;

width: 100%;

}.main-content {

min-height: 600px;

margin-right: 175px;

padding-right: 10px;

margin-left: 166px;

padding-left: 10px;

text-align: justify;

font-size: 11pt;

margin-top: 30px;

font-size: 1em;

}

я добиваюсь чтобы с правой стороны был слой с картинкой шириной 5px на всю длину page contener'а

Storm · April 4, 2008

А почему нельзя поместить вс? в контейнер, у которого background-ом будет картинка, повторяющаяся по оси y? Если для этих целей сверху накладывать слой, то ему надо будет задавать высоту, а, на сколько я понимаю , высота контента будет динамической, поэтому фиксировать высоту сло?в нежелательно. Хотя, если эта картинка будет повторяться на всю высоту страницы, то можно задать ему 100%.

Soniclord · April 4, 2008

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

Storm · April 4, 2008

По ширине шаблон тоже резиновый?

Может сделать картинку, в которой будет и левая и правая картинки и размножать е? по вертикали?

Soniclord · April 4, 2008

да.

Как это?

Дело в том что вначале картинка и делала оформление и левой колонки и контента и правой, но шаблон был статичный, а когда я сделал его резиновым, то оформление правой колонки вылезало на середину, тогда я обрезал в картинке правую колонку и мучаюсь со слоем, который должен сделать правую

Storm · April 4, 2008

Если шаблон резиновый по ширине, то мой вариант с одной картинкой понятное дало не подойдет.

Можешь код выложить?

Soniclord · April 4, 2008

конечно! http://pascal.helpov.net

Soniclord · April 7, 2008

кто-нибудь живой есть?

Storm · April 7, 2008

Уже решил свою проблему?

Soniclord · April 7, 2008

неа, посмотрите на ссылку - слева есть небольшое затемнение из картинки на всю высоту, такое же надо сделать и справа :-(

Storm · April 7, 2008

Понял так, что затемнение нужно только по бокам блока .header-breadcrumbs.

В этом случае для быстрого решения проблемы заключи этот блок в div, в фоне которого справа повтори по Y градиент.

Sign In

Див, залазиющий на див

Question

Link to comment

Share on other sites

14 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

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