Как поднять content?

ilya_daddy · August 9, 2010

Доброе время суток!

Как поднять content вверх к хедеру, но при этом чтоб sideLeft остался на месте?

Код страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

</head>

<body>

</div>

<strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.

</div>

</div>

<strong>Left Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.

</div>

</div>

</div>

<strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.

</div>

</body>

</html>

CSS

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

font: 12px/18px Arial, Tahoma, Verdana, sans-serif;

height: 100%;

background-image:url(img/6.jpg)

}

a {

color: blue;

outline: none;

text-decoration: underline;

}

a:hover {

text-decoration: none;

}

p {

margin: 0 0 18px

}

img {

border: none;

}

input {

vertical-align: middle;

}

#wrapper {

width: 100%;

min-width: 950px;

min-height: 100%;

height: auto !important;

height: 100%;

}

/* Header

—————————————————————————--*/

#header {

height: 100px;

background: #0F3;

width: 1280px;

}

/* Middle

—————————————————————————--*/

#middle {

width: 100%;

padding: 0 0 100px;

height: 1%;

}

#middle:after {

content: '.';

display: block;

clear: both;

visibility: hidden;

height: 0;

}

#container {

width: 100%;

float: left;

overflow: hidden;

}

#content {

padding: 0 0 0 270px;

background-color: #F03;

}

/* Sidebar Left

—————————————————————————--*/

#sideLeft {

float: left;

width: 350px;

margin-left: -100%;

position: relative;

background: #B5E3FF;

}

/* Footer

—————————————————————————--*/

#footer {

margin: -100px auto 0;

min-width: 1000px;

height: 100px;

background: #BFF08E;

}

/*——————imba logo——————-*/

.logo{

float: left;

width:350px;

height:346px;

border:1px

dotted #CCC;

}

.logo2{

width:724px;

height:85px;

float: right;

}

Edited August 9, 2010 by ilya_daddy

mishka · August 9, 2010

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

А смотреть километры твоего ***кода желания нет.

Edited August 9, 2010 by mishka2

swetlana · August 9, 2010

есть два варианта:

кривой: использовать position:relative или отрицательный margin-top.

прямой: переписать код так, чтобы в нём хоть что-то понять можно было. Чем проще, тем лучше.

Источник проблемы в этом коде: ненужные заморочки там, где их и придумать-то сложно.

mishka · August 9, 2010

В архиве прмер посложнее. Там 3 колонки одинаковой высоты с контентом впереди.

Поэтому я решил попроще набросать

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
		body{margin:0}
		#content{
			width:100%;
			float:left;
		}
		.c{
			padding:0 0 0 300px;
		}
		#sidebar{
			float:left;
			width:280px;
			margin:0 0 0 -100%;
		}
	</style>
</head>
<body>
	<div id="content">
		<div class="c">
			<p>Lorem ipsum dolor sit amet consectetuer ridiculus nec Nulla montes rhoncus. Libero Phasellus et Pellentesque porta urna Sed augue orci sit id. Quis odio dolor id Vivamus in ac faucibus Vestibulum lacus Curabitur. Tempus condimentum pharetra nec et.</p>
			<p>Sed semper sem sollicitudin auctor hac Suspendisse lacus morbi orci Ut. Augue Morbi Mauris auctor mauris auctor dignissim elit tellus leo pretium. Mauris et dictumst lacinia eget lorem est Nullam vitae quis a. Velit Aenean.</p>
		</div>
	</div>
	<div id="sidebar">
		<p>Lorem ipsum dolor sit amet consectetuer ridiculus nec Nulla montes rhoncus. Libero Phasellus et Pellentesque porta urna Sed augue orci sit id. Quis odio dolor id Vivamus in ac faucibus Vestibulum lacus Curabitur. Tempus condimentum pharetra nec et.</p>
	</div>
</body>
</html>

ilya_daddy · August 13, 2010

Спасибо, разобрался.

Sign In

Как поднять content?

Question

ilya_daddy

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

mishka

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

ilya_daddy

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information