CSS-DIV-Вёрстка

Scorp · 11.10.2008, 09:59

Люди, помогите разобраться. не могу понять как мне плиту подвала опустить вниз. вот тело

html
-------------

<body>

<div id="logo">Лого</div>
<div id="left">Левая плита </div>
<div id="right">Правая плита</div>
<div id="center">центр</div>
<div id="cpr">подвал</div>

</body>

-------------
вот css

#logo {

width: 1200px;
height: 210px;
position: absolute;
top:0px;
left:0px;
border: 1px solid blue;

}
#left {
width: 250px;

position: absolute;
top:210px;
left:0px;
border: 1px solid blue;
}
#right {
width: 250px;

position: absolute;
background:#ffecbe;
top:210px;
left:950px;
border: 1px solid blue;
}
#center {
width: 700px;

position: absolute;
top:210px;
left:250px;
border: 1px solid blue;
}

#cpr {
width: 1200px;
height:50px;
position: absolute;
top:0px;
left:0px;
border: 1px solid blue;

Aldes · 11.10.2008, 23:58

Цитата:

Сообщение от Scorp

#cpr {
width: 1200px;
height:50px;
position: absolute;
top:0px;
left:0px;
border: 1px solid blue;

Вы же сами его к верху лепите

Цитата:

Сообщение от Scorp

плиту подвала опустить вниз

надо написать bottom:0px;

Scorp · 13.10.2008, 05:42

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

3ABAPKA · 13.10.2008, 08:53

Цитата:

#cpr {
width: 1200px;
height:50px;
position: absolute;
top:0px;
left:0px;
border: 1px solid blue;

не надо использовать position: absolute;
тем более что не правильно=хочешь его вниз экрана а пишешь top:0px;

если установить position: absolute; то при наполнении страницы контентом может случиться так что подвал останется на месте (например по средине) а текст уйдет далеко под него

вот по пробуй так поставь position: absolute; bottom:0px;letf:0px;
твой подвал прилипнет к низу экрана, но радость твоя будет не долгой=теперь напиши в центральном диве текста столько чтоб появился бегунок и посмотри где окажется твой подвал

хотел рецепт описать как сделать чтоб подвал был всегда внизу, а потом посмотрел, что у тебя все на absolute, что не резину ты верстаешь и думаю - тебе и не надо всего этого сделай как Aldes сказал и все будет хорошо

Scorp · 13.10.2008, 10:20

3ABAPKA,
Опиши как сделать что бы подвал в низу был всё время.. вообще было бы неплохо в аське пообщаться ... оставлю свою 305-557-527

3ABAPKA · 14.10.2008, 10:58

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

Цитата:

Сообщение от Scorp

3ABAPKA,
Опиши как сделать что бы подвал в низу был всё время.. вообще было бы неплохо в аське пообщаться ... оставлю свою 305-557-527

Могу рассказать как делаю я=не значит что это супер правильно:
Самому лень верстать резину на сайте поэтому я чаще всего беру готовую здесь http://www.dynamicdrive.com/style/layouts/category/C10/ если тебе нужна резина во все стороны то исходя из приведенного тобой кода лучше всего подходитhttp://www.dynamicdrive.com/style/la...d-fluid-fluid/=скопируй код, он там внизу страницы, раздели на .css файл и .html файл. Вот в принцепе и все, резина в "ширь" есть и на разных маниторах и на разных расшырениях пустого пространства по бокам страницы не появится как например здесьhttp://www.odnoklassniki.ru/, например у меня широкоэкранный манитор и появляется пустое пространство.

потом я делаю примерно так.
1. Сначало работаю с кодом подвала который скачал, нахожу id="footer" и переименовываю его (как угодно), а в css файле создаю

Код:

#как угодно{
 }

и прописываю свойства=высоту ставлю высоте того подвала, который реально будет подвалом, обязательно переношу свойство clear: left; дальше на усмотрене. Короче подвал предоставленный в коде я оставляю как пустой контейнер с необходимым набором свойств.
2. Используя <div id="footer"></div>создаю подвал=это тот подвал который навсега должен прилипнуть к низу экрана. У него есть статичная высота. Высата подвала всегда должна совпадать с высотой пустого контейнера. Пустой контейнер из п. 1 я использую для 100% гаранти того что подвал не наедет на контент. Дык вот потом я нахожу место где кончается в позаимствованном коде <div id="maincontainer">когда найду </div> после него пишу<div id="footer"></div> а в файле .css пишу

Код:

#footer{
           hieght:40px;//**(40 это высота подвала к примеру)**//
           margin-bottom:-40px;
}

3. в файле css должна быть такая конструкция

Код:

html {
  height:100%;
}
 body {
  margin:0;
  padding:0;
  height:auto !important;
  height:100%;
  min-height:100%;
}

4. в файле css пишу

Код:

#maincontainer{
                                  height:auto !important;
                                  height:100%;
                                  min-height:100%;
                               }

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

Scorp · 14.10.2008, 12:30

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

------------HTML ТЕЛО--------
<div id="all">
<div id="logo">ЛОГО</div>
<div id="left">ЛЕВО

<div id="4ehov"></div>
</div>
<div id="right">ПРАВ</div>
<div id="center">ЦЕНТР</div><div id="cpr">копирайт</div>

</div>

----------------CSS------------------------

body {
width: 1200px;
margin: 0pt;
padding: 0pt;
text-align:center
font-family: "Times New Roman",Times,serif;
font-size: 13px;
/*background-color: #666666;*/
}

/*---------------------------------------------------------------------------лого-*/
#logo { /*Самый верх-синий цвет*/

float: none;
width: 1200px;
background : url(../images/logo.jpg) no-repeat 0px 0;
height : 210px;

background-color: #0033FF;
}

/*-----------------------------------------------------------------------------МЕНЮ-*/
#left {

width: 20%;

float: left;
font-size: 15px;
background-color: #99CC00;
}

/*-----------------------------------------------------------------------------ЦЕНТР*/
#center {

width: 60%;
float: left;
font-size: 14px;
background-color: #FF9933;
}
/*---------------------------------------------------------------------------ПРАВАЯ-*/
#right {
z-index: 6;
width: 20%;
float: right;
background-color: #CC33CC;
}

/*------------------------------------------------------------------------------НИЗ-*/
#cpr {

width: 100%;
height: 20px;
cursor: auto;
float: left;
bottom: 100%;
background-color: #00FFFF; /*clear: none;*/
}

#4ehov { /*кртинка которую я не могу вставить*/
background-image : url(../images/4ehovjpg) no-repeat 0px 0;

}

Лайм · 14.10.2008, 14:56

Посмотри у тебя в названии фотки не стоит точка перед jpg,может по этому не может прочитать

3ABAPKA · 14.10.2008, 15:09

Вопрос ради любопытства?

Код:

body {
width: 1200px;
...

Если я захочу посмотреть этот сайт на мониторе с расширением 800*600, я че должен бегунком дергать вправо и лево или с на экране с расширением больше 1200рх смотреть на пустое пространство вокруг сайта?

Scorp · 15.10.2008, 02:05

Лайм,
Да нет точка у меня стоит, всё как надо. не знаю почему тут её нет. #4ehov { /*кртинка которую я не могу вставить*/
background-image : url(../images/4ehov.jpg) no-repeat 0px 0;

3ABAPKA,
С разрешением экрана 800x600, я лет 10 уже точно не видал компутеров. если кто то зайдёт с таким разрешением ему придётся двигать бегунками. а что касается большего экрана чем 1200 то придётся смотреть на пространства пустое). диз делал не я, и диз сделан не под резину.. или возможно как то подогнать ? я просто не силён в верстке, и если что то не так делаю подскажи ).. а вообще куча сайтов с такими проблемами. тот же soccer.ru с компа у меня смотрится нормально, а с бука захожу куча пространства по бокам. Ты подскажи что я с картинкой делаю не так, ведь тупо копирую код с шапки(на шапке отображается картинка) переименовываю logo.jpg на 4ehov.jpg а картинка почему то не отображается. что то делаю не так а что не могу понять.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Вёрстка для опыта	СерП	Резюме	0	05.08.2009 21:46
Вёрстка под CMS	Newfelix	Кальянная	5	16.06.2008 15:33
Валидная div-ная вёрстка	Мерлин	HTML, CSS, JavaScript	14	13.02.2008 14:31
div-вёрстка	Nielson	HTML, CSS, JavaScript	6	31.10.2005 11:14
Дивная вёрстка	vision	HTML, CSS, JavaScript	4	11.04.2005 12:10

11.10.2008, 09:59	#1
Scorp	Люди, помогите разобраться. не могу понять как мне плиту подвала опустить вниз. вот тело html ------------- <body> <div id="logo">Лого</div> <div id="left">Левая плита </div> <div id="right">Правая плита</div> <div id="center">центр</div> <div id="cpr">подвал</div> </body> ------------- вот css #logo { width: 1200px; height: 210px; position: absolute; top:0px; left:0px; border: 1px solid blue; } #left { width: 250px; position: absolute; top:210px; left:0px; border: 1px solid blue; } #right { width: 250px; position: absolute; background:#ffecbe; top:210px; left:950px; border: 1px solid blue; } #center { width: 700px; position: absolute; top:210px; left:250px; border: 1px solid blue; } #cpr { width: 1200px; height:50px; position: absolute; top:0px; left:0px; border: 1px solid blue;

13.10.2008, 05:42	#3
Scorp	Aldes, я этим только начал заниматься, разбираюсь так сказать в общей сложности дня 4. мне нужно сделать обычный шаблон, шапка 3 колонки , подвал. но что то я не могу никак понять, как же мне их сделать. собственно говоря вся проблем в подвале. подскажи как сделать что бы колонка центровая сдвигала подвал в низ. а то подвал тупо остаётся на 1 месте , когда центровая колонка с инфой спускается вниз

13.10.2008, 10:20	#5
Scorp	3ABAPKA, Опиши как сделать что бы подвал в низу был всё время.. вообще было бы неплохо в аське пообщаться ... оставлю свою 305-557-527

14.10.2008, 12:30	#7
Scorp	сделал колонки, подвал ,всё как мне надо.... но возникла следующая проблема, не могу вставить картинки.. в лого вставилось всё без проблем, а вот остальное не могу.. подскажите что не так. ------------HTML ТЕЛО-------- <div id="all"> <div id="logo">ЛОГО</div> <div id="left">ЛЕВО <div id="4ehov"></div> </div> <div id="right">ПРАВ</div> <div id="center">ЦЕНТР</div><div id="cpr">копирайт</div> </div> ----------------CSS------------------------ body { width: 1200px; margin: 0pt; padding: 0pt; text-align:center font-family: "Times New Roman",Times,serif; font-size: 13px; /background-color: #666666;/ } /---------------------------------------------------------------------------лого-/ #logo { /Самый верх-синий цвет/ float: none; width: 1200px; background : url(../images/logo.jpg) no-repeat 0px 0; height : 210px; background-color: #0033FF; } /-----------------------------------------------------------------------------МЕНЮ-/ #left { width: 20%; float: left; font-size: 15px; background-color: #99CC00; } /-----------------------------------------------------------------------------ЦЕНТР/ #center { width: 60%; float: left; font-size: 14px; background-color: #FF9933; } /---------------------------------------------------------------------------ПРАВАЯ-/ #right { z-index: 6; width: 20%; float: right; background-color: #CC33CC; } /------------------------------------------------------------------------------НИЗ-/ #cpr { width: 100%; height: 20px; cursor: auto; float: left; bottom: 100%; background-color: #00FFFF; /clear: none;/ } #4ehov { /кртинка которую я не могу вставить/ background-image : url(../images/4ehovjpg) no-repeat 0px 0; } Последний раз редактировалось Scorp; 14.10.2008 в 12:33..

14.10.2008, 14:56	#8
Лайм	Посмотри у тебя в названии фотки не стоит точка перед jpg,может по этому не может прочитать

14.10.2008, 15:09	#9
3ABAPKA	Вопрос ради любопытства? Код: body { width: 1200px; ... Если я захочу посмотреть этот сайт на мониторе с расширением 800*600, я че должен бегунком дергать вправо и лево или с на экране с расширением больше 1200рх смотреть на пустое пространство вокруг сайта?

15.10.2008, 02:05	#10
Scorp	Лайм, Да нет точка у меня стоит, всё как надо. не знаю почему тут её нет. #4ehov { /кртинка которую я не могу вставить/ background-image : url(../images/4ehov.jpg) no-repeat 0px 0; 3ABAPKA, С разрешением экрана 800x600, я лет 10 уже точно не видал компутеров. если кто то зайдёт с таким разрешением ему придётся двигать бегунками. а что касается большего экрана чем 1200 то придётся смотреть на пространства пустое). диз делал не я, и диз сделан не под резину.. или возможно как то подогнать ? я просто не силён в верстке, и если что то не так делаю подскажи ).. а вообще куча сайтов с такими проблемами. тот же soccer.ru с компа у меня смотрится нормально, а с бука захожу куча пространства по бокам. Ты подскажи что я с картинкой делаю не так, ведь тупо копирую код с шапки(на шапке отображается картинка) переименовываю logo.jpg на 4ehov.jpg а картинка почему то не отображается. что то делаю не так а что не могу понять.