Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

CSS-DIV-Вёрстка

Обсуждение темы CSS-DIV-Вёрстка в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Люди, помогите разобраться. не могу понять как мне плиту подвала опустить вниз. вот тело html ------------- <body> <div id="logo">Лого</div> <div id="left">Левая плита </div> ...


Закрытая тема
 
Опции темы
Старый 11.10.2008, 09:59   #1
Люди, помогите разобраться. не могу понять как мне плиту подвала опустить вниз. вот тело

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;
 
Старый 11.10.2008, 09:59
Ссылки
Старый 11.10.2008, 23:58   #2
Цитата:
Сообщение от Scorp Посмотреть сообщение
#cpr {
width: 1200px;
height:50px;
position: absolute;
top:0px;
left:0px;
border: 1px solid blue;
Вы же сами его к верху лепите
Цитата:
Сообщение от Scorp Посмотреть сообщение
плиту подвала опустить вниз
надо написать bottom:0px;
 
Старый 13.10.2008, 05:42   #3
Aldes,
я этим только начал заниматься, разбираюсь так сказать в общей сложности дня 4. мне нужно сделать обычный шаблон, шапка 3 колонки , подвал. но что то я не могу никак понять, как же мне их сделать. собственно говоря вся проблем в подвале. подскажи как сделать что бы колонка центровая сдвигала подвал в низ. а то подвал тупо остаётся на 1 месте , когда центровая колонка с инфой спускается вниз
 
Старый 13.10.2008, 08:53   #4
Цитата:
#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 сказал и все будет хорошо

Последний раз редактировалось 3ABAPKA; 13.10.2008 в 09:02..
 
Старый 13.10.2008, 10:20   #5
3ABAPKA,
Опиши как сделать что бы подвал в низу был всё время.. вообще было бы неплохо в аське пообщаться ... оставлю свою 305-557-527
 
Старый 14.10.2008, 10:58   #6
До чего неудобный форум, пока пишешь или правишь он забывает кто ты такой
вот полная версия с исправленными описками и ошибками

Цитата:
Сообщение от 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%;
                               }
вот и все должно получиться, теперь если текст контента свести к минимуму во всех колонка, то подвал должне сидеть в низу экрана, а если его увеличить до безобразия - он должен прилипнуть к тексту контента который его отодвинит вниз=т.е. тоже к низу экрана
мне ща посмотреть не где, пишу по памяти

Последний раз редактировалось 3ABAPKA; 14.10.2008 в 11:04..
 
Старый 14.10.2008, 12:30   #7
сделал колонки, подвал ,всё как мне надо.... но возникла следующая проблема, не могу вставить картинки.. в лого вставилось всё без проблем, а вот остальное не могу.. подскажите что не так.

------------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
Вопрос ради любопытства?
Код:
body {
width: 1200px;
...
Если я захочу посмотреть этот сайт на мониторе с расширением 800*600, я че должен бегунком дергать вправо и лево или с на экране с расширением больше 1200рх смотреть на пустое пространство вокруг сайта?
 
Старый 15.10.2008, 02:05   #10
Лайм,
Да нет точка у меня стоит, всё как надо. не знаю почему тут её нет. #4ehov { /*кртинка которую я не могу вставить*/
background-image : url(../images/4ehov.jpg) no-repeat 0px 0;


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


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вёрстка для опыта СерП Резюме 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


Текущее время: 13:19. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум