Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 23.05.2010, 18:55   #1
VasyOK{!}
 
Регистрация: 03.01.2009
Сообщений: 3
По умолчанию Как выровнять изображение в CSS по центру?

Здравствуйте все! Простите ламера если вопрос простой я его реально долго пытаюсь решить.

Пытаюсь решить одну задачу по CSS уже и так ее и эдак все равно никак

Вот сайт (тестовый): http://vasyok.arvixe.ru
Там изображение примерно такое есть Page-BgGlare.gif


Так вот когда сайт смотришь в нормальном разрешении – это изображение сильно «съезжает» вправо. Как сделать чтобы не съезжало? Вот если страницу в браузере смасштабировать до 60% тогда все ОК.

Этот рисунок находится на этом слое:

Код:
#art-page-background-glare-image
{
    background-image: url('images/Page-BgGlare.gif');
    background-repeat: no-repeat;
    height: 687px;
    width: 1237px;
    margin: 0 auto;
    position: relative;
    z-index: 1;   
}
Изображения
Тип файла: gif verh3.gif (12.3 Кб, 181 просмотров)

Последний раз редактировалось VasyOK{!}; 23.05.2010 в 18:59.
VasyOK{!} вне форума Ответить с цитированием
Старый 24.05.2010, 18:03   #2
dr.Chas
***
Участник клуба
 
Аватар для dr.Chas
 
Регистрация: 30.07.2007
Сообщений: 1,162
По умолчанию

Нормальное разрешение это какое? 1024*768?
Вы заметили что у вашего рисунка размер ширины width: 1237px;? Вы опеределитесь под какое разрешение верстаете, думаю все проблемы отпадут сами собой.
dr.Chas вне форума Ответить с цитированием
Старый 25.05.2010, 00:35   #3
VasyOK{!}
 
Регистрация: 03.01.2009
Сообщений: 3
По умолчанию

Разрешение у всех разное. Думаю вы это знаете лучше меня .
Я не верстаю, а доверстываю и разбираюсь с версткой.

Вприципе если поставить:
Код:
#art-page-background-glare-image
{
   width: 100%;
   background-position: center top;
}
То рисунок будет где надо, но только не в IE.
VasyOK{!} вне форума Ответить с цитированием
Старый 25.05.2010, 00:38   #4
stenl1
Форумчанин
 
Аватар для stenl1
 
Регистрация: 26.06.2009
Сообщений: 354
По умолчанию

Вроде так:
Код:
#art-page-background-glare-image
{
    background: url('images/Page-BgGlare.gif') no-repeat center;
    height: 687px;
    width: 1237px;
    margin: 0 auto;
    position: relative;
    z-index: 1;   
}
stenl1 вне форума Ответить с цитированием
Старый 25.05.2010, 22:27   #5
dr.Chas
***
Участник клуба
 
Аватар для dr.Chas
 
Регистрация: 30.07.2007
Сообщений: 1,162
По умолчанию

Сначала пишите:
Цитата:
Так вот когда сайт смотришь в нормальном разрешении
Потом:
Цитата:
Разрешение у всех разное.
Так какое нормально разрешение? Я лично предположил что 1024*768 у вас т.к. 60% оперы будет 1280*1024, вот там то он и выглядит нормально.

Я сделал вывод что вы взяли минимум 1024*768 у сайта. Вот вам я и пишу что для этого разрешения сделать по центру не возможно т.к. ваш рисунок имеет ширину width: 1237px;, что больше ширины экрана, отсюда и не правильное позиционирование.

Обычно сайт верстают двумя способами, либо динамически (подстраиваются под разрешения экрана), либо статически (делают определенную ширину у сайта, и при разных разрешения он выглядит одинаково). Ваш сайт такой, но почему то, для позиционирования рисунка используется это:
Код HTML:
#art-page-background-glare
{
	width: 100%;
}
Зачем %? Канешно ваш рисунок в зависимости от разрешения экрана будет съезжать. Будет выглядит правильно только при одном разрешении 1280*1024.

Вот поправил, будет при любому разрешении с размером 1280*1024 и выше выглядеть правильно. Только отпозицинируй как надо. Хочешь меньше 1280*1024, уменьшай картинку.

Ну и не лучше ли отказаться от этой затеи с рисунком, один рисунок весом почти 100кб это что-то.

17 обращений к серверу только для того чтобы загрузить все файлы стилей и ява скриптов на одной странице. Плюс к этому рисунки. Вам надо серьёзно подумать над улучшением.

p.s.: Мой первый пост в этой теме говорил тоже самое, в этом я ни чего не добавил почти, только расписал подробно.
Вложения
Тип файла: rar 11.rar (334.1 Кб, 17 просмотров)

Последний раз редактировалось dr.Chas; 25.05.2010 в 22:28. Причина: забыл файл прикрепить
dr.Chas вне форума Ответить с цитированием
Старый 29.02.2012, 03:37   #6
libero23
Новичок
Джуниор
 
Регистрация: 29.02.2012
Сообщений: 1
По умолчанию

Прошу помочь выровнить лого по центру...Я пытаюсь разобраться,как это сделать,уже неделю точно,взорвал уже все форумы,куча мануала прочитано,перепробовано много подсказок и ни каких изменений...В общем вот ссылка на сайт http://33cheap.at.ua/ ... Вот скрины Опера (http://33cheap.at.ua/Opera.jpg) и IE (http://33cheap.at.ua/IE.jpg) . то,что выделено синим,надо впендюрить туда,где выделено зелёным,т.е. по центру.... .. Вот что ещё происходит при сужении браузеров IE (http://33cheap.at.ua/IE2.jpg) и Opera (http://33cheap.at.ua/Opera2.jpg) Как я понял в Firefox всё нормально,т.к. отправлял ссылку тем,у кого лиса установлена,все сказали,что всё стоит ровно,Но а под остальные броузеры,как сделать ?
Файл лого http://33cheap.at.ua/logo.png ... Помогите пожалуйста конкретным советом...Я не тупо обратился сделать за меня работу,хотел сначала сам разобраться,но после недельной борьбы,понял,что не получится у меня походу,т.к. не знаю куда лезть,а все дают разные советы и я запутался уже...
libero23 вне форума Ответить с цитированием
Старый 29.02.2012, 04:53   #7
titan2012
Пользователь
 
Аватар для titan2012
 
Регистрация: 07.02.2012
Сообщений: 95
По умолчанию

не судите за мой ответ, но мне кажется что там позиционирование нужно для дива с брендами задать, такое впечатление что дивы выезжают друг на друга, и еще нужно отступ с лева задать, ну типа того.
хотя хотелось бы на сам код взглянуть что да как там.
titan2012 вне форума Ответить с цитированием
Старый 01.03.2012, 13:04   #8
MirtMacline
Пользователь
 
Регистрация: 05.08.2011
Сообщений: 52
По умолчанию

Код HTML:
<style type="text/css">
html { min-height:100%; }
body { padding:0; margin:0;  min-height:100%;
font:14px/1.5em #FFFFFF Arial, Helvetica, sans-serif;
background: url('img/fon.jpg')
top left  fixed no-repeat; 
-o-background-size: 100% 100%;  
-webkit-background-size:100% 100%; 
-moz-background-size:100% 100%; 
-khtml-background-size:100% 100%; 
-expl-background-size:100% 100%;
background-size: 100% 100%;
}
</style>
MirtMacline вне форума Ответить с цитированием
Старый 02.03.2012, 14:34   #9
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Код:
-khtml-background-size:100% 100%; 
-expl-background-size:100% 100%;
1. С появлением бэкграунд сайза вебкит уже перешел на префикс "-webkit-", так что первого не существует.
2. а. в ИЕ9 сразу используется свойство без вендорного префикса
2. б. ниразу не видел префикс "-expl-" ишак юзает "-ms-"
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Уважаемые! Как выровнять текст в ComboBox xitroi Общие вопросы Delphi 1 18.05.2010 14:05
Выровнять текст в Стринг Грид по центру cowboy Общие вопросы Delphi 1 25.04.2010 13:03
Выравнивание фона по центру CSS Spacewalker HTML и CSS 1 17.04.2010 11:57
КАК в Listbox выровнять строку отдельнию Linore Общие вопросы .NET 3 10.03.2010 15:33
StringGrid как выровнять по центру и по правому краю? MAcK Компоненты Delphi 5 03.09.2007 14:11