September 21, 201213 yr Hello, I was wondering if someone could be very kind and help me. Our website was designed for us by a web designer and I edit the content using html. Most pages I can edit easily, but this page seems to have a strange layout: http://www.britishtutors.com/pages/ourtutors.html I would like to add a third employee with a photo of them to the right in the same format as Olivia and Eleanor. However I cannot work out how to do this. Please can you help! I am very grateful for your time. Thank you, Eleanor
September 21, 201213 yr wow, are you sure it was designed by a person? What Nationality were they? Anyway, apart from the awful code that uses absolute positions for everything and is upside down as you read it, replicating what they've done you need to do something like this move #apDiv16 down the page by changing the Top: 798px to allow room for your new person's information create #apDiv17, #apDiv18 and #apDiv19 in the css section and set the Top again to where you want it. Use these for your new person's section like the ohers.
September 21, 201213 yr Author Dear Zed, Thank you so much for trying to help. Indeed we did hire a web designer, a British one, but I am aware that the code is deeply confusing on this page hence my troubles! I am a layman myself and am not familiar with how to edit the apDiv parts. I usually just add text and images. What should I change the Top:798px to. Then how should I create the new 17, 18 and 19 sections? Many thanks for your patience. Eleanor
September 21, 201213 yr okay, assuming you want the new one at the bottom. Try this. I tidied up your source as well <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]"><!-- InstanceBegin template="/Templates/1sttemp.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>British Tutors: Our Tutors</title> <meta name="description" content="British Tutors offers tailored private tuition by top British graduates in Hong Kong" /> <meta name="keywords" content="british tutors, british tutors hong kong, eleanor smallwood, olivia hungerford, private tutors hong kong, private tutition hong kong, private tutoring, home tutoring" /> <style type="text/css"> <!-- body { background-color: #f0efdc; } body,td,th { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; } a { color: #03687f; font-size: 12px; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: none; } h1,h2,h3,h4,h5,h6 { font-family: Georgia, Times New Roman, Times, serif; } h1 { font-size: 24px; } #apDiv1 { position:absolute; left:460px; top:28px; width:267px; height:212px; z-index:1; } #apDiv2 { position:absolute; left:101px; top:249px; width:1159px; height:90px; z-index:2; } #apDiv3 { position:absolute; left:102px; top:384px; width:982px; height:470px; z-index:3; } #apDiv4 { position:absolute; left:275px; top:349px; width:635px; height:800px; z-index:4; } #apDiv5 { position:absolute; left:128px; top:267px; width:240px; height:34px; z-index:5; } #apDiv6 { position:absolute; left:369px; top:267px; width:240px; height:34px; z-index:6; } #apDiv7 { position:absolute; left:610px; top:267px; width:240px; height:34px; z-index:7; } #apDiv8 { position:absolute; left:871px; top:267px; width:240px; height:34px; z-index:8; } .style1 {font-family: Georgia, "Times New Roman", Times, serif} .style2 {font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; } h2 { font-size: 14px; } h3 { font-size: 13px; } h4 { font-size: 12px; } --> </style> <!-- InstanceBeginEditable name="head" --> <style type="text/css"> <!-- #apDiv9 { position:absolute; left:134px; top:310px; width:950px; height:29px; z-index:9; } #apDiv9 h4{ margin:0; padding:0; } #apDiv10 { position:absolute; left:757px; top:404px; width:158px; height:182px; z-index:10; } #apDiv11 { position:absolute; left:275px; top:384px; width:635px; height:58px; z-index:11; } #apDiv12 { position:absolute; left:275px; top:424px; width:468px; height:164px; z-index:12; } #apDiv13 { position:absolute; left:275px; top:588px; width:635px; height:59px; z-index:13; } #apDiv14 { position:absolute; left:275px; top:628px; width:468px; height:162px; z-index:14; } #apDiv15 { position:absolute; left:757px; top:609px; width:158px; height:175px; z-index:15; } #apDiv16 { position:absolute; left:275px; top:1018px; width:635px; height:600px; z-index:16; } #apDiv17 { position:absolute; left:275px; top:798px; width:635px; height:59px; z-index:13; } #apDiv18 { position:absolute; left:275px; top:838px; width:468px; height:162px; z-index:14; } #apDiv19 { position:absolute; left:757px; top:819px; width:158px; height:175px; z-index:15; } .style3 {font-size: 10px} .style4 { color: #011F2D } --> </style> <!-- InstanceEndEditable --> </head> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "[url="https://ssl"]https://ssl[/url]." : "[url="http://www"]http://www[/url]."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-10121568-1"); pageTracker._trackPageview(); } catch(err) {}</script> <body> <div id="apDiv1"><a href="hongkong.html"><img src="[url="http://www.britishtutors.com/images/logo.jpg"]http://www.britishtutors.com/images/logo.jpg[/url]" alt="british tutors logo" width="267" height="212" border="0" /></a></div> <!-- InstanceBeginEditable name="nav4" --> <div id="apDiv16"> <h2><strong>Our tutors</strong></h2> <p align="center"><img src="[url="http://www.britishtutors.com/images/alltutors.jpg"]http://www.britishtutors.com/images/alltutors.jpg[/url]" alt="Hong Kong tutors" width="635" height="127" border="0" /></p> <br/> <p align="justify">We employ a team of native British tutors based in Hong Kong. Our tutors are all trained in the same tutoring methods and follow our unique curricula and teaching philosophy.</p> <p align="justify">All our tutors graduated from top British universities and are of the highest standard. They are chosen for their own academic excellence and their wealth of experience as private tutors. Amongst them are Oxbridge alumni, those with international teaching experience in countries across Africa, Asia, America, Australasia and Europe, graduates of the highly competitive Teach First program, trained teachers for pre-schoolers, tutors with professional experience in their applied field and many who were awarded First Class honours in their degrees. We offer continuous training, support and resources for our staff ensuring that this high quality is maintained.</p> <p align="justify">In private tuition the relationship between the tutor and the pupil is paramount and we take great care in making sure that the correct tutor is chosen for each student. Lines of communication between our tutors and our clients are always open and we encourage frank discussion to make sure that all the students' tutoring needs are met.</p> <br/><p align="center"><i><a href="testimonials.html">"The professionalism of the teachers from British Tutors is second to none in Hong Kong."</a></i></p> <p> </p><br/> <p><img src="[url="http://www.britishtutors.com/images/footerline.gif"]http://www.britishtutors.com/images/footerline.gif[/url]" width="636" height="6" /></p> <p align="center"><span class="style3">© British Tutors Limited 2012</span></p> <p align="center"><a href="[url="https://www.facebook.com/pages/British-Tutors/520997387914144?ref=hl"]https://www.facebook.com/pages/British-Tutors/520997387914144?ref=hl[/url]" target="_blank"><img title="Facebook" alt="Facebook" src="mailto:eleanor@britishtutors.com">eleanor@britishtutors.com</a></p></div> <div id="apDiv17"> <h2>Eleanor Smallwood MA - Managing Director</h2> </div> <div id="apDiv15"><img src="[url="http://www.britishtutors.com/images/eleanor.jpg"]http://www.britishtutors.com/images/eleanor.jpg[/url]" alt="Eleanor Smallwood" width="150" height="170" border="0" /></div> <div id="apDiv14"><p align="justify">Eleanor runs British Tutors with co-founder Olivia Hungerford. Eleanor graduated from The University of Edinburgh with a First Class Masters degree in Psychology. She has taken courses in developmental and educational psychology and studied learning difficulties in children. She has also worked as a writer and journalist for international publications and published academic papers. Eleanor received A grades in all her school examinations, and for many years tutored pupils in both London and Hong Kong to receive similar results. She now works with the team of tutors to ensure that the highest standards are maintained.<br/><a href="mailto:olivia@britishtutors.com">olivia@britishtutors.com</a></p></div> <div id="apDiv11"> <h2>Olivia Hungerford BA - Managing Director</h2> </div> <div id="apDiv10"><img src="[url="http://www.britishtutors.com/images/olivia.jpg"]http://www.britishtutors.com/images/olivia.jpg[/url]" alt="Olivia Hungerford" width="150" height="170" border="0" /></div> <div id="apDiv9"> <h4> <a href="thecompany.html">The company</a> <span class="style4"><strong>OUR TEAM</strong></span> <a href="testimonials.html">Clients' testimonials</a></h4> </div> <div id="apDiv8"> <div align="center" class="style2"><a href="contact.html">CONTACT US</a></div> </div> <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="nav3" --> <div id="apDiv7"> <div align="center" class="style2"><a href="resources.html">RESOURCES</a></div> </div> <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="nav2" --> <div id="apDiv6"> <div align="center" class="style2"><a href="privatetuition.html">WHAT WE DO</a></div> </div> <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="nav1" --> <div id="apDiv5"> <div align="center" class="style2 style4">WHO WE ARE</div> </div> <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="EditRegion2" --> <div id="apDiv4"></div> <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="EditRegion1" --> <div id="apDiv2"><img src="[url="http://www.britishtutors.com/images/nav_image2.gif"]http://www.britishtutors.com/images/nav_image2.gif[/url]" width="1023" height="90" border="0" /></div> <!-- InstanceEndEditable --> </body> <!-- InstanceEnd --></html> Test it in a new document first
September 21, 201213 yr That was some pretty aweful code, i agree with Zed! Also the whole positioning is just ugly! No offence of course! I hate going to a site that uses a page container div inside the body and doesnt center it! My uncles site is the same and it irritates me. But i am sure what Zed has provided will work fine (had a quick scan). My advice = don't use that designer again or pay him until your happy with what he has done! Personally when I hand something back to a client if I am not providing any support I write up a quick document of what to change and how for any future reference as I believe it is a good practice. Objective C programmers do it, so why should web based be any different.
September 21, 201213 yr Author Oh Zed, you are kind! It looks like it it half way there - but not quite! The images have all gone and some of the layout is a bit mad! We do indeed want the new employee at the bottom with a title, description and photo of their own. I have attached screengrabs (top, middle and bottom) to show what the new page looks like. Can I tidy it up? Thank you, thank you, thank you! Steve, I realise now that perhaps we didn't have the best design, but it was done a few years ago now and I have to work with what we have. I do like how the website looks, even if the backend causes me grief!
September 21, 201213 yr Strange, the images shouldn't have gone anywhere as when I tested and posted the code I used implicit links to them. Have you uploaded the page anywhere to have a check?
September 21, 201213 yr That looks to me that the pictures have been given the wrong file names in the code. Your browser is trying to load them but can't find them. I prefer to use file location other than url as its more reliable and uses less httpd requests. It is a nice looking site, if you can solve your minor issues. It wasn't very badly designed it just wasn't the best. And for someone who knows a little html you have done well managing the upkeep of the site. (dont take it personally)
September 21, 201213 yr actually try the attached file, the code I copied in doesn't appear to be complete which could be an issue with the code tags. Edit, with relative image locations british_tutors_our_tutors.html Edited September 21, 201213 yr by zed
September 21, 201213 yr That is odd, do you have access to the server? Or are your hosting provider quite reasonable? As to me it looks like a possible permissions error with the pictures not loading. if you go direct to the url of the image it loads but with the code it won't load them up. As I said it is always best to link to the file location rather than a url, but thats just my 10p.
September 21, 201213 yr Author Thank you Steve, I know very little html. I am all self taught, just enough to be able to add a few images here and there and create new pages using another one as a template. I see now what has happened to the images - I will change it from url to file location and see what we end up with then. Fingers crossed! I will show you my progress.
September 21, 201213 yr I am also self taught (but have alot of spare time) fingers crossed it works, other wise will have to have a real think about what the problem could be.
September 21, 201213 yr That is odd, do you have access to the server? Or are your hosting provider quite reasonable? As to me it looks like a possible permissions error with the pictures not loading. if you go direct to the url of the image it loads but with the code it won't load them up. As I said it is always best to link to the file location rather than a url, but thats just my 10p. Stop confusing matters. They loaded for me when I tested so there it no issue. The pasted code only has the full url from where I was testing and the file location works fine on the existing page.
September 21, 201213 yr Well it did not work for me at all, hence my comment. I am not trying to confuse matters merely trying to help with my expertise (anything to do with a server) and have encountered this problem myself once or twice.
September 21, 201213 yr Author Zed, I think your new code is working a dream! I am just having to change the image names (in my system they are saved as .../images/eleanor.pg" etc but once that is done I think it will be a TRIUMPH! After 5 years of frustration about this page I think we are nearly there thanks to your kindness. I might have more questions for you in the future
September 21, 201213 yr Yes, the uploaded file should now have that. I had to change it when testing so I could get the images.
September 21, 201213 yr Author We have perfection! I just changed those image names slightly so they worked and now look (attached). I couldn't be happier, thank you both very much for your time and thought. I just need to write up the new employee before I upload it so I am not on there twice! If I have any more problems when I finish our website overhaul next week, I shall be sure to come back. Thanks and have a lovely weekend, Eleanor
Create an account or sign in to comment