HTML/CSS баннер не работает

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

Я создал тег div в своем HTML-файле для баннера и попытался применить CSS к тегу div, но ничего не работает.

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     #banner { 
     background-color: #333FF; 
     font-family: Arial; 
     position: absolute; 
     left: 0; 
     right: 0; 
     padding:15px; 
     height:800px; 
     background-size:100%; 
     } 
    </style> 

    <title>Random Password Generator</title> 
    </head> 

    <body> 
    <div id="banner"><h1>fdsfdsfdsfds</h1></div> 
    </body> 
</html>

Я также попытался связать внешний файл CSS, но он тоже не работает.

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

источник

2014-03-04 user35698

Ваш шестнадцатеричный код '# 333FF' недопустим, они должны быть 6 символов (например, '# 3333FF' или' # 333FFF'). Попробуйте изменить это. Вероятно, ваш div работает так, как вы этого хотите, вы просто не видите его, потому что он имеет недопустимый цвет фона. Если нет, повторите проблему в автономном JSFiddle, чтобы мы могли легко устранить неполадки. – Ennui

Это работало для цвета. Рядом с моим баннером есть небольшая пробельная надпись, где страница наверху, я бы хотел заполнить всю эту область. Как я могу это сделать? – user35698

добавить 'html, body {margin: 0; заполнение: 0; } 'к вашему CSS, или включить [Сброс CSS] (http://meyerweb.com/eric/tools/css/reset/) – Ennui

#333FF - это неправильный цвет. Это должно быть так: #333FFF. См. W3C Specification для получения дополнительной информации о длине шестнадцатеричных кодов (подсказка: они должны иметь длину шесть символов).

Рабочий пример: http://jsfiddle.net/ntim/SKnxP/

position:absolute; также не представляется необходимым в вашем случае.

источник

2014-03-04 19:21:57

Пока мы на нем, 'background-size: 100%;', вероятно, тоже не нужно. Divs автоматически расширяется, чтобы заполнить как можно больше ширины по умолчанию, если только CSS не указано иначе. – TylerH

Да, размер фона: 100% необходимо только в том случае, если пользователь добавляет фоновое изображение. И даже размер фона: в этом случае лучше. –

Вам действительно не нужно использовать абсолютную позицию, если вы не хотите, чтобы она была над чем-либо. Вместо этого, вы можете просто использовать следующее:

<style> 
#banner { 
    background-color: #333FFF;  
    font-family: Arial; 
    padding:15px; 
    height:800px; 
    background-size:100% 100%; 
} 
</style>

источник

2014-03-04 19:25:36

Новая проблема ...как выровнять текст или ссылки внутри определенной части баннера или div? Вертикально я имею в виду. Это как наполовину «выключено» внизу, когда я настраиваю высоту px div. Не уверен, что это имело смысл, но да. – user35698

здесь что-то на основе шаблона я использую:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Title</title> 
    <link rel="stylesheet" type="text/css" href="CSS-STYLE-SHEET.css"> 
     <style type="text/css"> 
     body 
     { 
     background-color: #E7E7E7; 
     text-align: center; 
     font-family: Arial, Helvetica; 
     font-size: 15px; 
     color: #000000; 
     border-spacing: 0; 
     border-collapse:collapse; 
     padding: 0; 
     margin: 0; 
     } 

     #Banner { 
     background-color: #333FFF; 
     top: 0; /* Probably not necessary... */ 
     height: 40px; 
     width: 100%; /* Also probably not necessary */ 
     } 

     #ContentMain 
     { 
     background-color: #FFFFFF; 
     height: 100%; 
     } 
     </style> 
</head> 
<body> 
<div id="ContentMain"> 
<div id="Banner">Banner goes here</div> 
Content goes here 

</div> 
</body> 
</html>

должен работать .. серый немного на спине, потому что HTML-теги и тела не заполнять весь экран - что-то вроде this должно исправить его (я бы использовал min-height), но я не включил его здесь, как если бы вы хотели, чтобы страница была выше окна браузера и работает в Internet Explorer, все становится досадно. .

Jsfiddle here

источник

2014-03-04 19:46:48 Wilf

Зачем ссылаться на таблицу стилей извне и внутренне использовать тег стиля? – user35698

Ох ... это потому, что у исходного шаблона, который я использовал, была внешняя таблица стилей ... вы могли бы использовать его в качестве примера того, как ссылаться на таблицу стилей? – Wilf

HTML/CSS баннер не работает

ответ

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