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

Насколько актуален такой способ создания резинового контейнера?

Обсуждение темы Насколько актуален такой способ создания резинового контейнера? в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Учусь Дримвиверу по книжке. Дошёл до резиного контейнера, насколько актуально делать их подобным способом? Есть другие варианты? PHP код: <! DOCTYPE HTML  PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" ...


Закрытая тема
 
Опции темы
Старый 21.12.2010, 01:21   #1
Учусь Дримвиверу по книжке. Дошёл до резиного контейнера, насколько актуально делать их подобным способом? Есть другие варианты?

PHP код:
<!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>Untitled Document</title>
<
link href="css/stylles.css" rel="stylesheet" type="text/css">
</
head>

<
body>
<
div class="header">
  <
div align="center">Заголовок сайта </div>
</
div>
<
div class="spacer">&nbsp;</div>
<
div class="wrapper">
<
div class="wrapper1">
<
div class="nav">
  <
p><a href="/1.html">Первая страница</a></p>
  <
p><a href="/2.html">Вторая страница</a></p>
  <
p><a href="/3.html">Третья страница </a></p>
</
div>

<
div class="main">
 <
div class="main1">
  <
p>Основное содержимое</p>
  <
p>бабабаалалала</p>
  <
p>балалаврплырплфырпыфпр </p>
</
div>
</
div>
</
div>
</
div>
<
div class="news">
  <
p>Новости</p>
  <
p>мы открылись</p>
  <
p>мы скоро закроемся </p>
</
div>
<
div class="spacer">&nbsp;</div>
<
div class="copyright">
  <
div align="center">Авторские права </div>
</
div>
</
body>
</
html>




.
header {
    
floatleft;
    
width100%;
    
background-color#333399;
    
color#CCCCCC;
}
.
spacer {
clearboth;
}
.
nav {
    
floatright;
    
width80px;
    
padding5px;
    
borderthin solid #999999;
}
.
main {
    
floatright;
    
width100%;
    
padding5px;
    
margin-left: -150px;
    
borderthin dotted #FFFFFF;
}
.
news {
    
floatright;
    
width100px;
    
padding5px;
    
borderthin solid #000000;
}
.
copyright {
    
floatleft;
    
width100%;
    
background-color#CC99CC;
}
.
main1 {
    
margin-left150px;
    
borderthin dotted #333333;
}
.
wrapper {
    
floatleft;
    
width100%;
    
margin-right: -140px;
}
.
wrapper1 {
    
margin-right140px;

По идее панелька со ссылками должна быть левее основного содержимого, но у меня почему-то сместилось вправо, если ставить флоат левый для неё - тогда расположение правильное, но один из контейнеров закрывает ссылки...
 
Старый 21.12.2010, 01:21
Ссылки
Старый 21.12.2010, 02:34   #2
Цитата:
По идее панелька со ссылками должна быть левее основного содержимого
ну так и поставьте ей float:left; задайте ширину (к примеру 80px) а основной контент сделайте margin-left: 80px и будет вам счастье и не надо городить огороды с двумя оберточными wrapper.

ps уже писал в соседней ветке лучший инструмент для верстки - notepad++ (сколько ни пытался с него пересесть на что-нибудь ни в какую не получается)
 
Старый 21.12.2010, 04:39   #3
Цитата:
Сообщение от vladendark Посмотреть сообщение
ну так и поставьте ей float:left; задайте ширину (к примеру 80px) а основной контент сделайте margin-left: 80px и будет вам счастье и не надо городить огороды с двумя оберточными wrapper.

ps уже писал в соседней ветке лучший инструмент для верстки - notepad++ (сколько ни пытался с него пересесть на что-нибудь ни в какую не получается)
Это если два контейнера, то да - прокатывает. А если три, то начинаются какие то пляски... хотя может и я туплю.

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

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

Пока с дивами у меня только так получается:

PHP код:
<!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>Сайт студента Васильева ВВ.</title>
<
link href="styles.css" rel="stylesheet" type="text/css">
</
head>

<
body>
<
div class="cheture">
<
div class="pervui">
  <
p>AAAAAAA</p>
  <
p>AAAAAAA<br>
  </
p>
  <
p>AAAAAAA</p>
  <
p>AAAAAAA</p>
</
div>
<
div class="vtoroi">
  <
p>AAAAAAAAAA AAAAAAAAA AAAAAAAAA </p>
  <
p>AAAAAAAAAA AAAAAAAAA AAAAAAAAA </p>
  <
p>AAAAAAAAAA AAAAAAAAA AAAAAAAAA </p>
  <
p>AAAAAAAAAA AAAAAAAAA AAAAAAAAA </p>
</
div>
</
div>
<
div class="tretii">
  <
p>AAAAAAAAAAAA</p>
  <
p>AAAAAAAAAAAA</p>
  <
p>AAAAAAAAAAAA</p>
</
div>
</
body>
</
html
PHP код:
.pervui {
    
padding5px;
    
floatleft;
    
width150px;
    
background-color#9966FF;
}
.
vtoroi {
    
padding5px;
    
width100%;
    
margin-left180px;
    
background-color#FFCC99;
    
margin-right: -180px;
}
.
tretii {
    
padding5px;
    
width150px;
    
background-color#CCFFCC;
    
floatleft;
}
.
cheture {
    
padding5px;
    
floatleft;
    
width100%;
    
margin-right: -180px;

Изображения
Тип файла: jpg divs.jpg (99.6 Кб, 8 просмотров)
 
Старый 21.12.2010, 09:56   #4
Код HTML:
<style>
.We {}
.Can {float: left; width: 250px;}
.Do {float: right; width: 250px;}
.It {margin: 0 300px;}
</style>

<div class="We">
	<div class="Can"> <!-- Left  --> </div>
	<div class="Do"> <!-- Right  --> </div>
	<div class="It"> <!-- Center  --> </div>
</div>
 
Старый 21.12.2010, 11:58   #5
Цитата:
Сообщение от Niemans Посмотреть сообщение
Код HTML:
<style>
.We {}
.Can {float: left; width: 250px;}
.Do {float: right; width: 250px;}
.It {margin: 0 300px;}
</style>

<div class="We">
	<div class="Can"> <!-- Left  --> </div>
	<div class="Do"> <!-- Right  --> </div>
	<div class="It"> <!-- Center  --> </div>
</div>
Вопросы =):
1) Что такое <!-- Left(right,center) --> ?? Для чего нужно?
2) Без общего контейнера "We", у нас центер налазит на правый и дальше. С общим контейнером всё нормально, но как логически обьяснить? То есть я не понимаю, почему всё не может без него работать, если мы задаём для левого - прижаматься в лего, для правого прижиматься вправо, а центральному даём отступы с обеих сторон...
3) У меня страницы в браузере по разному открываются. То есть жмакаешь "Ф12" а она сначала так откроется, потом еще жмакнешь "Ф12" уже немножко другая страница открывается, при том вариантов страницы может быть больше 2ух... это баг или что?
 
Старый 21.12.2010, 12:10   #6
1.
Цитата:
<!-- Left(right,center) -->
Не знаю, можно вместо этого ваш контент.

2. это как ремень у штанишек, без него они спадают.
Цитата:
Без общего контейнера "We", у нас центер налазит на правый и дальше.
можно и без него, мне просто фразу из трех слов было лень придумывать.

3.
Цитата:
это баг или что?
понятия не имею о чем вы, может потому что у меня кнопка F12, сейчас клаву новую раздобуду и посмотрю еще раз.
 
Старый 22.12.2010, 03:13   #7
Niemans, в книге написано, что нужно задавать для центрального дива 100-процентную ширину, но если мы не задаём - то всё выходит гораздо легче. Если мы оставляем пустой значение ширины, то оно как вычисляется?
 
Старый 22.12.2010, 03:53   #8
Цитата:
нужно задавать
Зачем?
Цитата:
в книге написано
библия?
 
Старый 22.12.2010, 05:28   #9
Цитата:
Сообщение от Niemans Посмотреть сообщение
Зачем?

библия?
Не, не библия. Книжка Дронова В.А. по дримвиверу.
Зачем - не знаю, в книжке так написано, но на практике это только вредит делу. Но спрашивал ведь я о другом... какое значение берется для дива по дефолту по ширине, когда мы его сами не указываем?

И еще... учитывая, что книжка видимо не самая правильная (хотя польза для нуба от неё конечно есть) но - как лучше учиться веб-дизайну? Вы бы что посоветовали?
 
Старый 24.12.2010, 11:24   #10
Цитата:
Сообщение от i1dar Посмотреть сообщение
но - как лучше учиться веб-дизайну? Вы бы что посоветовали?
web-дизайну или верстке?
я учился на шаблонах - скачивал готовые psd и верстал их, работал с движками и читал-читал-читал.
начните отсюда
 
Старый 24.12.2010, 11:24
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Такой монитор подойдет для создания сайтов и работе с графикой? JaguarFast Кальянная 3 15.09.2011 16:11
Простой способ убрать рекламу с народ.ру archizona Бесплатный хостинг 9 05.07.2010 13:07
какая структура должна быть у резинового сайта? Вертер HTML, CSS, JavaScript 9 24.03.2010 11:19
Насколько сложно попасть в первую 10 выдачи 74ivan74 Поисковые системы 14 23.12.2009 14:45
Сайт группы Резинового на суд РезиновыйЗапаЛ Зал дебютантов 6 24.11.2003 21:20


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

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