June 16, 201016 yr Iv just finished building a webpage and all was perfect but somewhere along the line I have accidentaly changed something within the css i think as I cannot get the footer alligned in the page foot. The footer links are perfectly aligned within the page foot and to the right. The sitemap container is supposed to be on the far left hand side of the foot directly opposite the sitemap links. The main footer should sit underneath about centered as much as possible. The settings were all fine untill something changed so i cannot be that far from getting it. Im still new to raw coding so any help would be highly appreciated. Thanks. gallery.css #wrapper { width:1024px; height:1000px; background-image:url('../images/gallery_theme.jpg'); color:#FFF; margin:auto; } #streamline_affiliate { float:left; margin-top:7px; margin-left:15px; } #w3c { float:left; margin-top:8px; margin-left:10px; } #w3c-css { float:left; margin-top:8px; margin-left:8px; } #header { width:413px; height:20px; margin-top:16px; float:right; text-align:center; font-weight:bolder; } #navigation { margin-top:45px; margin-left:-235px; float:left; } #adsense { height: 251px; width: 301px; float:right; margin-right:230px; margin-top:40px; } #content { height:400px; width:550px; background-color:#FF8000; float:right; clear:right; margin-top:45px; margin-right:84px; } #footer_links { height:29px; width:300px; float:right; clear:both; margin-right:27px; margin-top:57px; text-align:center; font-weight:bolder; } #sitemap_container { height:28px; width:129px; float:left; clear:left; margin-left:25px; text-align:center; font-weight:bolder; } #footer { height:29px; width:978px; margin-left:24px; margin-top:22px; clear:both; font-weight:bolder; text-align:center; } a:link,a:visited,a:active { color:#FFF; } a:hover { color:#0080FF; } gallery.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" /> <title>Gallery | Motorcycle & scooter spare parts & accessories | Andy's Motorcycles - Stoke-on-Trent</title> <meta http-equiv="content-type" content="text/html; charset=us-ascii" /> <link rel="SHORTCUT ICON" href= "http://www.andys-motorcycles.com/favicon.ico" /> <meta name="description" content= "welcome to andys motorcycles gallery page. This is a fun page for customers who want to see motorcycle images and pictures as well as logos that we can help to supply spare parts for. Andys motorcycles realy are the best motorcycle store in stoke-on-trent" /> <meta name="keywords" content= "motorcycle picture, superbike images, buy aprilia parts, scooter spare parts, motorcycle services, pre mot, second hand parts, breakdown recovery, cheapest bike shop, stoke on trent, help with motorcycle / scooter problem" /> <meta name="robots" content="index, follow" /> <meta name="copyright" content="Andy's Motorcycles" /> <meta name="author" content="Lee Mifflin" /> <meta name="email" content="support@andys-motorcycles.com" /> <style type="text/css"> /*<![CDATA[*/ body { background-image:url('images/website_background.png'); background-repeat: repeat; } /*]]>*/ </style> <link rel="stylesheet" href="css/gallery.css" type="text/css" media= "screen" /> <script type="text/javascript"> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12516005-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //]]> </script> </head> <body> <div id="wrapper"> <div id="streamline_affiliate"> <a href= "http://www.streamline.net/?aff=a85dedfc421d038d930877ff40843b2b"><img src="http://www.streamline.net/graphics/powered_by.gif" alt= "Streamline.Net - 100,000 sites hosted, join the revolution! - The home of good value web hosting" border="0" /></a> </div> <div id="w3c"> <a href="http://validator.w3.org/check?uri=referer"><img src= "http://www.w3.org/Icons/valid-xhtml10" alt= "Valid XHTML 1.0 Transitional" height="31" width="88" border= "0" /></a> </div> <div id="header"> Tel: 01782 818097 | Email: <a href= "mailto:support@andys-motorcycles.com" title= "email_andys_motorcycles">support@andys-motorcycles.com</a> </div> <div id="w3c-css"> <a href= "http://jigsaw.w3.org/css-validator/check/referer"><img style= "border:0;width:88px;height:31px" src= "http://jigsaw.w3.org/css-validator/images/vcss-blue" alt= "Valid CSS!" /></a> </div> <div id="navigation"> <script type="text/javascript" src="swfobject.js"> </script> <div id="CC6487736"> Form Object </div><script type="text/javascript"> //<![CDATA[ var so = new SWFObject("nav.swf","", "585", "37", "7,0,0,0", "#ffffff");so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");so.addParam("quality", "high");so.addParam("scale", "noscale");so.addParam("salign", "lt");so.addParam("wmode", "transparent");so.write("CC6487736"); //]]> </script> </div> <div id="adsense"> <script type="text/javascript"> //<![CDATA[ <!-- google_ad_client = "pub-5431799335873325"; /* 336x280, Large Square */ google_ad_slot = "3601907959"; google_ad_width = 336; google_ad_height = 280; //--> //]]> </script> <script type="text/javascript" src= "http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div id="content"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width= "550" height="400" id="FlashID" title= "andys_motorcycles_flash_gallery"> <param name="movie" value="andys_gallery.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <object type="application/x-shockwave-flash" data= "andys_gallery.swf" width="550" height="400"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value= "Scripts/expressInstall.swf" /> <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src= "http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height= "33" /></a></p> </div> </object> <!--<![endif]--> </object> </div> <div id="footer_links"> <a href="index.html" target="_self" title="home_page_link">Home</a> | <a href="about.html" target="_self" title= "about_us_link">About</a> | <a href="contact.html" target="_self" title="contact_us_link">Contact</a> | <a href="store/index.php" target="_self" title="online_store_link">Store</a> | <a href= "gallery.html" target="_self" title="image_gallery_link">Gallery</a> </div> <div id="sitemap_container"> <a href="sitemap/sitemap.html" target="_blank" title= "site_map">Sitemap</a> </div> <div id="footer"> <a href="index.php" title="home" target= "_self">www.andys-motorcycles.com</a> | Andy's Motorcycles. 134 Waterloo Road, Burslem, Stoke-on-Trent. ST6 3HB. United Kingdom. | VAT registered </div> </div> </body> </html>
June 18, 201016 yr Hi there, This is my first time posting but here goes.... I've popped your footer_links, sitemap_container and footer in another div called footerholder, which I've placed outside the wrapped(not sure of your graphics so might need to go back in, you'll have to see). Either way I think I've got what you wanted: gallery.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" /> <title>Gallery | Motorcycle & scooter spare parts & accessories | Andy's Motorcycles - Stoke-on-Trent</title> <meta http-equiv="content-type" content="text/html; charset=us-ascii" /> <link rel="SHORTCUT ICON" href= "http://www.andys-motorcycles.com/favicon.ico" /> <meta name="description" content= "welcome to andys motorcycles gallery page. This is a fun page for customers who want to see motorcycle images and pictures as well as logos that we can help to supply spare parts for. Andys motorcycles realy are the best motorcycle store in stoke-on-trent" /> <meta name="keywords" content= "motorcycle picture, superbike images, buy aprilia parts, scooter spare parts, motorcycle services, pre mot, second hand parts, breakdown recovery, cheapest bike shop, stoke on trent, help with motorcycle / scooter problem" /> <meta name="robots" content="index, follow" /> <meta name="copyright" content="Andy's Motorcycles" /> <meta name="author" content="Lee Mifflin" /> <meta name="email" content="support@andys-motorcycles.com" /> <style type="text/css"> /*<![CDATA[*/ body { background-image:url('images/website_background.png'); background-repeat: repeat; } /*]]>*/ </style> <link rel="stylesheet" href="css/gallery.css" type="text/css" media= "screen" /> <script type="text/javascript"> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12516005-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //]]> </script> </head> <body> <div id="wrapper"> <div id="streamline_affiliate"> <a href= "http://www.streamline.net/?aff=a85dedfc421d038d930877ff40843b2b"><img src="http://www.streamline.net/graphics/powered_by.gif" alt= "Streamline.Net - 100,000 sites hosted, join the revolution! - The home of good value web hosting" border="0" /></a> </div> <div id="w3c"> <a href="http://validator.w3.org/check?uri=referer"><img src= "http://www.w3.org/Icons/valid-xhtml10" alt= "Valid XHTML 1.0 Transitional" height="31" width="88" border= "0" /></a> </div> <div id="header"> Tel: 01782 818097 | Email: <a href= "mailto:support@andys-motorcycles.com" title= "email_andys_motorcycles">support@andys-motorcycles.com</a> </div> <div id="w3c-css"> <a href= "http://jigsaw.w3.org/css-validator/check/referer"><img style= "border:0;width:88px;height:31px" src= "http://jigsaw.w3.org/css-validator/images/vcss-blue" alt= "Valid CSS!" /></a> </div> <div id="navigation"> <script type="text/javascript" src="swfobject.js"> </script> <div id="CC6487736"> Form Object </div><script type="text/javascript"> //<![CDATA[ var so = new SWFObject("nav.swf","", "585", "37", "7,0,0,0", "#ffffff");so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");so.addParam("quality", "high");so.addParam("scale", "noscale");so.addParam("salign", "lt");so.addParam("wmode", "transparent");so.write("CC6487736"); //]]> </script> </div> <div id="adsense"> <script type="text/javascript"> //<![CDATA[ <!-- google_ad_client = "pub-5431799335873325"; /* 336x280, Large Square */ google_ad_slot = "3601907959"; google_ad_width = 336; google_ad_height = 280; //--> //]]> </script> <script type="text/javascript" src= "http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div id="content"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width= "550" height="400" id="FlashID" title= "andys_motorcycles_flash_gallery"> <param name="movie" value="andys_gallery.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <object type="application/x-shockwave-flash" data= "andys_gallery.swf" width="550" height="400"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value= "Scripts/expressInstall.swf" /> <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src= "http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height= "33" /></a></p> </div> </object> <!--<![endif]--> </object> </div> </div> <div id="footerholder"> <div id="footer_links"> <a href="index.html" target="_self" title="home_page_link">Home</a> | <a href="about.html" target="_self" title= "about_us_link">About</a> | <a href="contact.html" target="_self" title="contact_us_link">Contact</a> | <a href="store/index.php" target="_self" title="online_store_link">Store</a> | <a href= "gallery.html" target="_self" title="image_gallery_link">Gallery</a> </div> <div id="sitemap_container"> <a href="sitemap/sitemap.html" target="_blank" title= "site_map">Sitemap</a> </div> <div id="footer"> <a href="index.php" title="home" target= "_self">www.andys-motorcycles.com</a> | Andy's Motorcycles. 134 Waterloo Road, Burslem, Stoke-on-Trent. ST6 3HB. United Kingdom. | VAT registered </div> </div> </body> </html> gallery.css #wrapper { width:1024px; height:1000px; background-image:url('../images/gallery_theme.jpg'); color:#FFF; margin:auto; } #streamline_affiliate { float:left; margin-top:7px; margin-left:15px; } #w3c { float:left; margin-top:8px; margin-left:10px; } #w3c-css { float:left; margin-top:8px; margin-left:8px; } #header { width:413px; height:20px; margin-top:16px; float:right; text-align:center; font-weight:bolder; } #navigation { margin-top:45px; margin-left:-235px; float:left; } #adsense { height: 251px; width: 301px; float:right; margin-right:230px; margin-top:40px; } #content { height:400px; width:550px; background-color:#FF8000; float:right; clear:right; margin-top:45px; margin-right:84px; } #footer_links { height:29px; width:300px; float:right; clear:both; text-align:center; font-weight:bolder; } #sitemap_container { height:28px; width:129px; float:left; clear:left; text-align:center; font-weight:bold; } #footer { height:29px; width:978px; margin-left:auto; margin-right:auto; margin-top:22px; clear:both; font-weight:bolder; text-align:center; } a:link,a:visited,a:active { color:#FFF; } a:hover { color:#0080FF; } #footerholder { width:978px; margin-left:auto; margin-right:auto; } hope this is what you wanted, let me know if i'm way off! Ciao! Digital Parsnip!
June 18, 201016 yr ok, I tried to load up your pages on my notepad and view them, but it is late, and i can't follow what you are saying, exactly. My trick with getting the footer to always stay separate and at the bottom of the page is to put this inbetween the main content and the footer: <div style="clear:both"></div> And then you can margin it to the center of your page no matter what size the browser by adding: margin:0 auto; into your footer css. I could be totally wrong here! Sorry, I'm off to bed and I'll check up here tomorrow to see if you came right with this.
June 18, 201016 yr Hi Again, Yeah you're right with both. The only thing you missed in your original code was the auto value for your margin-right. I've attached some more code showing the foot_links and sitemap divs inside the wrapper, but this time their margins have been adjusted to bring them inline with the footer. gallery.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" /> <title>Gallery | Motorcycle & scooter spare parts & accessories | Andy's Motorcycles - Stoke-on-Trent</title> <meta http-equiv="content-type" content="text/html; charset=us-ascii" /> <link rel="SHORTCUT ICON" href= "http://www.andys-motorcycles.com/favicon.ico" /> <meta name="description" content= "welcome to andys motorcycles gallery page. This is a fun page for customers who want to see motorcycle images and pictures as well as logos that we can help to supply spare parts for. Andys motorcycles realy are the best motorcycle store in stoke-on-trent" /> <meta name="keywords" content= "motorcycle picture, superbike images, buy aprilia parts, scooter spare parts, motorcycle services, pre mot, second hand parts, breakdown recovery, cheapest bike shop, stoke on trent, help with motorcycle / scooter problem" /> <meta name="robots" content="index, follow" /> <meta name="copyright" content="Andy's Motorcycles" /> <meta name="author" content="Lee Mifflin" /> <meta name="email" content="support@andys-motorcycles.com" /> <style type="text/css"> /*<![CDATA[*/ body { background-image:url('images/website_background.png'); background-repeat: repeat; } /*]]>*/ </style> <link rel="stylesheet" href="css/gallery.css" type="text/css" media= "screen" /> <script type="text/javascript"> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12516005-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //]]> </script> </head> <body> <div id="wrapper"> <div id="streamline_affiliate"> <a href= "http://www.streamline.net/?aff=a85dedfc421d038d930877ff40843b2b"><img src="http://www.streamline.net/graphics/powered_by.gif" alt= "Streamline.Net - 100,000 sites hosted, join the revolution! - The home of good value web hosting" border="0" /></a> </div> <div id="w3c"> <a href="http://validator.w3.org/check?uri=referer"><img src= "http://www.w3.org/Icons/valid-xhtml10" alt= "Valid XHTML 1.0 Transitional" height="31" width="88" border= "0" /></a> </div> <div id="header"> Tel: 01782 818097 | Email: <a href= "mailto:support@andys-motorcycles.com" title= "email_andys_motorcycles">support@andys-motorcycles.com</a> </div> <div id="w3c-css"> <a href= "http://jigsaw.w3.org/css-validator/check/referer"><img style= "border:0;width:88px;height:31px" src= "http://jigsaw.w3.org/css-validator/images/vcss-blue" alt= "Valid CSS!" /></a> </div> <div id="navigation"> <script type="text/javascript" src="swfobject.js"> </script> <div id="CC6487736"> Form Object </div><script type="text/javascript"> //<![CDATA[ var so = new SWFObject("nav.swf","", "585", "37", "7,0,0,0", "#ffffff");so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");so.addParam("quality", "high");so.addParam("scale", "noscale");so.addParam("salign", "lt");so.addParam("wmode", "transparent");so.write("CC6487736"); //]]> </script> </div> <div id="adsense"> <script type="text/javascript"> //<![CDATA[ <!-- google_ad_client = "pub-5431799335873325"; /* 336x280, Large Square */ google_ad_slot = "3601907959"; google_ad_width = 336; google_ad_height = 280; //--> //]]> </script> <script type="text/javascript" src= "http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div id="content"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width= "550" height="400" id="FlashID" title= "andys_motorcycles_flash_gallery"> <param name="movie" value="andys_gallery.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <object type="application/x-shockwave-flash" data= "andys_gallery.swf" width="550" height="400"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value= "Scripts/expressInstall.swf" /> <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src= "http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height= "33" /></a></p> </div> </object> <!--<![endif]--> </object> </div> <div id="footer_links"> <a href="index.html" target="_self" title="home_page_link">Home</a> | <a href="about.html" target="_self" title= "about_us_link">About</a> | <a href="contact.html" target="_self" title="contact_us_link">Contact</a> | <a href="store/index.php" target="_self" title="online_store_link">Store</a> | <a href= "gallery.html" target="_self" title="image_gallery_link">Gallery</a> </div> <div id="sitemap_container"> <a href="sitemap/sitemap.html" target="_blank" title= "site_map">Sitemap</a> </div> <div id="footer"> <a href="index.php" title="home" target= "_self">www.andys-motorcycles.com</a> | Andy's Motorcycles. 134 Waterloo Road, Burslem, Stoke-on-Trent. ST6 3HB. United Kingdom. | VAT registered </div> </div> </body> </html> gallery.css #wrapper { width:1024px; height:auto; background-image:url('../images/gallery_theme.jpg'); color:#FFF; margin:auto; } #streamline_affiliate { float:left; margin-top:7px; margin-left:15px; } #w3c { float:left; margin-top:8px; margin-left:10px; } #w3c-css { float:left; margin-top:8px; margin-left:8px; } #header { width:413px; height:20px; margin-top:16px; float:right; text-align:center; font-weight:bolder; } #navigation { margin-top:45px; margin-left:-235px; float:left; } #adsense { height: 251px; width: 301px; float:right; margin-right:230px; margin-top:40px; } #content { height:400px; width:550px; background-color:#FF8000; float:right; clear:right; margin-top:45px; margin-right:84px; } #footer_links { height:29px; width:300px; float:right; clear:both; text-align:center; font-weight:bolder; margin-right:23px; } #sitemap_container { height:29px; width:129px; float:left; clear:left; text-align:center; font-weight:bold; margin-left:23px; } #footer { height:29px; width:978px; margin-left:auto; margin-right:auto; margin-top:22px; clear:both; font-weight:bolder; text-align:center; } a:link,a:visited,a:active { color:#FFF; } a:hover { color:#0080FF; } I've expanded your margin idea to make it simpler to see what I've done, but you can replace: margin-left:auto; margin-right:auto; margin-top:0; margin-bottom:0; with: margin:0 auto; If fact it's considered much better practice. Cheers, Digital Parsnip
Create an account or sign in to comment