Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS background and in line menus not working

    Hi ,

    I'm sorry if I've posted this in the wrong section, but I was just wondering if anyone could help me with my CSS code? For one of my uni modules, I have to design a simple website with 5 webpages and 3 CSS.

    Basically, I messed my code up, when I tried to do something too complicated lol, and now my background colour won't show up in any of my HTML pages. Here is my complete CSS sheet that I'm working from:

    .body {
    background-color: #000000;
    color: #000000;
    font: 20px Eurostile Bold, sans-serif;
    text-align: left;
    }

    .main {
    width: 600px;
    margin: 0px auto;
    text-align: centre;
    font: 20px Eurostile Bold, sans-serif;
    }

    .imagefloat {
    float: centre;
    margin: 0px 10px 10px 0px;
    border: 1px solid #000000;
    }

    .textfloat {
    background: #FFFFFF;
    width: 210px;
    float: centre;
    padding: 10px 10px 10px 10px;
    margin: 0 0px 10px 10px;
    text-align: centre;
    colour: #000000;
    font: 20px Eurostile Bold, sans-serif;
    }

    .menu {
    list-style-type: none;
    margin: 0px;
    float: left;
    padding: 10px 10px 10px 10px;
    overflow: hidden;
    display:inline;
    width: 95%;
    font-weight: bold;
    background-color: #00FF00;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font: 20px AR Destine Thin, Eurostile Bold, sans-serif
    }

    a:link {text-decoration:none;color:#000000;} /* unvisited link /
    a:visited {text-decoration:none;color: #0000FF;} / visited link /
    a:hover {text-decoration:none;color: #FF0066;} / mouse over link /
    a:active {text-decoration:none;color: #FFFF00;} / selected link */

    My background colour was working yesterday, but obviously I've changed something and now it won't work! I have a feeling that there's a simple answer staring me in the face, but I just can't see it! Can anyone help ?

    Also, my menu isn't displaing in-line, it's still a block element....I've had this problem since the beginning of bulding my website, and I can't figure out what's wrong....is there something in my CSS code that's overriding the 'inline' instruction? Or have I just done it wrong lol?

    Thank you for your help

    REPattinson1

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Please post your HTML as well.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahh sorry!! I'm quite new to all this lol.

    Here's the HTML for my homepage:

    <!DOCTYPE html>
    <html>

    <head>
    <title>Team Artifex Homepage</title>
    <link rel="stylesheet" media="screen" href="styles/screen.css">
    <link rel="stylesheet" media="handheld" href="styles/handheld.css">
    <meta charset="UTF-8">
    </head>

    <body>

    <ul class="menu">

    <li><a href="index.html">Home</a></li>


    <li><a href="meettheteam.html">Meet the Team</a></li>


    <li><a href="racingpage.html">Racing Page</a></li>


    <li><a href="projectpage.html">Projects</a></li>


    <li><a href="servicespage.html">Services</a></li>


    </ul>

    <div class="main">
    <br>
    <h3>Welcome to the Artifex Ingenium Racing Team Website</h3>
    </div>
    <div class="textfloat">
    <b>Artifex Ingenium</b> is an innovative new racing team, designed by students for students. Here at Artifex Ingenium,
    we believe that innovation is key to the future of motorsport, and we fully
    support and encourage students to be the best they can be.<br>
    </div>

    <div class="newsfeed">
    <b>Latest News</b>
    <br>
    </div>
    <img src="x-images/newsbox2.jpg" title="News Box" alt="News Box">

    </body>
    </html>


    Thank you !

  • #4
    New Coder
    Join Date
    Apr 2012
    Location
    Netherlands
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey there,

    in .menu, display is set to inline, so i guess that's why it's not displayed in block style.
    also in the .menu part you're missing a semicolon at the end of your font declaration.

    in the html i noticed you're calling the class .newsfeed , however i don't see this class in your css

    also; im not sure if the way you used this is possible, but i think your link styles might be not working either, the way of commenting this out seems incorrect to me. (should be /* */ and not any other format, as far as i know, but may be wrong on that one.)

    Do you have these pages hosted anywhere?


  •  

    Tags for this Thread

    Posting Permissions

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