Member Avatar for REPattinson1

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

Edited by Dani because: Code formatting
  • 4 Contributors
  • 3 Replies
  • 202 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by gabrielcastillo

Dani AI

Generated

Quick diagnosis: the stylesheet either isn't being applied or a few selector/property typos are preventing the rules from taking effect. As suggested, first confirm the CSS file is actually loading (check the <link> path and the browser Network/DevTools). Two common mistakes in the code shown are using .body instead of the body element (so the page background rule never targets the page) and setting the same color for text and background. and were right to call out spelling — use color (not colour) and text-align: center (not centre). Also note float: centre is invalid; valid floats are left, right, none, etc.

Apply these minimal, focused fixes and you should see the background and a horizontal menu quickly:

/* page background and readable text */
body {
  background-color: #000000;
  color: #ffffff;
}

/* simple horizontal menu */
ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul.menu li {
  display: inline-block;
  margin: 0 10px;
}

Why this works: body targets the page root, color must contrast the background, and turning the LI elements into inline-block creates a horizontal menu without breaking width/float rules. Avoid display:inline on a container that also has width — inline elements ignore width. If you prefer modern layout, ul.menu { display:flex; justify-content:center; gap:10px; } is even simpler. Final tips: validate CSS for typos, inspect the computed styles in DevTools to see which rule wins, and remove conflicting rules like float + width on the same selector.

Recommended Answers

All 3 Replies

Member Avatar for Sahil89

Check your reference to css file
<link href="load.css" rel="stylesheet" type="text/css" />
your path must be wrong.

Member Avatar for brainfo

Look out your .textfloat class. The spelling of color is 'color' not 'colour'. Remove the float property from .menu class your inline will work again.

Member Avatar for gabrielcastillo

Change text-align: centre; to text-align: center;

Their is no such things as float: centre;
only :
float:left; /float:right;/float:none/float:inherit;

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.