Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Sep 2015
    Posts
    1
    Member #
    51993

    div style not working

    I've been working on a website skeleton, and I've noticed that my div #body, which wraps all the other elements of the site, isn't styling properly, namely the background color doesn't appear around the content of the site, only around the header.
    But today when I decided to experiment with media queries, the background color suddenly started to work on the small screen version, but the not the orginal wide one. I don't understand why this happens, can someone help me?

    HTML

    <!DOCTYPE html>
    <html>
    <head>
    <link href="Style4.css" rel="stylesheet" type="text/css">
    <title>Curriculum</title>
    </head>
    <body>
    <div id=body>
    <div id=header>
    <a href="home.html"><img src="http://www.lithgowsheds.com/files/Index/HeaderBar18.jpg"/></a>
    </div>
    <div id=sidebar>
    <table>
    <tbody>
    <div class="menu"><a href="gallery.html">Galeria/Gallery</a></div>
    <div class="menu"><a href="curriculum.html">Curriculum</a></div>
    <div class="menu"><a href="latest.html">Recentemente/Latest</a></div>
    <div class="menu"><a href="searching.html"> procura/Searching</a></div>
    <div class="menu">Login</div>
    </tbody>
    </table>
    </div>
    <div id=mainpage>
    </div>
    </div>
    </body>
    </html>

    CSS

    @media only screen and (max-width: 600px) {
    body {
    background-color:#2d2d2d;
    color:#DDDDDD;
    font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;
    font-size:0.75em;}
    #body {
    margin:22px auto 22px auto;
    background-color:#0D0D0D;
    max.width:1068px;
    width:100%;}
    #header {
    clear:both;
    display:block;
    margin-bottom:22px;}
    #mainpage{
    width:100%;
    padding-top:10px;}
    #sidebar{
    width:100%;}
    width:100%;
    text-align:center;
    margin-bottom: 5px;
    padding-bottom:5%;
    padding-top:5%;
    background-color: #a70000;}
    }
    @media only screen and (min-width: 600px) {
    body {
    background-color:#2d2d2d;
    color:#DDDDDD;
    font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;
    font-size:0.74em;}
    #body {
    margin:22px auto 22px auto;
    background-color:#0D0D0D;
    max.width:1068px;
    width:90%;}
    #header {
    clear:both;
    display:block;
    margin-bottom:22px;}
    #mainpage{
    width:72%;
    padding-top:10px;
    float:right;}
    #sidebar{
    width:21%;
    float:left;
    margin-right:7%;
    position:fixed;}
    .menu{
    width:100%;
    text-align:center;
    margin-bottom: 5px;
    padding-bottom:10%;
    padding-top:10%;
    background-color: #a70000;}
    }

  2.  

  3. #2
    Junior Member erika's Avatar
    Join Date
    Oct 2015
    Location
    San Francisco
    Posts
    3
    Member #
    52126
    try it this way with out the media queries . this is the technique I use and its from css tricks.

    html {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    Works in:

    Safari 3+
    Chrome Whatever+
    IE 9+
    Opera 10+ (Opera 9.5 supported background-size but not the keywords)
    Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

  4. #3
    Senior Member breno's Avatar
    Join Date
    Feb 2015
    Location
    Australia
    Posts
    138
    Member #
    41574
    Liked
    29 times
    It works for me when I put the code in codepen even without the media query #0D0D0D is virtually black anyway.
    Your max.width in #body should be max-width.
    You also need to get rid of that gradient image in your header div. CSS3 can do gradients just fine. https://devdocs.io/css/gradient


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 09:54 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com