Реклама на сайте Advertise with us

Css верстка

Расширенный поиск по форуму
 
Новая тема Новая тема   
Автор
Поиск в теме:

htmlcheap.com

С нами с 07.05.04
Сообщения: 6418
Рейтинг: 2072

Ссылка на сообщениеДобавлено: 16/02/08 в 00:06       Ответить с цитатойцитата 

голова болит уже, подскажите как разметить страницу дивами и css:
1. шапка - высота 100пкс, в самом верху экрана
2. контент - ресайзится автоматом заполняя всю доступную ширину
3. футер - высота 100пкс, в самом низу экрана при любом разрешении, если разрешение мелкое то он не перекрывает контент, а у окна появляется вертикальный скролл

спасибо

Дизайн и верстка, эдалт/неэдалт | Tube/CJTube шаблоны | Skype: htmlcheap | Telegram: htmlcheap

0
 



С нами с 25.10.03
Сообщения: 1271
Рейтинг: 679

Ссылка на сообщениеДобавлено: 16/02/08 в 00:12       Ответить с цитатойцитата 

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

8
 

htmlcheap.com

С нами с 07.05.04
Сообщения: 6418
Рейтинг: 2072

Ссылка на сообщениеДобавлено: 16/02/08 в 00:29       Ответить с цитатойцитата 

щас постараюсь донести icon_smile.gif
вообщем имеем то что описал. когда я верстаю получается либо:
1. все идет по порядку, но футер не привязан к нижней части экрана, т.е. при большом разрешении там под футером остается место пустое - некрасиво
2. привязываю футер к нижней части экрана задавая ему position: absolute; bottom: 0; тогда при больших разрешениях все клева но при скажем 800пкс в высоту футер понятное дело перекрывает контент

как то так icon_smile.gif

Дизайн и верстка, эдалт/неэдалт | Tube/CJTube шаблоны | Skype: htmlcheap | Telegram: htmlcheap

0
 



С нами с 25.10.03
Сообщения: 1271
Рейтинг: 679

Ссылка на сообщениеДобавлено: 16/02/08 в 00:43       Ответить с цитатойцитата 

тут кое-чего попалось на глаза посмотри, может удастся решить проблему этим:

overflow
значения - none, clip, scroll
значение по умолчанию - none
поддерживается - элементами, у которых свойство 'position' установлено как 'absolut'
наследование - нет

Это свойство управляет тем, что произойдет, если содержимое элемента выйдет за его границы: clip - обрежет выступающие части элемента, scroll - создаст полосы прокрутки, для просмотра.

8
 

htmlcheap.com

С нами с 07.05.04
Сообщения: 6418
Рейтинг: 2072

Ссылка на сообщениеДобавлено: 16/02/08 в 00:52       Ответить с цитатойцитата 

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

Дизайн и верстка, эдалт/неэдалт | Tube/CJTube шаблоны | Skype: htmlcheap | Telegram: htmlcheap

0
 



С нами с 25.10.03
Сообщения: 1271
Рейтинг: 679

Ссылка на сообщениеДобавлено: 16/02/08 в 01:32       Ответить с цитатойцитата 

да, проблема такая есть.... проще имхо забить icon_smile.gif
но вот можешь посмотреть статейку
_http://xhtml.ru/2005/12/12/body_height_research/
может на какие мысли и подтолкнет, даже хз

8
 



С нами с 01.03.06
Сообщения: 629
Рейтинг: 620

Ссылка на сообщениеДобавлено: 16/02/08 в 15:16       Ответить с цитатойцитата 

имхо, раз уж решились так делать, то лучше сдалать так -

хидер в топе,
тело на всю высоту,
внизу футер.

все это делается, как вариант, через абсолютное позиционирование и отсупы.

а что бы скрол нормальный был - то в тело вложить div с контентом "середины" - которому overflow-y: scroll поставить. тогда будет прокрутка только для центральной части, а футер и хидер будут на месте сидеть.

8
 

htmlcheap.com

С нами с 07.05.04
Сообщения: 6418
Рейтинг: 2072

Ссылка на сообщениеДобавлено: 16/02/08 в 19:19       Ответить с цитатойцитата 

Heavy: привет icon_smile.gif
так вот в том и проблема - мне не надо скроллы. мне нужно чтобы эти три дива нормально отображались, чтобы футер при любом разрешении висел в нижней части, но при мелком разрешении не перекрывал контент и у контента небыло скролла, а скрол появлялся бы у окна, типа чтобы футер из видимой области сваливал нахуй icon_smile.gif

Дизайн и верстка, эдалт/неэдалт | Tube/CJTube шаблоны | Skype: htmlcheap | Telegram: htmlcheap

0
 



С нами с 30.11.03
Сообщения: 1223
Рейтинг: 753

Ссылка на сообщениеДобавлено: 16/02/08 в 20:33       Ответить с цитатойцитата 

если футер не замысловатый то можно в цсс прописать его как БГ страницы и прописать там боттом

Это забавно - делать невозможное.Конверт 1:163 Конверсия 80%

8
 

htmlcheap.com

С нами с 07.05.04
Сообщения: 6418
Рейтинг: 2072

Ссылка на сообщениеДобавлено: 16/02/08 в 20:57       Ответить с цитатойцитата 


это былобы слишком просто %)
футер состоит из 3 частей:
1. бэкграунд который по всей ширине нижней части сайта
2. кусок бэкграунда который в самом центре футера, там иллюстрация и место для текста
3. сам текст

Дизайн и верстка, эдалт/неэдалт | Tube/CJTube шаблоны | Skype: htmlcheap | Telegram: htmlcheap

0
 

htmlcheap.com

С нами с 07.05.04
Сообщения: 6418
Рейтинг: 2072

Ссылка на сообщениеДобавлено: 18/02/08 в 02:08       Ответить с цитатойцитата 

есть еще идеи у кого? icon_smile.gif

Дизайн и верстка, эдалт/неэдалт | Tube/CJTube шаблоны | Skype: htmlcheap | Telegram: htmlcheap

0
 

Ninja ZX-6R

С нами с 19.06.05
Сообщения: 1713
Рейтинг: 906


Передовик Master-X (01.02.2008) Передовик Master-X (16.02.2008) Передовик Master-X (01.03.2008) Передовик Master-X (16.03.2008) Передовик Master-X (01.04.2008) Ветеран трепа Master-X ()
Ссылка на сообщениеДобавлено: 18/02/08 в 02:12       Ответить с цитатойцитата 

протупил, сорри.%)

Интим Магазин

8
 



С нами с 11.06.03
Сообщения: 1266
Рейтинг: 950


Передовик Master-X (01.01.2008)
Ссылка на сообщениеДобавлено: 18/02/08 в 09:44       Ответить с цитатойцитата 

Есть в css2 такой товарисч
min-height
который мог бы хоть как-то помочь.
Так вот засранец IE6 передает привет.

8
 

htmlcheap.com

С нами с 07.05.04
Сообщения: 6418
Рейтинг: 2072

Ссылка на сообщениеДобавлено: 18/02/08 в 17:15       Ответить с цитатойцитата 

Sha писал:
Есть в css2 такой товарисч
min-height
который мог бы хоть как-то помочь.
Так вот засранец IE6 передает привет.

может я непонимаю чего, но и эту фичу уже пробавал
футер у меня постоянно снизу только при параметрах position: absolute; bottom: 0;
а при таком раскладе ему пох на min-height какого то там контента icon_smile.gif перекрыват полюбому

Дизайн и верстка, эдалт/неэдалт | Tube/CJTube шаблоны | Skype: htmlcheap | Telegram: htmlcheap

0
 



С нами с 30.11.03
Сообщения: 1223
Рейтинг: 753

Ссылка на сообщениеДобавлено: 18/02/08 в 17:44       Ответить с цитатойцитата 

код стиля

html, body{
height:100%;
margin:0;
padding:0;
min-height:100%;
}
#contents{
min-height:95%;
margin:0;
position:relative;
}
/* holly hack to target IE win Only \*/
* html #contents{
height:95%;
}
/* end hack */

#footer{
position:relative;
top:-5%;
height:5%;
}
* html #footer{ /*IE */
top:0;
}
| * > #footer{ /* Opera using CSS3 selectors that other browsers will support later, look out */
top:0;
}



код страницы

<div id="contents"> main content</div>
<div id="footer">footer </div>

проверил,работает

Это забавно - делать невозможное.Конверт 1:163 Конверсия 80%

8
 



С нами с 30.11.03
Сообщения: 1223
Рейтинг: 753

Ссылка на сообщениеДобавлено: 18/02/08 в 17:46       Ответить с цитатойцитата 

Это забавно - делать невозможное.Конверт 1:163 Конверсия 80%

8
 



С нами с 11.06.03
Сообщения: 1266
Рейтинг: 950


Передовик Master-X (01.01.2008)
Ссылка на сообщениеДобавлено: 18/02/08 в 19:56       Ответить с цитатойцитата 

Vigo писал:

проверил,работает

Это только на крайняк.
Попробуй поресайзить окно и поймёшь почему я этот вариант не стал писать.

8
 
Новая тема Новая тема   

Текстовая реклама в форме ответа
Заголовок и до четырех строчек текста
Длина текста до 350 символов
Купить рекламу в этом месте!


Перейти:  



Спонсор раздела Стань спонсором этого раздела!

Реклама на сайте Advertise with us

Опросы

Рецепт новогоднего блюда 2022



Обсудите на форуме обсудить (11)
все опросы »