HTML - Help With Html Image Alignment
Hi
This is what i have: PHP Code: div id="wrapper"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="17%" ><img src="element.png" width="230" height="381" /></td> <td width="29%" align="left">middle</td> <td width="25%" align="left" background="backimg.png"><p>dfg</p></td> <td width="29%"></td> </tr> </table> </div> and this is what i get: Basically i have a table with 3 cells, the left (with the pink effect), the middle, and the right side. What i want is that image effect which is in left side of the page to be always aligned at top. should i create another <div> inside the <td> and put the image in the <div> ? is there a good way to do this ? Thanks Similar TutorialsHi Everyone, I'm really needing help. I'm taking a stab at building my first webpage to my Dad's business. I am trying to figure out how to put a company logo in the top left corner, but every time I do it moves everything around. Does anyone have any idea on how I can keep the current format but also put a logo in the top left corner? Any and all help is greatly apprecaited as this is the 3rd or 4th forum I have posted on looking for help. The site is www.bennettspainting.com Best Regards, Aetrox In the new website I am building, I have one line that displays at the top of the page out of place. It is similar to 2 other pages that are coded correctly. I think the best way to describe it is for you to take a look. NOTE: ALTHOUGH PAGES ARE .PHP, THEY ARE JUST HTML FILES WITH PHP EXTENSION, SOME PHP IS GOING TO BE IMPLEMENTED IN THE FUTURE BUT THERE IS NONE YET. Page that is wrong: www.heartlandcustom.com/greenproducts.php Similar correct pages: www.heartlandcustom.com/residentialproducts.php www.heartlandcustom.com/commercialproducts.php Code: HTML Code: <!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> <title>insidecontent</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; } --> </style></head> <body bgcolor="#587652"> <!-- DO NOT MOVE! The following AllWebMenus code must always be placed right AFTER the BODY tag--> <!-- ******** BEGIN ALLWEBMENUS CODE FOR greentext ******** --> <script type='text/javascript'>var MenuLinkedBy='AllWebMenus [4]',awmMenuName='greentext',awmBN='DW';awmAltUrl='';</script> <script charset='UTF-8' src='greentext.js' type='text/javascript'></script> <script type='text/javascript'>awmBuildMenu();</script> <!-- ******** END ALLWEBMENUS CODE FOR greentext ******** --> <!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag--> <!-- ******** BEGIN ALLWEBMENUS CODE FOR residentialtext ******** --> <script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="residentialtext",awmBN="730";awmAltUrl="";</script> <script charset="UTF-8" src="residentialtext.js" type="text/javascript"></script> <script type="text/javascript">awmBuildMenu();</script> <!-- ******** END ALLWEBMENUS CODE FOR residentialtext ******** --> <!-- ******** BEGIN ALLWEBMENUS CODE FOR menu ******** --> <script type='text/javascript'>var MenuLinkedBy='AllWebMenus [4]',awmMenuName='menu',awmBN='DW';awmAltUrl='';</script> <script charset='UTF-8' src='menu.js' type='text/javascript'></script> <script type='text/javascript'>awmBuildMenu();</script> <!-- ******** END ALLWEBMENUS CODE FOR menu ******** --> <!-- ImageReady Slices (insidecontent.psd) --> <table id="Table_01" width="781" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"><img id="insidecontent_01" src="images/insidecontent_01.jpg" width="780" height="97" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="97" alt="" /></td> </tr> <tr> <td colspan="4"><div align="center"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="711" height="350" id="CoffeeCup" align="middle"> <param name="movie" value="myalbum3.swf"/> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="salign" value="lt" /> <param name="bgcolor" value="#ffffff" /> <embed src="myalbum3.swf" quality="high" bgcolor="#ffffff" width="711" height="350" name="CoffeeCup" scale="noscale" salign="lt" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <p> </p> <p> </p> <p> </p> <p align="left"> </p> </div> <span id='awmAnchor-greentext'> </span></td> <td rowspan="5"><img id="insidecontent_03" src="images/insidecontent_03.jpg" width="47" height="653" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="575" alt="" /></td> </tr> <tr> <td id="awmAnchor-menu"></td> <td colspan="3" rowspan="2"><img id="insidecontent_05" src="images/insidecontent_05.jpg" width="193" height="40" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="35" alt="" /></td> </tr> <tr> <td rowspan="3"><img id="insidecontent_06" src="images/insidecontent_06.jpg" width="540" height="43" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="5" alt="" /></td> </tr> <tr> <td rowspan="2"><img id="insidecontent_07" src="images/insidecontent_07.jpg" width="20" height="38" alt="" /></td> <td><img id="insidecontent_08" src="images/insidecontent_08.jpg" width="121" height="22" alt="" /></td> <td rowspan="2"><img id="insidecontent_09" src="images/insidecontent_09.jpg" width="52" height="38" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="22" alt="" /></td> </tr> <tr> <td><img id="insidecontent_10" src="images/insidecontent_10.jpg" width="121" height="16" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="16" alt="" /></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html> Thanks, Anders Can someone help me. If you go to ColinQuinn.Net, you can see all the text is in one column under the pic. I want to get the text to the right of the photo, and proceed the text all the way across in normal form. If I paste it to word, it comes out fine. I dont understand whats wrong with it. Thanks. Hi, when I save a word doucment as a html, the Alignment moves from centered to Left alignment. Is this normal? Can i stop this from happening? I am a basic user of a PC. Thanks. SD Hi. The pictues on my nav ber have shifted to the left about 40 px. How do I get them to be centerd? (The nav bar is basically the only thing I have on the page..) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <head> <title>Lithium Games</title> <style type="text/css"> body { background-color : #D0D0D0 ; color : #000000; text-align : center; margin-top : 10px; vertical-align : middle; background-image: url("http://lithium-games.com/pic/BG.png"); background-attachment: fixed; background-repeat: repeat-x; } #content { width : 80%; margin-right : auto; margin-left : auto; margin-top : 30px; border : 2px solid #000000; background-color : #ffffff; padding : 5px; text-align : center; } #nav { width:240px; height:33px; margin:0px auto; list-style-type:none; } #nav li { margin:0 2px; float:left; display:inline; } #nav img { float:left; } </style> </head> <body> <div id="content"> <p> <img src="http://lithium-games.com/pic/LG_Logo.gif" width="126" height="116" border="0" ALT=""> <br /> <img src="http://lithium-games.com/pic/Line.gif" width="400" height="2" border="0" ALT=""> <ul id ="nav"> <a href="http://google.com" onmouseover="document.B1.src='http://lithium-games.com/pic/H_2.bmp'" onmouseout="document.B1.src='http://lithium-games.com/pic/H_1.bmp'"> <img src="http://lithium-games.com/pic/H_1.bmp" width="80" height="33" border="0" ALT="" name="B1" /> </a><a href="http://google.com" onmouseover="document.B2.src='http://lithium-games.com/pic/G_2.bmp'" onmouseout="document.B2.src='http://lithium-games.com/pic/G_1.bmp'"> <img src="http://lithium-games.com/pic/G_1.bmp" width="80" height="33" border="0" ALT="" name="B2" /> </a><a href="http://google.com" onmouseover="document.B3.src='http://lithium-games.com/pic/F_2.bmp'" onmouseout="document.B3.src='http://lithium-games.com/pic/F_1.bmp'"> <img src="http://lithium-games.com/pic/F_1.bmp" width="80" height="33" border="0" ALT="" name="B3" /> </a> <img src="http://lithium-games.com/pic/Line.gif" width="400" height="2" border="0" ALT="" style="position:relative; left:0px; top:+100px;"> </ul> </p> </div> </body> </html> I'm having trouble getting my image to line up right. Here's what I want out of it: I want that white textbox to be up by the links, but every time I try, it makes the link images jump all over the place. Here's the code: Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Website Test</title> </head> <body style="background-image: url(http://www.freewebs.com/aquafloe/images/wariobg4co.gif);"> <img style="width: 755px; height: 120px;" alt="" src="http://www.freewebs.com/aquafloe/images%5Cbanner.png"><br> <a href="index.htm"><img style="border: 0px solid ; width: 150px; height: 36px;" alt="" src="http://www.freewebs.com/aquafloe/images%5Chome_norm.jpg"></a><br> <br> <a href="pics.htm"><img style="border: 0px solid ; width: 150px; height: 36px;" alt="" src="http://www.freewebs.com/aquafloe/images%5Cpics_norm.jpg"></a><br> <span style="text-decoration: underline;"><br> <a href="videos.htm"><img style="border: 0px solid ; width: 150px; height: 36px;" alt="" src="http://www.freewebs.com/aquafloe/images%5Cvideos_norm.jpg"></a></span><br> <br> <img style="width: 460px; height: 115px;" alt="" src="http://www.freewebs.com/aquafloe/images%5Ctextbox.png" hspace="200"><br> <br> <br> <br> <br> </body> </html> Is there any easy fix, or another way to get the same thing? Thanks. i know this question has probably been asked 10000 times, but, how do i align an image so that it will be in the center of the entire page (like dead center) -------|------- -------|------- -----img----- -------|------- -------|------- I have my sidebar to the bottom center. I want it to the left of my content. l-------------l ----------------------------------------------------------------- l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l------------ l l----------------------------------------------------------------l That's what I want it to look like. Here's my code right now; <center><TR height=*> <TD bgcolor=2f2f2f valign="left"><font color=eaeaae> <CENTER> <BR><BR> <TABLE border=0> <TR width=25%><TD bgcolor=green><CENTER><FONT SIZE="+3"><A HREF="index.html">Home</A></FONT></CENTER></TD></TR> <TR><TD bgcolor=darkgreen><CENTER><FONT SIZE="+3"><A HREF="characters.html">Characters.</A></FONT></CENTER></TD></TR> <TR><TD bgcolor=green><CENTER><FONT SIZE="+3"><A HREF="mguide.html">Mission Guide</A></FONT></CENTER></TD></TR> <TR><TD bgcolor=darkgreen><CENTER><FONT SIZE="+3"><A HREF="contact.html">Contact</A></FONT></CENTER></TD></TR></center> </CENTER> </font></TD> <TD valign="left"> Hello all, I am having a problem which I can't seem to figure out with an html page. I sliced up a photoshop image then turned it into a web page. I took the html table from the sliced up header, and plugged it into the final web page. It looked like it was aligned properly in Dreamweaver, however when I viewed the webpage there were some alignment issues with the page. Here is the link to the misaligned page: http://test.gridpointpm.com Here is the code for part of the index page that includes the header with the alignment issues: Code: <!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> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="layout.css" rel="stylesheet" type="text/css" /> <script src="maxheight.js" type="text/javascript"></script> </head> <body id="page1" onload="new ElementMaxHeight()"> <div class="w"> <div class="site_center"> <div class="site_center1"> <div id="header"> <div class="flash"> <!-- Save for Web Slices (indexheader.psd) --> <table id="Table_01" width="866" height="441" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="13"> <img src="images/index_01.jpg" width="866" height="66" alt=""></td> <td> <img src="images/spacerh.gif" width="1" height="66" alt=""></td> </tr> <tr> <td colspan="13"><img src="images/index_02.jpg" width="866" height="206" alt="" /></td> <td> <img src="images/spacerh.gif" width="1" height="206" alt=""></td> </tr> <tr> <td colspan="7" rowspan="2"> <img src="images/index_03.jpg" width="632" height="114" alt=""></td> <td colspan="5"> <img src="images/index_04.jpg" width="157" height="34" alt=""></td> <td rowspan="6"> <img src="images/index_05.jpg" width="77" height="169" alt=""></td> <td> <img src="images/spacerh.gif" width="1" height="34" alt=""></td> </tr> <tr> <td colspan="5" rowspan="2"> <img src="images/index_06.jpg" width="157" height="95" alt=""></td> <td> <img src="images/spacerh.gif" width="1" height="80" alt=""></td> </tr> <tr> <td colspan="5"> <img src="images/index_07.jpg" width="360" height="15" alt=""></td> <td rowspan="3"> <img src="images/index_08.jpg" width="180" height="40" alt=""></td> <td rowspan="4"> <img src="images/index_09.jpg" width="92" height="55" alt=""></td> <td> <img src="images/spacerh.gif" width="1" height="15" alt=""></td> </tr> <tr> <td rowspan="3"> <img src="images/index_10.jpg" width="153" height="40" alt=""></td> <td> <img src="images/index_11.jpg" width="42" height="16" alt=""></td> <td rowspan="3"> <img src="images/index_12.jpg" width="9" height="40" alt=""></td> <td> <img src="images/index_13.jpg" width="58" height="16" alt=""></td> <td rowspan="3"> <img src="images/index_14.jpg" width="98" height="40" alt=""></td> <td rowspan="3"> <img src="images/index_15.jpg" width="31" height="40" alt=""></td> <td> <img src="images/index_16.jpg" width="44" height="16" alt=""></td> <td rowspan="3"> <img src="images/index_17.jpg" width="7" height="40" alt=""></td> <td> <img src="images/index_18.jpg" width="55" height="16" alt=""></td> <td rowspan="3"> <img src="images/index_19.jpg" width="20" height="40" alt=""></td> <td> <img src="images/spacerh.gif" width="1" height="16" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/index_20.jpg" width="42" height="24" alt=""></td> <td rowspan="2"> <img src="images/index_21.jpg" width="58" height="24" alt=""></td> <td rowspan="2"> <img src="images/index_22.jpg" width="44" height="24" alt=""></td> <td rowspan="2"> <img src="images/index_23.jpg" width="55" height="24" alt=""></td> <td> <img src="images/spacerh.gif" width="1" height="9" alt=""></td> </tr> <tr> <td> <img src="images/index_24.jpg" width="180" height="15" alt=""></td> <td> <img src="images/spacerh.gif" width="1" height="15" alt=""></td> </tr> </table> <!-- End Save for Web Slices --> </div> </div> Any help would be much appreciated. Thanks in advance. im not sure if this is an issue with html or css but im i have 3 columns in a table of 1 row and im using css to assign a background image to the table columns and the 1st and 3rd column will not top align the background image properly to line up with the background image of the 2nd column (or possibly its the 2nd not lining up with the 1st and 3rd) i will link to the site and post the affecting code here (you can view source on the page to see the html) http://www.wiffleague.com/main.php Code: td.mainBoxTitle { background-color: #4d6066; background-image: url('../images/topmiddleedge.png'); background-repeat: repeat; background-position: top left; background-attachment: fixed; font-family: Geneva, Verdana, Tahoma; color: #000000; font-size: 8pt; text-decoration: none; font-weight: bold; border-left: 0px; border-right: 0px; border-top: 0px; border-bottom: 0px; } td.mainBoxTitleLeft { background-color: #4d6066; background-image: url('../images/topleft.png'); background-repeat: no-repeat; background-position: top left; font-family: Geneva, Verdana, Tahoma; color: #000000; font-size: 8pt; text-decoration: none; font-weight: bold; border-left: 0px; border-right: 0px; border-top: 0px; border-bottom: 0px; } td.mainBoxTitleRight { background-color: #4d6066; background-image: url('../images/topright.png'); background-repeat: no-repeat; background-position: top right; font-family: Geneva, Verdana, Tahoma; color: #000000; font-size: 8pt; text-decoration: none; font-weight: bold; border-left: 0px; border-right: 0px; border-top: 0px; border-bottom: 0px; } note: the 3 background images in question were sliced off of the same original psd file and exported as png files using the same pixel height per slice (35px) and a 35px width for the left and right image with a 3px width for the middle image I've created a frameset, and on the top frame I have a flash animation, and on the main frame is where my stuff is loaded! The thing is, the top is aligned to center, and the main frame too! but on the main frame isn't aligned with the top one, I think is because of the scrollbar! It aligns between the left end of the browser and the scroll bar instead of the right end of the browser... is there a way to align without the scrollbar?? i can't disable the scrollbar because i need it LoL Hope you understand what I'm saying ... LooL check this link http://black1c3.awardspace.com/ so you can see what i'm saying the two images are not aligned... thanks for your time!! Hi guys, I've created an advert with some affiliate links in that I want to display on my main pages of my website. I have only fairly recently jumped into the world of web design/development so I've probably not made the most efficient page. The advert is layed out inside a table that is 4 columns and 2 rows and everything seems fine when I view that page. Except, when I put this page into my main pages (via an iframe) it shows nearly correctly, but the alignment is slightly off: the second column in is a few pixels down than the others. I have checked the coding over and over to no avail. Is there maybe a reason for this? Or some tips that you could give? I did try yesterday by just copying and pasting the code directly from the advert page to the main pages which require them - but that's a whole new can of worms! The alignment of that attempt was beyond a joke (even then I couldn't work it out...). Many thanks in advance for your ideas. Hi I'm a bit of a newbie to any kind of HTML codes Ive made a Test website so I can try out this piece of software that helps to create mobile web sites using HTML Here's the Website : http://82.45.130.37/atozcouriers/ftp...001/index.html Heres the HTML : http://www.2shared.com/document/XdlY...html?(Password :21) I am using notepad to edit as any web editor messes up the viewing of the website in a Mobile Browser The mobile Browser is Safari on iPad,iPhone or iPod touch My problem only happens on one page , the homepage. It aligns the main body to the right a bit and adds a line I've experimented a bit but as I'm a newbie I'd don't know what to do. Any help would be gratefully appreciated. Thanks keirjohnharry I am having trouble aligning a photo dead-center in a div. Here's a simple breakdown to avoid confusion... <div class="div1"> <div class = "div2"><img src="image.jpg"></div> </div> What I am trying to do is get that image right in the middle of div 1, both vertically and horizontally. Just to give a bit more of an illustration, for argument's sake, let's go by a standard 800px wide and 600px high for div1. The image size could be 400px by 300px. Div2 could be 75% W&H of Div1. I've tried everything I know using CSS and HTML, but I am missing something. All help is appreciated. Thanks, Jake Hello ladies and gentlemen. Im having trouble aligning some buttons i made with an a big image and small image of the like. They need to look like this... http://i217.photobucket.com/albums/c...wayne/main.jpg but currently are out of sync and all stuffed up. I was wondering what i could do to correct he problem and make it like the image above. Thanks in advance Hi all, I'm working on a personal website and I'm stuck on this one little piece of coding. I'm desperate, no one will help me one the forums! Here's my code: HTML: Code: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>owr // home</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <span class="text"><strong>owr</strong> // home</span> <p class="text"><img src="images/block.png" width="20" height="18"></p> <p align=left><a href="index2.html"><img src="images/home.png" width="20" height="57" alt="Home"></a></p><p align=left><a href="music.html"><img src="images/music.png" width="20" height="50" alt="Music"></a></p> <p align=left><a href="pics.html"><img src="images/pics.png" width="20" height="35" alt="Pictures"></a></p> <p align=left><a href="vids.html"><img src="images/vids.png" width="20" height="35" alt="Videos"></a></p> <p align=left><a href="links.html"><img src="images/links.png" width="20" height="50" alt="Music"></a></p> <p align=left><a href="projects.html"><img src="images/projects.png" width="25" height="50" alt="Projects"></a></p> </body> </html> CSS: Code: @charset "utf-8"; .text { font-family: MankSans-medium; } .content { font-family:MankSans-medium; font-size:14px; } .content2 { font-family:MankSans-medium; font-size:16px; } A:link { text-decoration:none; color:#000 } A:active { text-decoration:none; color:#444 } A:hover { text-decoration:none; color:#999; } Images: http://yfrog.com/bfblockfp http://yfrog.com/06homecsp http://yfrog.com/6glinkscp http://yfrog.com/0imusiclkp http://yfrog.com/2opicsdnp http://yfrog.com/63projectsp http://yfrog.com/mzvidsp I need to put content to the right of the image links, but I'm not sure how to separate the links from the content so I don't end up writing text under the pictures. I think I'm being clear but if you need me to expound, please let me know. But I really need some help with this. Thanks a bunch! Matt I have three images which I want horizontal on the bottom of my page. One aligned left, one aligned right, and one aligned center. I am having issues with aligning the center image, it is always just placing itself to the right of the aligned left image and not on the center of the page. If anyone could help me out with the code for an image centered between two others that would be great. Hello folks, I'm trying out some different background images sized 800 x 600, but I'm having trouble getting them to center on the page! The graphic is hugging the right hand side of the screen at a low resolution, and is off center, slightly to the right at a higher res. Here is a url to show you what is happening: http://www.magicalwonders.com/test/ The code is very basic: Code: <body bgcolor="#000000"> <div align="center"><img src="images/background.jpg" alt="background" width="800" height="600"> </div> Not sure what I'm missing out? Any advice would be appreciated. Many thanks, Myles Hello everyone. Im new to forums and am looking for some help my my html. I am having problems with the alignment of my tables. They used to align perfectly but are now being stretched the length of the page. It has to do with my TD somewhere but I can't find it. If you check this code you'll see what I mean. Im not sure what I did but it never had this problem before. Let me know what you guys think. Thanks Hi I have made 2 tables for my home page for content of pages. Each table is two rows The problem is the right column in each table is not height alligned to the left column because there is a uneven amount of links How do I get the right columns to come up heigher and be height alligned because it looks messy? I spent hours looking at all different web pages about tables and could not find this. Does anyone know???????????? Please Help me check it out Here on this page. [url="http://www.great-quotes-powerful-minds.com/"] http://www.great-quotes-powerful-minds.com/ I start with <table width="100%"> <tr><td> put links column1 </td> <td> put links for column2 </font> </tr> </table> Please Help |