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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 28
  1. #1
    Regular Coder
    Join Date
    Nov 2008
    Posts
    122
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Why won't my footer go to the bottom and centered?

    Also why won't my content change to white ?

    Code:
    body{
    	text-align: center;
    	background: #000;
    	font: 16px Helvetica, arial, sans-serif;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: black;
    }
    #container {
    	width: 1024px;
    	margin: 0 auto;
    }
    #header {
    	width:1024px;
    	height:229px;
    	background:url(images2/GLheader.jpg) no-repeat;
    }
    #nav {
    	width: 1024px;
    	height: 107px;
    	background:url(images2/GLnav.jpg) no-repeat;
    	text-align: center;
    	border: 10px;
    }
    li {
    	list-style-type: none;
    	display: inline;
    	padding: 0 32px;
    	text-decoration: none;
    	font: 18px/80px Helvetica;
    
    }
    #content {
      position:absolute;
        width: 1024px;
        height: 800px;
       border-width:30px;
        background:#FFFFFF ;
    
    }
    
    
            #footer {
       position:absolute;
       padding-left:20%;
       width:1024px;
       height:45px;   /* Height of the footer */
       background-image: url(images2/GLfooter.jpg);
        background-repeat: repeat-y;
        color: white;
    
    }
    
    
        }
    
        h2{
          text-align: left;
          text-indent: 0.5cm;
          padding-top: 20px;
          color: #000;
          text-decoration: none;
          font-family: Arial Rounded MT Bold;
    
        }
    
    
    #left {
    float: left;
          width: 600px;
        }
    
    #right {
    margin: 0 0 0 600px;
    padding: 20px 0 0 0;
    
    
    }
    
    
    
    a {
        Color: blue;
        text-decoration: none;
    }
    
    h3{text-align: left;
          text-indent: 0.5cm;
          padding-top: 20px;
          color: white;
          text-decoration: none;
          font-family: Arial Rounded MT Bold;
    }
    
    
    
    .box {
    	width: 302px;
    	height: 400px;
    	margin: 10px auto 0;
    	background: url(images2/Fan.jpg);
            margin-top:5%;
            Margin-left:5%;
            border-style: solid;
    border-width: 1px;
    border-color: black;
    }
    
    .box h3{
      text-align: center;
      text-indent: 2.0cm;
      color: black;
    }
    
    .box p{
      text-align: center;
      padding-top: 5px;
      margin-left:5%;
      margin-top:50%;
    }
    
    .box a{
      color: blue;
      text-decoration: underline;
    
      margin-right:25%;
    
    }
    
    #form{
      padding-left: 20%;
    }
    
    #content p{
      color: black;
      font-weight: bold;
      font: Arial;
    }
    
    #content a{
      color:blue;
    }
    
    #nav a{
      color:white;
    }

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    would need to see your page but you're using absolute positioning (poorly)

    Code:
    #footer { position:absolute; bottom:0; left:0; }
    is the ~kind~ of thing you're after but that wont look right anyway.

    content change to white? what does this mean?
    teh background? font colour?

    Code:
    #content { background:white; }  /*background*/
    
    #content p{
      color: white; /* font */
      font-weight: bold;
      font: Arial;
    }

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    91
    Thanks
    4
    Thanked 9 Times in 9 Posts
    Change #footer to:

    Code:
    #footer {
       position:fixed;
       bottom: 0px;
       margin: auto;
       width:1024px;
       height:45px;   /* Height of the footer */
       background-image: url(images2/GLfooter.jpg);
        background-repeat: repeat-y;
        color: white;
    }
    And change #content to:

    Code:
    #content {
      position:absolute;
        width: 1024px;
        height: 800px;
       border-width:30px;
        background-color:#FFFFFF ;
    
    }
    Also, make sure you are using id rather than class in your html.
    Current Project: Nothing at the minute

  • #4
    Regular Coder
    Join Date
    Nov 2008
    Posts
    122
    Thanks
    5
    Thanked 0 Times in 0 Posts
    My header and nav are perfect I just can't seem to get the content background color to change to white. The footer advice helped but it isn't pushed down as far as I'd like. This is probably because the content isn't showing up. The footer isn't centered. It moved down but it's against the left side of the page.

  • #5
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    really need a link, or your entire CSS+ html to help any further.

  • #6
    New Coder
    Join Date
    Jul 2008
    Posts
    91
    Thanks
    4
    Thanked 9 Times in 9 Posts
    Did you use my footer id? if so, it should have fixed it to the bottom of the window, regardless of where the scroll bar is.
    Current Project: Nothing at the minute

  • #7
    Regular Coder
    Join Date
    Nov 2008
    Posts
    122
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by met View Post
    really need a link, or your entire CSS+ html to help any further.
    http://www.stylishknockouts.com/Grandlegacy.htm

    a client job

  • #8
    New Coder
    Join Date
    Jul 2008
    Posts
    91
    Thanks
    4
    Thanked 9 Times in 9 Posts
    Theres no content??

    And as for the footer, add this:

    padding-top: 15px;
    Current Project: Nothing at the minute

  • #9
    Regular Coder
    Join Date
    Nov 2008
    Posts
    122
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I haven't got anything to put in the content yet. I need to make the background of the content div black. I just got into web design again after about 6 months hiatus.

  • #10
    New Coder
    Join Date
    Jul 2008
    Posts
    91
    Thanks
    4
    Thanked 9 Times in 9 Posts
    Ahh ok...

    To change the background-color to back, change it to #000 instead of #ffffff
    Current Project: Nothing at the minute

  • Users who have thanked scoop_987 for this post:

    Mccall101 (05-15-2010)

  • #11
    Regular Coder
    Join Date
    Nov 2008
    Posts
    122
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I meant the background color of the content area. i don't understand what's going on with it. I tried the bg color in the #content but it didn't work.

  • #12
    Regular Coder
    Join Date
    Nov 2008
    Posts
    122
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I just put my content as a image in css and still had no effect

  • #13
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    your markup is broke

    Code:
    <ul id="nav">
    <ul>
      <li><a href="#">Stylish Knockouts</a></li>
      <li><a href="#">Episodes</a></li>
      <li><a href="#">Characters</a></li>
    
      <li><a href="#>PRR Timeline</a></li>
      </ul>
    
    
    
    <div id="content">
    <p>In progress</p>
    
    <!--end content--></div>
    close that tag.

  • Users who have thanked met for this post:

    Mccall101 (05-15-2010)

  • #14
    Regular Coder
    Join Date
    Nov 2008
    Posts
    122
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks man. Only thing I need now is to get the footer to look right

  • #15
    New Coder
    Join Date
    Jul 2008
    Posts
    91
    Thanks
    4
    Thanked 9 Times in 9 Posts
    What do you want to do with it? make the text in the middle?
    Current Project: Nothing at the minute


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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