Sleepless and dumb: Simple solution to my noob problem!

Discussion in 'CSS' started by Barry Scott, Sep 5, 2007.

0
  1. #1
    I feel silly posting this here, but CSS is relatively new to me and, probably due to only having 6 hours sleep in 3 days, i'm completely stumped as to what i feel is bound to be a very simple problem.

    If someone could help me i'd very much appreciate it, thanks! :D

    The problem is that i have created a fixed with 800px design, within which is a header, a footer, content and navigation.

    I've created id for each and have backgrounds for the header and footer. These have rounded corners so as to act like a container and expand as content and navigation is added.

    The problem is that whenever i add any content or navigation it spills out of the nicely rounded design as the actual header and footer stay fixed to the page regardless.

    Anyway, the CSS is below, the mark-up is extremely straight forward, but added it so as can be seen!

    Most of the css is copied from various locations so i'm not 100% sure what everything does!

    CSS

    
* {
  margin:0;
  padding:0;
}

img {
  border:none;
}

html {
  font: small/1.4 "verdana", arial, sans-serif;
}

body {
  font-size: 92%;
  background: #595959;
}

#wrapper {
  background: #FFF;
  width:800px;
  margin: 10px auto;
}

#header {
  background: #FFFFFF;
}

#header h1 {
  width: 800px;
  height: 107px;
  background: url(images/header.jpg) no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}

#footer {
  background: #FFFFFF url(images/footer.gif) no-repeat bottom left;
  color: #FFFFFF;
  margin: 30px 0 0 0;
  padding: 0 0 5px 10px;
  font-size: 80%;
}

#navigation {
  float: left;
  width: 277px;
}

#content {
  float: right;
  width: 523px:
  margin: 0;
  padding: 0 20px 20px 20px;
}
    Code (markup):
    Mark-up

    
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rounded</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
  <div id="header">
  <h1>Header</h1>
  </div>
  <div id="navigation">
  <ul>
navigation
    </ul> 
  </div>
  <div id="content">
content
  </div>
  <div id="footer">
  <p>&copy Copyright 2007</p>
  </div>
</body>
</html>
    Code (markup):
     
    Barry Scott, Sep 5, 2007 IP
  2. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I took a look at your code, but can't seem to figure out your troubles. Could you provide an image, or an example of code that causes your problem?
     
    GWiz, Sep 5, 2007 IP
  3. Barry Scott

    Barry Scott Active Member

    Messages:
    183
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #3
    It's okay, i have solved it buy using a template and just changing things bit by bit and now have a working webpage! Thanks anyway
     
    Barry Scott, Sep 5, 2007 IP