The Dummy Is Back With A Simple CSS Question

Discussion in 'HTML & Website Design' started by VanceVP, Aug 1, 2016.

0
  1. #1
    Okay! Break time is over. LOL

    So the past couple of days I have been reading up on CSS and playing with some code that deathshadow helped me out with and I am running into a problem I cannot figure out.

    I was reading up and playing with using gradient in various ways. I was trying to apply it to a background to see how it works and some of what I read seemed awfully complicated. I also found something that suggested something like:

    body{
    height:100%;
    background: linear-gradient(0deg, yellow, blue 80%)no-repeat;}

    that should be applied to body. I also read that it should be applied to html as well.

    Anyway, I tried the above method (after changing it to go from a simple black to white) in both the body and html of deathshadows code and it does not seem to want to work with this particular code and I was wondering if the method I am trying is just too simple or if there is something else I am missing?

    I also notice that, when trying to apply the line for the gradient above, the background turns straight black, but when I resize it down, the background color changes back to the red color coded in originally.

    I have looked at the @media and do not see anything that would cause the background color to change there so once again, I am completely stumped.

    Any suggestions?

    The html is:
    

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
    name="viewport"
    content="width=device-width,height=device-height,initial-scale=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="Describe Advert">
            </a>
            <a href="#">
                <img src="images/2.jpg" alt="Describe Advert">
            </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="Describe this image!">
                    Just some pure simple text describing what the video is all about
                </a>
            </li><li>
                <a href="#">
                    <img src="images/3.jpg" alt="Describe this image!">
                    Just some pure simple text describing what the video is all about
                </a>
            </li><li>
                <a href="#">
                    <img src="images/3.jpg" alt="Describe this image!">
                    Just some pure simple text describing what the video is all about
                </a>
            </li><li>
                <a href="#">
                    <img src="images/3.jpg" alt="Describe this image!">
                    Just some pure simple text describing what the video is all about
                </a>
            </li><li>
                <a href="#">
                    <img src="images/3.jpg" alt="Describe this image!">
                    Just some pure simple text describing what the video is all about
                </a>
            </li><li>
                <a href="#">
                    <img src="images/3.jpg" alt="Describe this image!">
                    Just some pure simple text describing what the video is all about
                </a>
            </li><li>
                <a href="#">
                    <img src="images/3.jpg" alt="Describe this image!">
                    Just some pure simple text describing what the video is all about
                </a>
            </li><li>
                <a href="#">
                    <img src="images/3.jpg" alt="Describe this image!">
                    Just some pure simple text describing what the video is all about
                </a>
            </li><li>
                <a href="#">
                    <img src="images/3.jpg" alt="Describe this image!">
                    Just some pure simple text describing what the video is all about
                </a>
            </li><li>
                <a href="#">
                    <img src="images/3.jpg" alt="Describe this image!">
                    Just some pure simple text describing what the video is all about
                </a>
            </li><li>
                <a href="#">
                    <img src="images/3.jpg" alt="Describe this image!">
                    Just some pure simple text describing what the video is all about
                </a>
            </li><li>
                <a href="#">
                    <img src="images/3.jpg" alt="Describe this image!">
                    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>
    Code (markup):
    and the css looks like:
    

/* 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;
    }
}
    Code (markup):
     
    VanceVP, Aug 1, 2016 IP
  2. VanceVP

    VanceVP Member

    Messages:
    113
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    33
    #2
    Hey! Guess What?

    I actually figured something out on my own.

    It seems that I set .heightWrapper background to #000 like a real dummy. So I changed it from black to the gradient and it worked so ya'll can just ignore my OP and everybody can rest easy that another one of my crisis's have been averted.

    Thanks and have a nice day :)
     
    VanceVP, Aug 1, 2016 IP