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



 

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

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

Открыть тему
Тема закрыта
> position:absolute (img) и div верстка
html_user
html_user
Topic Starter сообщение 11.10.2010, 21:54; Ответить: html_user
Сообщение #1


Имееем css и html следующего содержания, соответсвенно:

* {
    margin: 0;
    padding: 0;
}

html,body {
    height: 100%;
    width: 100%;
}

body {
    background-color: #000000;
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    text-align: center;
    min-width: 1000px;
    min-height: 800px;
}

#work_area {
    height: 100%;
    width: 100%;
    display: table;
    vertical-align: middle;
}

#container {
    text-align: center;
    position:relative;
    vertical-align:middle;
    display:table-cell;
    height: 800px;
}

#main {
    width: 1000px;
    height: 800px;
    text-align: center;
    margin: 0 auto;
    border: 1px solid #000;
}

#main img {
    position: absolute;
}

#logo {
    background:red;
    width: 590px;
    height: 125px;
    margin: 25px 0 0 190px;
    border: 0px solid;
    text-align: center;
}
#menu_1 {
    background:red;
    width: 200px;
    height: 40px;
    margin: 385px 0 0 400px;
    border: 0px solid;
    text-align: center;
}

#menu_2 {
    background:red;
    width: 200px;
    height: 40px;
    margin: 445px 0 0 700px;
    border: 0px solid;
    text-align: center;    
}

#menu_3 {
    background:red;
    width: 200px;
    height: 40px;
    margin: 445px 0 0 100px;
    border: 0px solid;
    text-align: center;    
}

#menu_4 {
    background:red;
    width: 200px;
    height: 40px;
    margin: 505px 0 0 400px;
    border: 0px solid;
    text-align: center;    
}


<!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="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if IE 7 ]>
<style type="text/css">
#container{top:50%}
#main{top:-50%;position:relative;}
</style>
<![endif]-->

</head>

<body>
    <div id="work_area">
        <div id="container">
            <div id="main">
                <a href="index.html"><img src="images/.png" id="logo" alt=""></img></a>
                <a href="index.html"><img src="images/.png" id="menu_1" alt=""></img></a>
                <a href="index-2.html"><img src="images/.png" id="menu_2" alt=""></img></a>
                <a href="index-4.html"><img src="images/.png" id="menu_3" alt=""></img></a>
                <a href="index-3.html"><img src="images/.png" id="menu_4" alt=""></img></a>
            </div><!--main-->
        </div><!--container-->
    </div><!--work_area-->
</body>
</html>


IE 8
[IMG]http://s57.radikal.ru/i155/1010/57/0a52e5b0c19ct.jpg[/IMG]

Opera 10.62:
[IMG]http://s56.radikal.ru/i154/1010/00/6a5994f99884t.jpg[/IMG]

В большенстве других браузерах изображение выглядит так же как на втором скрине. Т.е. позиционирование absolute ведет себя не правильно (позиционировать хочу относительно div в котором находятся изображения). Как решить данную проблему. спс.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Nikel'
Nikel'
сообщение 12.10.2010, 7:47; Ответить: Nikel'
Сообщение #2


* {
margin: 0;
padding: 0;
} <--- это полностью, вообще не надо:wacko:

html,body {
height: 100%;
width: 100%; <--- это зачем??
}
body {
background-color: #000000;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
text-align: center;
min-width: 1000px; <-Зачем Оо
min-height: 800px; <-Зачем
}
#work_area {
height: 100%; <-- Вообще не обязательно.
Можно было просто min-height:100%; сделать.

width: 100%; <---:hihi: к чему такой сумразм?
display: table;
vertical-align: middle;
}

Код безобразный, написан даже не по правилам особенно СSS...
За это нужно руки отрубить по плечи:

<!--[if IE 7 ]>
<style type="text/css">
#container{top:50%}
#main{top:-50%;position:relative;}
</style>
<![endif]-->

top:-50%;:rjunimagu: Жжешь.....

Кароче одним словом про код "Переписывай"...
А Автору стоит почитать книги.:hihi:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
html_user
html_user
Topic Starter сообщение 12.10.2010, 18:37; Ответить: html_user
Сообщение #3


Начнем:

#work_area {
height: 100%; <--- нужно, если уберу блок прижмется к верхней границе браузера

* {
margin: 0;
padding: 0;
} <--- это нужно, если убрать появляются полосы прокрутки, в разных браузерах есть дефаултные падинги и маржины.

P.S. Вопрос пока решен.
P.S.2 Прежде чем писать проверять нужно, то что советуете.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Nikel'
Nikel'
сообщение 17.10.2010, 15:17; Ответить: Nikel'
Сообщение #4


* {
margin: 0;
padding: 0;
} <--- это нужно, если убрать появляются полосы прокрутки, в разных браузерах есть дефаултные падинги и маржины.

P.S. Вопрос пока решен.
P.S.2 Прежде чем писать проверять нужно, то что советуете.



Ах забыл сказать учитесь правильной верстке...

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКачественный современный дизайн сайтов, логотипов, печатной продукции. Верстка.
 27 zaiko 17550 2.4.2024, 14:00
автор: zaiko
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP
Разработка на профессиональном уровне
 144 Gerga 92102 11.3.2024, 19:59
автор: anchous
Открытая тема (нет новых ответов) Верстка шаблона Битрикс
 0 bat 1419 26.9.2023, 6:22
автор: bat
Открытая тема (нет новых ответов) Верстка электронных писем бесплатно
 0 Gidemopassan 1528 23.6.2023, 10:12
автор: Gidemopassan
Горячая тема (нет новых ответов) Сайт "под ключ" (дизайн, верстка, CMS)
 32 Brans 16531 19.5.2023, 22:01
автор: Brans


 

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

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

RSS Текстовая версия Сейчас: 20.4.2024, 1:14

Дизайн

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