X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Footer наезжает на контент
m1kola
m1kola
Topic Starter сообщение 19.4.2008, 14:27; Ответить: m1kola
Сообщение #1


Доброго времени суток всем.

В общем возникла проблема.

Смотрим сюда: http://m1kola.com/asdf/asdf.html

нужно, что-бы нижняя часть (футер) не наезжал на блоки.

Это происходит потому, что позиция боковых блоков (c1 и c2) фиксированая (position:absolute), а центрального (c2) нет.

Код так замучен потому, что нужно, что бы центральный блок (c2) грузился первым. Тоесть был вверху файла, а потом только грузилось всё остальное.
Ещё такие замуты с блоками c1, c2, c3 потому, что нужно, что бы центральный блок был резиновый, а боковые (c1, c3) были фиксированые (по 210 пикселей).

Если делать float:left, то при сжатии блоки будут съежать. А мне это не как не подходит...
ещё есть вариант поставить padding-bottom для блоков, но это тоже не подходит. т.к. блоки будут тянутся по высоте...

В общем буду рад за помощь...

На всякий случай кроме ЭТОГО привожу код страницы:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
.c1 {
position:absolute;
top:0px;
width:210px;
background-color:#FFFF00;
margin-top:100px;
}
.c2{
position:relative;
margin-left:215px;
margin-right:215px;
background-color:#FF0000;
}
.c3 {
position:absolute;
right:0px;
top:0px;
width:210px;
display:block;
background-color:#00FF00;
margin-top:100px;
}

.header {
position:absolute;
top:0px;
width:100%;
height:100px;
background-color:#66FFFF;
}

.content {
position:relative;
padding-top:100px;
}
.footer {
position:relative;
background-color:#CC6600;
}
</style>
<body>
<div class="content">
<div class="c2">
  <p>fgdg</p>
  <p>dsfgdfgsdf </p>
  <p>gsdfg sdf</p>
  <p>g s df</p>
  <p>g s</p>
  <p>fdshg kdghjdghk</p>
  <p>g</p>
</div>
<div class="c1">
  <p>fgdfgh fgh gh g hfgh fg hfg fdg dfg sgdf g</p>
  <p>dfg sdfg </p>
  <p>dfg </p>
  <p>sdfg </p>
  <p>sdfg dhdfg</p>
  <p>gsdfg sdf</p>
  <p>g s df</p>
  <p>g s</p>
  <p>fdshg kdghjdghk</p>
  <p>g</p>
</div>
<div class="c3">
  <p>fgdgsfdg </p>
  <p>sdfg f</p>
  <p>d gfhgj fgghkgf jg j</p>
  <p>j</p>
  <p>dgh dghk</p>
  <p>d gfhgj fgghkgf jg j</p>
  <p>j</p>
  <p>dgh dghk</p>
  <p>d gfhgj fgghkgf jg j</p>
  <p>j</p>
  <p>dgh dghk</p>
</div>
</div>
<div class="header">ssssss
</div>
<div class="footer">asd<br />asd<br /></div>
</body>
</html>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
01es
01es
сообщение 19.4.2008, 14:55; Ответить: 01es
Сообщение #2


Была та же проблема с футером. Замучался с div-ами. Плюнул, и сделал по таблице...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 19.4.2008, 15:00; Ответить: Exterior
Сообщение #3


Смотрим сюда >>> Макеты сайтов - все подробно разжевано и расплевано
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
01es
01es
сообщение 19.4.2008, 15:04; Ответить: 01es
Сообщение #4


Вот, http://e-petrov.ru/test/three-column/ нашёл в закладках,. как css выдрать думаю догадаешься.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
m1kola
m1kola
Topic Starter сообщение 19.4.2008, 18:04; Ответить: m1kola
Сообщение #5


(01es @ 19.4.2008, 17:55) *
Была та же проблема с футером. Замучался с div-ами. Плюнул, и сделал по таблице...

Я тоже сделал сначала таблицей. Но Потом оказалось, что нужно подать центральную колонку в начале файла.

(Exterior @ 19.4.2008, 18:00) *
Смотрим сюда >>> Макеты сайтов - все подробно разжевано и расплевано

Канеш спасибо...
Я это видил... дело в том, что ...

(m1kola @ 19.4.2008, 17:27) *
нужно, что бы центральный блок (c2) грузился первым. Тоесть был вверху файла, а потом только грузилось всё остальное.


UPD> Я ковырялся.... пробовал как там сделать... пока нечего толкового не вышло...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 20.4.2008, 0:23; Ответить: Exterior
Сообщение #6


m1kola, попробуйте этот вариант:

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Liquid maket, secondary columns fixed width by HTML.BY team</title>

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

body {
font: 12px Arial;
}

h1, p {
margin: 0px 10px;
padding: 5px;
}

#header {
margin-bottom: 20px;
background: #FFC;
}

#menu {
width: 200px;
height: 200px;
float: left;
margin: 0px 0px 20px -100%;
background: #FFC;
}

#right_block {
width: 200px;
height: 200px;
float: left;
margin: 0px 0px 20px -200px;
background: #FFC;
}

#footer {
width: 100%;
clear: left;
background: #FFC;
}

#wrapper {
width: 100%;
float: left;
margin-bottom: 20px;
}

#content {
margin: 0px 200px;
background: #EAEAEA;
}

</style>

</head>

<body>

<div id="container">

<div id="header">
<h1>Header</h1>
</div>

<div id="wrapper">
<div id="content">
<p>Content text</p>
<p>Content text</p>
<p>Content text</p>
<p>Content text</p>
<p>Content text</p>
<p>Content text</p>
<p>Content text</p>
<p>Content text</p>
<p>Content text</p>
<p>Content text</p>
<p>Content text</p>
<p>Content text</p>
</div>
</div>

<div id="menu">
<p>Menu</p>
</div>

<div id="right_block">
<p>Right Block</p>
</div>

<div id="footer">
<p>Footer</p>
</div>

</div>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
m1kola
m1kola
Topic Starter сообщение 20.4.2008, 1:16; Ответить: m1kola
Сообщение #7


Exterior,
оооо!!!!!!!!!!! Вы гений! Я ооочень благодарень вам! Моя извращёная в этом плане фантазия, что-то не помогла мне...
Сейчас попробую на мою работу это всё примерять.
[offtop]
Как её доделаю - отпишу в блоге благодарность за помощь...
Я думаю я увас на долго останусь... Иногда бывает нужна помощь, иногда могу сам помочь... В общем полезный проект... Чота в нём есть... Чота нипахожае на другие... Или эта может я рад в предчувствии конца моих трёх суточных мучений...
[/offtop]

UPD: Огромное спасибо! Вы меня ОЧЕНЬ выручили... Я незнаю сколько бы ещё про возился бы с этим делом...
Exterior, на основе вашего кода сделал то, что нужно... Ещё шапку в низ опустил... Получилось вообще замечательно... То как и требовал заказчик. О вашей помощи я обязательно укажу в своём блоге... Но не сайчас... Сейчас силов нету никаких :(
Я вас не забуду :)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Ищу помощника на контент-рутину (ru, ua, бурж)
 11 SergeyLinkin 2938 3.4.2024, 13:14
автор: 2Index
Открытая тема (нет новых ответов) Хороший контент от нейросети за копейки
 6 satherland 680 2.4.2024, 12:47
автор: Skyworker
Открытая тема (нет новых ответов) Требуется контент-менеджер
 1 Grimov 1161 8.2.2024, 9:54
автор: projectadmin
Открытая тема (нет новых ответов) Контент-менеджер в ссылочные биржи
 3 Natalia22 1671 30.5.2023, 9:19
автор: Natalia22
Открытая тема (нет новых ответов) Ищу работу: контент, копирайтинг, сайты, соцсети
сдельно или на постоянку
 11 iCrew 4718 26.5.2023, 19:07
автор: Kul


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 23.4.2024, 19:30

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet