Проблема с оформлением двухколоночного резинового шаблона

kostya29 · July 27, 2010

Есть двухколоночный резиновый шаблон. Цель добавить:внизу под центральным блоком две горизонтальные линии определённого цвета, и справа - вертикальную линию идущую от нижнего угла до середины правого блока. Так чтобы эти линии тоже были резиновыми вместе с центральным блоком, и нижние линии были внизу контента всегда, а вертикальная правая линия - справа после контента тоже независимо от растяжения экрана.

Попробовал сделать это javascript-ом и выставлять позиции этих линий на событие window.onresize, но работает некорректно из-за того, что наличие самих линий - меняет размеры окна.

Не знаю как это сделать с помощью средств css и html.

У кого есть какие идеи? Возможно ли вообще такое сделать?Как оно вообще смотрится? Может лучше по-другому оформить?

Картинка того, как должно выглядеть:

http://pixs.ru/showimage/sitescreen_1234512_843811.jpg

html cтруктура страницы:

<body>
<div id="header">
<h1></h1>
<h2></h2>		
</div>
<div id="outer_wrapper">
<div id="wrapper">
<div id="container">
<div id="content"><div class="sidebarmenu">
</div><div id="main">
<center>
		<img src="http://localhost/ci//images/oblojka_1024.jpg" border="0" alt=""/ align="middle">
</center>
</div></div>

</div>
<div class="clearing"> </div>
</div>
</div>
<div id='footer'><div id='footer_hor_line_small'></div><div id='footer_hor_line_big'></div><div id='footer_hor_line_vertical'></div>
</body>

некоторый css:

* {
 margin: 0;
 }
 body {
	text-align: center;
}
html, body {
	height: 100%;
} 
#header {
	border: 2px solid #52730A;
	background: #E8AF46;
}

#outer_wrapper {
}
#footer
{
	display:none;
}
#footer_hor_line_big
{
	position:absolute;
	left:210px;
	background-color:#52730A;
	height:5px;
}
#footer_hor_line_small
{
/*	margin-left:50%;*/
	position:absolute;
	background-color:#52730A;
	height:5px;
}
#footer_hor_line_vertical
{
	position:absolute;
	background-color:#52730A;
	width:5px;
}

#wrapper {
}

#container {
	width: 100%;
	float: left;
	margin-right: -200px;
}
#content {
	background:#C28C49;
}
#main {
	margin-left: 200px;
	background:#F4DAA8;
}
.sidebarmenu {
	width: 200px;
	float: left;
	background:#C28C49;
}

Edited July 27, 2010 by kostya29

Great Rash · July 28, 2010

Сделайте 3 дива и все. В чем проблема? Зачем тут яваскрипт?

Sign In

Проблема с оформлением двухколоночного резинового шаблона

Question

kostya29

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information