SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Footer issues

  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    canada
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer issues

    Hi... I have this rather simple issue which I just can't seem to get. I have the following html code :

    <div id="page_footer">
    <div id="footer_menu">
    <ul>
    <li>
    <a href="index.html">Foot Link 1</a>
    </li>
    <li>
    <a href="index.html">Foot Link 2</a>
    </li>
    </ul>
    </div>
    <a href="#">Privacy Policy</a>
    <a href="#">Site Map</a>
    </div>



    And I have the following CSS code :


    #page_footer {
    margin: 0px;
    width: 750px;
    padding-top: 10px;
    clear: both;
    }

    #footer_menu {
    width: 520px;
    margin: 0px;
    padding: 0px;
    }

    #footer_menu ul, #footer_menu ul li, #footer_menu ul li a {
    text-align: center;
    }

    #footer_menu ul li {
    display: inline;
    padding: 10px;
    }

    #footer_menu ul li a {
    padding-right: 0;
    }


    Here's my problem : I want to change margin/padding for the Privacy Policy and Site Map which comes under the page_footer div tag but when I write this:

    #page_footer a { margin-left: 300px;}

    the whole thing (including Foot Link 1 and Foot Link 2 moves 300px.
    I just wish to move the Privacy Policy and Site Map links to 300px left.
    How do i achieve that without disturbing the footer_menu div tag ??\

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    reposition the start Tag <div id="page_footer">

    leave the a out ? #page_footer a { margin-left: 300px;}

    maybe you need a new container around your div's

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	
    div{border:1px solid #ff0000;}
    
    #page_footer {position:relative;
    margin: 0px;
    width: 750px;
    padding-top: 10px;
    clear: both;
    }
    #footer_menu {
    width: 520px;
    margin: 0px;
    padding: 0px;
    }
    #footer_menu ul, #footer_menu ul li, #footer_menu ul li a {
    text-align: center;
    }
    #footer_menu ul li {
    display: inline;
    padding: 10px;
    }
    #footer_menu ul li a {
    padding-right: 0;
    }
    #page_footer{ margin-left: 300px;} 
    </style>
    
    </head>
    <body>
    
    <div id="footer_menu">
    <ul>
    <li>
    <a href="index.html">Foot Link 1</a>
    </li>
    <li>
    <a href="index.html">Foot Link 2</a>
    </li>
    </ul>
    </div>
    
    <div id="page_footer">
    <a href="#">Privacy Policy</a>
    <a href="#">Site Map</a>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Aug 2004
    Location
    canada
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The thing is, I am making this template for a CMS and I have no access to the actual HTML code. I have to figure it out without having to change the HTML.

    I tired removing the 'a' from #page_footer - it still does not work.

    Any way of solving this without having to change the HTML ?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could just absolutely position it left or if you want to preserve the space then this should work.
    Code:
    #page_footer a { position:relative;left: 300px;} 
    #footer_menu a{ left:0}
    Hope that helps.

  5. #5
    SitePoint Member
    Join Date
    Aug 2004
    Location
    canada
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope.. thats didn't work either.

    I wanted the different links (footer link 1, footer link 2) to be in the center and I wanted page_footer links (Site Map and Privacy Policy) to be on the right hand side in another area of the website.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Nope.. thats didn't work either.
    Yes it did ... it did exactly what you asked for.

    Now I'm confused

    I thought you wanted to move site map and privacy policy 300px towards the right from where they were without altering the position of the footer links. My code does exactly that

    Now you say you want the footer links centred and the site map somewhere else lol.

    So the example code you posted is not the code you want us to work with but some other code you haven't told us about. This job gets harder every day lol

    Can you explain again exactly what you need doing and we'll try again

  7. #7
    SitePoint Member
    Join Date
    Aug 2004
    Location
    canada
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh.. I'm so sorry... I typed in your code wrong... it works like a charm. Sorry for my misunderstanding.


Bookmarks

Posting Permissions

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