Не отображается фон/беграунд

garmoni · January 6, 2014

Добрый день. Пытаюсь создать сайт по шаблону, с помощью видео уроков. Все делаю точно по уроку. На определенном этапе под шапкой у меня не появляется фон как у роке (белый) или картинка(беграунд)
Код HTML

<!DOCTYPE html>
<html>

<head>

<title>webtheory tutotials</title>
<meta charset=windows-1252">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
<div id="page_align" class="b3radius">
<div id="header">

</div>

<div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="clr"></div>

</body>

</html>

Код CSS

* {

margin: 0;
padding: 0;
outline: none;
}
body {

background: url("../images/bg.png") #EAEAEA;
}

a{
text-decoration: none;
}
.b3radius{
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
}
#page_align{
width: 1000px;
margin: 35px auto;
background: url("../images/pagebg.png") #FFF;
box-shadow: 0px 1px 3px #DDDDDD;
-webkit-box-shadow: 0px 1px 3px #DDDDDD;
-o-box-shadow: 0px 1px 3px #DDDDDD;
-moz-box-shadow: 0px 1px 3px #DDDDDD;
}
#header{
height: 95px;
border-bottom: solid 3px #C7D4E1;
background: #FFF;
}
#sidebar{

width: 195px;
border-bottom: solid 3px #C7D4E1;
float: left;
}
#content{
float: right;
width: 800px;
}
#clr{
clear: both;
}

Результат который у меня получился http://clip2net.com/s/6vtS8X
Результат который я вижу в уроке http://clip2net.com/s/6vtTHz

hypnocolor · January 6, 2014

1. Выкладывайте код в песочницу/на хостинг.

2. Windows-1252, идентификаторы в стилях вместо классов.. Знаете, не тратили бы вы время на эти.. кхм.. уроки.

garmoni · January 6, 2014

1. Выкладывайте код в песочницу/на хостинг.
2. Windows-1252, идентификаторы в стилях вместо классов.

Можно по подробней, объяснить, не понимаю о чем идет речь.

Vlad02 · January 6, 2014

Песочница здесь, выкладывайте туда код, тогда народ будет смотреть, а не разбирать ворох тегов.

windows 1251 уже не по феншую, используйте utf-8

Edited January 6, 2014 by Vlad02

SelenIT · January 6, 2014

Пример предлагает ограниченную и устаревшую кодировку:

<meta charset=windows-1252">

вместо правильной. А также предлагает привязывать оформление к id (напр. #content), а не к class, что считается плохой практикой (уникальность id затрудняет повторное использование стилей оформления, поэтому профессионалы советуют использовать id только для скриптов и в качестве якорей). Да и

<div class="clr"></div>

сам по себе признак устаревшего подхода.

Так что лучше учиться не по этим "урокам", а по самоучителям с htmlbook.ru

garmoni · January 6, 2014

Пример предлагает ограниченную и устаревшую кодировку:
<meta charset=windows-1252">
вместо правильной. А также предлагает привязывать оформление к id (напр. #content), а не к class, что считается плохой практикой (уникальность id затрудняет повторное использование стилей оформления, поэтому профессионалы советуют использовать id только для скриптов и в качестве якорей). Да и
<div class="clr"></div>
сам по себе признак устаревшего подхода.

Так что лучше учиться не по этим "урокам", а по самоучителям с htmlbook.ru

Реклама сайта хорошая, но у меня вопрос не о том. Интересует, почему в точности одинаковый код, а результаты разные.

hypnocolor · January 7, 2014

Интересует, почему в точности одинаковый код, а результаты разные.

Ну, и вот каким образом мы должны догадаться, почему именно у вас что-то не работает? Дайте ссылку на вашу проблемную страницу, чтобы можно было диагностировать проблему. Уже и ссылку на песочницу вам дали.

Окей, вот у вас проблема с фоном. Но как вы не поймёте-то: ну, скопирую я сейчас вашу простыню кода, пропишу путь к какой-нибудь своей фоновой картинке, и у меня всё заработает. А вы так и останетесь со своей проблемой.

<meta charset=windows-1252">

К слову, у вас ещё тут открывающая кавычка пропущена, поэтому могу вдобавок посоветовать быть внимательнее.

И — да, Хтмлбук вполне достоин «рекламы», если это так называть. В отличие от большей части видеоуроков, наводнивших интернеты.

Edited January 7, 2014 by hypnocolor

garmoni · January 7, 2014

Я добавила код в песочницу, но как указать на него ссылку я не знаю. На другом форуме подсказали добавить page_align{ overflow: hidden;} Проблема решена.

Sign In

Не отображается фон/беграунд

Question

garmoni

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

hypnocolor

Link to comment

Share on other sites

garmoni

Link to comment

Share on other sites

Vlad02

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

garmoni

Link to comment

Share on other sites

hypnocolor

Link to comment

Share on other sites

garmoni

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information