SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Melbourne, Australia
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Learning about css & using a image for a menu background

    I was hoping someone can point me in the right direction here. I am learning CSS and building a basic website to practice my skills; I have created a menu and would like to replace the background with an image (a gradient .gif file) I have created.

    I have tried making the navigation header transparent and referencing the image but with no success.

    To be honest I um unsure on where to place the reference to the image, if someone could please point me in the correct direction it would be appreciated.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think we'd need to see the html you have to give specific advice as I'm not quite clear why you need to set the header to transparent (which it will be by default anyway).

    You can apply a background image to any block level element quite easily as long as the element has some intrinsic width and height in which to show the background.

    If the element you are applying the image to only contains floated children then you would need to ensure that the floats are cleared otherwise the parent will have zero height and no background will show.

    If you can detail which element you want an image applied to and provide some of your code we can give a more specific answer

    Applying a horizontal repeating background is as simple as -- .test {background:url(images/gradient.gif) repeat-x 0 0}

    However i'd need to see what you really want

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Melbourne, Australia
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Many thanks for your reply (sorry for the delay)

    I have included the HTML below,

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Website - Welcome</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8"/>
    <link href="style1.css" rel="stylesheet" type="text/css" href="tabs.css"/>
    <h1>Website</h1>
    </head>
    <div id="mainnavigation">
    <ul id="nav">
    <li><a href="index.html">welcome</a></li>
    <li><a href="Page_1.html">page 1</a></li>
    <li><a href="Page_2.html">page 2</a></li>
    <li><a href="Page_3.html">page 3</a></li>
    <li><a href="Page_4.html">page 4</a></li>
    </ul>
    </div> <!-- end of navigation div -->
    <body>
    <div id="content">
    <p>Welcome to my test website.</p>
    </div> <!--end of content field -->
    </body>
    </html>
    And here is a copy of my stylesheet.css code

    Code CSS:
    /*
    CSS for test site
    */
    #mainnavigation {
    width: 1024px; 
    height: 37px;
    margin-left: auto; 
    margin-right: auto;
    text-align: right;
    background-color: #cccccc;
    background-image: url(menu_background.gif) no-repeat;
    font-family: georgia, sans-serif;
    font-weight: regular;
    font-size: 14pt;
    }
     
    #mainnavigation ul {
    list-style: none;
    margin: 0;
    padding: 2;
    padding-top: 0em;
    text-decoration: none;
    background-color: ;
    background-image: url(menu_background.gif);
    }
     
    #mainnavigation li {
    display: inline;
    }
     
    #mainnavigation a:link {
    color: #ffffff;
    text-decoration: none;
    }
     
    #mainnavigation a:visited {
    color: #ffffff;
    text-decoration: none;
    }
     
    #mainnavigation a:hover {
    color: #0033cc;
    background-color: transparent;
     
    }
     
     
    h1 {
    width: 1024px; 
    margin-left: auto; 
    margin-right: auto;
    text-align: left; 
    font-family: georgia, sans-serif;
    font-size: 36pt;
    font-weight: regular;
    color: #cccccc;
    margin-bottom: -0.25em 
    }
    p {
    font-family: georgia, sans-serif;
    font-weight: regular;
    color: grey;
    }
     
    #content { 
    width: 1024px; 
    margin-left: auto; 
    margin-right: auto; 
    border: 0px solid #A6B2BC; 
    background-color: #FFFFFF; 
    color: #000000; 
    padding: 0 20px 0 20px; 
    text-align: left; 
    }

    Where the bar at the top is grey I wish to insert my image of the gradient background.

    As this is my first venture into coding I'm sure there are some error's and elements which can be done better, so your assistance (and understanding ) is appreciated.

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a link helps so we can visually see what it's doing right now.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You are mixing your shorthand properties here.

    Code:
        background-color: #cccccc;
        background-image: url(menu_background.gif) no-repeat;
    background-image is a not a shorthand property and you can only apply the image to it and not other properties like repeat or position. You should use the shorthand "background " instead like so:

    Code:
    background:#ccc url(menu_background.gif) no-repeat 0 0;
    I don't know what your images look like so I don't really know how you want them placed or repeated but the following code is now valid at least.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Website - Welcome</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="style1.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /*
    CSS for test site
    */
    #mainnavigation {
        width: 1024px;
        height: 37px;
        margin-left: auto;
        margin-right: auto;
        text-align: right;
        background:#ccc url(menu_background.gif) no-repeat;
        font-family: georgia, sans-serif;
        font-weight: normal;
        font-size: 14pt;
    }
    #mainnavigation ul {
        list-style: none;
        margin: 0;
        padding: 2px;
        padding-top: 0em;
        text-decoration: none;
        background:url(menu_background.gif);
    }
    #mainnavigation li {
        display: inline;
    }
    #mainnavigation a:link {
        color: #ffffff;
        text-decoration: none;
    }
    #mainnavigation a:visited {
        color: #ffffff;
        text-decoration: none;
    }
    #mainnavigation a:hover {
        color: #0033cc;
        background-color: transparent;
    }
    h1 {
        width: 1024px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        font-family: georgia, sans-serif;
        font-size: 36pt;
        font-weight:normal;
        color: #cccccc;
        margin-bottom: -0.25em
    }
    p {
        font-family: georgia, sans-serif;
        color: gray;
    }
    #content {
        width: 1024px;
        margin-left: auto;
        margin-right: auto;
        border:none;
        background-color: #FFFFFF;
        color: #000000;
        padding: 0 20px 0 20px;
        text-align: left;
    }
    </style>
    </head>
    <body>
    <h1>Website</h1>
    <div id="mainnavigation">
        <ul id="nav">
            <li><a href="index.html">welcome</a></li>
            <li><a href="Page_1.html">page 1</a></li>
            <li><a href="Page_2.html">page 2</a></li>
            <li><a href="Page_3.html">page 3</a></li>
            <li><a href="Page_4.html">page 4</a></li>
        </ul>
    </div>
    <!-- end of navigation div -->
    <div id="content">
        <p>Welcome to my test website.</p>
    </div>
    <!--end of content field -->
    </body>
    </html>

    You had a number of error so run your css through the css validator and your html through the html validator regularly.

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Melbourne, Australia
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Sorry for the delay in responding and I hope you had a nice Easter.

    Many thanks for your assistance with the code, As you can see I'm quite new at this and a have a few sitepoint books to guide me (although I may pick up some more PDF's with the promo)

    I can now see where I was going wrong and will add this to my notes.

    I also appreciate the reminder about using the validators, I guess when learning it's wiser to run code through them more frequently then usual until I'm more comfortable with the code.

    Once again thanks for your assistance and making sitepoint a great support site!


Bookmarks

Posting Permissions

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