Размещение изображений вне макета - PullRequest
Новая
       11

Размещение изображений вне макета

7 голосов
/ 16 марта 2012

Я делаю веб-сайт шириной 960 пикселей, но мне нужны изображения с обеих сторон заголовка, которые вы можете увидеть, если у вас экран большего размера.

, поскольку я хочу, чтобы сайт был шириной 960 пикселей, мне нужны эти дополнительные боковые изображения, чтобы браузер не учитывал их, я могу заставить его работать слева

см. Здесь:

enter image description here

http://www.wireframebox.com/test/sideimages/index_leftworks.html

Код: 

<!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>Untitled Document</title>
<style type="text/css">
body { margin: 0; padding: 0; border: 0; background-color:#096 }

img { border: 0; }

#main { 
    width:960px; 
    height:216px; 
    background-image:url(main.jpg);
    position:relative;
    top:0; margin: 0 auto;
}



#left {
    width:170px;
    height:216px;
    background-image:url(left.jpg);
    float:left;
    left:-170px;
    position:relative;
}

#right {
    width:170px;
    height:216px;
    background-image:url(right.jpg);
    float:right;
    left:170px;
    position:relative;
}



</style>

</head>

<body>

    <div id="main">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

если сделать окно тоньше, красное левое изображение исчезнет с сайта, не заставив окно браузера получить нижнюю полосу прокрутки, однако когда я пытаюсь сделать то же самое с правой стороны, оно не работает

см. Здесь

enter image description here

http://www.wireframebox.com/test/sideimages/

Код равен, только <div id="right"></div> отсутствует

CSS находится в источнике.

вы также можете увидеть, как он используется на этом сайте, чтобы показать дату, которая размещена в левой части страницы, не влияя на общую ширину сайтов

http://www.tequilafish.com/2009/04/22/css-how-to-pin-an-image-to-the-bottom-of-a-div/

почему это работает слева, а не справа?

Ответы [ 4 ]

4 голосов
/ 16 марта 2012

См. Приведенную ниже скрипку для вывода ...

Fiddle: http://jsfiddle.net/C2j6G/4/

Демо: http://jsfiddle.net/C2j6G/4/embedded/result/

см. Изображение ниже -

enter image description here

2 голосов
/ 16 марта 2012

Лучше, если вы сможете объединить эти два изображения и добавить background тела. как это:

HTML 

<div id="main"></div>

CSS 

body {
 margin: 0;
 padding: 0;
 background:#096 url(http://imgur.com/JHXDv.png) no-repeat top center; 
}

#main {
    width:960px;
    height:216px;
    background-image:url(http://www.wireframebox.com/test/sideimages/main.jpg);
    margin:0 auto;
}

Проверьте это http://jsfiddle.net/PVWzA/1/

0 голосов
/ 16 марта 2012

Поместите изображение в тег div или image, который больше, чем ваш div по центру, и сделайте его дочерним по отношению к div с центральным содержимым. Также убедитесь, что его позиционирование выведет его из потока (\ absolute). Если затем вы добавите отрицательное поле, вы можете вытянуть изображение за пределы содержимого div, не нарушая его размещения. 

 #center div.top{
        width:1200px;
        height:170px;
        margin: 0px -170px;
        position:absolute;

        background:url("randombackground.png") no-repeat;
    }

HTML будет выглядеть примерно так: 

<div id="center">
<div class="top"></div>
Content content content
</div>
0 голосов
/ 16 марта 2012

Если вы хотите, чтобы страница вашего веб-сайта имела ширину 960 пикселей, измените ширину основного изображения на 960 - 170 (слева) - 170 (справа). Изменение ширины main.jpg до 620px должно исправить вашу проблему.

HTH

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

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

...