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



 

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

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

Открыть тему
Тема закрыта
> Резиновый сайт. Двухцветный фон.
Stanislavsky
Stanislavsky
Topic Starter сообщение 22.4.2010, 12:31; Ответить: Stanislavsky
Сообщение #1


Привет.
Почти головоломку придумал.

Создать Сайт. Левая половина белая.Правая половина серая. Точно в центре всей страницы див для фотки или текста перекрывающий фон.

Как сделать, чтобы симметрия не нарушалась с изменением размера окна? Спасибо.

попытки ...
<body>
<div id="wrapper">
    <div id="left">
    </div><div id="right">
    <div id="foto">
    </div>
    </div>
</div>
</body>
body{
    margin: 0px;
    padding: 0px;
    overflow:hidden;
}
#wrapper #foto {
    background-color: #000000;
    height: 300px;
    width: 200px;
    position:relative;
    top: 50%;
    right: 0%;
    z-index: 5;
    margin: -100px;
}


#wrapper {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height:auto;
}
#wrapper #left {
    background-color: #FFFFFF;
    float: left;
    width: 50%;
    height: 2000px;
}
#wrapper #right {
    background-color: #333333;
    float: left;
    width: 50%;
    height: 2000px;
}
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
aseran
aseran
сообщение 22.4.2010, 15:29; Ответить: aseran
Сообщение #2


ВОт мое решение поставленной задачи
Правда потестил только в IE6 и FF3, других браузеров на данный момент под рукой других нет.


<!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">
<head>
<title>Центрируем фон</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">
* {
margin: 0;
padding:0;
}
html, body {
height:100%;
}

body {
width:100%;
height:100%;
display: table;
}

#container {
display: table-cell;
vertical-align: middle;
background-color: #fff;
}

#fone2{
display: table-cell;
vertical-align: middle;
background-color: #333;
position:absolute;
width:50%;
right:0;
top:0;
height:100%;
z-index:5;
}

div#center {
height:200px;
width:200px;
margin: 0 auto;
position: relative;
z-index:10;
margin-top: expression((
document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) <0 ? "0" :
(document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) +'px') ;
background-color:green;
}

</style>


</head>
<body>
<div id="fone2"></div>

<div id="container">
<div id="center">
Center Fone
</div>
</div>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Stanislavsky
Stanislavsky
Topic Starter сообщение 22.4.2010, 15:58; Ответить: Stanislavsky
Сообщение #3


Классно. Проверил в Opera и Safari. Все работает. Пошел читать о expression.
Спасибо!:goodpost:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
aseran
aseran
сообщение 22.4.2010, 17:02; Ответить: aseran
Сообщение #4


(Stanislavsky @ 22.4.2010, 18:58) *
Классно. Проверил в Opera и Safari. Все работает. Пошел читать о expression.
Спасибо!:goodpost:

Пожалуйста :)

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Ваш сайт блокирует Роскомнадзор?
 27 hollywooduk 5715 17.4.2024, 0:19
автор: Omaxis
Открытая тема (нет новых ответов) Прототипирование + дизайн + вёрстка = красивый и эффективный сайт под ключ
 0 bunneh 323 16.4.2024, 18:02
автор: bunneh
Открытая тема (нет новых ответов) Если в сайт с одними ключами, которые там долго, добавить новую рубрику с новыми ключами
 2 Tutich 1209 16.4.2024, 8:27
автор: Tutich
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлы[Услуги] Баннер/Графика/Сайт
 240 FillPlay 180515 31.3.2024, 22:58
автор: FillPlay
Открытая тема (нет новых ответов) Тысячи ботовых переходов на сайт
 18 Suagaring 4613 26.3.2024, 21:42
автор: c4p1t4l15t


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 19.4.2024, 16:01

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet