Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> css макет выравнивания по центру, вопрос 
:(
    Опции темы
Gerlion
Дата 12.8.2008, 22:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Люди добрые, помогите несведущему программисту советом по вёрстке smile
По книжке макет выравнивания по центру с фиксированной шириной выглядит примерно так:
position: absolute; left: 50%; width: 1000px; margin-left: -500px;
При этом пользователь с установленным разрешением, к примеру, 800x600 или же просто с окном браузера в пол-экрана - не сможет просмотреть весь сайт. Края обрежутся на 200 пикселей. Существует ли какое-нибудь решение? Или это просто не считается проблемой?
PM MAIL   Вверх
bars80080
Дата 12.8.2008, 23:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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



ну, у тебя заданы фиксированные размеры блока 1000px. хочешь сделать под меньшие, укажи 
position: absolute; left: 50%; width: 750px; margin-left: -375px;

а ещё попробуй
position: absolute; left: 50%; width: 100%; margin-left: -50%;
интересно, что получится
PM MAIL WWW   Вверх
Gerlion
Дата 13.8.2008, 10:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



bars80080, к сожалению, ваши варианты не подходють. И вот почему. smile
1. уменьшать размеры блока нет никакой возможности. Не влезет контент. Да и не решение это проблемы.
2. а в данном случае ширина блока не является фиксированой.

Вот пример желаемого макета http://www.ubuntu.com/
Полазив по их стилям, вот что попробовал у себя:
Код
*{margin:0;}
.container{margin:0 auto;position:relative;width:1000px;}

Такой вариант прекрасно работает в FF и Опера. Но в ИЕ всё уезжает налево до конца.
для себя временно решил проблему так:
Код
<!--[if IE 7]>
    <style type="text/css" media="all">.container{left:10%}</style>
  <![endif]-->

Но меня это по понятным причинам не устраивает. Тем более, что на сайте Убунты всё каким-то образом отображается хорошо и в ИЕ. Помогите найти решение для ИЕ.

Это сообщение отредактировал(а) Gerlion - 13.8.2008, 10:18
PM MAIL   Вверх
bars80080
Дата 13.8.2008, 10:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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



Цитата(Gerlion @  13.8.2008,  10:17 Найти цитируемый пост)
1. уменьшать размеры блока нет никакой возможности. Не влезет контент

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


к этому
Код

*{margin:0;}
.container{margin:0 auto;position:relative;width:1000px;}
 добавьте ещё 
Код
#block { text-align: center; }
 для блока в котором находится .container
PM MAIL WWW   Вверх
Iktash
Дата 13.8.2008, 10:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



собственно, то же, что написал bars80080, но может чуть более понятно выйдет:
Код

body{ text-align:center;}
.container{margin:0 auto;position:relative;width:1000px;text-align:left}

PM MAIL   Вверх
Gerlion
Дата 13.8.2008, 13:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Цитата(bars80080 @  13.8.2008,  10:25 Найти цитируемый пост)
тогда вообще непонятен вопрос. как вы собираете предоставить пользователю весь сайт на рассмотрение, если не хотите ужимать ширину?

Для этого существуют полосы прокрутки ;)
И причём же тут text-align:center господа? Сдаётся вы меня конкретно не понимаете )) Я ж ведь о том, чем у меня блок-контейнер заполнен, и словом не обмолвился. Не важно это сейчас.
Попробую чётко сформулировать.
Макет вида:
Код

position: absolute; left: 50%; width: 1000px; margin-left: -500px;

хорош ровно до тех пор, пока окно просмотра браузера не стало уже фиксированной ширины макета. Т.е. в данному случае <1000px
Как только окно просмотра становится уже - полоса прокрутки появляется, но часть конента по бокам всё равно режется и просмотреть её не представляется никакой возможности.
Я же прошу подсказать решение, когда при ширине окна просмотра <1000px появилась бы полоса прокрутки и возможность просмотреть с её помощью ВЕСЬ контент.
PM MAIL   Вверх
Iktash
Дата 13.8.2008, 16:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Цитата(Gerlion @  13.8.2008,  10:17 Найти цитируемый пост)
Такой вариант прекрасно работает в FF и Опера. Но в ИЕ всё уезжает налево до конца.


Цитата(Gerlion @  13.8.2008,  10:17 Найти цитируемый пост)
Помогите найти решение для ИЕ


Именно на этот вопрос тебе и ответили, предложив text-align: center. Поверь, так делают очень многие. Хотя бы попробуй - сайт должен будет отцентрироваться во всех браузерах. И не пойму зачем тебе так обязательно нужны полосы прокрутки; по-моему, это не очень хороший тон.
PM MAIL   Вверх
Gerlion
Дата 14.8.2008, 19:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



хмм... действительно работает. А логика отдыхает. ))
Спасибо за это решение! Сам бы ни за что не нашёл ) 

Цитата(Iktash @  13.8.2008,  16:10 Найти цитируемый пост)
Именно на этот вопрос тебе и ответили, предложив text-align: center. Поверь, так делают очень многие. Хотя бы попробуй - сайт должен будет отцентрироваться во всех браузерах. И не пойму зачем тебе так обязательно нужны полосы прокрутки; по-моему, это не очень хороший тон. 


Где не очень хороший тон? На сайте убунту.ком? smile
PM MAIL   Вверх
Iktash
Дата 14.8.2008, 20:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Цитата(Gerlion @  14.8.2008,  19:17 Найти цитируемый пост)
Где не очень хороший тон? На сайте убунту.ком?

Нет. Я имел ввиду, что не мог понять, зачем тебе обязательно необходимы полосы прокрутки. Наверное, я не так тебя понял smile


Цитата(Gerlion @  14.8.2008,  19:17 Найти цитируемый пост)
 А логика отдыхает

Ну почему же? Логика есть. body{ text-align:center;} задает выравнивание текста и блоков поцентру во всем документе, а чтобы дальше все равно нормально верстать остальные элементы, в блоке контейнера эта опция переключается назад в исходное положение: text-align:left. 
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0750 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.