[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Подвал прибит, контент с отступом сверху.
Форум PHP программистов > Дизайн и верстка
redreem
18.01.2012 - 14:15
Есть схема верстки:

<!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="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<style type="text/css">
		<!-- обнулятор  -->
		html, body, div, span, applet, object, iframe, 
		h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
		abbr, acronym, address, big, cite, code, del, dfn, 
		em, font, img, ins, kbd, q, s, samp,small, strike, 
		strong, sub, sup, tt, var, b, u, i, center,
		dl, dt, dd, ol, ul, li, fieldset, 
		form, label, legend, table, caption, 
		tbody, tfoot, thead, td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
		body {line-height:1}ol, 
		ul {list-style:none}
		blockquote, q {quotes:none}blockquote:before, blockquote:after, q:before, q:after {content:'';content:none} 
		:focus {outline:0}ins {text-decoration:none}del {text-decoration:line-through} img {border:0;outline:0} 

		html,body {min-height:100%}

#globalcanva {
	position:relative;width:100%;margin:0;
	min-height:100%;
	background-color:#aaf;
	z-index:0;
}

#topLine {position:absolute;width:100%;height:60px;z-index:10;color:#fff}
#topLineContent {position:relative;width:980px;height:60px;word-spacing:0px;background-color:#444;z-index:10;margin:0 auto}

#localcanva {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
	position:relative;
	width:980px;
	margin:0 auto;
	z-index:0;
	background-color:#afa;
	min-height:100%;
	padding-bottom:220px;
	padding-top:340px;
	color:#000;
}

#content {background-color:#faa;cursor:pointer}

#footer {
	position:relative;
	width:100%;
	height:220px;
	font-size:90%;
	background-color:#111;
	z-index:100;
	opacity:0.8;
	margin-top:-220px;
	color:#fff
}
#footerContent {position:relative;width:980px;height:220px;margin:0 auto}

</style>	
	
</head>
<body>

<div id="globalcanva">
	
	<div id="topLine"><div id="topLineContent">TOP LINE</div></div>
	
	<div id="localcanva">
		<div id="content" onclick="addContent(this)">
			content
		</div>
	</div>		
	
	<div id="footer"><div id="footerContent">footer</div></div>
	
</div>

<script type="text/javascript">function addContent(el) {el.innerHTML = el.innerHTML + '<br><br>ADDED CONTENT';}</script>

</body>
</html>


Ключевые моменты:

1. подвал фиксирован по высоте (220px), всегда прибит к низу.
2. контент (розовый) - с фиксированным отступом сверху (340px).

Приведенный пример работает только в опере.
В розовый бокс можно тыкать - будет имитация заполнения контентом.

Помогите допилить его под кроссбраузерность только средствами css (js ненадо).






Спустя 13 часов, 47 минут, 22 секунды (19.01.2012 - 03:02) bodja написал(а):
Не уверен правильно ли понял,но по ходу пробуйте.

<!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="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<style type="text/css">
		<!-- обнулятор  -->
		html, body, div, span, applet, object, iframe, 
		h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
		abbr, acronym, address, big, cite, code, del, dfn, 
		em, font, img, ins, kbd, q, s, samp,small, strike, 
		strong, sub, sup, tt, var, b, u, i, center,
		dl, dt, dd, ol, ul, li, fieldset, 
		form, label, legend, table, caption, 
		tbody, tfoot, thead, td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
		body {line-height:1}ol, 
		ul {list-style:none}
		blockquote, q {quotes:none}blockquote:before, blockquote:after, q:before, q:after {content:'';content:none} 
		:focus {outline:0}ins {text-decoration:none}del {text-decoration:line-through} img {border:0;outline:0} 


#globalcanva {
	margin:0;
	min-height:100%;
	background-color:#aaf;
}

#topLine {height:60px;color:#fff}
#topLineContent {width:980px;height:60px;word-spacing:0px;background-color:#444;margin:0 auto}

#localcanva {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
	width:980px;
	margin:0 auto;
	background-color:#afa;
	min-height:100%;
	padding-bottom:220px;
	padding-top:340px;
	color:#000;
}

#content {background-color:#faa;cursor:pointer;width:980px;height:60px;display: table-cell;}

#footer {
	height:220px;
	font-size:90%;
	background-color:#111;
	opacity:0.8;
	margin-top:-220px;
	color:#fff
}
#footerContent {width:980px;height:auto;padding:0px;}

</style>	
	
</head>
<body>

<div id="globalcanva">
	
	<div id="topLine"><div id="topLineContent">TOP LINE</div></div>
	
	<div id="localcanva">
		<div id="content" onclick="addContent(this)">
			content
		</div>
	</div>		
	
	<div id="footer"><div id="footerContent">footer</div></div>
	
</div>

<script type="text/javascript">function addContent(el) {el.innerHTML = el.innerHTML + '<br><br>ADDED CONTENT';}</script>

</body>
</html>

Спустя 1 час, 13 минут, 57 секунд (19.01.2012 - 04:16) inpost написал(а):
redreem
Я то на реальных примерах посмотреть, что да как работает могу, а вот по коду что-то вообще верстка не идёт.

Спустя 11 часов, 20 минут, 29 секунд (19.01.2012 - 15:36) redreem написал(а):
bodja
не подходит. подвал не "прибит к низу".

Спустя 3 часа, 26 минут, 19 секунд (19.01.2012 - 19:03) Xes написал(а):
В чем задача то прижать футер книзу? Много всети про это написано или конкретно с этим кодом чето делать надо.
Провереный вариант с прижатым футером есть.

Спустя 1 час, 12 минут, 50 секунд (19.01.2012 - 20:16) redreem написал(а):
вообще говоря в топике только кусок от проблемы.
вот полная схема: http://websyndicate.ru/phpforum/grid.png
подвал прибить не проблема. проблема в реализации совокупности ВСЕХ условий схемы.

Спустя 19 часов, 30 минут, 47 секунд (20.01.2012 - 15:46) bodja написал(а):
Такое на дивах нужно сделать ?

Спустя 15 минут, 24 секунды (20.01.2012 - 16:02) inpost написал(а):
redreem
В связи с огромными проблемами дивов, я бы колонку левую и правую сделал бы на таблице, это решило всё бы проблемы.

Спустя 15 минут, 43 секунды (20.01.2012 - 16:18) redreem написал(а):
не решило бы. таблица бы автоматом до подвала не тянулась бы все равно.
я решил минимальными потерями - повесил на ресайз вычисление параметра min-height для одного элемента.
один знакомый верстальщик уверяет что можно все таки сделать smile.gif щас вот пытается smile.gif

Спустя 7 часов, 56 минут, 4 секунды (21.01.2012 - 00:14) redreem написал(а):
выкладываю текущее рабочее решение.


<!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="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title>LAYOUT</title>
	
<style type="text/css">	
html, body, div, center {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body {line-height:1}
div {text-align:center}
	
	html,body {width:100%;color:#fff;height: 100%;margin:0}
	#globalcanva {position:relative;width:980px;margin:0 auto;min-height:100%}
	#header {position:absolute;width:980px;height:60px;word-spacing:0px;z-index:100}
	#localcanva {position:relative;width:980px;margin:0 auto}
	#pageContentL {position:relative;width:240px}
	#pageContentR {position:relative;width:740px;margin-left:240px}
	#pCL {position:relative;float:left;width:240px;margin-left:-240px}
	#pCR {position:relative;float:left;width:700px;margin-left:40px}
	#footer {position:relative;width:100%;height:220px;margin-top:40px;font-size:90%;margin-top:-220px}
	#footPusher {position:relative;width:100%;height:220px;margin:0;padding:0;clear:both}
	#pagePusher {position:relative;width:100%;height:400px;margin:0;padding:0;clear:both}
	.clear {position:relative;width:100%;height:0px;clear:both;font-size:0;overflow:hidden}	
	<!-- раскрасим для наглядности -->
	body {background-color:#444}
	#globalcanva {background:#555}
	#header {background:#111}
	#pageContentL {background:#222}
	#pCL {background:#9d9;cursor:pointer}
	#pCR {background:#48f;cursor:pointer}
	#footer {background:#111}
</style>	
	
</head>
<body onload="resizer.init()">

<div id="globalcanva">

	<div id="header">HEADER</div>
	<div id="localcanva">
		<div id="pagePusher"> </div>
		
		<div id="pageContentL">
		<div id="pageContentR">

			<div id="pCL" onclick="addContent(this)">LEFT CONTENT</div>
			<div id="pCR" onclick="addContent(this)">RIGHT CONTENT</div>
	
			<div class="clear"> </div>

		</div>
		</div>
		
		<div id="footPusher"> </div>
	</div>
	
</div>
<div id="footer">FOOTER</div>

<script type="text/javascript">
	doc = document;
	var resizer = {
		el:false, subH:0, vH:0,
		action:function () {
			this.vH = doc.compatMode=='CSS1Compat' && !window.opera?doc.documentElement.clientHeight:doc.body.clientHeight;
			if (this.vH == 0) this.vH=doc.documentElement.clientHeight;
			var mH = this.vH - this.subH;
			if (mH>0) this.el.style.minHeight=mH+'px'; else this.el.style.minHeight='0px';
		},
		init:function () {
			this.el = doc.getElementById('pageContentR');
			var h1 = doc.getElementById('footer').offsetHeight;
			var h2 = doc.getElementById('pagePusher').offsetHeight;
			this.subH = h1*1+h2*1;
			this.action();
		}
	}
	window.onresize = function() {resizer.action();};

	function addContent(el) {el.innerHTML = el.innerHTML + '<br><br>ADDED CONTENT';}
</script> 
</body>
</html>


Комментарии:
1. Исходная задача схематично показана ТУТ
2. В решении на событие onresize вешается всего лишь пересчет min-height одного элемента. при отключенном js все равно все будет отображаться корректно, мы потеряем лишь "дизайнерский ход".
3. Решение не работает только в IE при масштабировании колесиком мыши, но в принципе отследить Ctrl+колесико и повесить на него обработчик - дело техники.
4. В зеленый и синий блоки можно тыкать - тем самым посмотреть как ведет себя схема при добавлении контента.
5. Хотя схема для моего случая меня полностью устраивает и уже утверждена как рабочий вариант - если кто-то из принципа будет утверждать что ее можно сделать и без JS и сделает - ставлю 100 р. в качестве поощрения (и вам разминка для мозга и мне польза :) ). Ваша схема должна работать только на CSS2 и во всех случаях где работает и моя.

Так же решение выложено: http://redreem.ru/phpforum/layout.html

P.S. Так как у нас тут любят читать "по диагонали" - подсказка: ...ставка 100 р... :)

Спустя 1 день, 14 часов, 19 минут, 23 секунды (22.01.2012 - 14:33) redreem написал(а):
last UP (шо версткой вообще никто не занимается?)

Спустя 5 часов, 20 минут, 51 секунда (22.01.2012 - 19:54) inpost написал(а):
redreem
Времени нет разбирать случай большой, к тому же он решен.

Спустя 59 минут, 18 секунд (22.01.2012 - 20:53) asokol написал(а):
Максимум, чего удалось добиться с моими скромным знаниями html и css:

<style type="text/css">
html, body { height:100%; padding:0; margin:0; }
.container { position:relative; min-height:100%; }
.wrapper { position:relative; width:980px; margin:0 auto; height:100%; }
.header { height:60px; }
.body { padding:340px 0 220px; }
.column_left { float:left; width:250px; min-height:200px; }
.column_right { float:right; width:730px; }
.footer { position:absolute; bottom:0; width:100%; height:220px; }
.clr { clear:both; height:0; overflow:hidden; font-size:0; }

/* цвета */
.header { background-color:#777; opacity:0.5; }
.body { background-color:#bb0; }
.column_left { background-color:#000; color:#fff; }
.column_right { background-color:#f00; color:#fff; }
.footer { background-color:#ccc; opacity:0.5; }
.padding { padding:5px 10px; }
</style>
...
<div class="container">
    <div class="wrapper">
        <div class="header">
            <div class="padding">header</div>
        </div>
        <div class="body">
            <div class="column_left">
                <div class="padding">
                    left column<br />
                    left column<br />
                    left column<br />
                    left column<br />
                </div>
            </div>
            <div class="column_right">
                <div class="padding">
                    center block<br />
                    center block<br />
                </div>
            </div>
            <div class="clr"></div>
        </div>
    </div>
    <div class="footer">
        <div class="padding">footer</div>
    </div>
</div>

Спустя 7 минут, 24 секунды (22.01.2012 - 21:01) redreem написал(а):
asokol
благодарю за адекватность smile.gif
левая колонка должна всегда "доходить до подвала".

Спустя 2 часа, 11 минут, 5 секунд (22.01.2012 - 23:12) sebastjan написал(а):
redreem Срочно или как?
Не проблемма, решаемо.
Только вот колонка левая будет имитированна. То есть залит фон по вертикали и будет создавться впечатление что резина по вертикали.
Нужно для этого точно знать ширину левой колонки.
Пиши в личку я майл чаще конролирую чем держать всё время открытую тему.

Спустя 33 минуты, 35 секунд (22.01.2012 - 23:45) bodja написал(а):
Проблема то решаемая ,но только не кросс-браузерно. biggrin.gif
У меня на ИЕ6 ,все так лихо получилось,с остальными как не с одним ,так сдругим костыли,из за этого футера.
Вообще ,на кой нужен прибитый футер,что контент нечем забить?

Спустя 14 минут, 27 секунд (23.01.2012 - 00:00) redreem написал(а):
bodja
Цитата
на кой нужен прибитый футер


это хотелка дизайнера smile.gif

Спустя 1 минута, 41 секунда (23.01.2012 - 00:01) redreem написал(а):
sebastjan

да, не, я писать уж не буду тебе smile.gif я уже по макету наверстал сверху - макет рабочий smile.gif
я выложил последний свой топик про решение - просто как разминку-задачу. не будет решения - переживу. хотя конечно хочется увидеть css2 решение smile.gif 4 дня убил на поиск smile.gif

Спустя 20 часов, 30 минут, 39 секунд (23.01.2012 - 20:32) vitaly-go написал(а):
redreem, вот собственно дошли сегодня руки добить сию проблему до конца, правда не без обмана )))
но проблема решена помоему :)
хотя и прийдется в последствии немного помучаться если будет обвес графэлементами но это уже проще и тоже решаемо :)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>footer прижат колонки псевдорастянуты к низу</title>

<style type="text/css">

html,body{
    height:100%;
    margin:0;
}
div {
     position:relative;
     overflow:hidden;
	 display:block;
	 border:1px fuchsia solid ;
}


.wrap{
    position:relative;
    min-height:100%;
    width:980px;
    margin:0 auto;
    overflow:hidden;
}

.header1 {
    width:980px;
    margin:0 auto;
    height:400px;
    background-color:green;
    z-index:1;
}
.header2 {
    width:980px;
    margin:0 auto;
    height:60px;
    background-color:blue;
}
.header3 {
    width:980px;
    margin:0 auto;
    height:340px;
}

.content1{
    padding-bottom:230px;
    width:280px;
    margin:0 auto;
    height:100%;
    float:left; 
}
.content2{
    padding-bottom:230px;
    width:690px;
    margin:0 auto;
    min-height:10px;
    position:relative;
    height:100% ;
    float: right; 
}

.footer{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    background-color:fuchsia;
}

.footer_inner{
    width:980px;
    margin:0 auto;
    height:220px;
    border:1px solid red;
}

.obman {
    position:absolute;
    bottom:0;
    overflow:hidden;
    height:100%;
    width:980px;
    z-index:-1;
}
.obman1 {
    position:absolute;
    bottom:0;
    overflow:hidden;
    height:100%;
    background-color:lime;
    width:280px;
    float:left;
    z-index:-1;
}
.obman2 {
    position:absolute;
    bottom:0;
    overflow:hidden;
    height:100%;
    background-color:lime;
    width:690px;
    margin-left:290px;
    float: right;
}

</style>

</head>
<body>

<div class="wrap">

   <div class="header1">
      <div class="header2"> собственно хедер
      </div>
      <div class="header3"> 
      содержимое фиксированной высоты после хедера <br> цвет фона ему неназначен
      </div>
   </div>
	
	
	<div class="content1">
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
	</div>
	<div class="content2">
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
	</div>

	
	<div class="footer">
		<div class="footer_inner">
			Этот текст находится внутри футтера и всегда будет внизу страницы на любом разрешении экрана 
		</div>
	</div>
<!-- обманные подложки под колонки -->
<div class="obman" >
	       <div class="obman1">
	       </div>
	       <div class="obman2">
	       </div>
</div>	       
	       
	
</div>

</body>
</html>

Спустя 1 минута, 49 секунд (23.01.2012 - 20:34) vitaly-go написал(а):
border:1px fuchsia solid ; у div в начале css забыл убрать

Спустя 58 минут, 50 секунд (23.01.2012 - 21:33) redreem написал(а):
ок, один маленький момент - левая колонку, которая тянется до футера надо покрасить в "свой" цвет smile.gif как?

Спустя 1 час, 2 минуты, 22 секунды (23.01.2012 - 22:35) vitaly-go написал(а):
.obman1 - левая
.obman2 - правая

Спустя 3 минуты, 13 секунд (23.01.2012 - 22:38) redreem написал(а):
подвал как на 100% по ширине? smile.gif

Спустя 14 часов, 36 минут, 58 секунд (24.01.2012 - 13:15) vitaly-go написал(а):
redreem, забирайте :)

html,body{  height:100%;   margin:0; }
div {
     position:relative;
     overflow:hidden;
	 display:block;
	 border:1px fuchsia solid ;
}
.wrap{
    position:relative;
    min-height:100%;
    width:100%;
    overflow:hidden;
}
.header1 {
    width:980px;
    margin:0 auto;
    height:400px;
    background-color:green;
    z-index:1;
}
.header2 {
    width:980px;
    margin:0 auto;
    height:60px;
    background-color:blue;
}
.header3 {
    width:980px;
    margin:0 auto;
    height:340px;
}
.content{
    width:980px;
    margin:0 auto;
    height:100%;
}
.content1{
    padding-bottom:250px;
    width:280px;
    margin:0 auto;
    height:100%;
    float:left; 
}
.content2{
    padding-bottom:250px;
    width:690px;
    margin:0 auto;
    min-height:10px;
    position:relative;
    height:100% ;
    float: right; 
}
.foot {
    position:absolute;
    bottom:0px;
    width:100%;
    height:220px;
    background-color:green;
    z-index:1;
}
.footer{
    width:980px;
    margin: 0 auto;
    background-color: aqua;
}
.footer_inner{
    width:980px;
    margin:0 auto;
    height:220px;
    border:1px solid red;
}
.obman {
    position:absolute;
    bottom:0px;
    left:50%;
    margin-left:-490px;
    height:100%;
    width:100%;
    z-index:-1;
}
.obman1 {
    position:absolute;
    bottom:0;
    overflow:hidden;
    height:100%;
    background-color:lime;
    width:280px;
    float:left;
    z-index:-1;
}
.obman2 {
    position:absolute;
    bottom:0;
    overflow:hidden;
    height:100%;
    background-color:lime;
    width:690px;
    margin-left:290px;
    float: right;
}



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>footer прижать к низу</title>

<link href="style1112223334445555.css" rel="stylesheet" type="text/css" >

</head>
<body>

<div class="wrap">

   <div class="header1">
      <div class="header2"> собственно хедер
      </div>
      <div class="header3"> 
      содержимое фиксированной высоты после хедера <br> цвет фона ему неназначен
      </div>
   </div>
	
	
	<div class="content">
	   <div class="content1" style="left: 0px; top: 0px">
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
	   </div>
	   <div class="content2">
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
            Контент над футером. Если контента будет много - он корректно отодвинет футер вниз. <br />
	   </div>
	</div>

	
	<div class="foot">
	   <div class="footer">
		   <div class="footer_inner">
			Этот текст находится внутри футтера и всегда будет внизу страницы на любом разрешении экрана 
		   </div>
	   </div>
	</div>
<!-- обманные подложки под колонки -->
<div class="obman" >
	       <div class="obman1">
	       </div>
	       <div class="obman2">
	       </div>
</div>	       
	       
	
</div>



</body>
</html>


проверено в опере хроме и IE9 :)

Спустя 8 месяцев, 6 дней, 18 часов, 14 минут, 47 секунд (1.10.2012 - 07:30) redreem написал(а):
http://websyndicate.ru/phpforum/vg-bad.jpg
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.