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

Вёрстка дивами

mff
На сайте с 21.02.2008
Offline
282
mff
1019

Здравствуйте! Давно хочу переверстать один свой сайт. Подскажите как это возможно:

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

Управление репутацией в сети: https://timbook2.ru/
P
На сайте с 19.03.2009
Offline
17
poyzn
#1

вот здесь можно посмотреть. Вся прелесть в том что еще основной контент перед колонками в коде идёт

Помогу с вёрсткой, html, css, js, jquery, php, mysql ($) icq 8938933 Быстрый, удобный и недорогой хостинг (http://sweb.ru/p17046) Виза в Великобританию (http://www.englishexpert.ru/velikobritaniya/viza/viza-v-velikobritaniu/)
iren K
На сайте с 28.12.2008
Offline
222
iren K
#2
mff:
Загвоздка в том, как сделать центральный слой резиновым а слева и справа с фиксированной шириной?

через css задавайте id дива - что-то типа:

/*------------centr part srart-----*/

#leftpart{

width:; float:left; px; margin:. . . .;

}

#leftpart ul{

list-style-type:.; font-size:.; line-height:.; margin:. . . .;

}

padding:....;

height:.; display:block;

}

- тока как пример..)

c уважением Iren
Google AdSense улучшил адаптивные Google: как сделать статические Как можно наказать за
Z
На сайте с 14.01.2010
Offline
20
zlideni
#3

Есть онлайн сервисы по генерированию HTML+CSS кода, я предпочитаю пользоваться вот этим.

В дополнительных опциях поставить: Прижать футер к низу окна браузера

Удачи :)

R5
На сайте с 22.03.2010
Offline
24
RFC2505
#4

онлайн сервисы - зло, курите Тэйлора, как правильно предложил комрад poyzn

turbopika4y
На сайте с 28.10.2010
Offline
6
turbopika4y
#5

как то так :) 

<!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=iso-8859-1" />

<title></title>

</head>

<body>



<div class="gl" style="width:90%; margin: 0 auto;">



<div class="top" style="width:100%; float:left; border:red solid 1px; height:200px; background-color:#009999; padding:3px; margin:5px;">top</div>



      <div style="width:100%; float:left; border:black solid 1px; padding:3px; margin:5px;">

        



<div class="left" style="width:200px; height:400px; float:left; border:red solid 1px; background-color:#999999;">left</div>





<div class="right" style="width:250px;height:400px;  float:right; border:red solid 1px; background-color:#99CCCC;">right</div>





<div class="centr" style="height:400px; width:auto; border:red solid 1px; margin-left:206px; margin-right:256px; padding:10px; background-color:#FF9900;"><br/>width:auto; width:auto; width:auto; width:auto; width:auto; width:auto; width:auto; width:auto; width:auto; width:auto; width:auto; width:auto; </div>





</div>



<div class="bottom" style="width:100%; float:left; border:red solid 1px; height:150px; padding:3px; margin:5px; background-color:#0066FF;">bottom</div>



</div>
mff
На сайте с 21.02.2008
Offline
282
mff
#6

Спасибо ребят, курю пока Тейлора.

[Удален]
#7
poyzn:
вот здесь можно посмотреть. Вся прелесть в том что еще основной контент перед колонками в коде идёт

+1 за этот способ. Лучше блочной верстки я еще не видел.

vandamme
На сайте с 30.11.2008
Offline
675
vandamme
#8

заглянь в любой сайт и там посмотри

Z
На сайте с 14.01.2010
Offline
20
zlideni
#9
онлайн сервисы - зло, курите Тэйлора, как правильно предложил комрад poyzn

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

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

Я выбираю экономия времени....

В VK Рекламе стало Яндекс напомнил вебмастерам, как Обновление отчетов Google AdWords
mff
На сайте с 21.02.2008
Offline
282
mff
#10

zlideni, не ругайтесь, сервис этот я юзал когда-то.... Вот и вам ваш плюс...

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