July 30, 200818 yr At the moment I am undergoing a project for my father in law; renovating the vintage car restoration he made (he is now 64 so a good attempt on his part!) I am teaching myself web design and thought this would be a good challenge as there are a lot of improvements that can be made: Ashridge Automobiles original site Here is my current design: What I have done so far! There are a few things I would like help in sorting: the footer on the index page doesn't appear in a straight line at the bottom left hand side of the page like the rest of the site The gallery for each car model works correctly on IE (appears horizontally) and Safari (appears vertically) but goes completly wrong in Mozilla. How can I make this work consistently for all? See the CSS code - #photostrip In IE the site appears magnified and the navigation bar gets along to the next line. How can I make this the size of the other browsers and make the navigation bar fixed dead centre? As of yet my contact form doesn't "submit" will it depend on the server accepting php script? I will work on this after the other problems though. The html for the main index page. <!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"> <head> <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ashridge Automobiles | Bedfordshire</title> <link href="ashridge.css" rel="stylesheet" type="text/css" /> <style type="text/css"> /*<![CDATA[*/ <!-- .style3 {font-size: 14px} .style7 {font-size: 12px} .style8 {color: #000000} --> /*]]>*/ </style> <meta name="keywords" content="vintage cars, restoration, jaguars, british sport cars, PVT, Pst Vintage Thoroughbred, Ashrdge Automobiles, Automobiles, Leighton Buzzard, Befordshire, Barn finds" /> <style type="text/css"> /*<![CDATA[*/ p.c3 {visibility:visible;} object.c2 {width:400px;height:262px} p.c1 {text-align: left} /*]]>*/ </style> </head> <body> <div id="container"> <div id="header"><img src="images/ashridgebanner.jpg" alt="Ashridge Automobiles Ltd" /></div> <div id="navigation"> <ul> <li><a href="ashridgeindex.html" target="_parent">Home</a></li> <li><a href="britishsports.html" target="_parent">British Sport & Saloon Cars</a></li> <li><a href="vintagepvt.html">Vintage & PVT</a></li> <li>Projects & Barnfinds</li> <li>Riley Spares & Automobiles</li> <li>Restoration Services</li> <li>Wanted</li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> <div id="content"> <p class="c1"><img src="images/welcometitle.jpg" alt="Welcome" /></p> <p class="c1">Ashridge Automobiles is based in the South of Bedfordshire. We offer cars at competitive prices owing to low overheads and funding by a group of investors. Our investors are all like-minded classic car enthusiasts.</p> <p class="c1">We specialise in the purchase, sale and restoration of vintage, PVT (post vintage thoroughbred) and classic cars.</p> <p class="c1">Ashridge Automobiles is happy to sell selective vehicles on commission and actively seeks to buy cars similar to those that appear on this website.</p> <p class="c1">Please look at our Wanted list for cars and parts that our sought at present and for which immediate funds are available.</p> </div> <div id="sale"> <p><img src="images/carsforsale.jpg" alt="Cars for Sale" /></p> <table width="510" border="1" cellpadding="1" summary="Briish Sport cars and Saloon cars that Ashridge Autmobiles currently have on sale."> <tr> <th scope="col"><a href="jagetype.html"><img src="images/sale/jaguaretypethumbnail.jpg" alt=" Jaguar E-Type Series 3 Roadster Automatic." width="170" height="128" border="0" align="left" /></a></th> <th scope="col"><a href="jaguarMK2.html"><img src="images/sale/jaguarmk2thumbnail.jpg" alt=" Jaguar MK2 2.4 litre" width="170" height="128" border="0" align="top" /></a></th> <th scope="col"><a href="vw.html"><img src="images/sale/vwthumbnail.jpg" alt=" VW T25 Transporter" width="170" height="128" border="0" /></a></th> </tr> <tr> <td><span class="style7">Jaguar eType S3</span> <span class="style7">Roadster</span></td> <td><span class="style7">Jaguar MK2 2.4 Litre 19</span></td> <td><span class="style7">VW T25 Transporter</span></td> </tr> </table> <p> </p> </div> <div id="salevintage"> <p><img src="images/VintageandPVT.jpg" alt="Vintage & PVT Cars for Sale" /></p> <table width="526" border="1" cellpadding="1"> <tr> <td width="255"><a href="delage.html"><img src="images/sale/vintage/delagestraightthumbnail.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **" width="255" height="192" border="0" /></a></td> <td width="255"><a href="frazernash.html"><img src="images/sale/vintage/fnbmwthumbnail.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **" width="255" height="191" border="0" /></a></td> </tr> <tr> <td><span class="style3">Delage D8-15S 8 Cylinder Tourer 1934.</span></td> <td><span class="style3">Frazer Nash/BMW 319</span></td> </tr> <tr> <td><a href="rileysv.html"><img src="images/sale/vintage/rileysvtthumbnail.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **" width="255" height="181" border="0" /></a></td> <td><a href="brooklands.html"><img src="images/sale/vintage/rileythumbnail" alt="** PLEASE DESCRIBE THIS IMAGE **" width="255" height="191" border="0" /></a></td> </tr> <tr> <td><span class="style3">Riley Sidevalve Tourer 1924</span></td> <td><span class="style3">Riley Brooklands Style 6 Cylinder</span></td> </tr> </table> </div> <div id="contact"><img src="images/contactus.jpg" alt="Contact Us" /> <p>If you would like to view our cars then don't hesitate to get in touch!</p> <p>Please ring <strong>01525 377977</strong> to book an appointment.</p> <p>To send an email please visit the Contact Us section.</p> </div> <div id="content"> <p class="c3"><object type="application/x-shockwave-flash" height="262" width="400" class="c2"><param name="movie" value="http://widget-58.slide.com/widgets/slideticker.swf" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="salign" value="l" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="cy=ms&il=1&channel=2594073385369566808&site=widget-58.slide.com" /></object></p> </div> <div id="footer"> <ul> <li>Ashridge Automobiles 2008</li> <li><a href="ashridgeindex.html" target="_parent">Home</a></li> <li><a href="britishsports.html" target="_parent">British Sport & Saloon Cars</a></li> <li>Vintage & PVT</li> <li>Projects & Barnfinds</li> <li>Riley Spares & Automobiles</li> <li>Restoration Services</li> <li>Wanted</li> <li>Contact Us</li> </ul> </div> </div> </body> </html> Here is the CSS: /* CSS Document */ body { font-family:Arial, Helvetica, sans-serif; } #container { width:1000px; margin:auto; background-color:#FFFFFF; } #content { width:400px; margin-left:5px; margin-top:10px; border:thin; border-color:#000000; border-style:solid; font-size:14px; float:left; padding:10px; } #content1 { width:1000px; margin-left:5px; border:thin; border-color:#000000; border-style:solid; font-size:14px; padding:10px; } #contact { width:500px; border:thin; border-color:#000000; border-style:solid; font-size:14px; float:right; padding:10px; } #main { width:1000px; padding:10px; } #sale { float:right; width:530px; margin-left:5px; margin-right:5px; margin-top:10px; border:thin; border-color:#000000; border-style:solid; padding:10px; } #salevintage { float:right; width:530px; margin-left:5px; margin-right:5px; margin-top:10px; border:thin; border-color:#000000; border-style:solid; padding:10px; } #contact { width:400px; margin-left:5px; border:thin; border-color:#000000; border-style:solid; font-size:14px; float:left; padding:10px; margin-top:10px; } #navigation li { display:inline; font-size:13px; text-align:right; padding: 0 5px; font-weight:bold; } #logo { margin:10px; } #footer li { font-size:10px; list-style: none; display:inline; margin-left:10px; } #photo_strip {width:630px; margin-left:15px;} #container1 {margin:0; padding:0; height:430px; overflow:auto; color:#222; background:#fff;} #container1 ul {margin:0; padding:0; list-style:none; white-space:nowrap; display:table-row;} #container1 ul li {display:table-cell; padding:0 15px; background:#fff; border-bottom:1px solid #; vertical-align:top;} #container1 ul li img {border:1px solid #555; margin: 30px 0 10px 0;} #photo_strip h1 {text-align:center; padding:0; margin:0; width:630px; height:38px; line-height:35px; color:#555; font-weight:normal; font-size:20px; border-bottom:1px solid #;} #container1 p {margin:0; padding:5px 0; font-size:11px;} #container1 { width:630px; scrollbar-arrow-color: #eee; scrollbar-3dlight-color: #; scrollbar-highlight-color: #eee; scrollbar-face-color: #; scrollbar-shadow-color: #eee; scrollbar-darkshadow-color: #; scrollbar-track-color: #fff; } #container1 ul li {display:inline; zoom:1; height:390px;} * html #container1 {height:470px; he\ight:430px;} /*CONTACT FORM*/ #contactform { margin: 0; width: 500px; background: #CCCCCC; padding: 5px; } #contactform * { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } #contactform ol { margin: 0; padding: 0; list-style: none; } #contactform li { margin: 0 0 5px 0; padding: 10px; background: #FBFAEC; } #contactform li.buttons { margin: 0; overflow: hidden; } #contactform label { margin:0px; width: 190px; display: block; float: left; padding: 5px 10px 2px 0; } #contactform input.text { width: 274px; border: 1px solid #D4D4D4; padding: 2px; margin: 0; } #contactform textarea { width: 274px; border: 1px solid #D4D4D4; padding: 0px; height: 80px; background: #FDFDF7; } #contactform li.buttons input { padding: 4px; float: right; margin: 0 0 0 5px; width: auto; } a:links { color:#000000; text-decoration:none; } a:hover { color: #0000CC; text-decoration:none; } a:visited { color:#000000; } If there are any improvements that could be done then feel free to point them out :-) (but don't be too harsh as this is only my 2nd attempt at a website)
July 30, 200818 yr If you're a night owl like me and want some tips now....(and I've only flashed over your site) Make your #container a bit narrower, no need to see a scroll bar that's no use (whilst there add a 0 before the auto). I've just looked at this and everything has a width pushing all the content messy (see the bit below about structure). Footer: This is because the content before it is floated left. Add a clearing element to the footer or re-design the flow of the sites structure: Overall there's an unstructured layout to the site with no clear div separation to (for example) headers, main content and footer. Everything is sort of dumped in one container when maybe one main #siteContainer one #headerContainer one #contentContainer and one #footerContainer MAY be a better way of doing it. With the contentContainer you can then concentrate on the sites content, less is more not everything here has to be a div. TBH Think about layout and even drawer it on paper before you get to writing code. One main container with a few other main containers where main chunks of layout/code will go. This makes things so much easier rather than fire-fighting all the little problems.
July 30, 200818 yr Some of your containers are styled twice with different widths etc... If you want to make another go of it, and want a suggestion, may I suggest something such as the following; Break the site into 3 main parts (4 with the siteContainer) Site container - responsible for the overall width and positioning of the site. Some kind of header container - logo, contact details and possibly main navigation. Main content container - all the site contents, column layouts etc can be done here. Footer container - nuff said. Remove a load of divs and style up other selectors. An example of this would be your navigation. If already in a container it's often possible to just style a selector to get the desired effects. Your navigation could become (for example); <ul id="navigationMain"> then in your css style up the selectors (and related, such as <li>) Also this will be much more helpful the more you code, arrange your .css more logically. Personally I add a contents to the top of the style sheet so I know where everything is and what it does. Add lots of comments to your .css it may be understandable what it does now but in a few years (or if someone else looks at your code) it might not be so clear. Arrange your .css top to bottom to flow logically, have containers that display at the top of the page first and footers last etc. Another tip you might find useful is when styling selectors for specific containers indent the code so you can see them when scrolling, for example; #siteHeader { color: #000; } #siteHeader li { font-size: 13px; } There seems to be a lot of conflicting code going on and a general lack of flow and organisation to the code. Re write it, every time you do it will get better. Remember, be logical and less is more. There's my 2p worth, not sure on the flash didn't look and don't know anything about it. Site will look good though. OH and your form will need to be processed; check this out http://www.jemjabella.co.uk/scripts/free-php-mail-form
July 31, 200818 yr Author Thanks for the replies, This is going to sound simple but because I've only taught myself with a text book its only taught me to divide up a page with divs. How would I lay it out if I put more containers in? Would you be able to give me an example of what the code would look like? Or if there are any good online tutorials explaining it?
July 31, 200818 yr I think you can get away with less containers, you don't have to only style divs style other html elements (such as the navigation <ul> and <li>. Think of divs as the main containers, the smallest you can divide the site up by. A poor analogy might be to imagine the site as a chest of drawers (one big container), broken into several smaller containers (the drawers). These drawers have different things in them such as socks, underpants etc (think of the socks and underpants as headings or images or any html element). The socks and underpants can still be laid out (styled) perfectly well without having to give them each their own drawer within the bigger drawer. Man that sounds lame, I hope you understood what I meant. I'd try to have as few div (containers) as possible, here's a logical layout you could use. html: <div id="siteContainer"> <div id="headerContainer"> (main logo and navigation in here) </div><!-- headerContainer ENDS --> <div id="contentContainer"> <div id="leftCol"> (content) </div><-- leftCol ENDS --> <div id="rightCol"> (content) </div><-- rightCol ENDS --> </div><!-- contentContainer ENDS --> <div id="footerContainer"> (content) </div><!-- footerContainer ENDS --> </div><!-- siteContainer ENDS --> Remember to use all html elements for styling, you don't need to use divs.
August 1, 200818 yr Author I do understand what you mean but I did try to make less divs as possible but got stuck when trying to make different parts of the content on the front page. However the Director of the company has given me an idea of what he wants now (kind of) so I might re work it. For now though as its frustrating me how can I make the footer line up correctly at the bottom?
August 1, 200818 yr Author That didn't help for some reason I took out the flash slide show as I don't think I will keep it there for now and then it completely messed up the footer, now its not even in a horizontal line. I'm if I am placing the footer in the correct place? <!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"> <head> <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ashridge Automobiles | Bedfordshire</title> <link href="ashridge.css" rel="stylesheet" type="text/css" /> <style type="text/css"> /*<![CDATA[*/ <!-- .style3 {font-size: 14px} .style7 {font-size: 12px} .style8 {color: #000000} --> /*]]>*/ </style> <meta name="keywords" content="vintage cars, restoration, jaguars, british sport cars, PVT, Pst Vintage Thoroughbred, Ashrdge Automobiles, Automobiles, Leighton Buzzard, Befordshire, Barn finds" /> <style type="text/css"> /*<![CDATA[*/ p.c3 {visibility:visible;} object.c2 {width:400px;height:262px} p.c1 {text-align: left} /*]]>*/ </style> </head> <body> <div id="container"> <div id="header"><img src="images/ashridgebanner.jpg" alt="Ashridge Automobiles Ltd" /></div> <div id="navigation"> <ul> <li><a href="ashridgeindex.html" target="_parent">Home</a></li> <li><a href="britishsports.html" target="_parent">British Sport & Saloon Cars</a></li> <li><a href="vintagepvt.html">Vintage & PVT</a></li> <li>Projects & Barnfinds</li> <li>Riley Spares & Automobiles</li> <li>Restoration Services</li> <li>Wanted</li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> <div id="content"> <p class="c1"><img src="images/welcometitle.jpg" alt="Welcome" /></p> <p class="c1">Ashridge Automobiles is based in the South of Bedfordshire. We offer cars at competitive prices owing to low overheads and funding by a group of investors. Our investors are all like-minded classic car enthusiasts.</p> <p class="c1">We specialise in the purchase, sale and restoration of vintage, PVT (post vintage thoroughbred) and classic cars.</p> <p class="c1">Ashridge Automobiles is happy to sell selective vehicles on commission and actively seeks to buy cars similar to those that appear on this website.</p> <p class="c1">Please look at our Wanted list for cars and parts that our sought at present and for which immediate funds are available.</p> </div> <div id="sale"> <p><img src="images/carsforsale.jpg" alt="Cars for Sale" /></p> <table width="510" border="1" cellpadding="1" summary="Briish Sport cars and Saloon cars that Ashridge Autmobiles currently have on sale."> <tr> <th scope="col"><a href="jagetype.html"><img src="images/sale/jaguaretypethumbnail.jpg" alt=" Jaguar E-Type Series 3 Roadster Automatic." width="170" height="128" border="0" align="left" /></a></th> <th scope="col"><a href="jaguarMK2.html"><img src="images/sale/jaguarmk2thumbnail.jpg" alt=" Jaguar MK2 2.4 litre" width="170" height="128" border="0" align="top" /></a></th> <th scope="col"><a href="vw.html"><img src="images/sale/vwthumbnail.jpg" alt=" VW T25 Transporter" width="170" height="128" border="0" /></a></th> </tr> <tr> <td><span class="style7">Jaguar eType S3</span> <span class="style7">Roadster</span></td> <td><span class="style7">Jaguar MK2 2.4 Litre 19</span></td> <td><span class="style7">VW T25 Transporter</span></td> </tr> </table> <p> </p> </div> <div id="salevintage"> <p><img src="images/VintageandPVT.jpg" alt="Vintage & PVT Cars for Sale" /></p> <table width="526" border="1" cellpadding="1"> <tr> <td width="255"><a href="delage.html"><img src="images/sale/vintage/delagestraightthumbnail.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **" width="255" height="192" border="0" /></a></td> <td width="255"><a href="frazernash.html"><img src="images/sale/vintage/fnbmwthumbnail.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **" width="255" height="191" border="0" /></a></td> </tr> <tr> <td><span class="style3">Delage D8-15S 8 Cylinder Tourer 1934.</span></td> <td><span class="style3">Frazer Nash/BMW 319</span></td> </tr> <tr> <td><a href="rileysv.html"><img src="images/sale/vintage/rileysvtthumbnail.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **" width="255" height="181" border="0" /></a></td> <td><a href="brooklands.html"><img src="images/sale/vintage/rileythumbnail" alt="** PLEASE DESCRIBE THIS IMAGE **" width="255" height="191" border="0" /></a></td> </tr> <tr> <td><span class="style3">Riley Sidevalve Tourer 1924</span></td> <td><span class="style3">Riley Brooklands Style 6 Cylinder</span></td> </tr> </table> </div> <div id="contact"><img src="images/contactus.jpg" alt="Contact Us" /> <p>If you would like to view our cars then don't hesitate to get in touch!</p> <p>Please ring <strong>01525 377977</strong> to book an appointment.</p> <p>To send an email please visit the Contact Us section.</p> </div> <div id="footer"> <ul> <li>Ashridge Automobiles 2008</li> <li><a href="ashridgeindex.html" target="_parent">Home</a></li> <li><a href="britishsports.html" target="_parent">British Sport & Saloon Cars</a></li> <li>Vintage & PVT</li> <li>Projects & Barnfinds</li> <li>Riley Spares & Automobiles</li> <li>Restoration Services</li> <li>Wanted</li> <li>Contact Us</li> <p> </p> </ul> </div> </div> </body> </html> /* CSS Document */ body { font-family:Arial, Helvetica, sans-serif; } #container { width:1000px; margin:0 auto; background-color:#FFFFFF; } #content { width:400px; margin-left:5px; margin-top:10px; border:thin; border-color:#000000; border-style:solid; font-size:14px; float:left; padding:10px; } #content1 { width:1000px; margin-left:5px; border:thin; border-color:#000000; border-style:solid; font-size:14px; padding:10px; } #contact { width:500px; border:thin; border-color:#000000; border-style:solid; font-size:14px; float:right; padding:10px; } #main { width:1000px; padding:10px; } #sale { float:right; width:530px; margin-left:5px; margin-right:5px; margin-top:10px; border:thin; border-color:#000000; border-style:solid; padding:10px; } #salevintage { float:right; width:530px; margin-left:5px; margin-right:5px; margin-top:10px; border:thin; border-color:#000000; border-style:solid; padding:10px; } #contact { width:400px; margin-left:5px; border:thin; border-color:#000000; border-style:solid; font-size:14px; float:left; padding:10px; margin-top:10px; } #navigation li { display:inline; font-size:13px; text-align:right; padding: 0 5px; font-weight:bold; width: 1000px; } #logo { margin:10px; } #footer li { font-size:10px; list-style: none; display:inline; margin-left:10px; clear:both; } #photo_strip {width:900px; margin-left:15px;} #container1 {margin:0; padding:0; height:430px; overflow:auto; color:#222; background:#fff;} #container1 ul {margin:0; padding:0; list-style:none; white-space:nowrap; display:table-row;} #container1 ul li {display:table-cell; padding:0 15px; background:#fff; border-bottom:1px solid #; vertical-align:top;} #container1 ul li img {border:1px solid #555; margin: 30px 0 10px 0;} #photo_strip h1 {text-align:center; padding:0; margin:0; width:630px; height:38px; line-height:35px; color:#555; font-weight:normal; font-size:20px; border-bottom:1px solid #;} #container1 p {margin:0; padding:5px 0; font-size:11px;} #container1 { width:630px; scrollbar-arrow-color: #eee; scrollbar-3dlight-color: #; scrollbar-highlight-color: #eee; scrollbar-face-color: #; scrollbar-shadow-color: #eee; scrollbar-darkshadow-color: #; scrollbar-track-color: #fff; } #container1 ul li {display:inline; zoom:1; height:390px;} * html #container1 {height:470px; he\ight:430px;} /*CONTACT FORM*/ #contactform { margin: 0; width: 500px; background: #CCCCCC; padding: 5px; } #contactform * { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } #contactform ol { margin: 0; padding: 0; list-style: none; } #contactform li { margin: 0 0 5px 0; padding: 10px; background: #FBFAEC; } #contactform li.buttons { margin: 0; overflow: hidden; } #contactform label { margin:0px; width: 190px; display: block; float: left; padding: 5px 10px 2px 0; } #contactform input.text { width: 274px; border: 1px solid #D4D4D4; padding: 2px; margin: 0; } #contactform textarea { width: 274px; border: 1px solid #D4D4D4; padding: 0px; height: 80px; background: #FDFDF7; } #contactform li.buttons input { padding: 4px; float: right; margin: 0 0 0 5px; width: auto; } a:links { color:#000000; text-decoration:none; } a:hover { color: #0000CC; text-decoration:none; } a:visited { color:#000000; }
August 1, 200818 yr Author That didn't help for some reason I took out the flash slide show as I don't think I will keep it there for now and then it completely messed up the footer, now its not even in a horizontal line. I'm not sure if I am placing the footer in the correct place? <!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"> <head> <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ashridge Automobiles | Bedfordshire</title> <link href="ashridge.css" rel="stylesheet" type="text/css" /> <style type="text/css"> /*<![CDATA[*/ <!-- .style3 {font-size: 14px} .style7 {font-size: 12px} .style8 {color: #000000} --> /*]]>*/ </style> <meta name="keywords" content="vintage cars, restoration, jaguars, british sport cars, PVT, Pst Vintage Thoroughbred, Ashrdge Automobiles, Automobiles, Leighton Buzzard, Befordshire, Barn finds" /> <style type="text/css"> /*<![CDATA[*/ p.c3 {visibility:visible;} object.c2 {width:400px;height:262px} p.c1 {text-align: left} /*]]>*/ </style> </head> <body> <div id="container"> <div id="header"><img src="images/ashridgebanner.jpg" alt="Ashridge Automobiles Ltd" /></div> <div id="navigation"> <ul> <li><a href="ashridgeindex.html" target="_parent">Home</a></li> <li><a href="britishsports.html" target="_parent">British Sport & Saloon Cars</a></li> <li><a href="vintagepvt.html">Vintage & PVT</a></li> <li>Projects & Barnfinds</li> <li>Riley Spares & Automobiles</li> <li>Restoration Services</li> <li>Wanted</li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> <div id="content"> <p class="c1"><img src="images/welcometitle.jpg" alt="Welcome" /></p> <p class="c1">Ashridge Automobiles is based in the South of Bedfordshire. We offer cars at competitive prices owing to low overheads and funding by a group of investors. Our investors are all like-minded classic car enthusiasts.</p> <p class="c1">We specialise in the purchase, sale and restoration of vintage, PVT (post vintage thoroughbred) and classic cars.</p> <p class="c1">Ashridge Automobiles is happy to sell selective vehicles on commission and actively seeks to buy cars similar to those that appear on this website.</p> <p class="c1">Please look at our Wanted list for cars and parts that our sought at present and for which immediate funds are available.</p> </div> <div id="sale"> <p><img src="images/carsforsale.jpg" alt="Cars for Sale" /></p> <table width="510" border="1" cellpadding="1" summary="Briish Sport cars and Saloon cars that Ashridge Autmobiles currently have on sale."> <tr> <th scope="col"><a href="jagetype.html"><img src="images/sale/jaguaretypethumbnail.jpg" alt=" Jaguar E-Type Series 3 Roadster Automatic." width="170" height="128" border="0" align="left" /></a></th> <th scope="col"><a href="jaguarMK2.html"><img src="images/sale/jaguarmk2thumbnail.jpg" alt=" Jaguar MK2 2.4 litre" width="170" height="128" border="0" align="top" /></a></th> <th scope="col"><a href="vw.html"><img src="images/sale/vwthumbnail.jpg" alt=" VW T25 Transporter" width="170" height="128" border="0" /></a></th> </tr> <tr> <td><span class="style7">Jaguar eType S3</span> <span class="style7">Roadster</span></td> <td><span class="style7">Jaguar MK2 2.4 Litre 19</span></td> <td><span class="style7">VW T25 Transporter</span></td> </tr> </table> <p> </p> </div> <div id="salevintage"> <p><img src="images/VintageandPVT.jpg" alt="Vintage & PVT Cars for Sale" /></p> <table width="526" border="1" cellpadding="1"> <tr> <td width="255"><a href="delage.html"><img src="images/sale/vintage/delagestraightthumbnail.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **" width="255" height="192" border="0" /></a></td> <td width="255"><a href="frazernash.html"><img src="images/sale/vintage/fnbmwthumbnail.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **" width="255" height="191" border="0" /></a></td> </tr> <tr> <td><span class="style3">Delage D8-15S 8 Cylinder Tourer 1934.</span></td> <td><span class="style3">Frazer Nash/BMW 319</span></td> </tr> <tr> <td><a href="rileysv.html"><img src="images/sale/vintage/rileysvtthumbnail.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **" width="255" height="181" border="0" /></a></td> <td><a href="brooklands.html"><img src="images/sale/vintage/rileythumbnail" alt="** PLEASE DESCRIBE THIS IMAGE **" width="255" height="191" border="0" /></a></td> </tr> <tr> <td><span class="style3">Riley Sidevalve Tourer 1924</span></td> <td><span class="style3">Riley Brooklands Style 6 Cylinder</span></td> </tr> </table> </div> <div id="contact"><img src="images/contactus.jpg" alt="Contact Us" /> <p>If you would like to view our cars then don't hesitate to get in touch!</p> <p>Please ring <strong>01525 377977</strong> to book an appointment.</p> <p>To send an email please visit the Contact Us section.</p> </div> <div id="footer"> <ul> <li>Ashridge Automobiles 2008</li> <li><a href="ashridgeindex.html" target="_parent">Home</a></li> <li><a href="britishsports.html" target="_parent">British Sport & Saloon Cars</a></li> <li>Vintage & PVT</li> <li>Projects & Barnfinds</li> <li>Riley Spares & Automobiles</li> <li>Restoration Services</li> <li>Wanted</li> <li>Contact Us</li> <p> </p> </ul> </div> </div> </body> </html> /* CSS Document */ body { font-family:Arial, Helvetica, sans-serif; } #container { width:1000px; margin:0 auto; background-color:#FFFFFF; } #content { width:400px; margin-left:5px; margin-top:10px; border:thin; border-color:#000000; border-style:solid; font-size:14px; float:left; padding:10px; } #content1 { width:1000px; margin-left:5px; border:thin; border-color:#000000; border-style:solid; font-size:14px; padding:10px; } #contact { width:500px; border:thin; border-color:#000000; border-style:solid; font-size:14px; float:right; padding:10px; } #main { width:1000px; padding:10px; } #sale { float:right; width:530px; margin-left:5px; margin-right:5px; margin-top:10px; border:thin; border-color:#000000; border-style:solid; padding:10px; } #salevintage { float:right; width:530px; margin-left:5px; margin-right:5px; margin-top:10px; border:thin; border-color:#000000; border-style:solid; padding:10px; } #contact { width:400px; margin-left:5px; border:thin; border-color:#000000; border-style:solid; font-size:14px; float:left; padding:10px; margin-top:10px; } #navigation li { display:inline; font-size:13px; text-align:right; padding: 0 5px; font-weight:bold; width: 1000px; } #logo { margin:10px; } #footer li { font-size:10px; list-style: none; display:inline; margin-left:10px; clear:both; } #photo_strip {width:900px; margin-left:15px;} #container1 {margin:0; padding:0; height:430px; overflow:auto; color:#222; background:#fff;} #container1 ul {margin:0; padding:0; list-style:none; white-space:nowrap; display:table-row;} #container1 ul li {display:table-cell; padding:0 15px; background:#fff; border-bottom:1px solid #; vertical-align:top;} #container1 ul li img {border:1px solid #555; margin: 30px 0 10px 0;} #photo_strip h1 {text-align:center; padding:0; margin:0; width:630px; height:38px; line-height:35px; color:#555; font-weight:normal; font-size:20px; border-bottom:1px solid #;} #container1 p {margin:0; padding:5px 0; font-size:11px;} #container1 { width:630px; scrollbar-arrow-color: #eee; scrollbar-3dlight-color: #; scrollbar-highlight-color: #eee; scrollbar-face-color: #; scrollbar-shadow-color: #eee; scrollbar-darkshadow-color: #; scrollbar-track-color: #fff; } #container1 ul li {display:inline; zoom:1; height:390px;} * html #container1 {height:470px; he\ight:430px;} /*CONTACT FORM*/ #contactform { margin: 0; width: 500px; background: #CCCCCC; padding: 5px; } #contactform * { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } #contactform ol { margin: 0; padding: 0; list-style: none; } #contactform li { margin: 0 0 5px 0; padding: 10px; background: #FBFAEC; } #contactform li.buttons { margin: 0; overflow: hidden; } #contactform label { margin:0px; width: 190px; display: block; float: left; padding: 5px 10px 2px 0; } #contactform input.text { width: 274px; border: 1px solid #D4D4D4; padding: 2px; margin: 0; } #contactform textarea { width: 274px; border: 1px solid #D4D4D4; padding: 0px; height: 80px; background: #FDFDF7; } #contactform li.buttons input { padding: 4px; float: right; margin: 0 0 0 5px; width: auto; } a:links { color:#000000; text-decoration:none; } a:hover { color: #0000CC; text-decoration:none; } a:visited { color:#000000; }
August 1, 200818 yr It Fixes the footer on FF3...looks like you've got cross browser problems. Like I said earlier you really should take it back to the drawing board, it will only take you a day (even if it takes a week how long is it going to be visible in relation?). Get the code straight from the start, take your time and check (the top 5 browsers) frequently. Short of me spending even longer looking at your code I really don't know how else to help you. Please realise that I'm tying to help - you re-writing your code will be a valuable learning experience. As your html and css stand it's time consuming and frustrating tyring to decipher everything. Read the code I done for you above and work the site into a similar layout (or the same). You don't really need to have two columns (leftCol and rightCol) but it's useful for you to learn them.
August 1, 200818 yr I think your re-desing is a great improvement on the original! It's fits more with the content. How are you getting on with the code?
August 3, 200818 yr Author Right I have tried to tidy it up a little. I didn't mean to sound ungrateful for any help I was just worried that if I change one bit of code to re write it I will lose the whole thing so apologies if I did! I've given myself a bigger headache now, the footer just won't stay at the bottom. I can't understand why on some of the pages the footer is perfect and then on others it isn't when it seems to be in the same position with the same CSS On the "Contact" page I have no idea what I did but the footer just shifted up to the top and I can't figure out how to get it back to normal. I'm feeling frustrated about it all as it looked almost done when I first started it and I understood it all. I put it through the w3 validation site to sort out any errors and now it's all messed up and I want to rip my hair out! I have uploaded these pages with the errors to my server Here Here is the index page code as it is now. <!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"> <head> <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ashridge Automobiles | Bedfordshire</title> <link href="ashridge.css" rel="stylesheet" type="text/css" /> <style type="text/css"> /*<![CDATA[*/ <!-- .style3 {font-size: 14px} .style7 {font-size: 12px} .style8 {color: #000000} --> /*]]>*/ </style> <meta name="keywords" content="vintage cars, restoration, jaguars, british sport cars, PVT, Pst Vintage Thoroughbred, Ashrdge Automobiles, Automobiles, Leighton Buzzard, Befordshire, Barn finds" /> <style type="text/css"> /*<![CDATA[*/ p.c3 {visibility:visible;} object.c2 {width:400px;height:262px} p.c1 {text-align: left} /*]]>*/ </style> </head> <body> <div id="container"> <div id="navigation"> <!--The header is now incorporated into the navigation div--> <img src="images/ashridgebanner.jpg" alt="Ashridge Automobiles Ltd" /> <ul> <li><a href="ashridgeindex.html" target="_parent">Home</a></li> <li><a href="britishsports.html" target="_parent">British Sport & Saloon Cars</a></li> <li><a href="vintagepvt.html">Vintage & PVT</a></li> <li><a href="vw.html">Other Cars of Interest</a></li> <li>Projects & Barnfinds</li> <li>Riley Spares & Automobiles</li> <li>Restoration Services</li> <li>Wanted</li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> <div id="content"><!--Site Introduction--> <p class="c1"><img src="images/welcometitle.jpg" alt="Welcome" /></p> <p class="c1">Ashridge Automobiles is based in the South of Bedfordshire. We offer cars at competitive prices owing to low overheads and funding by a group of investors. Our investors are all like-minded classic car enthusiasts.</p> <p class="c1">We specialise in the purchase, sale and restoration of vintage, PVT (post vintage thoroughbred) and classic cars.</p> <p class="c1">Ashridge Automobiles is happy to sell selective vehicles on commission and actively seeks to buy cars similar to those that appear on this website.</p> <p class="c1">Please look at our Wanted list for cars and parts that our sought at present and for which immediate funds are available.</p> </div> <!--Current Cars on Sale--> <div id="sale"> <p><img src="images/carsforsale.jpg" alt="Cars for Sale" /></p> <table width="510" border="1" cellpadding="1" summary="Briish Sport cars and Saloon cars that Ashridge Autmobiles currently have on sale."> <tr> <th scope="col"><a href="jagetype.html"><img src="images/sale/jaguaretypethumbnail.jpg" alt=" Jaguar E-Type Series 3 Roadster Automatic." width="170" height="128" border="0" align="left" /></a></th> <th scope="col"><a href="jaguarMK2.html"><img src="images/sale/jaguarmk2thumbnail.jpg" alt=" Jaguar MK2 2.4 litre" width="170" height="128" border="0" align="top" /></a></th> <th scope="col"><a href="vw.html"><img src="images/sale/vwthumbnail.jpg" alt=" VW T25 Transporter" width="170" height="128" border="0" /></a></th> </tr> <tr> <td><span class="style7">Jaguar eType S3</span> <span class="style7">Roadster</span></td> <td><span class="style7">Jaguar MK2 2.4 Litre 19</span></td> <td><span class="style7">VW T25 Transporter</span></td> </tr> </table> <p> </p> </div> <div id="salevintage"> <p><img src="images/VintageandPVT.jpg" alt="Cars for Sale" /></p> <table width="340" border="1" cellpadding="1" summary="Briish Sport cars and Saloon cars that Ashridge Autmobiles currently have on sale."> <tr> <th scope="col"><a href="delage.html"><img src="images/sale/vintage/delagestraightthumbnail.jpg" alt="Delage D8-15S 8 Cylinder Tourer" width="170" height="128" border="0" align="left" /></a></th> <th scope="col"><a href="rileysv.html"><img src="images/sale/vintage/rileysvtthumbnail.jpg" alt="RIley SIdevalve Tourer" width="170" height="128" border="0" align="top" /></a></th> </tr> <tr> <td><span class="style7">Delage D8-15S 8 Cylinder Tourer 1934</span> <span class="style7">Roadster</span></td> <td><span class="style7">Riley Sidevalve Tourer 1924</span></td> </tr> </table> </div> </div> <div id="footer"> <ul> <li>Ashridge Automobiles 2008</li> <li><a href="ashridgeindex.html" target="_parent">Home</a></li> <li><a href="britishsports.html" target="_parent">British Sport & Saloon Cars</a></li> <li>Vintage & PVT</li> <li>Projects & Barnfinds</li> <li>Riley Spares & Automobiles</li> <li>Restoration Services</li> <li>Wanted</li> <li>Contact Us</li> </ul> </div> </body> </html> And the CSS: /* CSS Document */ body { font-family:Arial, Helvetica, sans-serif; height:1500px; } #container { margin:0 auto; background-color:#FFFFFF; } #navigation li { display:inline; font-size:13px; text-align:right; padding: 0 5px; font-weight:bold; width: 1000px; } #content { width:500px; margin-left:5px; margin-top:10px; border:thin; border-color:#000000; border-style:solid; font-size:14px; float:left; padding:10px; } #content1 { width:1000px; margin-left:5px; border:thin; border-color:#000000; border-style:solid; font-size:14px; padding:10px; } #contact { width:400px; margin-left:5px; border:thin; border-color:#000000; border-style:solid; font-size:14px; float:left; padding:10px; margin-top:10px; } #sale { float:right; width:600px; margin-left:5px; margin-right:5px; margin-top:10px; border:thin; border-color:#000000; border-style:solid; padding:10px; } #salevintage { float:right; width:600px; margin-left:5px; margin-right:5px; margin-top:10px; border:thin; border-color:#000000; border-style:solid; padding:10px; } #footer li { font-size:10px; list-style: none; display:inline; margin-left:10px; clear:both; } a:links { color:#000000; text-decoration:none; } a:hover { color: #0000CC; text-decoration:none; } a:visited { color:#000000; } <!--Photo Galleries--> #photo_strip {width:900px; margin-left:15px;} #container1 {margin:0; padding:0; height:430px; overflow:auto; color:#222; background:#fff;} #container1 ul {margin:0; padding:0; list-style:none; white-space:nowrap; display:table-row;} #container1 ul li {display:table-cell; padding:0 15px; background:#fff; border-bottom:1px solid #; vertical-align:top;} #container1 ul li img {border:1px solid #555; margin: 30px 0 10px 0;} #photo_strip h1 {text-align:center; padding:0; margin:0; width:630px; height:38px; line-height:35px; color:#555; font-weight:normal; font-size:20px; border-bottom:1px solid #;} #container1 p {margin:0; padding:5px 0; font-size:11px;} #container1 { width:630px; scrollbar-arrow-color: #eee; scrollbar-3dlight-color: #; scrollbar-highlight-color: #eee; scrollbar-face-color: #; scrollbar-shadow-color: #eee; scrollbar-darkshadow-color: #; scrollbar-track-color: #fff; } #container1 ul li {display:inline; zoom:1; height:390px;} * html #container1 {height:470px; he\ight:430px;} /*CONTACT FORM*/ #contactform { margin: 0; width: 500px; background: #CCCCCC; padding: 5px; } #contactform * { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } #contactform ol { margin: 0; padding: 0; list-style: none; } #contactform li { margin: 0 0 5px 0; padding: 10px; background: #FBFAEC; } #contactform li.buttons { margin: 0; overflow: hidden; } #contactform label { margin:0px; width: 190px; display: block; float: left; padding: 5px 10px 2px 0; } #contactform input.text { width: 274px; border: 1px solid #D4D4D4; padding: 2px; margin: 0; } #contactform textarea { width: 274px; border: 1px solid #D4D4D4; padding: 0px; height: 80px; background: #FDFDF7; } #contactform li.buttons input { padding: 4px; float: right; margin: 0 0 0 5px; width: auto; } I'm so grateful for any help! Holly
August 3, 200818 yr </div> <div id="footer"> That is why your footer wont stay in the middle, move that </div> to underneath and it should
August 3, 200818 yr Author To make it like this? <div id="footer"> <ul> <li>Ashridge Automobiles 2008</li> <li><a href="ashridgeindex.html" target="_parent">Home</a></li> <li><a href="britishsports.html" target="_parent">British Sport & Saloon Cars</a></li> <li>Vintage & PVT</li> <li>Projects & Barnfinds</li> <li>Riley Spares & Automobiles</li> <li>Restoration Services</li> <li>Wanted</li> <li>Contact Us</li> </ul> </div> </div> </body> </html> That didn't make any changes unfortunately
August 4, 200818 yr No move this </div> </div> <div id="footer"> <ul> <li>Ashridge Automobiles 2008</li> <li><a href="ashridgeindex.html" target="_parent">Home</a></li> <li><a href="britishsports.html" target="_parent">British Sport & Saloon Cars</a></li> <li>Vintage & PVT</li> <li>Projects & Barnfinds</li> <li>Riley Spares & Automobiles</li> <li>Restoration Services</li> <li>Wanted</li> <li>Contact Us</li> </ul> </div> </body> </html> To here <div id="footer"> <ul> <li>Ashridge Automobiles 2008</li> <li><a href="ashridgeindex.html" target="_parent">Home</a></li> <li><a href="britishsports.html" target="_parent">British Sport & Saloon Cars</a></li> <li>Vintage & PVT</li> <li>Projects & Barnfinds</li> <li>Riley Spares & Automobiles</li> <li>Restoration Services</li> <li>Wanted</li> <li>Contact Us</li> </ul> </div> </div> </body> </html>
August 4, 200818 yr Author I tried doing that and this happened: I don't know what it is with footers but they never seem to work with me
August 4, 200818 yr Author I have tried doing it better but as I'm learning more I'm sure it will become neater. Believe me I do want to get better! I just wish someone could help me get the footer correct. As that is one of the only things that has to be done as I need to put the last updated date on there. I'm on a bit of a time limit as I'm going away for 6 months in 3 wks. I know at my level that is a challenge so it doesn't need to be too advanced just a more consistent design to the old website.. The site obviously won't be able to be updated so frequently with sales but for now I just want the site to hold the information that it can right now. After all anything is better and an update from how it looks at the moment! But I just want the footers to line up right now as I just can't see what is blocking me from doing that. Thank you for the suggestions so far. They must be correct but there also must be something stopping it?
August 4, 200818 yr There are two fixes there that seem to work for us. Are you sure you're not looking at old cache or something and not seeing the changes take effect?
August 5, 200818 yr Author A friend of mine just checked it out for me. He noticed that there was only css for "#footer li". I needed to put a "#footer" Clear: Both; only needed to be on the footer li Clear: Left; on the footer. In DW8 the changes don't appear but in Mozilla, IE it is now fine. Safari still isn't perfect but it's in the right part of the screen and I think will be fine with a few more adjustments.
August 5, 200818 yr Isn't that what I told you to do ages ago? Never use DW to check how the site looks, check what it's going to be rendered on (top 5 browsers)
August 5, 200818 yr Author I agree you did mention to add the clear: both but I didn't realise I had to have two seperate #footer parts on the css. But at least that part of the site is reasonably sorted. Although I wish things didn't look different in all the browsers!
August 6, 200818 yr Author Yeah I know lol Its not exactly "What you see is what you get" because I am not seeing what I am meant to be getting! Now for some reason in IE as it appears bigger than in Mozilla and Safari the navigation bar gets pushed on to a second line. So I might have to catergorize it and make a drop down menu for the cars on sale.
Create an account or sign in to comment