сделать заголовок полную ширину для браузеров

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

enter image description here

Довольно много я хочу заголовок работать как полноэкранное изображение (пример: http://www.flemingsteele.com/), но я подумал о том, чтобы разрезать заголовок, где белая линия находится на моей конструкции, и растягивать ее, чтобы она соответствовала ширине монитора. Я также хочу, чтобы заголовок был исправлен.

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

Средняя часть, о которой я думал, имеет цвет фона и имеет divs внутри этой области. Проблема, которую я имею в данный момент, - это когда я добавляю дополнительную информацию либо в div1, либо в div2, она не будет прокручиваться вниз, потому что позиция ive: фиксированная. причина этого в том, что я хочу, чтобы divs оставались ниже заголовка, а когда я прокручиваю вниз, текст переходит в верхнюю часть заголовка

Я также хочу, чтобы я добавил дополнительную информацию в любой из разделов и scoll down. заголовок прикреплен к верхней части браузера, и когда я прокручу вниз, я увижу зеленый цвет фона, каждый div с информацией и фиксированный нижний колонтитул внизу.

Heres кодирование, которое у меня есть на данный момент.

HTML:

<body> 
    <img alt="full screen background image" src="images/header.png" id="full-screen-background-image" /> 
<div id="wrapper"> 

    <div class="logo"><img src="images/bni_logo.png" width="200" height="128" alt="BNI Logo" border="0" /></div> 

      <div class="minicontainer"> 

    <div class="title"></div> 

    <div id="content"> 
    <P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </P> 
    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
</div>  
</div><!--MINI CONTAINER DIV!--> 
</div><!--WRAPPER DIV!-->

CSS:

#wrapper      {width:800px; height:auto; margin:0 auto} 

.logo       {margin-left:100px; margin-top:20px; background-image:url(images/bni_logo.png); background-repeat: no-repeat; width:auto; height:auto;} 
#header{ 
    width:100%; 
    background: url(yourimage); 
} 

.minicontainer     {padding-left:130px; margin-top:150px; width:800px; height:auto; position:fixed;} 

.title       {background-image:url(images/title.png); width:255px; height:51px;} 

#content      {width:300px; height:auto; padding-left:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:130%;} 

/* BACKGROUND IMAGE DO NOT TOUCH */ 


html, body { 
    height: 0%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    background-color:#8cc643 
} 

#full-screen-background-image { 
    z-index: -999; 
    min-height: 30%; 
    min-width: 1024px; 
    width: 100%; 
    height: auto; 
    position: fixed; 
    top: 0; 
    left: 0; 
}

Надеется, что это объясняется достаточно четко

источник

2012-03-21 Callum

Heres готовый продукт

спасибо кучки всем, что помогли.

http://colmandesigns.123abc.co.nz/dev/bni/

источник

2012-03-25 23:48:38 Callum

Я считаю, что это то, что вы ищете. Скажите, пожалуйста, если я ошибаюсь.

CSS

* {margin: 0; padding: 0} 
#wrapper { 
    background-image: url(http://windturbinezone.com/wp-content/uploads/2010/01/windfarm.jpg); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    width: 100%; 
    height: 100%; 
} 
#content { 
    background-color: #8ac841; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(138, 200, 65)),to(rgb(188, 252, 109))); 
    background-image: -webkit-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109)); 
    background-image: -moz-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109)); 
    background-image: -o-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109)); 
    background-image: -ms-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109)); 
    background-image: linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109)); 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#8ac841', EndColorStr='#bcfc6d'); 
    width: 100%; 
    height: 500px; 
} 
#footer { 
    background: green; 
    width: 100%; 
    height: 100px; 
} 
#div1 { 
    left: 100px; 
    top: 100px; 
    width: 200px; 
    height: 200px; 
    position: relative; 
    background-color: yellow; 
    display: inline-block; 
} 
#div2 { 
    left: 200px; 
    top: 100px; 
    width: 200px; 
    height: 200px; 
    position: relative; 
    background-color: red; 
    display: inline-block; 
}

HTML

<div id="wrapper"></div> 
<div id="content"> 
    <div id="div1">Div1</div> 
    <div id="div2">Div2</div> 
</div>

источник

2012-03-21 21:11:29 jacktheripper

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

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

HTML

<div class="header"> 
</div> 

<div class="footer"> 
</div>

CSS

.header{width:100%} 

.footer { 
    background-color: black; 
    bottom: 0; 
    float: right; 
    height: 30px; 
    left: 0; 
    margin-top: auto; 
    overflow: hidden; 
    position: absolute; 
    width: 100%; 
}

Пример, как показано ниже. http://jsfiddle.net/4k2Zj/

источник

2012-03-22 07:11:14 harshakasireddy

Да, это то, что мне нужно. но мой дизайн составляет 3000 пикселей в длину из-за того, что я собирался использовать все изображение как одно большое фоновое изображение и кодировать его в соответствии с полноэкранным (пример показан здесь - http://paulmason.name/item/full-screen-background -image-pure-css-code) Как я могу достичь этого, чтобы заголовок был пропорционален большинству, если не всем браузерам? – Callum

Возможно, я понял это, но используя полный экран кода в заголовке и поместив изображение в заголовки заголовков. – Callum

сделать заголовок полную ширину для браузеров

ответ

Смежные вопросы