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

i1dar · 21.12.2010, 01:21

Учусь Дримвиверу по книжке. Дошёл до резиного контейнера, насколько актуально делать их подобным способом? Есть другие варианты?

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 {

    float: left;

    width: 100%;

    background-color: #333399;

    color: #CCCCCC;

}

.spacer {

clear: both;

}

.nav {

    float: right;

    width: 80px;

    padding: 5px;

    border: thin solid #999999;

}

.main {

    float: right;

    width: 100%;

    padding: 5px;

    margin-left: -150px;

    border: thin dotted #FFFFFF;

}

.news {

    float: right;

    width: 100px;

    padding: 5px;

    border: thin solid #000000;

}

.copyright {

    float: left;

    width: 100%;

    background-color: #CC99CC;

}

.main1 {

    margin-left: 150px;

    border: thin dotted #333333;

}

.wrapper {

    float: left;

    width: 100%;

    margin-right: -140px;

}

.wrapper1 {

    margin-right: 140px;

}

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

vladendark · 21.12.2010, 02:34

Цитата:

По идее панелька со ссылками должна быть левее основного содержимого

ну так и поставьте ей float:left; задайте ширину (к примеру 80px) а основной контент сделайте margin-left: 80px и будет вам счастье и не надо городить огороды с двумя оберточными wrapper.

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

i1dar · 21.12.2010, 04:39

Цитата:

Сообщение от 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 {

    padding: 5px;

    float: left;

    width: 150px;

    background-color: #9966FF;

}

.vtoroi {

    padding: 5px;

    width: 100%;

    margin-left: 180px;

    background-color: #FFCC99;

    margin-right: -180px;

}

.tretii {

    padding: 5px;

    width: 150px;

    background-color: #CCFFCC;

    float: left;

}

.cheture {

    padding: 5px;

    float: left;

    width: 100%;

    margin-right: -180px;

}

Niemans · 21.12.2010, 09:56

Код 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>

i1dar · 21.12.2010, 11:58

Цитата:

Сообщение от 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) Что такое  ?? Для чего нужно?
2) Без общего контейнера "We", у нас центер налазит на правый и дальше. С общим контейнером всё нормально, но как логически обьяснить? То есть я не понимаю, почему всё не может без него работать, если мы задаём для левого - прижаматься в лего, для правого прижиматься вправо, а центральному даём отступы с обеих сторон...
3) У меня страницы в браузере по разному открываются. То есть жмакаешь "Ф12" а она сначала так откроется, потом еще жмакнешь "Ф12" уже немножко другая страница открывается, при том вариантов страницы может быть больше 2ух... это баг или что?

Niemans · 21.12.2010, 12:10

1.

Цитата:

Не знаю, можно вместо этого ваш контент.

2. это как ремень у штанишек, без него они спадают.

Цитата:

Без общего контейнера "We", у нас центер налазит на правый и дальше.

можно и без него, мне просто фразу из трех слов было лень придумывать.

3.

Цитата:

это баг или что?

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

i1dar · 22.12.2010, 03:13

Niemans, в книге написано, что нужно задавать для центрального дива 100-процентную ширину, но если мы не задаём - то всё выходит гораздо легче. Если мы оставляем пустой значение ширины, то оно как вычисляется?

Niemans · 22.12.2010, 03:53

Цитата:

нужно задавать

Зачем?

Цитата:

в книге написано

библия?

i1dar · 22.12.2010, 05:28

Цитата:

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

Зачем?

библия?

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

И еще... учитывая, что книжка видимо не самая правильная (хотя польза для нуба от неё конечно есть) но - как лучше учиться веб-дизайну? Вы бы что посоветовали?

vladendark · 24.12.2010, 11:24

Цитата:

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

но - как лучше учиться веб-дизайну? Вы бы что посоветовали?

web-дизайну или верстке?
я учился на шаблонах - скачивал готовые psd и верстал их, работал с движками и читал-читал-читал.
начните отсюда

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

21.12.2010, 01:21	#1
i1dar	Учусь Дримвиверу по книжке. Дошёл до резиного контейнера, насколько актуально делать их подобным способом? Есть другие варианты? 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"> </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"> </div> <div class="copyright"> <div align="center">Авторские права </div> </div> </body> </html> .header { float: left; width: 100%; background-color: #333399; color: #CCCCCC; } .spacer { clear: both; } .nav { float: right; width: 80px; padding: 5px; border: thin solid #999999; } .main { float: right; width: 100%; padding: 5px; margin-left: -150px; border: thin dotted #FFFFFF; } .news { float: right; width: 100px; padding: 5px; border: thin solid #000000; } .copyright { float: left; width: 100%; background-color: #CC99CC; } .main1 { margin-left: 150px; border: thin dotted #333333; } .wrapper { float: left; width: 100%; margin-right: -140px; } .wrapper1 { margin-right: 140px; } По идее панелька со ссылками должна быть левее основного содержимого, но у меня почему-то сместилось вправо, если ставить флоат левый для неё - тогда расположение правильное, но один из контейнеров закрывает ссылки...

22.12.2010, 03:13	#7
i1dar	Niemans, в книге написано, что нужно задавать для центрального дива 100-процентную ширину, но если мы не задаём - то всё выходит гораздо легче. Если мы оставляем пустой значение ширины, то оно как вычисляется?