Форум программистов
 
Расширенный поиск
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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



Ответ
 
Опции темы
Старый 23.05.2010, 18:55   #1
VasyOK{!}
 
Регистрация: 03.01.2009
Сообщений: 3
Репутация: 10
По умолчанию Как выровнять изображение в 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 Кб, 116 просмотров)

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

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

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

Вприципе если поставить:
Код:

#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
Репутация: 14

icq: 421975621
По умолчанию

Вроде так:
Код:

#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,149
Репутация: 890
По умолчанию

Сначала пишите:
Цитата:
Так вот когда сайт смотришь в нормальном разрешении
Потом:
Цитата:
Разрешение у всех разное.
Так какое нормально разрешение? Я лично предположил что 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 Кб, 9 просмотров)

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

Прошу помочь выровнить лого по центру...Я пытаюсь разобраться,как это сделать,уже неделю точно,взорвал уже все форумы,куча мануала прочитано,перепробовано много подсказок и ни каких изменений...В общем вот ссылка на сайт 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
Репутация: 6
По умолчанию

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

Код 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,418
Репутация: 1747
По умолчанию

Код:

-khtml-background-size:100% 100%; 
-expl-background-size:100% 100%;

1. С появлением бэкграунд сайза вебкит уже перешел на префикс "-webkit-", так что первого не существует.
2. а. в ИЕ9 сразу используется свойство без вендорного префикса
2. б. ниразу не видел префикс "-expl-" ишак юзает "-ms-"
__________________
ridero.ru — издай свою книгу по-человечески
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Ответ



Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Уважаемые! Как выровнять текст в 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 16:33
StringGrid как выровнять по центру и по правому краю? MAcK Компоненты Delphi 5 03.09.2007 14:11




16:00.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

Покупайте на сайте www.skinon.ru уникальные чехлы и наклейки для телефонов.
таргетированный трафик


как улучшить посещаемость, а также решения по монетизации сайтов, видео и приложений

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru