|
HTML - Centre Column Not Dispaying Correctly
Please could anyone help me.
Adding items to the left column moves the centre column, increasing the space betweeen centre column text and the header. Could anyone help me with this. Here is the detail. Quote: <!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> <title>Web Shop</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="default.css" title="default"/> </head> <body> <div id="WholePage"> <div id="Inner"> <div id="Container"> <div id="Head"> <div id="Head_left"> <div id="Leaf_top"></div> <div id="Leaf_bottom"> <a class="registration" href="">REGISTRATION</a> <a class="log-in" ">LOG IN</a> </div> </div> <div id="Head_right"> <div id="Logo"> <div id="Name"><span class="blue">A</span><span>dvance </span> <span class="blue">P</span><span>rofessional</span> </div> <div id="Informations">Laundry | Catering | Auto Dosing Equipment </div> </div> <div id="Top_menu"> <a class="kart" href=""><span>KART</span></a> <a class="orders" href=""><span>ORDERS</span></a> <a class="contact" href=""><span>CONTACT</span></a> </div> </div> </div> <div id="CentralPart"> <div id="LeftPart"> <div id="Menu"> <div id="Menu_header"> <div class="menu_header_left"> <span class="menu_text">LAUNDRY PRODUCTS</span> </div> <div class="menu_header_right"> </div> </div> <div id="Menu_content"> <a class="menu_item" href=""><span>Professional Powder </span></a><br/> <a class="menu_item2" href=""><span>Non- Biological</span></a><br/> <a class="menu_item2" href=""><span>Biological</span></a><br/> <a class="menu_item" href=""><span>Professional Liquids</span></a><br/> <a class="menu_item2" href=""><span>Biological</span></a><br/> <a class="menu_item2" href="<span>Non-Biological</span></a><br/><a class="menu_item" href=""><span>Fabric Conditioners</span></a><br/> <a class="menu_item2" href=""><span>Disinfecting</span></a><br/> <a class="menu_item2" href=""><span>Peach Liquid</span></a><br/> <a class="menu_item" href=""><span>Destainers</span></a><br/> <a class="menu_item" href=""><span>Oxy Boost</span></a><br/> </div> </div> <div id="Menu"> <div id="Menu_header"> <div class="menu_header_left"> <span class="menu_text">CATERING PRODUCTS</span> </div> <div class="menu_header_right"> </div> </div> <div id="Menu_content"> <a class="menu_item""><span>Warewashing</span></a><br/> <a class="menu_item2" href=""><span>Auto Dishwash Liquid</span></a><br/> <a class="menu_item2" href=""><span>Biological</span></a><br/> <a class="menu_item2" href=""><span>Dish Wash Powder</span></a><br/> <a class="menu_item2" href=""><span>Dish Wash Tablets</span></a><br/> <a class="menu_item2" href=""><span>Rinse Aid</span></a><br/> <a class="menu_item2" href=""><span>Tanin Stain Remover</span></a><br/> <div id="Menu_content"> <a class="menu_item" "><span>Glass Washing</span></a><br/> <a class="menu_item2" href=""><span>Auto Glasswash</span></a><br/> <a class="menu_item2" href=""><span>Rinse Aid-Glasswash</span></a><br/> <a class="menu_item2" href=""><span>Glass Renovating Powder</span></a><br/> <a class="menu_item2" href=""><span>.....</span></a><br/> <a class="menu_item2" href=""><span>Rinse Aid</span></a><br/> <div id="Poll"> <div id="Poll_header"> <div class="menu_header_left"> <span class="menu_text">SERVICE</span> </div> <div class="menu_header_right"> </div> </div> <div id="Poll_content"> <span class="poll_question">Laundry Systems</span><br/> <a class="menu_item2" href=""><span>1111111</span></a><br/> <a class="menu_item2" href=""><span>2222222</span></a><br/> </div> <div id="Poll_content"> <span class="poll_question">Warewashing Systems</span><br/><a class="menu_item2" href=""><span>3333333</span></a><br/> <a class="menu_item2" href=""><span>44444</span></a><br/> <a class="menu_item2" href=""><span>55555</span></a><br/> <a class="poll_unswer" href=""><span>Laundry Dispensers</span></a><br/> <a class="poll_unswer" href=""><span>Dishwash Dispensers</span></a><br/> </div> </div> <div id="Banner"> <img src="img/banner.jpg" alt="" /> </div> </div> <div id="RightPart"> <div id="Page"> <div id="Page_header"> <h1>Save money by buying direct...</h1> <table> <tr> <td class="page_header_img"><img src="img/basket.gif" alt="" /></td> <td class="page_header_text"><p>Buy on-line direct from us. No middlemen and achive massive savings.</p></td> <td class="page_header_img"><img src="img/idea.gif" alt="" /></td> <td class="page_header_text"><p>All prices on our website include delivery. No hidden charges.</p></td> </tr> <tr> <td class="page_header_img"><img src="img/car.gif" alt="" /></td> <td class="page_header_text"><p>Should you have any queries or need some techinical advice, we are on hand. Just send us an email.</p></td> <td class="page_header_img"><img src="img/envelope.gif" alt="" /></td> <td class="page_header_text"><p>Donec at justo ac ipsum laoreet dapibus. Vivamus lacinia. Suspendisse ipsum. Morbi vitae nulla. In hac habitasse platea dictumst.</p></td> </tr> </table> </div> <div id="Page_top"> <p> Introductory Offer...Buy any 100 litres Get any 20 litres FREE<br/> Great savings every month <a href="http://www.free-css.com/">libero,</a> <a href="">vestibulum ut,</a> <a href="">venenatis ac,</a> <a href="">interdum quis, mi.</a><br/> Donec at justo ac ipsum laoreet <a href="">dapibus</a><br/> <a href="http://www.free-css.com/">1</a> 2 3 .... 11 12 13<br/> </p> </div> <div id="Page_center"> <table> <tr> <td class="page_center_button"><a class="page_center_buy" href="http://www.free-css.com/"><span>buy</span></a><a class="page_center_info" href=""><span>more-info</span></a> </td> <td class="page_center_content"><div class="page_center_text"> <span class="blue2">Lorem ipsum dolor</span><br/> <span class="gray">Donec at: justo ac</span><br/> <span class="gray">Cras ut: ligula nec</span><br/> <br/> <span class="green">Price: $156</span><br/> </div></td> <td class="page_center_img"> </td> <td class="page_center_button"> </td> <td class="page_center_content"></td> <td class="page_center_img2" > </td> </tr> <tr> <td class="page_center_button"><a class="page_center_buy" href="http://www.free-css.com/"><span>buy</span></a><a class="page_center_info" href=""><span>more-info</span></a> </td> <td class="page_center_content"><div class="page_center_text"> <span class="blue2">Lorem ipsum dolor</span><br/> <span class="gray">Donec at: justo ac</span><br/> <span class="gray">Cras ut: ligula nec</span><br/> <br/> <span class="green">Price: $156</span><br/> </div></td> <td class="page_center_img" > </td> <td class="page_center_button"> </td> <td class="page_center_content"></td> <td class="page_center_img2" > </td> </tr> </table> </div> </div> </div> <div class="cleaner"></div> </div> <div id="Bottom"> <p class="down">Copyright © 2007 <a href="">Design by: Sunlight webdesign</a> </p> <div class="down2"> <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88" /></a> </p> </div> </div> </div> </div> </div> </body> </html> Thanks in anticipation...Any other comments welcome to this novice. Similar TutorialsI suspect this is a very simple question but for the life of me I cannot figure this out. I have tried almost everything but I cannot get an image to centre widthwise. Here is the page: http://outdoorphotographycanada.com/ I am trying to centre the image on the left side of the page which is our Forum banner (picture of an eagle). Here is the code for that piece: <td width="189" rowspan="4" valign="top" bgcolor="#fba71b"><br /> <p><a href="http://www.outdoorphotographycanada.com/ccount/click.php?id=2" target="_blank" onMouseover="return hidestatus()"> <img src="http://www.outdoorphotographycanada.com/images/site_pics/OPCForum.jpg" alt="Forum" width="187" height="600" border="0" /></a></p></td> I have tried <center> , <div align="center"> and also various valign entries but no luck. I am working in Dreamweaver and using a template. My browser is IE 6.0 and Firefox 2.0.0.15 Does anyone know how I can do this? Thanks, Dave Hi, I'm a complete novice at html - am building a site from a wordpress template and want to centre the image in my header but it seems to be automatically pushing it to the right. At the moment i have: <div id="title"><center><a href="http://www.bar-23.co.uk"><img src="http://www.bar-23.co.uk/finallogo2.png"></center></img></a></div> Is this all wrong?!! I need to create a page like the image its really simple but i just cant get my divs working. Please help me im tearing no ripping my hair out. Many thanks in advance Matthew CSS body { background-color:#F0F; margin: 0; } #wrapper { width: 700px; height: 100%; min-height: 100%; position: relative; margin: 0 auto; background-color: #CCC; } #main { left: 0; position: relative; top: 50%; height: 500px; width:700px; background-color: #666; } #footer { height: 50px; width:500px; bottom: 0; position: absolute; background-color: #CCC; } HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>2010</title> <link href="test.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="main"><p>container</p></div> <div id="footer"><p>footer</p></div> </div> </body> </html> Hi All I am working on a new and very very simple site for myself and have been asking friends to check it as i am going along on my screen res the site is fine but on anyone with hugh monitor resolutions they are getting the home page of the site showing up tiny in the top left corner... and all pages are showing with huge white space below is there an easy way for me to make the site show up in the middle of the browser no matter the reolution? i dont mind if theres white space around the site i just dont want it all at the bottom or for the site to be stuck up in a corner.. i dont just want it centred at the top of the screen either I hope this makes sense? appreciate any help.. thanks http://www.steverobertson.co.uk Hello, I have a website I am working on and I have almost finished and have just noticed that when I use Chrome or Opera the different pages on my website shift 20 pixels or so to the left. That is some jump left and some don't. Under IE8 this is o.k. Having spent a few hours trying to work out the difference( I assumed this would be easy ) I have discovered that sometimes by adding a <p>Hello World</P> into the centre DIV causes the webpage to fix itself. I have no styling on the P other than to change the colour and can't work out what is causing it. I was trying to make the website HMTML 4.01 strict to avoid these inter-browser problems using but this one has caught me out. I am new to this FORUM and so I am not sure of the correct way of doing this. So I am happy to post code here or if someone wants to have a look at the website its he http://www.sharpcoders.co.uk/index.htm Simple clicking on HOME and then the tab marked "Windows Apps" will show the shifting I am talking about. Thanks for any support or suggestions anyone can give me. Regards, HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Brew Records - Leeds Independent label</title> </head> <img src="images/logo/brew%20logo%20black.jpg" align="absmiddle"> <body> </html> when i put in align="right" it goes to the far right but absmiddle doesn't make it go in the middle of the page. driving mer nuts i'm certain its correct I'm using firework and dreamweaver, but i need to expand some side bar images in html in a table so client can input their own copy so it expands vertically without compromising the design. I need to use HTML code not CSS What code can i use to vertical align the background image in a table? Presently i have this working... <td rowspan="9" background="expansion_images/right_001_r2_c5 copy.png"> </td> Hi, My website sits of center on the iphone's. I think logic tells me that its something to do with the background image. http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Please can someone help as I've been stuck on this for AGGGGEEEEESSS Thanks alot Joe Hi I'm designing a simple website in NVU, but although it displays correctly in NVU and Firefox, for some reason the tables aren't centred in Internet Explorer (they stay on the left side of the browser). The site is at www.saturdaynightmusical.com Any tips on why this is displaying differently in IE would be greatly appreciated! Many thanks for your time. Hi there, Hoping I can explain my situation without having to post an example. I have a logo, which I want to be centred... Easy enough. However, on the left of the text for the logo, there is an image, which kind of overlaps the text (imagine someone holding there arm out straight across top of text, and the person is fat lol). My predicament is this... If I leave the person as a part of the original logo, the font isn't centred and does look kinda odd with the rest of the page. So what I'd like to do is have the text centred, and have the person to the left, without affecting the centre of the text. Although I will need the person on the left to be close enough to the text to look like the complete logo. Also, might be worth me mentioning, the person on the left is taller than the font, and so I'd like the text to be in the midle of them (say waist height). Anyone understand me or am I gonna have to post up an example? lol Cheers Ps, I think I've done something similar in XML and CSS using just text, but never with an image, and don't really remember it too well anyway. I am a total newbie to this and so I have no idea what is going on. I downloaded a template from a wesite I forget which, but it looks great in IE, and Safari, however in Firefox, or Opera it is all screwed up. The site is www.ottersupport.com would somebody mind look at the code and let me know what i need to fix ? Thanks Hello, I'm new here and I hope here is the best place to ask for help. Recently i found a piece of code on the net that will allow me to watch online different pictures. I have 499 folders and sorted them as 01 02 03 04 05 06 07 08 09 11 12 13 14 15 .... 100.....150.....350...499 but in my ftp client everything is messed up(filezilla) after i upload them on my server when i want to watch them .. the list appears like this: after folder no.10 i have folder no.100 and after folder 199 i have folder no.20 .. and so on .. how could i fix them so that the numbering would be correct ? I'm sure there is a simple answer to this or I hope so. I don't have much computer code experience so I'm just going with trial and error. Anyway, my question is concerning the output of my navigation links. Its setup like this in template <ul> <li>[Navigation]</li> </ul> this outputs a set of about 10 links that look like this in the code ul> <li> link <br/> link <br/> link <br/> </li> </ul> It works but I need the code to look like this for it to function right. ul> <li> link </li> <li> link </li> <li> link </li> </ul> how do i code that using the [Navigation] Variable thanks a ton I designed a website for a client. It shows fine on my mac in Firefox but the CSS isn't loading properly in Windows Browsers because the background and the Link details aren't loading at all. What could be the issue? http://kangazoomparty.com/kangazoom.html This is the website btw. Hi All, I need help as fast as possible for a non profit which I have co-founded. I am a native linux/firefox user, one of the other members had told me that there is an issue in IE with our website but hadn't really told me how bad it was. I checked it out today and it is HORRIBLE. We are sending out a newsletter in the next week which will probably significantly increase traffic to our website so getting it solved is crucial. I can provide any code that I have worked on in order to find help. the website is www.cleaneducation.org the website works fine in Firefox in Windows/Linux and Mac but IE does not work. Please visit the site using firefox and IE to see what I mean. I'm in a bit of panic mode over this Thank you much www.lasrocasresort.com , IE and Firefox both render the page correctly . Safari will leave a blank line between the flash banner and the body of the page. Any suggestion ? Pakal I have been trying to add a text field to a pre-existing form which is submitted to my email. It is an order form and I want to add an area for the user to input their country. It shows up on the webpage but when I get the information the user has submitted in my email the Country data is not coming through. The webpage is http://earfdn.org/form11.htm The problem is towards the bottom under the Ship To: title. Please help! And thank you so much for your time. Hello. I have created a website: www.launchtechusa.com It looks fine when you view it through mozilla or safari, but it gets distorted when you view it through internet explorer. Any reasons why this may be happening? Thanks for any pointers you can give! Guys, i am in a real bind here. I recently redesigned my website & gave it a fresh look. Well apparently that new look has come with a cost! My homepage doesn't display correctly in IE6 or IE7. I am getting a lot of complaints about it & I have no clue how to fix it. I added a script to inform users that they were using an older browser that was outdated but a lot of my users cannot update their browsers because they are on work computers & what not. Can someone please help me fix this mess. My homepage URL is: http://www.biglake411.com/ The site displays correctly using firefox & IE8. The problem is with IE6 & IE7. Here are screen shots of each: Thanks in advance. Hello everyone, I'm new here. I hope someone will help me with my problem. You can see it he http://kahoe.monline.dk/portfolie2/index.php EDIT: Problem 1 solved. Problem 1 is in the grey menu to the right. I've used php include_once to insert four div elements (with images and a little text), but they position themselves in a strange way. It's supposed to be a collumn. You can see the html file with the four elements he http://kahoe.monline.dk/portfolie2/globalmenu.html I should probably say that I've used javascript to make a hover effect with the images. (Do I need to include code in this post, or do you guys usually view CSS and HTML in the browser?) Problem 2 is with IE. I have IE 8 installed, so I don't know about other versions, but this one can't find the images on my website. It works fine in Firefox. What's wrong? Problem 3 is with the div element at the top of the page, the one which contains the text "Denne hjemmeside ses bedst med Firefox. Download Firefox her. " I can't get it to sit at the very top of the page. I've used body { margin: 0; padding: 0; } in the stylesheet already, but it's not enough apparently... |
|||||||