Форум PHP программистов > Два блока вокруг контента

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Два блока вокруг контента

nikki4

24.04.2012 - 19:51

вокруг контента надо сделать фоновые рисунки


блоки поместил перед футером
<div id="bgleft"></div>
<div id="bgright"></div>
<div id="footer"> </div>

вот пример левого

#bgleft {
position:relative;
left:-100px;
top:-59px;
width:100px;
height: auto; 
min-height: 500px; 
background:brown;
}

а вот подвал

#footer {
position:relative;
z-index:-1;
margin-top:-12%;
float:left;
width:1280px;
height:340px;
margin-left:-160px;
background: url(../images/footer.jpg) no-repeat;
}

что тут надо изменить, чтобы футер перестал опускаться вниз из-за бокового фона?

Спустя 14 минут, 11 секунд (24.04.2012 - 18:05) sebastjan написал(а):

nikki4
Поясни зачем вокруг текста два рисунка.?
Этот блок с текстом и картинками внутри каго то блока или это сама страница?
Подвал думаю прикрутить лучше используя отрицательное маргин..

Спустя 7 минут, 19 секунд (24.04.2012 - 18:13) nikki4 написал(а):

для красоты. дизайном задумано.
сверху шапка в нем дерево, а по бокам с него листья сыпятся, кроме того можно будут в будущем всяких модулей (в джумле) поставить.
user posted image

но пока запутался как сделать, чтоб футер не уползал вниз..

Спустя 3 минуты, 52 секунды (24.04.2012 - 18:17) sebastjan написал(а):

блок для всего на 100% по высоте и ширине
блок для контента на 100% высоте ширине и отрицательный маргин на 100пикселей условно для подвала.
Три блока див с флоат лефт.(для картинка-тект-картинка)
закрываем блок для контента.
футер высота 100пикселей.
закрываем блок для всего.
Если есть время ,буду через час и скину пример.
или сам попробуй.

Спустя 1 минута, 22 секунды (24.04.2012 - 18:18) sebastjan написал(а):

Понятно, как и говорил ,три блока как колонки с обтеканием лефт.
Подвал отрицательное позиционирование.
Чрез час кину если сам не зазберёшся.

Спустя 1 минута, 4 секунды (24.04.2012 - 18:19) sebastjan написал(а):

Я делал подобный вариант.
www.niolla.de
Завитушки по бокам.

Спустя 2 часа, 12 минут, 19 секунд (24.04.2012 - 20:31) nikki4 написал(а):

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

.pagewidth{
width:960px;
text-align:left;
background:transparent;
margin: 0 auto;

один из этих элементов блок контента

#main {
float:left;
width:916px;
margin-top:-25px;
font-weight:normal;
padding:0px 22px  22px 22px;
background-color:white;
color:#4d2424;
border-radius:0 0 9px 12px;
}

как я понял те блоки левые и правые разместить внутри блока #main.. но не срабатывает.. контент растягивается..
попробовал вставить после блока навигации, получилось очень похоже, но вот только полосы не растягиваются а имеют фиксированную ширину
хотя и стоит height: auto;

Спустя 12 часов, 5 минут, 6 секунд (25.04.2012 - 08:37) nikki4 написал(а):

выкладываю css, html
наверное так проще будет разобраться уже готово, все подписанно.

Спустя 18 часов, 31 минута, 22 секунды (26.04.2012 - 03:08) sebastjan написал(а):

Я думал ты уже по косточкам разобрал страницу, там же всё очень просто.
Без наворотов.
и пашет кросброузерно.
Хорошо - я завтра посмотрю твой архив.

Спустя 4 минуты, 29 секунд (26.04.2012 - 03:12) sebastjan написал(а):

Ники , слушай я что ты не сделаешь проще, делаешь картинку под фон дерево и твои ветки по бокам, середину просто вырезал в фотошопе, страница -кажется у тебя фиксированной ширины.
вот фон в тело дока и кинь.
А по верху страниц останется и не надо городить лишних строчек хтмл.
Если же занят боди под какой то фон, можно общий блок на 100% по ширине и высоте забабахать и туда кинуть фоном картинку.
Минимизируй.

Спустя 8 часов, 14 минут, 19 секунд (26.04.2012 - 11:27) nikki4 написал(а):

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

сделал следующую структуру и стили аналогичные сайту, только удалил все ненужное.
попробовал добавить блоки middle и container по аналогии как в генераторе, но что-то не то -
боковые блоки автоматически не растягиваются по высоте, а правый не с самого верха начинается

<html>
<head>
 <style type="text/css">
body {
margin: 0;
padding: 0;
}

.pagewidth {
background:transparent;
width:700px;
margin: 0 auto;
}

#middle {
	width: 100%;
	height: 1%;
	position: relative;
}

#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}


#container {
	width: 100%;
	float: left;
	overflow: hidden;
}



#header {
float: left;
height: 35px;
width: 500px;
background:pink ;
}

#topmenu {
 float: left;
    height: 20px;
    width: 500px;
background:yellow;

}

#main {
background:gray;
width:456px;
height:100px;
margin-top: 0;
padding: 0 22px 22px;
}


#left {
background:brown;
	float: left;
	width: 150px;
	margin-left: -850px;
	position: relative;
	height:auto;
}

#right {
background:brown;
float: left;
	width: 250px;
	margin-left: 500px;
	margin-top:-120px;
	height:auto;
}


#footer {
background:green;
  float: left;
    height: 50px;
    margin-left: -90px;
    margin-top: -2%;
    position: relative;
    width: 700px;
    z-index: -1;

}





  </style>
</head>
<body>


<div class="pagewidth">
	<div id="header">шапка</div>
	<div id="topmenu">меню</div>
	<div id="middle">
		<div id="container">
			<div id="main">контент</div>
		</div>
		<div id="left">блок слева от шапки до футера</div>
		<div id="right">блок справа от шапки до футера</div>
	</div>
	<div id="footer">футер</div>
</div>

</body>
</html>

Спустя 9 часов, 26 минут, 35 секунд (26.04.2012 - 20:53) sebastjan написал(а):

nikki4
Не чего удивительного что запутался.

Смотрю на твой скрин и удевляюсь, зачем ты так усложнил, блоки по бокам повесил, смысл то.
Тебе нужно чтоб по бокам от верха шли ветки от шапки.
Так и сделай бг фон такой и дай body бграудом по центру.
А лист с контентом поверху пойдёт, вот и будут тебе веточки по краям торчать из под листа контента.
Зачем ты усложняешь, ты думай как упрощать а не усложнять.
Ширина твоя страницы наверняка фиксированная на 1000рх, так что по бокам кроме листиков ничего не предвидится.
Кинь мне в личку адресс или страницы или архивом пошли, с начало в личку напиши своё мыло.

Спустя 11 часов, 36 минут, 56 секунд (27.04.2012 - 08:30) nikki4 написал(а):

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

Быстрый ответ:

Здесь расположена полная версия этой страницы.