JPW

Thanks for your help Wickham. The http://www.wickham43.com/footerfix version is what I'm after. Can you suggest alterations tomy original code based on the above link? Obviously the layout in that link is different to my layout.

Okay a few problems: 1) The footer sticks to the browser window like glue, but as I move the window the footer goes over the content - I don't want that to happen. I want the footer stuck to the bottom if there is little content on the page so it's not half way up the page 2) There is still a problem getting the content wrapper or the footer to 'connect' and thus there is a big gap between the sections. http://www.jonpaulwild.co.uk/contact/error

Hello, I'm having problem with my footer. At the moment I'd like it stuck to the bottom of the browser window, and whilst it will do that with the below code in the browser am using it breaks the middle part of the website page. I've applied it to this page: www.jonpaulwild.co.uk/contact/error (an error mailing page) I've not changed the xhtml for the rest of the site as it's something I've just noticed I need to do with small content. Again website is very much under construction. It will be something minor that I'm missing or done wrong. @charset "utf-8"; /* Start Misc*/ * { margin: 0; padding: 0; } html, body {font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-color: #252525; height: 100%} p, h1, h2 {line-height: 18px;} img {border: 0;} p {margin-top: 10px; padding-bottom: 20px; text-align:left; font-size: 13px; font-weight: normal; color: #666666;} h1 {margin-left: 40px; width: 200px; margin-top:0; padding-top: 55px; color: white; font-size:17px; font-family:Arial, Helvetica, sans-serif; text-align:center;} h2 {font-size:16px; font-family: Arial, Helvetica, sans-serif; text-align:left; font-weight: bold; color:#006600; padding-bottom: 30px;} h3 {color:#CC0066; font-size: 14px; font-family:Arial, Helvetica, sans-serif; padding-bottom: 10px;} .clear {clear:both} /* End Misc-------------------------------------------------------------------------------------------------------- */ #container{ position:relative; height: auto; height: 100%; min-height: 100%;} /* Begin Header-------------------------------------------------------------------------------------------------------- */ #headerwrapper {width: 100%; height: 100px; background-color: #FFFFFF; width: 100%;} #header {width: 800px; height: 100px; margin: 0 auto;} #headerleft {margin-top: 10px; width:400px; height: 82px; float:left; background-color: transparent;} #headerright {margin-top: 20px; margin-left: 160px; width:191px; height: 53px; float:right; background-color:transparent;} /* End Header-------------------------------------------------------------------------------------------------------- */ /*Start Main navigation-------------------------------------------------------------------------------------------------------- */ #navwrapper {width: 100%; clear:both; background-color:#006633; background-image:url(../images/prinavbg.jpg); background-repeat:repeat-x; height: 42px;} #prinav {background: url(../images/buttons.jpg);height: 42px; width: 483px; margin: 0px auto; position: relative;} #prinav li {list-style-type: none; float: left;} #prinav a {height: 42px; display: block;} #home { width: 121px; } #about { width: 120px; } #services { width: 120px; } #contact { width: 122px; } #home a:hover {background: url(../images/buttons.jpg) 0px -42px no-repeat;} #about a:hover {background: url(../images/buttons.jpg) -121px -42px no-repeat;} #services a:hover {background: url(../images/buttons.jpg) -241px -42px no-repeat;} #contact a:hover {background: url(../images/buttons.jpg) -361px -42px no-repeat;} .home #prinav li#home a {background: url(../images/buttons.jpg) 0px -84px no-repeat;} .about #prinav li#about a {background: url(../images/buttons.jpg) -121px -84px no-repeat;} .services #prinav li#services a {background: url(../images/buttons.jpg) -241px -84px no-repeat;} .contact #prinav li#contact a {background: url(../images/buttons.jpg) -361px -84px no-repeat;} /* End Main Navigation--------------------------------------------------------------------------------------------------------------- */ /* Begin Secondary Navigation --------------------------------------------------------------------------------------------------------*/ #secnav {width: 100%; background-image:url(../images/secnavbg.jpg); background-repeat:repeat-x; background-color: #FFCC00; height: 24px;} #secnav ul {margin: 0 auto; width: 700px; text-align: center; height: 20px; background-color: transparent; padding-top: 4px;} #secnav li {display:inline; padding-left: 30px; padding-right: 30px; font-size:12px; font-family:Arial, Helvetica, sans-serif; font-weight: normal;} #secnav li a {text-decoration: none; color: #3f3f3f} #secnav li a:visited {color: yellow;} #secnav li a:hover {color: yellow; text-decoration:underline;} #secnav li a:active {color: yellow;} #secnav li a.selected {color: purple;} /* End Secondary Navigation------------------------------------------------------------------------------------------------------ */ /* Begin Content - Global-------------------------------------------------------------------------------------------------------- */ #content_wrapper{width: 100%; margin: 0 auto; height: auto; background-image:url(../images/contentbg.jpg); background-repeat:repeat-x; background-position:top; background-color: #ececec; padding-bottom: 100px;} #content_wrapper_header {width: 741px; margin: 0 auto; height: 105px; background-image:url(../images/contenttop.jpg); background-repeat:no-repeat;;} #content_wrapper_page{height: auto; margin: 0 auto; width: 741px; background-image: url(../images/contenttop.jpg); background-position: 0px -105px; background-repeat:no-repeat; padding-bottom: 40px;} /* End Content - Global-------------------------------------------------------------------------------------------------------- */ /*Begin About - Company-------------------------------------------------------------------------------------------------------- */ #companycontent {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px;} #companycontent img {float:right; width: 240px; height: 143; border-width: 1px; border-style:solid; border-color: #CCCCCC; margin-bottom: 10px; margin-left: 10px;} .companyfact{padding-top: 25px; padding-bottom: 25px;} .companyfact li {color: green; font-weight: bold; background-image:url(../images/tick.jpg); background-repeat:no-repeat; background-position: left center; list-style-type: none; list-style-image: none; padding-top: 0px; padding-right: 0px; padding-bottom: 1px; padding-left: 50px; margin-top: 0px; margin-right: 0px; margin-bottom: 30px; margin-left: 60px; line-height: 25px; font-size: 13px;} /*End About - Company ------------------------------------------------------------------------------------------------------ */ /* Begin Customers --------------------------------------------------------------------------------------------------------- */ #customer_content {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px;} #customer_content img {float: right; width: 241px; height: 286px; margin-top: -147px;} #customer_blocks {margin-left: 90px;} #customer_blocks li {list-style: none; display:block; float: left; padding: 10px;} #customer_blocks img {border-style:solid; border-width: 1px; border-color: #CCCCCC; width: 156px; height: 105px;} /* End Customers ------------------------------------------------------------ */ /* Begin Contact ------------------------------------------------------------ */ #map {margin-left: 25px; width: 700px; height: 270px;} #contact_content {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px; width: 410px} #contact_content_right {float: right; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px; width: 199px} label {color: green; font-size: 12px; font-weight: bold;} input {height: 25px} input, textarea {border: solid;border-style:solid; border-width: 1px; background-color: #EBE0FE; border-bottom-color: #999999; border-left-color: #666666; border-top-color: #666666; border-right-color: #999999} submit {color:#FFFF00; border: none;} .btn {height: 35px; width: 109px; border: none; background:url(../images/submit.jpg); background-repeat:no-repeat;} .btn:hover {background: url(../images/submit.jpg) 0px 35px; background-repeat:no-repeat} #map a {color: green; font-size: 10px; font:Arial, Helvetica, sans-serif; text-align:center;} #map iframe {border:solid; border-color:#009900; border-width: 1px;} /* End Contact ------------------------------------------------------------ */ /* Begin contact - vacancies------------------------------------------------------------ */ #vacancies_content {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px;} #vacancies_content a {text-decoration: underline; color: orange; font-weight: normal} #vacancies_content a:visited {color: yellow;} #vacancies_content a:hover {color: yellow; text-decoration:underline;} /* End contact - vacancies ------------------------------------------------------------ */ #footerwrapper {width: 100%; height: 100px; background-color: #333333; border-top-width: 3px; border-top-color: #FFCC00; border-top-style: solid; position:relative;} #footer {margin: 0 auto; height: 100px; width: 700px;} #footernav {color:#CCCCCC; text-decoration:underline; height: auto; font-size:10px; margin-top: 0px;} #footerleft {float: left; width: 500px; height: auto; margin-top: 10px;} #footerright{float: right; width: 200px; height: auto; margin-top: 10px;} #footerleft p {color:#CCCCCC; margin-top: 0px; padding-top: 0px; text-align: left;font-size: 10px; text-decoration: none; padding-bottom: 2px; } #footerright p {color:#FFFFFF; margin-top: 0px; padding-top: 0px; text-align:right;font-size: 10px; text-decoration:none; padding-bottom: 2px;} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>About the Company - Our Customers</title> <link href="../css/master.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="headerwrapper"> <div id="header"> <div id="headerleft"><img src="../images/logo.jpg" alt="logo"/></div> <div id="headerright"><img src="../images/phone.jpg" alt="phone"/></div> <div class="clear"></div> </div><!-- end header --> </div><!-- end header wrapper --> <div id="navwrapper" class="contact"> <ul id="prinav"> <li id="home"><a href="/"></a></li> <li id="about"><a href="/about"></a></li> <li id="services"><a href="/services"></a></li> <li id="contact"><a href="/contact"></a></li> </ul><!-- end the prinav ul list--> </div><!-- end nav wrapper --> <div id="secnav"> <ul> <li><a href="/contact">Contact Us</a></li> <li><a href="/contact/vacancies" class="selected">Vacancies</a></li> </ul> </div><!-- end secnav --> <div id="content_wrapper"> <div id="content_wrapper_header"> <h1>Error</h1> </div><!-- content_wrapper_header --> <div id="content_wrapper_page"> <div id="vacancies_content"> <h2>Error?</h2> <p>Unfortunatly your e-mail has failed. Please try again. This is due to the spam prevention software implemented.</p> <p> </p> <p> </p> <p> </p> </div><!----end vacancy content ---> <div class="clear"></div><!-- dlear --> </div><!-- end content wrapper page --> </div><!--end content wrapper --> </div><!--end container --> <div id="footerwrapper"> <div id="footer"> <div id="footerleft"> <div id="footernav">Site Map</div> <p>Copyright © </p> <p>Registered office: 2NE</p> <p>Company No. 359 548 4584 12</p> </div><!-- end footerleft --> <div id="footerright"><p>This website is a test site</p></div> <div class="clearboth"></div> </div><!--end footer--> </div> <!--end footerwrapper --> </body> </html>

Hello, I'm wondering if someone can be kind enough to at least give me some pointers with regards to creating a php script. I have an xhtml page(s) that's the main contact form in which the php will get the data from, and I have a OK and failure page for after the button is pressed. I need php code to be exclusive to a php page and not mixed with the xhtml. The main css style sheet will style all webpages and the contact form in the xhtml page. I need it to be secure and I'll try and try add recaptcha to it after. I've looked at tecrite and phpmailer code, and seeing it has over 1,000 lines of code it kind of went way over my head. <?php // get posted data into local variables $EmailFrom = Trim(stripslashes($_POST['EmailFrom'])); $EmailTo = "jon@mywebsite.com"; $Subject = "from web site"; $Name = Trim(stripslashes($_POST['Name'])); $Address = Trim(stripslashes($_POST['Address'])); $Telephone = Trim(stripslashes($_POST['Telephone'])); $message = Trim(stripslashes($_POST['message'])); // validation $validationOK=true; if (Trim($EmailFrom)=="") $validationOK=false; if (Trim($message)=="") $validationOK=false; if (!$validationOK) { print "<meta http-equiv=\"refresh\" content=\"0;URL=failure.htm\">"; exit; } // prepare email body text $Body = ""; $Body .= "Name: "; $Body .= $Name; $Body .= "\n"; $Body .= "Address: "; $Body .= $Address; $Body .= "\n"; $Body .= "Telephone: "; $Body .= $Telephone; $Body .= "\n"; $Body .= "message: "; $Body .= $message; $Body .= "\n"; // send email $success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>"); // redirect to success page if ($success){ print "<meta http-equiv=\"refresh\" content=\"0;URL=ok.htm\">"; } else{ print "<meta http-equiv=\"refresh\" content=\"0;URL=failure.htm\">"; } ?>

I'll make those changes soon. Can you help with the other point regarding heights. That's something I've never done with these kinda of layouts.

Thank you for your help. Everything looks better - needs a little tweaking with text, but that will be easy. I do have one more question though to do with CSS and positioning. The footer is obviously intended to be at the bottom, and in the image there is actually a line a couple of pixels thick, but that isn't showing? I wonder why? I Finally, I need to deal with the heights of the page content. Obviously, I'm going to have quite a few pages using the same layout but obviously the amount of text will differ. Some could be quite long, others could be quite short - a couple of paragraphs. I don't want to scroll bar putting in the content itself, so was wondering what height properties or other properties to set in the CSS. I think at moment I've given the relevant sections a pixel height, but I don't think that's suitable due to pages with small content will look huge when they shouldn't.

Thank you for your reply. I have made changes to the code, and the header seems to be working, but not the content. *EDIT* Okay I think the content text is in the correct position, but the big image with the green label is further down than it should be - it should be just below the secondary navigation bar. Not sure how to solve it though.

site: www.jonpaulwild.co.uk Using temp text and images to show you guys the problem I'm having. I have a huge positioning problem with various text not being in the correct position at all. The '24/7hotline' and the email address (aware it's not a link but that's fine at the moment) need to be next to the test logo, actually about 50 pixels to the right of the logo. The email address is intented to be below the '24/7 hotline' text. The white 'about the company' text should be in the middle of the green label thing, and the rest of the paragraps should be, obviously, be a little bit further down the page. How can I describe this. The top bit of the centred content that contains the green label is one big image and should actually be further up the page a little, so the background in that image meets up with the background of the main site. Hope people can understand that, and any help is greatly appreciated. If viewing the code I've used you think I could do with additional tips or hacks, that advice is welcomed. Thanks @charset "utf-8"; /* Start Misc*/ * { margin: 0; padding: 0; } html {font-family: Arial, Helvetica, sans-serif; font-size: 13px;} body {background-color: #333333} p, h1, h2 {line-height: 18px} img {border: 0} /* End Misc */ #wrapper {margin: 0 auto; position: relative; width: 100%;} /* Begin Header */ #headerwrapper {height: 100px; background-color: white;} #headerinner{margin: 0 auto; background-color: none; width:740px; height: 100px} #headerinner img {float: left; width: 400px; height: 82px; margin-top: 12px; margin-left: -45px} #headerinner p.phone {width: 400px;top: 30px; color: green; font-weight: bold; font-size:24px; font-style:italic; position:relative; left: 30px;} #headerinner p.mail {width: 400px; top: 40px; color: purple; font-weight: bold; font-size: 14px; font-style:italic; position:relative; left: 30px} /* End Header */ #prinav {background-color:#006633; background-image:url(Images/prinavbg.jpg); background-repeat:repeat-x; height: 43px;} /* Begin Secondary Navigation */ #secnav {background-image:url(Images/secnavbg.jpg); background-repeat:repeat-x; background-color: #FFCC00; height: 24px;} #secnav ul {margin: 0 auto; width: 600px; text-align: center; height: 24px; background-color: transparant; padding-top: 2px} #secnav li {display:inline; padding-left: 30px; padding-right: 30px; font-size:16px; font-family:Arial, Helvetica, sans-serif;} #secnav li a {text-decoration: none; color: #3f3f3f} #secnav li a:visited {color: #3f3f3f;} #secnav li a:hover {color: blue; text-decoration:underline} #secnav li a:active {color: red;} #secnav li a.selected {color: white} /* End Secondary Navigation */ /* Begin Content */ #contentwrapper{height: 800px; background-image:url(Images/contentbg.jpg); background-repeat:repeat-x; background-position:top; background-color: #ececec; padding-top: 1px} #contentpage{margin: 0 auto; width: 740px; background-image:url(Images/contenttop.jpg); background-position: top; background-color: #ececec; background-repeat: no-repeat; background-attachment:scroll; height: 300px} #contentpage h1 {margin-left: -470px; margin-top:55px; color: white; font-size:17px; font-family:Arial, Helvetica, sans-serif; text-align:center} #contentinner {float:left; width: 700px; margin-left: 19px; margin-top: 40px; background-color: none; height: 400px; text-align:left; overflow:visible} #contentinner h2 {color: #367706; font-size: 15px; font-weight: normal; margin-bottom: 25px} #contentinner p {color: #413d3d; font-size:13px; margin-top: 15px;} /* End Content */ #footer {clear: both; height: 100px; background-image:url(Images/footer.jpg); background-repeat: repeat-x; background-position:top; background-color: #1d1d1d} Xhtml 1.1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>About the Company</title> <link href="master.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"><!-- Beginwrapper --> <div id="headerwrapper"> <div id="headerinner"> <img src="images/logotwo.jpg" alt="logo" /> <p class="phone">24/7 Hotline: 1111 111 1111</p> <p class="mail">E-Mail: enquiries@testsite.co.uk</p> </div><!-- end headerinner --> </div><!-- end headerwrapper --> <div id="prinav"></div> <div id="secnav"> <ul> <li><a href="/who.html">About the Company</a></li> <li><a href="/clients.html">Our Customers</a></li> <li><a href="/questions.html">Your Questions</a></li> </ul> </div> <div id="contentwrapper"> <div id="contentpage"> <h1>About the Company</h1> <div id="contentinner"> <h2> Proin vitae erat odio, vel sollicitudin augue. Suspendisse lectus ligula, fringilla sit amet rhoncus in, imperdiet et neque. Praesent sem nisl, vestibulum a dictum nec, ullamcorper ac libero. In luctus viverra laoreet. Pellentesque et enim non mi iaculis euismod eget in tortor. Maecenas sodales lacus vel lectus placerat a laoreet turpis rhoncus. </h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent venenatis dictum erat at porta. Donec in turpis risus. Suspendisse commodo tempor leo pretium lobortis. Nulla porttitor, mi at euismod placerat, est leo laoreet mi, vel mattis enim elit sit amet eros. Aliquam erat volutpat. Sed eleifend nibh nec elit ullamcorper ornare. Aenean molestie faucibus orci, eget congue libero lobortis eu. Proin vehicula lectus id nunc semper molestie. Aenean dui nisi, feugiat vel blandit id, scelerisque ac ante. Proin adipiscing nibh quis risus scelerisque at venenatis sem porta. Ut sed elit augue. Aliquam viverra purus quis nisl rhoncus ac consectetur ligula auctor. Duis volutpat venenatis iaculis. Vivamus laoreet facilisis semper. Aliquam erat volutpat. Sed a malesuada ipsum. Maecenas consectetur, arcu eget fermentum venenatis, enim eros scelerisque lectus, in accumsan nunc eros at velit. Quisque at arcu ac mi imperdiet consequat eu ut ipsum. Integer porta sollicitudin dui, fermentum pharetra nisi semper id. Nunc placerat eleifend orci convallis fermentum. </p> <p>Quisque et urna nulla. Aliquam facilisis risus eu risus dictum nec sagittis metus suscipit. Proin vitae erat odio, vel sollicitudin augue. Suspendisse lectus ligula, fringilla sit amet rhoncus in, imperdiet et neque. Praesent sem nisl, vestibulum a dictum nec, ullamcorper ac libero. In luctus viverra laoreet. Pellentesque et enim non mi iaculis euismod eget in tortor. Maecenas sodales lacus vel lectus placerat a laoreet turpis rhoncus. Donec a orci elementum libero dapibus mattis. Ut fermentum tellus non est cursus ornare. Integer turpis enim, facilisis ac sodales in, sagittis ac odio. Ut nec vulputate mauris. Etiam at odio ipsum, vitae viverra diam. In hac habitasse platea dictumst. Aliquam blandit, est in imperdiet ultrices, orci urna dictum arcu, sed consectetur sem nibh id tellus. </p> <p>Mauris elementum eleifend dictum. Proin sit amet est nibh. Aenean nunc eros, eleifend at blandit sed, consectetur id nibh. Curabitur ac libero nec ipsum dignissim consequat eget vel neque. Fusce bibendum arcu vitae nulla porttitor eu ullamcorper arcu laoreet. Nam feugiat imperdiet felis, eget sagittis purus sodales id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc eu ligula a erat pretium aliquam. Donec in magna eros, eu tempus ante. Nulla volutpat erat ut tortor rutrum egestas. Cras dolor nibh, rutrum nec tincidunt cursus, dignissim sit amet justo. Phasellus adipiscing euismod enim eu dapibus.</p> <p>Quisque et urna nulla. Aliquam facilisis risus eu risus dictum nec sagittis metus suscipit. Proin vitae erat odio, vel sollicitudin augue. Suspendisse lectus ligula, fringilla sit amet rhoncus in, imperdiet et neque. Praesent sem nisl, vestibulum a dictum nec, ullamcorper ac libero. In luctus viverra laoreet. Pellentesque et enim non mi iaculis euismod eget in tortor. Maecenas sodales lacus vel lectus placerat a laoreet turpis rhoncus. Donec a orci elementum libero dapibus mattis. Ut fermentum tellus non est cursus ornare. Integer turpis enim, facilisis ac sodales in, sagittis ac odio. Ut nec vulputate mauris. Etiam at odio ipsum, vitae viverra diam. In hac habitasse platea dictumst. Aliquam blandit, est in imperdiet ultrices, orci urna dictum arcu, sed consectetur sem nibh id tellus. </p> </div><!--end contentinner --> </div><!--end contentpage --> </div><!--end content wrapper --> <div id="footer"></div><!--end footer --> </div><!--end wrapper --> </body> </html>

That was so simple. Thank you very much.

Site: www.jonpaulwild.co.uk I've just started my site and test it as I go along. At the moment I'm just starting on the secondarynav bar (the orange bar) on my site. However, the text links wont go perfectly centre in a horizontal way. It needs to be perfectly central. I've ready thing about a CSS reset file, but would like to know what anyone here thinks. Of course, there must be a simple solution to this as I spose it's a very basic issue. Thanks for any help. xhtml: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>About Test</title> <link href="master.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="nav"></div> <div id="secnav"> <ul><li><a href="test1.com">Test 1</a></li> <li><a href="test.com">Test 2</a></li> <li><a href="test2.com">Test 2</a></li></ul></div> <div id="content"></div> <div id="footer"></div><!--end footer --> </div> <!--end wrapper --> </body> </html> Css: @charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; } html {font-family: Arial, Helvetica, sans-serif; font-size: 13px;} body {background-color: #333333} p {line-height: 20px} #wrapper {margin: 0 auto; position: relative; width: 100%;} #header {height: 100px; background-color: white;} #nav {background-color:#006633; height: 60px;} #secnav {background-color: #FF6600;} #secnav ul {margin: 0 auto; width: 500px; text-align: center; height: 25px; background-color: black; padding-top: 6px} #secnav li {display:inline; padding-left: 30px} #secnav li a {text-decoration: none; font-weight: bold; color: white} #secnav li a hover {color: red} #content{height: 100px; background-color:white;} #footer {background-color: #1d1d1d; height:100px; border-top-color:#CC9900; border-top-style:solid; border-top:4px}

That spacing works fantastically well, thank you. But... My hyper link colors aren't working as desired. I want one color for the actual normal link, one color, for when user moves mouse over the link and one color to show which page the user is on. I'm also having a problem with the text being underlined. As a normal link the text is underlined but when i mouse over it or click on it the underline vanishes. Now I can't see in the css anything to tell the browser to underline something. Any help is much appreciated, thanks. For the most part some are these are working, but it's really the 'a:active' not working. It seems to be "working" when I actually click the link then when the page loads I expect a color to be different on say the 'Privacy' page/link, but it just goes back to standard looking link. #footer { width: 900px; text-align:center; clear: both; height: 25px; background-image:url(/images/footer.jpg); color: #0000FF; font-weight: bold; } #footer li { display:inline; padding-left: 50px; text-decoration: none; } #footer a:link { color:#00FFAA; text-decoration: none; } #footer a:hover { color: #0000FF; text-decoration: none; } #footer a:active { color: #FF0000; text-decoration: none; } The xhtml: <div id="footer"> <ul> <li><a href="terms.html">Terms</a></li> <li><a href="privacy.html">Privacy</a></li> <li><a href="copyrightnotice.html">Copyright Notice</a></li> </ul> </div>

Okay thank you, but bit confused now. I have used padding on part of my layout site so I know of it, but I'm not sure how to implement it in this current situation. Can you or anyone provide some pointers if I post a part of the CSS and Xhtml code? Many thanks - just finding it frustrating to get this part sorted. #footer { width: 900px; text-align:center; clear: both; height: 25px; background-image:url(/images/footer.jpg); color: #0000FF; font-weight: bold; } #footer li { display:inline; } #footer a:link { color:#fff; text-decoration:none; } #footer a:hover { color:#ff0000; text-decoration:underline; } #footer a:active color: #0000FF text-decoration:none; } <div id="footer"> <ul> <li><a href="terms.html">Terms</a></li> <li><a href="privacy.html">Privacy</a></li> <li><a href="copyrightnotice.html">Copyright Notice</a></li> </ul> </div>

I think I've been able to do it now. I just need to know if it's possible to space out the links? As in have each link around 30px apart or something? Obviously, the 'word-space' property does that, but also seperates words within a hyperlink not between. Thank you!

Thank you I shall try that and try and find right position in my CSS sheet to place that code. When I have hyper links horizontally I am struggling to place them in the right location. I want them to be horizantl and not vertical, which I can do. However, I want bigger gaps between each hyperlink in my menu div. How do I go about doing that? I've tried the 'word-space' css property and that does work, but it also spaces out words in one hyperlink that I don't want to like 'Contact Us' which I want pretty much with just one space.

Hello, once again I'm trying to learn web design and have a few hyperlink questions. I have the hyper links more or less setup in the xhtml of my website and they do work to other pages, however, I would like to code them in CSS so that they have various states pending what the user is doing, but I don't know where to place the code and what code exactly to put it. my website is: www.jonpaulwild.ukfsn.org Obviously it's just a test website and very little has gone into the presentation as I just interested in this moment in time to learn the code and how to do the various things. I basically have three hyper links in the menu bar of my css and I want these links to differ in terms of colors, font etc to other links that may appear elsewhere on my site. { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-color: #D9D5B3; } #container { margin: 0 auto; width: 900px; background-image: url(/images/shadow.jpg); background-repeat: repeat-y; } #header { width: 900px; float: left; height: 100px; background-image:url(/images/headertest.jpg); } #menubar { float: left; width: 900px; height: 25px; background-image:url(/images/menubg.jpg); } #leftcolumn { height: 360px; width: 160px; float: left; padding: 20px; } #rightcolumn { float: right; height: 360px; width: 660px; padding: 20px; } #footer { width: 900px; text-align:center; clear: both; height: 25px; background-image:url(/images/footer.jpg); color: #0000FF; font-weight:bold } h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color:#FFFF00; text-align: center; font-size: 17px } h2 { font-family: Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size: 12px; } Thank you.