VPF::Помогите пожалуйста с версткой

Jull

Дата 26.10.2006, 09:44 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 17.1.2006
Где: Тула

Репутация: 1
Всего: 1

помогите, пожалуйста smile

а то у меня уже мыслей нет...
нужно сверстать такой сайт - центральная часть - фиксированной ширины, 1004 пикселя. По бокам - тени, фон заполнен штриховкой. Все как на картинке...

надо сделать, чтобы все было ровненько, и без прокрутки на 1024 разрешение....

Раньше в таких случаях я делала трехколоночную таблицу - для левого фона, центра, правого фона...
а сейчас не получится наверное - слишком широкая центральная часть...

Дайте хотя бы идею... smile

Illuminaty

Дата 26.10.2006, 09:58 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Jull, эта тема тебе не поможет?

Jull

Дата 26.10.2006, 10:31 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 17.1.2006
Где: Тула

Репутация: 1
Всего: 1

Illuminaty, я туповата, так что нет smile

я ее раньше читала...

тут весь прикол в том, что центральная фиксированная, а левые и правые колонки тянутся от 0 до предела...
а если float:left назначить левой, то она не будет тянуться... вроде... аналогично с правой.

Illuminaty

Дата 26.10.2006, 11:05 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Тень градиентная или нет? Разобрать не могу..

Jull

Дата 26.10.2006, 11:12 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 17.1.2006
Где: Тула

Репутация: 1
Всего: 1

Illuminaty, ага, градиент, штриховка под ней просвечивает

Illuminaty

Дата 26.10.2006, 14:04 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Jull, если это тебе поможет, я знаю как сверстать не в IE smile

Но боюсь, что не поможет....

Jull

Дата 26.10.2006, 14:15 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 17.1.2006
Где: Тула

Репутация: 1
Всего: 1

Illuminaty, а вдруг? smile

я туповата конечно, но бывают и просветления... smile

Illuminaty

Дата 26.10.2006, 14:22 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Jull, не в том смысле smile

Я не знаю пока как сверстать для IE. Тебе же нужно чтобы и в нем сайт работал, наверное?

SelenIT

Дата 26.10.2006, 14:50 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Jull, все-таки не совсем понятно, чем ширина центр. ячейки мешает решить дело таблицей?

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Illuminaty

Дата 26.10.2006, 14:58 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Jull, допустимо чтобы тень оставалась при сжатии? Хотя бы с правого края?

Jull

Дата 26.10.2006, 15:10 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 17.1.2006
Где: Тула

Репутация: 1
Всего: 1

Illuminaty, надо конечно smile

тень там элемент декора, на центральную часть не может заезжать...

SelenIT, потому что левый и правый столбец будут тоже иметь минимальную ширину (особенно в IE). А прокрутку нельзя.

Illuminaty

Дата 26.10.2006, 15:17 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Jull, ты меня неправильно поняла. Наезжать тень не будет.. Но она должна остаться при сжатии страницы?

SelenIT

Дата 26.10.2006, 15:30 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Цитата(Jull @ 26.10.2006, 15:10

)

левый и правый столбец будут тоже иметь минимальную ширину

Вовсе не обязательно.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Jull

Дата 26.10.2006, 15:35 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 17.1.2006
Где: Тула

Репутация: 1
Всего: 1

Illuminaty, хм...

думаю нет... тогда появится ведь прокрутка при 1024...

SelenIT, я туповата, у меня не получается так сделать, чтобы минимальную ширину исключить ;) уж помогите, если можете smile

Illuminaty

Дата 26.10.2006, 15:41 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Jull, что-то я не понял.. При 1024 никакой прокрутки не будет... Я спрашиваю про то, что когда она появится (при меньшей величине окна), тень останется или нет?

SelenIT

Дата 26.10.2006, 15:50 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Jull, overflow:hidden на "боковушки" разве не поможет?

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Jull

Дата 26.10.2006, 16:03 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 17.1.2006
Где: Тула

Репутация: 1
Всего: 1

Illuminaty, как же не будет, если центральная область 1004 пикселя? это максимум, при большей ширине - уже прокрутка.

убираем тень.

SelenIT, это вопрос? smile

может и поможет. надо попробовать.

Это сообщение отредактировал(а) Jull - 26.10.2006, 16:05

Illuminaty

Дата 26.10.2006, 16:20 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Jull, давай еще раз. Нужно сделать область посреди экрана шириной 1004px. По краям области градиентная тень. Под тенью и далее по краям фон. При размере экрана 1024px не должно быть прокрутки (я так понимаю горизонтальной). У меня один вопрос. Как должна выглядеть страница при ширине экрана, скажем, 800px, учитывая, что видна левая верхняя точка страницы (для верхней правой, я думаю, аналогично)? Картинки приветствуются smile

Nuxx

Дата 3.11.2006, 19:46 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 2.11.2006

Репутация: нет
Всего: нет

А не проще ли сделать так: взять тот самый фон градиентный + штриховку, создать из всего этого фоновое изображение, которое множилось бы по вертикали.
Размер взять с таким расчетом, чтобы при максимальном разрешении оно полностью заполняло экран по ширине. Сам фон привяжем к body. У вас наверно возникнет вопрос, а как будет центрироваться фоновое изображение шириной, скажем в 2500px? Поможет нам в этом css:

Код


body {

}

=Запостил случайно =

Это сообщение отредактировал(а) Nuxx - 3.11.2006, 20:09

Nuxx

Дата 3.11.2006, 20:07 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 2.11.2006

Репутация: нет
Всего: нет

Код



body {
    margin: 0;
    padding: 0;
    background: url("img/bckgrnd.jpg") repeat-y center;
}

Затем можете размещать "посередине" либо вами любимую таблицу, шириной 1004px, либо див (div) такой же ширины, который будет вмещать в себя все остальное. Я бы выбрал второй вариант. Приведу полный код html +css для второго способа:

[code=html]
<!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" lang="en" xml:lang="en">
<head>

<style type="text/css" media="screen">
/*<![CDATA[*/
    margin: 0;
    padding: 0;
    background: url("img/bckgrnd.jpg") repeat-y center;
}

Это сообщение отредактировал(а) Nuxx - 3.11.2006, 21:02

SelenIT

Дата 3.11.2006, 20:26 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Nuxx,

Цитата(Nuxx @ 3.11.2006, 20:07

)

значение auto у margin работает как text-align со значением center

Имхо формулировка неверна, правильнее бы сказать не "работает как", а "может использоваться для той же цели, что" - первое влияет на положение блока в его контейнере, второе - на положение текстового содержимого в самом блоке. Непредсказуемы в достаточной мере оба (text-align не центрирует таблицы в некоторых Операх, margin не центрирует в Quirks mode в IE), но их можно сочетать.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Nuxx

Дата 3.11.2006, 20:38 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 2.11.2006

Репутация: нет
Всего: нет

SelenIT,
Спасиб за поправочку, учту smile

Буду называть все своими именами)

Это сообщение отредактировал(а) Nuxx - 3.11.2006, 20:50

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »