|
HTML - Div Alignment Centre Please Help Me
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> Similar TutorialsHi, 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?!! 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 I 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 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, 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. 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 have a div which contains a line of text as a url. When clicked, a div is displayed directly below, and the content is different depending on the user. Currently, the div opens and two left hand sides align. I would like to cause the right hand sides to align instead, with the divs growing to the left if the text is larger. Is this possible? hey guys im getting a weird b0rder ar0und my <div>, i d0nt kn0w what it is..can anyb0dy help me please? ive been l00king at div pr0perties but i havent been able t0 eliminate that b0rder - im n0t even sure its fr0m the div but i'd think it is. the b0rder im talking ab0ut is the black 0ne. c0me t0 think 0f it.. its n0t a b0rder - the black secti0n is a <th> and the black is its backgr0und, but the <div> inside the <th> simply d0esnt extend in it t0 100% :/ http://www.hotlinkfiles.com/files/57...cument_7_.html Hope someone can suggest something. I am working with a programme that uses three templates to structure the web site, feeds articles, author page and site map on a daily basis to my web site. I attempted to insert Adsense ad units to templates and unfortunately everything is out of line now. this can be viewed at http://daviddutch.com/currency/articles/index.html Question is how do I bring everything else back in line please as when I look at coding there is no clear place to put the adsense HTML code to get things lined up correctly. Hope someone can offer wisdom and guidance. cheers Good morning, I cannot figure out how to get the images one on top of the other (in a straight line) here http://divamaggie.com/?p=60 . I tried Code: <br>, <p> and simply line spaces, but nothing seems to be working. I'm really hoping someone can tell me what I'm doing wrong. Hi, Can someone help me align the two images at the bottom of the html page (view attachment) in the center. It should be compatible with IE and Firefox 3. I have attached sample code in the .doc file. Thanks in advance, Ronnie Hey all, Just a question about my amature portfilio site that im creating. On some pages, graphics and blog, for example, http://www.freewebs.com/breakdowninc.../graphics.html http://www.freewebs.com/breakdowninc/pages/blog.html I am wanting to center the graphics/blog parts overhead of the copywrite text, found at the bottom of my page. Example: I have centered the graphics images, using align="center" yet they go off the side slightly. Anyway can how can I align them appropriately, without using "position:absolute" because it screws with the mini/maximising of my page. Cheers I don't understand! On my end when I upload it to the server and open an html file in the browser, everything looks fine. But when other people look at the site, it looks totally different. Text boxes are disgusting, I use CSS positioning and it puts everything totally off of the layout. Hi Guys Here is some css I use for my footer, I want it to be centered but only span 98% of the distance, however when I change the width to 98% it only cuts off the 2% from the right hand side and justifies the footer to the left. Any Help? Thanks Code: #footer{
clear: left;
width: 100%;
background: white;
color: black;
text-align: center;
padding: 2px 0;
}
Hi, I am trying to figure out how I can align text with an image using spacing (strictly HTML). I have applied the vspace and hspace tags to my image, but then my image won't be aligned flush with the text. Is there any way I can set up spacing on just one side of the image? |
|||||||