U. Helper

Дата: 12 Мая 2009, 00:55 | Сообщение # 1

● ● ● ● ●

4112 сообщений

0 наград

Статус: Offline

Хочу сверстать страницу блочным способом.
Структура страницы: 2х2 ячейки:

Quote

Лого Название_сайт
Панель Контент

Колонки делаю я вот так:

Code

<div>
<div style="float: left; width: 300px">left text</div>
right text
</div>

Проблемма в том, что когда вместо right text появляется таблица с width="100%", она попадает не в правую колону, а вниз.
Пробывал сделать вот такую штуку:

Code

Результат все тот же. Если в исходнике грохнуть width="100%" у таблиц, тогда все стает на свои места.
Знаю что скрипт - бред, но я не в курсе как нормально сделать.

p/s/ все эти мануалы и "фреймворки" запутанные, у них то все хорошо получается, а реально у меня на сайте жопа sad

[ ссылка ]

Дата: 12 Мая 2009, 01:25 | Сообщение # 2

● ● ● ● ●

1588 сообщений

0 наград

Статус: Offline

Code

<div>
   <div style="float: left; width: 300px">left text</div>
   right text
  </div>

С каких пор так делается 2 колонки?

Кронд

Дата: 12 Мая 2009, 07:21 | Сообщение # 3

● ● ● ● ●

329 сообщений

« 151 »

0 наград

Статус: Offline

А display: inline не пробовал?

Добавлено (12 Май 2009, 07:21)
---------------------------------------------
И вообще, такая вёрстка не предполагает вложение дивов блоков, главное тут - указывать float, clear и, иногда, display

Дата: 12 Мая 2009, 11:45 | Сообщение # 4

● ● ● ● ●

1588 сообщений

0 наград

Статус: Offline

Quote (mob_dp [url=http://helper.ucoz.ru/forum/26-5147-62941-16-1242075318)

→[/url]]Проблемма в том, что когда вместо right text появляется таблица с width="100%", она попадает не в правую колону, а вниз.
Пробывал сделать вот такую штуку:

я так понимаю ,что когда в живе появляется элемент , который шире , чем самм див, див стремится расширится и для этого сьъезжает вниз, где больше места.
Пропиши overflow:visible на крайняк.
А так, смотри мой первый пост и я не понял как ты там сделал 2 колонки. Я вижу только одну и текст снизу. Имхо бред.

Добавлено (12 Май 2009, 11:45)
---------------------------------------------
уухухухуха, пока вы все учили джаву и пхп, я учил html shades

cucYa

Дата: 12 Мая 2009, 12:54 | Сообщение # 5

● ● ● ● ●

Совращенный мальчик.

7317 сообщений

« 790.8 »

2 награды

Статус: Offline

Я по другому делал... я не догнал чё таоке 2x2 biggrin

Code

Дата: 12 Мая 2009, 13:05 | Сообщение # 6

● ● ● ● ●

Тиран

7772 сообщения

1 награда

Статус: Offline

Quote (MegaFill →)

уухухухуха, пока вы все учили джаву и пхп, я учил html

А кто-то учил все сразу

Code

В дивы можно помещать все, что заблагорассудится

cucYa

Дата: 12 Мая 2009, 13:06 | Сообщение # 7

● ● ● ● ●

Совращенный мальчик.

7317 сообщений

« 790.8 »

2 награды

Статус: Offline

Quote (Бармалей →)

В дивы можно помещать все, что заблагорассудится

Зато таблицы древний и кроссбраузерный проверенный способ biggrin

Дата: 12 Мая 2009, 13:15 | Сообщение # 8

● ● ● ● ●

1588 сообщений

0 наград

Статус: Offline

Code

* {margin:0; padding:0}

Этот код работает медленно. Лучше сбрасывать все через запятую. h1, h2, h3,и т.д. {margin:0; padding:0}

Дата: 12 Мая 2009, 13:17 | Сообщение # 9

● ● ● ● ●

Тиран

7772 сообщения

1 награда

Статус: Offline

В топку таблицы. И вообще, XML руллез.

subWIN

Дата: 12 Мая 2009, 17:25 | Сообщение # 10

● ● ● ● ●

931 сообщение

« 51 »

0 наград

Статус: Offline

самый лёгкий способ

Code

#left{float:left;width:20%}
#right{float:right;width:20%}
#content{margin-left:20%;margin-right:20%}

<div id="left">left text</div>
<div id="content">content</div>
<div id="right">right text</div>

Дата: 13 Мая 2009, 06:11 | Сообщение # 11

● ● ● ● ●

Тиран

7772 сообщения

1 награда

Статус: Offline

subWIN, если контента на странице меньше, чем одного из блоков, то родительский блок схлопнется.

Quote (MegaFill →)

Code

* {margin:0; padding:0}

Этот код работает медленно. Лучше сбрасывать все через запятую. h1, h2, h3,и т.д. {margin:0; padding:0}

Таким образом я лишь увеличу CSS файл, перечислив все теги.

Дата: 13 Мая 2009, 14:28 | Сообщение # 12

● ● ● ● ●

1588 сообщений

0 наград

Статус: Offline

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

Дата: 13 Мая 2009, 15:23 | Сообщение # 13

● ● ● ● ●

Тиран

7772 сообщения

1 награда

Статус: Offline

Quote (MegaFill →)

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

Меня абсолютное большинство не волнует. Оно может хоть с моста об стену биться.

Как я где-то читал, с увеличением кол-ва человек, учеличивается показатель незнания.

Дата: 13 Мая 2009, 15:29 | Сообщение # 14

● ● ● ● ●

1588 сообщений

0 наград

Статус: Offline

Quote (Бармалей [url=http://helper.ucoz.ru/forum/26-5147-63114-16-1242213826)

→[/url]]Как я где-то читал, с увеличением кол-ва человек, учеличивается показатель незнания.

Хелпер тому пример.
А так

Quote (Бармалей [url=http://helper.ucoz.ru/forum/26-5147-63114-16-1242213826)

→[/url]] дело Ваше

я уже все сказал.

Отредактировал mob_dp - Четверг, 14 Мая 2009, 13:11

Дата: 14 Мая 2009, 13:11 | Сообщение # 15

● ● ● ● ●

4112 сообщений

0 наград

Статус: Offline

Воспользовался куском кода от Бармалей:

Code

.wrapper {overflow:hidden}
   .leftSide {float:left; width:220px}
   .rightSide {float:left}

   <div class="wrapper">
   <div class="leftSide">1.1</div>
   <div class="rightSide">1.2</div>
   </div>

По факту получился вот такой трабл:

Справа от скрина есть полосы, оформленные бекграундом. Размер изображения бекграунда 400px.
При такой ширине синие линии плавно уходят в прозрачность и все смотрится красиво.

Получилось, что .rightSide вместо того, чтобы занять оставшееся пространство, сжался до размера самой длинной строки (в данном случае первая).
Как правильно задать ширину для этого блока?

Прикрепления: 2609102.jpg (34.2 Kb)

Дата: 14 Мая 2009, 13:20 | Сообщение # 16

● ● ● ● ●

Тиран

7772 сообщения

1 награда

Статус: Offline

Не надо rightSide'у прописыватьfloat:left

Code

<html>
<head>
<style type="text/css">
  * {margin:0; padding:0}
  body, html {width:100%; height:100%}

  .wrapper {overflow:hidden}
  .leftSide {float:left; width:300px; background:green; color:#fff}
  .rightSide {background:blue; color:#fff}
  </style>
</head>

<body>
  <div class="wrapper">
  <div class="leftSide">1.1</div>
  <div class="rightSide">1.2</div>
  </div>
  <div class="wrapper">
  <div class="leftSide">2.1</div>
  <div class="rightSide">2.2</div>
  </div>
</body>
</html>

Дата: 14 Мая 2009, 13:38 | Сообщение # 17

● ● ● ● ●

4112 сообщений

0 наград

Статус: Offline

Бармалей, так себя правая колона неадекватно ведет:

Бекграунды уехали влево, а если информации в правой колонке по высоте больше, чем в левой, то все лишнее уезжает в левую колонку вниз.

Прикрепления: 2402688.jpg (32.1 Kb)

Дата: 14 Мая 2009, 13:43 | Сообщение # 18

● ● ● ● ●

Тиран

7772 сообщения

1 награда

Статус: Offline

Ну тогда так

Code

<html>
  <head>
  <style type="text/css">
   * {margin:0; padding:0}
   body, html {width:100%; height:100%}

   .wrapper {overflow:hidden}
   .leftSide {float:left; width:300px; background:green; color:#fff}
   .rightSide {background:blue; color:#fff; margin-left:303px}
   </style>
  </head>

  <body>
   <div class="wrapper">
   <div class="leftSide">1.1</div>
   <div class="rightSide">1.2</div>
   </div>
   <div class="wrapper">
   <div class="leftSide">2.1</div>
   <div class="rightSide">2.2</div>
   </div>
  </body>
  </html>

Дата: 19 Мая 2009, 00:38 | Сообщение # 19

● ● ● ● ●

4112 сообщений