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



 

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

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

Открыть тему
Тема закрыта
> Простая верстка разница в отображении
kvendi
kvendi
Topic Starter сообщение 10.9.2009, 10:40; Ответить: kvendi
Сообщение #1


Сделал достаточно простую верстку блоками, но с бордерами. Собственно с ними и возникли трудности:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>TEST</title>
        <style type="text/css">
        html, body {
          height:99.5%;
          width:100%;
          margin:0;          
        }
        .header {            
            width:100%;
            height:10%;
            border-bottom:4px ridge #fbad3c;
        }
        .headerleft {
            float:left;
            width:15%;
            height:100%;
            background-color: #fac77d;
            border-right:4px ridge #fbad3c;
        }
        .headercenter {
            float:left;
            width:70%;
            height:100%;
            background-color: #fac77d;
        }
        .headerright {
            float:left;
            width:14.5%;
            height:100%;
            background-color: #fac77d;
            border-left:4px ridge #fbad3c;
        }
        .footer {
            clear: both;
            height:5%;
            background-color: #fac77d;
            border-top:4px ridge #fbad3c;
        }
        .left {
            float:left;
            min-height:85%;
            height:85%;
            width:15%;            
            background-color: #fcd8a4;
            border-right:4px ridge #fbad3c;
        }
        .center{
            float:left;
            min-height:85%;
            height:85%;
            width:70%;
            background-color: #fcefdb;
        }
        .right{
            float:left;
            min-height:85%;
            height:85%;
            width:14.5%;
            background-color: #fcd8a4;
            border-left:4px ridge #fbad3c;
        }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="headerleft">
                HEADERLEFT
            </div>
            <div class="headercenter">
                HEADERCENTER
            </div>
            <div class="headerright">
                HEADERRIGHT
            </div>    
        </div>        
        <div class="left">
            LEFT
        </div>
        <div class="center">
            CENTER
        </div>
        <div class="right">
            RIGHT
        </div>
        <div class="footer">
            FOOTER
        </div>
    </body>
</html>

В opera отображается нормально, но справа видно пустое место.
в IE 8 отображается почти идеально (хотя справа еле заметный пробел)
в FireFox 3.5.2 все блоки съехали (тоесть, видимо, не поместились)
Как лучше в таком случае сверстать правильно ? и что не так я сделал ?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kvendi
kvendi
Topic Starter сообщение 10.9.2009, 11:05; Ответить: kvendi
Сообщение #2


Реализовал так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>TEST</title>
        <style type="text/css">
        html, body {
            height:100%;
            width:100%;
            margin:0;    
            background-color: #fac77d;          
        }
        .header {            
            width:100%;
            height:10%;
        }
        .headerinner{
            border-bottom:4px ridge #fbad3c;
            width:100%;
            height:95%;
        }
        .headerleft {
            float:left;
            width:15%;
            height:100%;
            background-color: #fac77d;
        }
        .headerleftinner {
            border-right:4px ridge #fbad3c;            
            width:98%;
            height:100%;
        }
        .headercenter {
            float:left;
            width:70%;
            height:100%;
            background-color: #fac77d;
        }
        .headerright {
            float:left;
            width:15%;
            height:100%;
            margin-right:auto;
            background-color: #fac77d;
        }
        .headerrightinner {
            border-left:4px ridge #fbad3c;            
            width:98%;
            height:100%;
        }
        .footer {
            clear: both;
            height: 4.5%;
            background-color: #fac77d;
        }
        .footerinner {
            border-top:4px ridge #fbad3c;
            width:100%;
            height:93%;            
        }
        .left {
            float:left;
            min-height:85%;
            height:85%;
            width:15%;            
            background-color: #fcd8a4;
        }
        .leftinner {
            border-right:4px ridge #fbad3c;    
            width:98%;
            height:100%;
        }
        .center{
            float:left;
            min-height:85%;
            height:85%;
            width:70%;
            background-color: #fcefdb;
        }
        .right{
            float:left;
            min-height:85%;
            height:85%;
            width:15%;
            background-color: #fcd8a4;
        }
        .rightinner{
            border-left:4px ridge #fbad3c;    
            width:98%;
            height:100%;
        }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="headerinner">
            <div class="headerleft">
            <div class="headerleftinner">
                HEADERLEFT
            </div>
            </div>
            <div class="headercenter">
                HEADERCENTER
            </div>
            <div class="headerright">
            <div class="headerrightinner">
                HEADERRIGHT
            </div>
            </div>    
            </div>
        </div>        
        <div class="left">
        <div class="leftinner">
            LEFT
        </div>
        </div>
        <div class="center">
            CENTER
        </div>
        <div class="right">
        <div class="rightinner">
            RIGHT
        </div>
        </div>
        <div class="footer">
        <div class="footerinner">
            FOOTER
        </div>
        </div>
    </body>
</html>

Получилось несколько громозко, но отображается везде нормально. (Opera,FF,IE 8)
Может можно как- нибудь боле компактно такую верстку описать ?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Witu
Witu
сообщение 10.9.2009, 12:07; Ответить: Witu
Сообщение #3


есть вариант под каждый браузер свой файл стилей создавать....

IE это... вопщем у них все не как у других :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kvendi
kvendi
Topic Starter сообщение 10.9.2009, 12:45; Ответить: kvendi
Сообщение #4


Да вроде получилось чтобы одинаково отображалась, теперь вопрос в оптимальности

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


Свернуть

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

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


 

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

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

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

Дизайн

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