X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Проблема резинового дизайна
DreamShark
DreamShark
Topic Starter сообщение 21.7.2010, 19:34; Ответить: DreamShark
Сообщение #1


Делаю резиновый сайт. Но не могу решить одну неприятность.

Как правильно привязывать элементы к правому краю? Привязать то у меня получается, но у div`а с контентом задаю минимальную ширину. Так вот когда я начинаю уменьшать окно браузера дальше прописанной min-width правый div (например меню или форма поиска, теги) все равно продолжает двигаться и естественно наезжает на контент.

В идеале хотелось бы прописывать в CSS свойство, которое задавало бы минимальную позицию по left. то есть если left меньше 600 - дальше не двигать.

Подскажите пожалуйста каким образом решается эта проблемка.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
locky-yotu
locky-yotu
сообщение 21.7.2010, 20:17; Ответить: locky-yotu
Сообщение #2


DreamShark, что-то не правильно значит. Вот, посмотрите:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Простой трехколоночный макет</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body {margin:0;color:#fff;font:bold 17px Tahoma;text-align:center}
.all {min-width:800px;margin:0 50px}
.left {width:195px;float:left;background:#555}
.right {width:195px;float:right;background:#555}
.content {margin:0 200px;background:#999}
.left, .right, .content {min-height:500px}
</style>
</head>
<body>
<div class="all">
<div class="left">Лево</div>
<div class="right">Право</div>
<div class="content">Центр</div>
</div>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
DreamShark
DreamShark
Topic Starter сообщение 11.8.2010, 19:07; Ответить: DreamShark
Сообщение #3


locky-yotun, а как сделать то же самое, но чтобы сначала грузился div с контентом, а уже затем левый и правый сайдбары?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
locky-yotu
locky-yotu
сообщение 11.8.2010, 20:33; Ответить: locky-yotu
Сообщение #4


DreamShark, ну первое, что приходит в голову, это вот так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Простой трехколоночный макет</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body {margin:0;color:#fff;font:bold 17px Tahoma;text-align:center}
.all {min-width:800px;margin:0 50px;position:relative}
.left {width:195px;background:#555;position:absolute;top:0;left:0}
.right {width:195px;background:#555;position:absolute;top:0;right:0}
.content {margin:0 200px;background:#999}
.left, .right, .content {min-height:500px}
</style>
</head>
<body>
<div class="all">
<div class="content">Центр</div>
<div class="left">Лево</div>
<div class="right">Право</div>
</div>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
DreamShark
DreamShark
Topic Starter сообщение 11.8.2010, 21:10; Ответить: DreamShark
Сообщение #5


Спасибо, locky-yotun!
Угу, мне тоже абсолютное позиционирование первое в голову приходит, кстати почему многие пытаются его игнорировать?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
locky-yotu
locky-yotu
сообщение 11.8.2010, 21:12; Ответить: locky-yotu
Сообщение #6


DreamShark, фиг знает, мне по работе приходится делать в основном сайты фиксированной ширины, так что с резиной как-то никогда особо не заморачивался) Может, кто подскажет более оптимальное решение. Я, кстати, тоже с удовольствием посмотрел бы.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
DreamShark
DreamShark
Topic Starter сообщение 11.8.2010, 21:37; Ответить: DreamShark
Сообщение #7


locky-yotun,а как бы ты делал, если бы сайт был фиксированной ширины?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
InviS
InviS
сообщение 12.8.2010, 1:46; Ответить: InviS
Сообщение #8


DreamShark, при фиксированной ширине спокойно можно абсолютно позиционировать элементы. Думаю, поэтому он так и сказал :) Т.к. тебе всегда известна ширина блока. Мне тоже, если честно, нравятся больше сайты с фиксированной шириной :)


Вот, посмотри в FireBug или в Opera Dragonfly как я организовывал у себя это: ссылка

Обратить внимание стоит на блок с телефонными номерами в header'е страницы. Ты все правильно делал, только минимальную ширину стоит задавать родительскому блоку.
Например, если бы было так:
<div class='wrapper'>
<div class='right'></div>
</div>

То пишем так:
.wrapper {min-width: 1000px; margin: 0 auto; height: 500px; float: left;}
.right {float: right; margin-right: 10px; width: 200px;}


И твой блок в 200px будет выравниваться в правую сторону только при условии, что основной блок шире 1000px :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
DreamShark
DreamShark
Topic Starter сообщение 12.8.2010, 10:12; Ответить: DreamShark
Сообщение #9


InviS, спасибо большое! Очень интересный пример, давно искал, как такое можно сделать!

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) WEB и SMM дизайн — решение ваших бизнес задач с помощью дизайна
8 justburger 5297 6.7.2020, 9:18
автор: justburger
Открытая тема (нет новых ответов) Разработка дизайна сайтов, не дорого! | Продажа готовых PSD макетов
19 Ancitrus 14557 16.12.2019, 13:25
автор: Seo-optimist
Открытая тема (нет новых ответов) Проблема с админкой
5 Prok 2314 29.7.2019, 20:04
автор: dvakarandasha
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПроблема с таблицей, которая выводится через скрипт
7 vanchester 1335 15.2.2019, 19:06
автор: Artos_mw
Открытая тема (нет новых ответов) Услуги дизайна для web сайтов и мобильных приложений
1 svetakaplaukh 2424 9.2.2019, 0:01
автор: svetakaplaukh


 



RSS Текстовая версия Сейчас: 28.3.2024, 18:31
Дизайн