Манекен вернулся с простым вопросом о CSS

Хорошо! Время перерыва закончилось.

РЖУ НЕ МОГУ Итак, последние пару дней я читал о CSS и играл с кодом, с которым мне помог Deathshadow, и столкнулся с проблемой, которую не могу понять. Я читал и экспериментировал с использованием градиента разными способами.

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

Я также нашел что-то, что предлагало что-то вроде: тело{ высота: 100%; фон: линейный градиент (0 градусов, желтый, синий 80%), без повтора;}

это должно быть применено к телу.

Я также читал, что это следует применить и к html.

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

Я пытаюсь, это слишком просто, или мне чего-то не хватает?

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

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

Какие-либо предложения?

HTML-код:

 


/* null margins and padding to give good cross-browser baseline */


html,body,address,blockquote,div,


form,fieldset,caption,


h1,h2,h3,h4,h5,h6,


hr,ul,li,ol,ul,


table,tr,td,th,p,img {


margin:0;


padding:0;


}


img, fieldset {


border:none;


}


hr {


display:none;


/*


HR in my code are for semantic breaks in topic/section, NOT


style/presenation, so hide them from screen.css users


*/


}


/* fix for legacy iOS and windows Mobile devices */


@media (max-width:512px) {


* {


-webkit-text-size-adjust:none;


-ms-text-size-adjust:none;


}


}


/* fix for HDX displays like the Kindle Fire HDX */


@media


(-webkit-min-device-pixel-ratio:2) and (min-width:1600px),


(min-resolution:172dpi) and (min-width:1600px)


{


html { font-size:200%; }


}


body {


min-width:55em; /* for pre CSS3 capable browsers */


font:normal 85%/150% arial,helvetica,sans-serif;


color:#FFF;


background: linear-gradient(0deg, #FFF, #000 90%) no-repeat;


}


.heightWrapper {


background:#000;


}


h1 { 


padding-left:2em;


font-size:100%; /* prevent FF reverse inheritance bug */


color: #FFF;


}


h1 a {


position:relative; /* so we can absolute position span over this */


display:block;


padding:40px 0;


/* 40px top + 40px bottom + 64px line-height == image height */


text-decoration:none;


font:bold 60px/64px arial,helvetica,sans-serif;


color:#FFF;


}


h1 span {


position:absolute;


top:0;


left:0;


width: 1275px;


height: 130px;


background:url(images/header5.jpg) center left no-repeat;


border-bottom: 1px solid #990000;


}


h2 {


padding-bottom:1.33em;


text-align:center;


font:bold 150%/120% arial,helvetica,sans-serif;


}


#contentWrapper {


width:100%;


float:left;


}


#content {


padding:2em 0 1em 2em;


margin-right:26em; /* postitive of #extras negative margin */


}


#extras {


float:left;


width:22em;


padding:2em 2em 1em;


margin-left:-26em; /* width plus padding */


/*


negative margin nulls width in flow, pops it up over


#contentWrapper


*/


}


video {


display:block;


width:100%;


margin-bottom:1em;


}


p {


max-width:56em; /* prevent long lines from being hard to follow */


margin:0 auto;


padding-bottom: 5em;


text-align:center;


}


.adverts {


text-align:center;


}


.adverts img {


display:block;


max-width:100%;


margin-bottom:10em;


}


#click {


margin: 0 auto;


max-width: 25em;


background: #333;


font-family: Noto Sans;


text-align: center;


font-size: 36px;


font-weight: 700;


line-height: 100%;


padding: 1.25em 0 1.25em 0;


-webkit-box-shadow:


0 0 2px 2px #000,


0 0 .5em 0.05em #CCC;


box-shadow:


0 0 2px 2px #000,


0 0 .5em 0.05em #CCC;


-webkit-border-radius:


.5em;


border-radius:


.5em;


}


#click a {


color: #CCC;


text-decoration: underline;


}


#footer {


padding-bottom: 3em;


text-align:center;


}


#otherVideos {


clear:both; /* make sure this is past both columns */


padding:2em 0 1em;


margin:0 2em;


border-top:2px solid #800;


}


#otherVideos ul {


list-style:none;


text-align:center;


padding-bottom:1em;


}


#otherVideos li {


display:inline;


vertical-align:top;


}


#otherVideos a {


width:266px;


padding:1em;


display:inline-block;


vertical-align:top;


text-decoration:none;


color:#FFF;


-webkit-border-radius:1em;


border-radius:1em;


-webkit-transition:background 0.3s;


transition:background 0.3s;


}


#otherVideos a:active,


#otherVideos a:focus,


#otherVideos a:hover {


background:#333;


}


#otherVideos img {


display:block;


margin:0 auto 0.5em;


max-width:100%;


}


@media (max-width:50em) {


body {


min-width:192px; /* CSS3 possible, so let it go narrower */


}


#contentWrapper,


#extras {


float:none;


width:auto;


}


#content,


#extras {


margin:0;


padding:1em 0.5em 0;


}


h2 {


padding-bottom:0.66em;


}


.adverts {


padding-top:1em;


border-top:2px solid #400;


}


.adverts img {


display:inline-block;


max-width:49%;


}


#otherVideos {


padding:1em 0 0;


margin:0 0.5em;


}


#otherVideos a {


padding:0.5em;


}


}


@media (max-width:660px) {


h1 {


text-align:center;


padding:0;


}


h1 a {


padding:0.33em 0.167em;


font:bold 300%/150% arial,helvetica,sans-serif;


}


h1 span {


display:none;


}


.adverts img {


display:block;


max-width:100%;


}


}


@media (max-width:340px) {


#otherVideos a {


width:auto;


margin:0 auto;


-webkit-box-sizing:padding-box;


box-sizing:padding-box;


}


}

Код (разметка): и CSS выглядит так:

  <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1" > <link rel="stylesheet" href="screen2.css" media="screen,projection,tv" > <title> Sample Video Title - Site Title </title> </head><body> <h1> <a href="/"> Site Title <span><!-- image sandbag --></span> </a> </h1> <div class="heightWrapper"> <div id="contentWrapper"><div id="content"> <h2>Sample Video Title</h2><!-- or HR if text unwanted --> <video controls preload="metadata" poster="images/1.jpg" class="fullVideoPlate" > <source src="videos/test1.mpg" type="video/mp4"> <!-- Don't forget your other "required" source formats I'd probably also have a flash fallback here as well as a flash off fallback text.






--> </video> <p> This is just some sample text for whatever purpose.



This is just some sample text for whatever purpose.



This is just some sample text for whatever purpose.



This is just some sample text for whatever purpose.



This is just some sample text for whatever purpose.



This is just some sample text for whatever purpose.



This is just some sample text for whatever purpose.



This is just some sample text for whatever purpose.






</p> <!-- #content, .contentWrapper --></div></div> <div id="extras"> <div class="adverts"> <h2>Advertisements</h2> <a href="#"> <img src="images/2.jpg" alt="Опишите объявление"> </a> <a href="#"> <img src="images/2.jpg" alt="Опишите объявление"> </a> <!-- .adverts --></div> <!-- #extras --></div> <div id="otherVideos"> <h2>Other Videos You May Enjoy</h2> <ul> <li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li> </ul> <!-- #otherVideos --></div> <!-- .heightWrapper --></div> <div id="footer"> <hr> &copy; Whatever &bull; Rest of disclaimer here <!-- #footer --></div> </body></html> 

Код (разметка):

Привет! Угадай, что? Я действительно кое-что придумал сам. Кажется, я установил для фона .heightWrapper значение #000, как настоящий манекен.

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