Предоставление фиксированного заголовка цветного фона

-3

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

Как это сделать?

HTML:

<body> 
<div class="gridContainer clearfix"> 
    <div id="LayoutDiv1"><h1>Hello</h1></div> 
    <div id="LayoutDiv2"></div> 
    <div id="LayoutDiv3"></div> 
    <div id="LayoutDiv4"></div> 
<div id="LayoutDiv9">Goodbye</div> 

<div id="LayoutDiv10"></div> 
</div> 
</body>

CSS:

@charset "utf-8"; 
/* Simple fluid media 
    Note: Fluid media requires that you remove the media's height and width attributes from the HTML 
    http://www.alistapart.com/articles/fluid-images/ 
*/ 
img, object, embed, video { 
    max-width: 100%; 
} 
/* IE 6 does not support max-width so default to width 100% */ 
.ie6 img { 
    width:100%; 
} 

/* 
    Dreamweaver Fluid Grid Properties 
    ---------------------------------- 
    dw-num-cols-mobile:  5; 
    dw-num-cols-tablet:  8; 
    dw-num-cols-desktop: 10; 
    dw-gutter-percentage: 25; 

    Inspiration from "Responsive Web Design" by Ethan Marcotte 
    http://www.alistapart.com/articles/responsive-web-design 

    and Golden Grid System by Joni Korpi 
    http://goldengridsystem.com/ 
*/ 

/* Mobile Layout: 480px and below. */ 

.gridContainer { 
    margin-left: auto; 
    margin-right: auto; 
    width: 87.36%; 
    padding-left: 1.82%; 
    padding-right: 1.82%; 
} 
#LayoutDiv1 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv2 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv3 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv4 { 
    clear: none; 
    float: left; 
    margin-left: 4.1666%; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv5 { 
    clear: none; 
    float: left; 
    margin-left: 4.1666%; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv6 { 
    clear: none; 
    float: left; 
    margin-left: 4.1666%; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv7 { 
    clear: none; 
    float: left; 
    margin-left: 4.1666%; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv8 { 
    clear: none; 
    float: left; 
    margin-left: 4.1666%; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv9 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv10 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ 

@media only screen and (min-width: 481px) { 
.gridContainer { 
    width: 90.675%; 
    padding-left: 1.1625%; 
    padding-right: 1.1625%; 
} 
#LayoutDiv1 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv2 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv3 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv4 { 
    clear: none; 
    float: left; 
    margin-left: 2.5641%; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv5 { 
    clear: none; 
    float: left; 
    margin-left: 2.5641%; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv6 { 
    clear: none; 
    float: left; 
    margin-left: 2.5641%; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv7 { 
    clear: none; 
    float: left; 
    margin-left: 2.5641%; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv8 { 
    clear: none; 
    float: left; 
    margin-left: 2.5641%; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv9 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#LayoutDiv10 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
} 

/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ 

    @media only screen and (min-width: 769px) { 
    .gridContainer { 
     width: 88.2%; 
     max-width: 1232px; 
     padding-left: 0.9%; 
     padding-right: 0.9%; 
     margin: auto; 
    } 
    #LayoutDiv1 { 
     clear: both; 
     float: left; 
     margin-left: 0; 
     width: 100%; 
     display: block; 
    } 
    #LayoutDiv2 { 
     clear: both; 
     float: left; 
     margin-left: 0; 
     width: 100%; 
     display: block; 
    } 
    #LayoutDiv3 { 
     clear: both; 
     float: left; 
     margin-left: 0; 
     width: 100%; 
     display: block; 
    } 
    #LayoutDiv4 { 
     clear: both; 
     float: left; 
     margin-left: 0; 
     width: 18.3673%; 
     display: block; 
    } 
    #LayoutDiv5 { 
     clear: none; 
     float: left; 
     margin-left: 2.0408%; 
     width: 18.3673%; 
     display: block; 
    } 
    #LayoutDiv6 { 
     clear: none; 
     float: left; 
     margin-left: 2.0408%; 
     width: 18.3673%; 
     display: block; 
    } 
    #LayoutDiv7 { 
     clear: none; 
     float: left; 
     margin-left: 2.0408%; 
     width: 18.3673%; 
     display: block; 
    } 
    #LayoutDiv8 { 
     clear: none; 
     float: left; 
     margin-left: 2.0408%; 
     width: 18.3673%; 
     display: block; 
    } 
    #LayoutDiv9 { 
     clear: both; 
     float: left; 
     margin-left: 0; 
     width: 100%; 
     display: block; 
    } 
    #LayoutDiv10 { 
     clear: both; 
     float: left; 
     margin-left: 0; 
     width: 100%; 
     display: block; 
    } 
    } 

    @charset "utf-8"; 
    /* CSS Document */ 

    #LayoutDiv1 { 
     position: fixed; 
     height: 50px; 
     top: 0; 
     width: 100%; 
     z-index: 10000; 
     background:#FFF; 
    } 

    #LayoutDiv2 { 
     position: fixed; 
     height: 50px; 
     top: 50px; 
     width: 100%; 
     z-index: 10002; 
     background:#FFF; 
     } 

    #LayoutDiv3 { 

     margin-top: 135px; 

     } 

    #LayoutDiv9 { 
     position: fixed; 
     height: 60px; 
     width: 100%; 
     z-index:10006; 
     background:#FFF; 
     max-height: 100px; 
     bottom: 60px; 
     } 

    #LayoutDiv10 { 

     position: fixed; 
     height: 60px; 
     width: 100%; 
     z-index:10008; 
     background:#FFF; 
     bottom:0px; 
     max-height: 60px; 
     }

источник

2013-09-18 Andrew Smith

Где О Нас это заголовок вы пытаетесь цвет в вашем HTML-коде? Что это такое? – Dom

Я просто хочу, чтобы первый div имел синий фон, а текст в первом div оставался черным. –

Вы имеете в виду 'background-color'? для 'LayoutDiv1'? – Harry

#LayoutDiv1 { 
    position: fixed; 
    height: 50px; 
    top: 0; 
    width: 100%; 
    z-index: 10000; 
    background:#FFF; 
}

фон установлен на белый, поэтому вы не можете увидеть это

ЕЩЕ ОДИН ВЕЩЬ - эта линия находится в нижней части ур таблица стили, так что перекроет все ваш стиль

Вот моя скрипку я просто скопировать вставить код и заменить цвет bakcground на синий - http://jsfiddle.net/SHeWm/

источник

2013-09-18 08:35:55 markvicencio

Большое спасибо, знаете ли вы, почему он оставляет белый промежуток между левой стороной экрана и началом синего фона в Div 1? –

ваше тело каким-то образом вызывает пользовательский агент, который добавляет маржу: 8px – markvicencio

Является ли эта часть «массового n00bocide» упомянутой в http://blog.stackoverflow.com/2013/09/? Белый зазор исходит от установки ширины содержимого и последующего центрирования. И об ответе: * «эта строка находится внизу вашей таблицы стилей, так что она переопределит весь ваш стиль» * - это не так, нет конфликта с другими правилами в том, что касается «фона-цвета» ... – xec

Предоставление фиксированного заголовка цветного фона

ответ

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