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



 

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

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

Открыть тему
Тема закрыта
> Сайт в центре окна
gerasim13
gerasim13
Topic Starter сообщение 30.10.2008, 17:20; Ответить: gerasim13
Сообщение #1


В общем попросили меня сверстать еще один шаблон для сайта a-vfx.ru
На этот раз сайт должен располагаться точно по центру экрана. Сверстал, все работает в IE6 и FFox. Смотрю в IE7, а там глюки. Вертикальный скролл бар постоянно активен, а на странице "В производстве" все уходит куда то вверх. Я сначало подумал что все дело в значении Position:relative для правого и левого блока, но не тут то было. Не знаю даже что тут прикрутить что бы все работало. Помогите!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>A-VFX Studio | В производстве</title>
<base href="http://a-vfx.ru/"></base>
<style type="text/css" media="screen, tv, projection">
<!--
@import "assets/templates/asymmetry/style.css";
-->
#left {
width:200px;
}
#right {
width:599px;
}
#container {
background:#000 url(assets/templates/asymmetry/img/bg.gif) repeat-y;
}
.title {
width:190px;
}
#footer {
background:#333 url(assets/templates/asymmetry/img/btmbg.gif) top left no-repeat;
}
</style>
<link rel="icon" href="http://a-vfx.ru/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://a-vfx.ru/favicon.ico" type="image/x-icon">
<!--[if gte IE 5]>
<style type="text/css">
.forwrap {top:50%}
#container{top:-50%;}
</style>
<![endif]-->

<script type="text/javascript" src="assets/js/shadowbox-2.0.js"></script>
<script type="text/javascript" src="assets/js/prototype.js"></script>
<script type="text/javascript" src="assets/js/effects.js"></script>
<script type="text/javascript" src="assets/js/accordion.js"></script>
<script type="text/javascript">
//
// In my case I want to load them onload, this is how you do it!
//
Event.observe(window, 'load', loadAccordions, false);

//
// Set up all accordions
//
function loadAccordions() {
var topAccordion = new accordion('vertical_container', {
classNames : {
toggle : 'accordion_toggle',
toggleActive : 'accordion_toggle_active',
content : 'accordion_content'
},
defaultSize : {
width : 180
},
direction : 'vertical'
});

}
</script>

</head>

<body>

<div class="wrapper" id="wrapper">
<div class="outer">
<div class="forwrap">
<div id="inner">
<div id="container">
<div id="header">
<div class="title"><h2>В производстве</h2></div>
<div class="logo"><img src="assets/templates/asymmetry/img/logo.jpg" /></div>
</div>
<div id="left">
<div id="menu" align="left">
<div id="vertical_container">
<div>
<a href="http://a-vfx.ru/" title="Главная" >Главная</a>

</div>
<div class="accordion_toggle" class="active"><a href="#" title="Кино" >Кино</a></div>
<div class="accordion_content">
<div><a href="/ru/cinima.html" title="Кино" >Кино</a></div>
<div>
<a href="/ru/cinima/work.html" title="Работы" >Работы</a>

</div>
<div>
<a href="/ru/cinima/inprodaction.html" title="В производстве" >В производстве</a>

</div>
<div>
<a href="/ru/cinima/behindthescene.html" title="За кадром" >За кадром</a>

</div>

</div>
<div class="accordion_toggle" ><a href="#" title="Реклама" >Реклама</a></div>
<div class="accordion_content">
<div><a href="/ru/ads.html" title="Реклама" >Реклама</a></div>
<div>
<a href="/ru/ads/adworks.html" title="Работы" >Работы</a>

</div>
<div>
<a href="/ru/ads/adbehindthescene.html" title="За кадром" >За кадром</a>

</div>

</div>
<div class="accordion_toggle" ><a href="#" title="Игры" >Игры</a></div>
<div class="accordion_content">
<div><a href="/ru/games.html" title="Игры" >Игры</a></div>
<div>
<a href="/ru/games/games_inprodaction.html" title="В производстве" >В производстве</a>

</div>

</div>
<div>
<a href="/ru/demoreals.html" title="Деморилы" >Деморилы</a>

</div>
<div>
<a href="/ru/about.html" title="О компании" >О компании</a>

</div>
<div>
<a href="/ru/careers.html" title="Вакансии" >Вакансии</a>

</div>
<div>
<a href="/ru/contacts.html" title="Контакты" >Контакты</a>

</div>

</div>
</div>
<div class="patch_footer"></div>
</div>
<div id="right">
<div id="content">
<h2>В производстве</h2>
<h2>СМЕРШ-21</h2>
<p>Полнометражный художественный фильм</p>
<p>
<img src="assets/images/smersh-21.jpg" alt="СМЕРШ-21" /></p>
<p>Режиссер-постановщик - Константин Максимов</p>
<p>VFX супервайзер - Владимир Лещинский</p>
<p>CG супервайзер (a-VFX Studio) - Кирилл Скалецкий</p>
<p>Супервайзер анимации (a-VFX Studio) - Виктор Лакисов</p>
<p>&nbsp;</p>
<h2>КИН-ДЗА-ДЗА</h2>
<p>Художественный руководитель проекта - Георгий Данелия</p>
<p>
<img src="assets/images/kindzadza.jpg" alt="КИН-ДЗА-ДЗА" /></p>
<p>Режиссер-постановщик - Татьяна Ильина</p>
<p>Авторы сценария:<br />Георгий Данелия, Андрей Усачев, при участии Александра Адабашьяна, Галины Данелия и Игоря Жукова</p>
<p>Композитор &mdash; Гия Канчели</p>
<p>Художник-постановщик по персонажам &mdash; Александр Храмцов</p>
<p>Художник-постановщик по фонам &mdash; Алексей Андреев</p>
<p>Продюсер &mdash; Юрий Кушнерёв</p>
<p>Исполнительный продюсер &mdash; Вали Валиев</p>
<p>Cупервайзер 3D анимации (a-VFX Studio) - Виктор Лакисов</p>
<p>CG супервайзер (a-VFX Studio) - Владимир Иустинов</p>

</div>
<div class="patch_footer"></div>
</div>
<div class="clear"></div>
<div id="footer">COPYRIGHTS, TERM OF USE, <a href="ru/sitemap.html">site map</a></div>
</div>
</div>
</div>
</div>
</div>

</body>
</html>
* {
margin:0;
padding:0;
}
html, body {
height:100%;
background:#111;
font: 11px Tahoma;
color:#fff;
overflow-x: hidden;
}
a {
    text-decoration: underline;
    color: #CCC;
}

a:hover {
    color: #FF9900;
}

a img {border-color:#ccc;}
a:hover img {border-color:#FF9900;}
h2 {
    font-size:18px;
    color: #FF9900;
}
.wrapper {
display:table;
height:100%;
vertical-align:middle;
width:100%;
}
.outer {
display:table-cell;
vertical-align:middle;
}
.forwrap {
float:left;
left:50%;
position:relative;
}
.clear {
clear: both;
}
#inner {padding:20px;}
#container {
left:-50%;
position:relative;
width:800px;
}
#left {
float:left;
_position:relative;
z-index:100;
min-height:500px;
_height:500px;
}
#center {
min-height:500px;
_height:500px;
float:left;
padding:10px;}
#right {
_position:relative;
float:right;
min-height:500px;
_height:500px;
}
.patch_footer {
    height: 34px;
    clear: both;
}
#content {
padding:10px;}
.text img{
margin:0 10px 0 0;}
#footer {
height:14px;
text-align:left;
padding:15px 0 5px 120px;
font-size:9px;
color:#999;
width:680px;}
#footer a {
text-decoration:none;
color:#999;}
#header {
background:url(img/topbg.gif) bottom repeat-x;
height:34px;
width:800px;
}
.title {
padding-left:10px;
float:left;
width:190px;
background:#333;
padding-top:6px;
height:28px;}
.logo {
text-align:right;
padding-top:6px;
height:28px;}


#workgallery .doc_image {
float:left;
padding-right:10px;
padding-bottom:10px;
margin:0;}

#workgallery .doc_image_last {
float:left;
padding-right:10px;
padding-bottom:10px;
margin:0;
}

#workgallery .doc_title {
height:13px;
_height:auto;
margin-top:-30px;
padding-bottom:17px;
padding-left:5px;
}

#workgallery .doc_title a{
background:#000;}

#workgallery .pages{
clear:both;
float:none;}

#workgallery .pages span{
background:#666;
color:#ccc;
padding: 2px 5px;
margin-right:3px;
align:center;
vertical-align:middle;
}
#workgallery .pages a{
background:#333;
text-decoration:none;
padding: 2px 5px;
margin-right:3px;
align:center;
vertical-align:middle;
}


/* ///////// Menu ///////// */
#menu {
padding:10px;
color: #CCC;
font: bold 14px sans-serif;
width:180px;
position:relative;
float:left;
}
#menu a{
text-decoration: none;
line-height: 25px;
text-transform: uppercase;
font-size:14px;}
* .accordion_toggle a{

}
* .accordion_toggle {
    cursor:pointer;
    display: block;
    outline: none;
}
* .accordion_toggle:hover {

}
* .accordion_toggle_active {

}
* .accordion_toggle_active a {
color: #FF9900;
}
* .accordion_content {
border-top:1px solid #FF9900;
text-align:right;
font-weight:bold;
overflow: hidden;
}
* .accordion_content div a {
text-transform:lowercase;
line-height:12px !important;
font: bold 10px sans-serif !important;
}
a.page-options:hover,
a.page-options:focus {
    color: #fff;
    background: #09F;
}        

.hidden {
    display : none;
}
/* ///////////////////////// */
Есть ли у меня шанс когда нибудь стать хорошим верстальщиком?

UPD Видимо нужно тему перенести в раздел CSS. Я сразу не заметил что нахожусь в разделе HTML. Пожалуйста перенесите эту тему.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Andy Superstar
Andy Superstar
сообщение 30.10.2008, 19:52; Ответить: Andy Superstar
Сообщение #2


Сделай проще: в <body> закинь <div id="wrap">, а ему в стилях укажи конкретную ширину, как я понял сайт имеет фиксированную ширину, и margin: 0 auto;. Соответственно в <div id="wrap"> кидай всё остальное.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
gerasim13
gerasim13
Topic Starter сообщение 30.10.2008, 19:55; Ответить: gerasim13
Сообщение #3


Сайт у меня центрируется не только по ширине, но и по высоте.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 30.10.2008, 21:56; Ответить: Exterior
Сообщение #4


gerasim13, посмотрите тему Лучший способ выравнивания по центру страницы
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
gerasim13
gerasim13
Topic Starter сообщение 30.10.2008, 22:00; Ответить: gerasim13
Сообщение #5


Спасибо!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
gerasim13
gerasim13
Topic Starter сообщение 30.10.2008, 23:28; Ответить: gerasim13
Сообщение #6


данный пример помоему мне не подходит. там фиксированный размер блока (400).
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
gerasim13
gerasim13
Topic Starter сообщение 31.10.2008, 1:05; Ответить: gerasim13
Сообщение #7


Подправил код. В фоксе все как надо. А вот в Осле ну никак. Может есть какой нибудь хак?
* {
margin:0;
padding:0;
}
html, body {
height:100%;
background:#111;
font: 11px Tahoma;
color:#fff;
}
a {
    text-decoration: underline;
    color: #CCC;
}

a:hover {
    color: #FF9900;
}

a img {border-color:#ccc;}
a:hover img {border-color:#FF9900;}
h2 {
    font-size:18px;
    color: #FF9900;
}
.wrapper {
display:table;
height:100%;
vertical-align:middle;
width:100%;
}
.outer {

}
.forwrap {

}
.clear {
clear: both;
}
#inner {
width:800px;
margin:0 auto;
}
#container {
}
#left {
float:left;
_position:relative;
z-index:100;
min-height:500px;
_height:500px;
}
#center {
min-height:500px;
_height:500px;
float:left;
padding:10px;}
#right {
_position:relative;
float:right;
min-height:500px;
_height:500px;
}
.patch_footer {
    height: 34px;
    clear: both;
}
#content {
padding:10px;}
.text img{
margin:0 10px 0 0;}
#footer {
height:14px;
text-align:left;
padding:15px 0 5px 120px;
font-size:9px;
color:#999;
width:680px;}
#footer a {
text-decoration:none;
color:#999;}
#header {
background:url(img/topbg.gif) bottom repeat-x;
height:34px;
width:800px;
}
.title {
padding-left:10px;
float:left;
width:190px;
background:#333;
padding-top:6px;
height:28px;}
.logo {
text-align:right;
padding-top:6px;
height:28px;}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
gerasim13
gerasim13
Topic Starter сообщение 31.10.2008, 3:47; Ответить: gerasim13
Сообщение #8


Всем спасибо. Помогло вот это
margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px")


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Будет ли склейка сайтов если старый телефон перенести на новый сайт?
 1 noviktamw 387 Вчера, 18:31
автор: malamut
Горячая тема (нет новых ответов) Ваш сайт блокирует Роскомнадзор?
 29 hollywooduk 6021 Вчера, 11:21
автор: hollywooduk
Открытая тема (нет новых ответов) Прототипирование + дизайн + вёрстка = красивый и эффективный сайт под ключ
 0 bunneh 462 16.4.2024, 18:02
автор: bunneh
Открытая тема (нет новых ответов) Если в сайт с одними ключами, которые там долго, добавить новую рубрику с новыми ключами
 2 Tutich 1333 16.4.2024, 8:27
автор: Tutich
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлы[Услуги] Баннер/Графика/Сайт
 240 FillPlay 180637 31.3.2024, 22:58
автор: FillPlay


 

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

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

RSS Текстовая версия Сейчас: 25.4.2024, 11:29

Дизайн

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