Форум Сайтостроение Веб-строительство

Прижать див блоки к низу страницы

L
На сайте с 18.02.2012
Offline
83
l17l
2795

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

HTML 


<div class="nizallbottom">

<div class="textbgniz">



<div class="textleftnizchet">

<a href="#"><img src="img/ttt.jpg" width="89" height="32" style="margin-right:10px" alt=""/></a> <a href="#"><img src="img/ttt.jpg" width="89" height="32" alt=""/></a></div>

<div class="niztexttt">

COPYRIGHT © 2014 <br/>РАЗРАБОТЧИК <a href="-----" title="Создание сайтов, разработка сайтов, администрирование сайтов, реконструкция сайтов, продвижение сайтов">----</a></div>

<div class="niztexttt1">

ОOО «Автомир» С помощью нашей компании вы можете купить практически любой автомобиль в США, Японии и Корее.</div>



</div>



<div class="nizbgka"></div>

<div class="nizpolos"></div>

<div class="niz"></div></div>

CSS 


.nizallbottom{

position: absolute;

width: 100%;

bottom: 0;

}



.nizpolos {

width:100%;

border-bottom: 12px solid #000000;

-webkit-box-shadow: 0px -8px 10px 0px rgba(50, 50, 50, 0.3);

-moz-box-shadow:    0px -8px 10px 0px rgba(50, 50, 50, 0.3);

box-shadow:         0px -8px 10px 0px rgba(50, 50, 50, 0.3);

}

.niz{

border-bottom: 3px solid #686868;

width:100%;

}

.nizbgka{

width:1100px;

height: 75px;

margin-right: auto;

margin-left: auto;

background-image: url(../img/nizbgka.png);

margin-bottom: -15px;

position: relative;

}

.textbgniz {

width: 1000px;

margin-right: auto;

margin-left: auto;

z-index: 1000;

position: relative;

margin-bottom: -62px;

}



.textleftnizchet{

opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);

float: left;

}

.textleftnizchet a:hover{

opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);

}

.niztexttt{

float: left;

margin-top: 1px;

margin-left: 50px;

color: #B2B1B5;

font-size: 14px;

}

.niztexttt a{

color: #B2B1B5;

}

.niztexttt a:hover{

color: #ffffff;

opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);

}

.niztexttt1{

margin-top: -2px;

margin-left: 450px;

color: #B2B1B5;

font-size: 14px;

}

в хроме все ок, в мозиле какой то отступ, в опере так же.

скрин:

D
На сайте с 29.06.2010
Offline
147
dpcenter
#1

вы бы хоть сслыку на сайт дали, чтобы по нему можно было FireBug ом пройтись

L
На сайте с 18.02.2012
Offline
83
l17l
#2
dpcenter:
вы бы хоть сслыку на сайт дали, чтобы по нему можно было FireBug ом пройтись

я на компе новый дизайн делаю для сайта ! так что сайт не в нете.

Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#3

Не стану разбирать ваш код, просто приведу пример реализации.

L
На сайте с 18.02.2012
Offline
83
l17l
#4
Olldman:
Не стану разбирать ваш код, просто приведу пример реализации.

Да таких примеров гора ! это простой пример, а мне надо с моим как то решить.

---------- Добавлено 05.09.2014 в 15:23 ----------


Проблема тут:
Контент блоки !
.main {
padding-top: 10px;
padding-bottom: 10px;
width: 1070px;
margin-right: auto;
margin-left: auto;
height: 100%;
}
Низ сайта, который приклеен к низу.
.nizallbottom{
width: 100%;
bottom: 0;
}

щас выглядит так:

если в нижний блок вставляю position: absolute;

.nizallbottom{

width: 100%;

bottom: 0;

position: absolute;

}

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

выглядит правильно но есть косяк...

Если блоки продлить, допустим вставить туда <br/> или просто пустые строки.

То верхняя часть блоков залезает на футер.

Выглядит это так:

Вот такая беда.

Между нижним блоком и верхним стоит

<div style="clear:both"></div>

Emoji в SEO, или РСЯ: Как заработать на Возможности для брендинга в
Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#5

Судя по последнему скрину, единицы вставлены в какой-то блок до футера. Если вы применяете абсолютное позиционирование для футера, то должны заранее знать его высоту и, ессно, делать соответствующие отступы от основного блока страницы на высоту футера. Опять же не известно применяете ли вы дефолтное обнуление. Лучше конечно взглянуть на весь код и стили страницы.

Google не наказывает за Google о повторяющемся контенте Google не дифференцирует внутренние
SeVlad
На сайте с 03.11.2008
Offline
1609
SeVlad
#6
l17l:
а мне надо с моим как то решить.

Если надо решить - дай людям руками пощупать. Выложи где-нить - делов-то.

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.
L
На сайте с 18.02.2012
Offline
83
l17l
#7
SeVlad:
Если надо решить - дай людям руками пощупать. Выложи где-нить - делов-то.

Сделал, стили в самом шаблоне

http://worldcars25.ru/ind.html

Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#8
l17l:
Сделал, стили в самом шаблоне

-

1. в самое начало стилей вставить: 

*{margin:0;padding:0;}

html{height:100%;}

* html body{height:100%;}

body{min-height:100%;position:relative;}

для .main изменить отступ на высоту футера: 

padding-bottom: 80px;

И, кстати, элемент <div style="clear:both;"></div> не нужен. Ну и в коде последний закрывающий </div> лишний.

L
На сайте с 18.02.2012
Offline
83
l17l
#9
Olldman:
-
1. в самое начало стилей вставить: 
*{margin:0;padding:0;}

html{height:100%;}

* html body{height:100%;}

body{min-height:100%;position:relative;}

для .main изменить отступ на высоту футера: 
padding-bottom: 80px;

И, кстати, элемент <div style="clear:both;"></div> не нужен. Ну и в коде последний закрывающий </div> лишний.

Спасибо большое, щас все гоод !

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий