Положение: исправлено и IE - PullRequest
Новая
       0

Положение: исправлено и IE

1 голос
/ 07 июня 2011

В течение последних нескольких дней я разрабатывал макет для своего сайта на основе некоторых произведений искусства, которые я нарисовал. Макет получился великолепным на Chrome и Firefox, а затем я проверил IE, и это выглядело ужасно.

Я знаю, что только IE 7 поддерживает фиксированное положение, но это не работает для меня ... и я пробовал около десяти различных кодов, которые должны позволять изображению перемещаться в нижний правый угол, но с тем, сколько слоев имеет мой макет, оно не работает.

http://lindsiria.net/

Как видите, у меня две проблемы с IE. Вся моя раскладка перенесена, и мое основное изображение баннера не справа внизу. Мне было интересно, может ли кто-нибудь взглянуть на этот код и помочь мне найти решение этой надоедливой ошибки. Надеюсь, я разместил это право. 

<code>
<!-- language: lang-css -->

* { margin:0;}
body {
    background-color:#2397b6;
    background-image: url("mainbackgroundrepeat1"); 
    background-repeat: repeat-x;
    background-position:bottom;
    background-attachment:fixed;
    height:100%;
    }

a:link { color:#2b8c56;}
a:visited {color:#2b8c56;}
a:hover {color:#f0faef;}

#banner_wrap{
    width: 100%;
    display: block;
    position:fixed;
    bottom:0;
    margin-left:800px;
    width:500px;
    z-index:-1; 
    height: 353px;

}

#logo_wrap {
    position:absolute;
    width:600px;
        margin-left:200px;
    margin-top:2px;
 }

#wrap {
    position:absolute;
    width: 580px;
    min-height:100%;
    height: auto;
    margin: 180px 0 -353px 180px;
    background-color:#b2d6df;
    border: 10px solid #2b8c56;
    text-align: left;
        padding: 10px;
 }

#footer {
    font-size: .75em;
    font-style: italic;
    text-align: left;

}
/* START NAVIGATION */

#centeredmenu {
   float:left;
   width: 600px;
   margin-left:180px;
   margin-top:100px;
   background:#b2d6df;
   border: 10px solid #2b8c56;
   overflow:hidden;
   position:absolute;
}
#centeredmenu ul {
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#centeredmenu ul li a {
   display:block;
   width: 77px;
   padding:9px;
   margin:0 12px 0 12px;
   border-bottom: 4px solid #5bc668;
   color:#000;
   text-decoration:none;
   font-variant:small-caps;
   letter-spacing:2px;
   font-weight:500;
   line-height:.7em;
}
#centeredmenu ul li a:hover {
   border-bottom:4px solid #f0faef;
   color:#000000;
}
/* END NAVIGATION */
</code>

Ответы [ 5 ]

1 голос
/ 07 июня 2011

Браузеры отображают ваш сайт в режиме причуд, поэтому ваш макет не работает. Измените тип документа на 

<!doctype html>

Также обратите внимание, что абсолютное позиционирование плохо для создания макетов.

0 голосов
/ 07 июня 2011

Вашему mark-up действительно нужно немного поработать, но вы получите лучшее понимание, когда станете более опытным.Вместо этого используйте отрицательный z-index и поместите изображение в div внизу вашего mark-up, другое возможное решение - обернуть вашу страницу в оболочку div, которая больше вашей страницы, и установить background-image от этого вашего морского льва и его fixed и слева.

См. Эту обновленную и теперь рабочую версию, JSfiddle: http://jsfiddle.net/84qAg/1/

Надеюсь, что этопомогает и удачи во всем этом.

0 голосов
/ 07 июня 2011

Я не могу себе представить, каковы ваши причины поступать так, как вы это делаете.Зачем вам нужна позиция: фиксированная и абсолютная в вашей ситуации.Просто добавьте div с идентификатором обертки в качестве прямого потомка элемента body и поместите все остальные div в него, присвойте ему поле: 0 auto, чтобы отцентрировать его.Кроме того, вы можете задать ему положение: относительный и другие элементы div внутри него: абсолютный для дальнейшей работы.Ваш макет выглядит сломанным даже в IE9.Удалить все поля слева.У вас очень простой дизайн.Вы можете выбрать 

div#wrapper
{
width: 960px;
margin: 0 auto;
}

Затем поместите изображение в div # banner_wrap на фоновое изображение элемента body, так как элемент body уже имеет фиксированное свойство фонового изображения, он будет работать так же, итаким образом, вам не нужно добавлять еще один div.

0 голосов
/ 07 июня 2011

Попробуйте изменить banner_wrap на 

    #banner_wrap{
    position:fixed;
    z-index:-1; 
    right: 0px;
bottom: 0px;

}
0 голосов
/ 07 июня 2011

Вместо того, чтобы пытаться выяснить, какой твик решит вашу проблему, я бы порекомендовал другую стратегию для разметки и оформления вашего основного контента. Во-первых, вместо того, чтобы помещать текстовое содержимое непосредственно в ваши элементы div и использовать теги разбиения для разделения абзацев, поместите их в абзацы. По умолчанию они являются блочными элементами и создадут естественное разделение для вашего контента (вы используете некоторую перезагрузку CSS, поэтому вам, вероятно, потребуется добавить некоторый стиль margin-bottom в теги абзаца.) Во-вторых, если вы собираетесь использовать position: absolute, затем использовать top :, left: и т. д. для позиционирования вашего элемента, а не полей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...