CSS background and in line menus not working

REPattinson1 · 04-25-2012, 04:48 PM

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

abduraooft · 04-26-2012, 08:40 AM

Please post your HTML as well.

REPattinson1 · 04-26-2012, 09:23 AM

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

!

Annihlator · 04-27-2012, 08:06 AM

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?