|
HTML - Why Does Adding Another Image In A Div Move My Page To The Left?
I have the following Web Page:
Code: <!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> <meta content="en-gb" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> </head> <body > <div style="margin:auto;text-align:center"> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> </div></body> </html> If I add another DIV with an image inside it, the images all move to the left by 8 to 10 pixels. This is the second version of the page: Code: <!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> <meta content="en-gb" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> </head> <body > <div style="margin:auto;text-align:center"> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> </div></body> </html> I have no idea why the page center moves to the left, but it means that I can't get my page banner to appear the same on every page. (I've stripped out all the extra content and codes to just leave the offending images.) I primarily use Firefox, but the same is happening in IE and Opera. Can anybody tell me what's happening? (I apologise if this is a well known, frequently asked question, but I couldn't find an answer and this is driving me up the wall, so any help is appreciated.) Similar TutorialsI've attached the code for a template I'm wanting to use. I want to add a column to the left side of the page that runs the length of the page. Is there anyone out there who can assist me with the code to do that. I'd be exceedingly grateful. I'm afraid I'm table dyslexic. Thanks in advance to anyone who can help. I can't figure out how to script an image so that it slides to another area on the page when clicked on. For example, a logo that appears in the center of a blank page (vertical-align: middle), but when clicked slides smoothly to the top (vertical-align: top). Alternatively, it could be that clicking the image changes the vertical-align property of the entire table or cell. Either way, I can't figure out how to do this with a smooth animation. A fantastic example of this--where I got the idea, in fact--is the front page of tumblr.com, where clicking "Log in" smoothly slides the tumblr logo from the top of the page to the center. How is this done? I'm sorry if the solution is mind-bogglingly simple, I'm kind of a noob. But I've racked the web and I can't seem to find a script that does this. Can somebody please help? Thanks so much. hello the original website is 'http://www.buddysauctions.com/ and when u scroll down you can see that the "Member Login" box is on the left. I wanna move it to the right like me photoshop print screen i know that i have to cut the php code from my php file and create a new php file and put it in but i dont know how to put it exactly where my printscreen shows. thanks a lot for your interest i hope you can help me ) thanks again edit: i also would like to have some empty boxed under the member login so i can put adverts in them edit2: my member login box as you can see in the printscreen PHP Code: <tr> <td><FORM name=loginForm action="login.php" method=post> <div align="center"></div> <table width="262" border=0 align=center cellpadding=5 cellspacing=0> <tbody> <tr valign=center> <?php if(!isset($_SESSION["userid"])) { ?> <td colspan="2" background="http://www.overclock.net/images/bgyell2.gif" class="sideheadingtd" ><strong><img src="http://www.overclock.net/images/squareswhite.gif" width="10" height="12" align="absmiddle"> <font size="2" face="Arial, Helvetica, sans-serif" font color="#ffffff">Member Login</font></strong></td> </tr> <tr valign=center> <td bgcolor="#f5f5f5"> <div align=right><font color="#000000" size="1"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Username</font></strong></font></div></td> <td width="97" bgcolor="#f5f5f5"><font color="#000000"> <input name=UserName class="box1" size="13"> </font></td> </tr> <tr valign=center> <td bgcolor="#f5f5f5"> <div align=right><font color="#000000" size="1"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Password</font></strong></font></div></td> <td bgcolor="#f5f5f5"><font color="#000000"> <input name=Password type=password class="box1" size="13"> </font></td> </tr> <tr align=right> <td colspan=2 bgcolor="#f5f5f5"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="67%"><p class="style2"><a class="insidelink" href="signup.php">:: Signup Now::</a><br> <a class="insidelink" href="lostpassword.php">:: Lost Password ::</a></p></td> <td width="33%"> <div align="left"> <font color="#000000"> <input type="submit" name="Submit" value="Sign In" class="btn"> </font></div></td> </tr> </table></td> <?php }?> </tr> <tr align=right> <td colspan=2> </td> </tr> </tbody> </table> <div align="center"></div> </FORM></td> </tr> Hello. I have text at the top right, "A Site for All Nations to Share their Knowledge!" and I need to move it to the left a bit so its not overlapping the sun image. I appreciate You! Hi there I'm trying to make a website for a friend - http://wwwdev.cfpaddler.co.uk. At the top of the site is a 1x40 pixel (WxH) GIF - a horizontal gradient - that is told to have a width of 100% so that it takes up the entire width of the browser window, regardless of resolution. I want to put a 250-pixel-wide JPEG immediately to the left of this GIF and then make the GIF take up the rest of the space available. I tried setting the GIF width to 100% again but it puts the JPEG on the top line and then stretches the GIF across the entire window just beneath it. I'd be happy to use PHP (although I'm a beginner at it) to maybe detect the user's browser window width (if it's possible?) then perform a calculation to find what 100% width minus 250 pixels is... Any suggestions are very much appreciated; thanks for taking the time to read this. Chris Images in question are http://wwwdev.cfpaddler.co.uk/images/top_border.gif and http://wwwdev.cfpaddler.co.uk/images/top_logo.jpg. Okay I know IE 7 problems are nothing new but being that I am fairly new at this and I am reading everything I can and I am still not catching up with how to correct it. I have the website up on a test server at http://www.vsncom.com/sterling I am working on a mac and the site works fine on IE 5.2 for mac and any other browser. However, IE7 causes a huge shift in the whole page to the left. And a few other elements are slightly shifted as well. The bottom nav is up a little higher than it belongs. The three pictures on the left are shifted further right. And that is all that I get shown when I capture the screen from net render and such. (Please look at attached picture to see what IE7 gives me) So, im not sure what else may be going on. If I can get the whole page to come back to the left then I can address the other issues maybe. But does anyone have any ideas how to do this. Please. I appreciate the help. I have been trying to figure this out for a week now and reading everything I can find online and trying anything I can think of so please save me. Matt How can I place the php form into the html page? Please see the attachment describe what I asking for. thank you. Hi all New to this forum and pretty basic in html But how to i create links at the top of the page to move down the page to certain sections. Regards, Alan Able to handle html sample code Hi. For some strange reason, in my <div class="footer"> and <div class="content"> When I add: HTML SHEET .footer { padding: 10px; background-image: url(images/images1.png); background-repeat: repeat-x; background-position: top; } CSS SHEET .content { padding: 10px; background-image: url(images/images1.png); background-repeat: repeat-x; background-position: bottom; } The padding moves the background images 10px, up or down! Appreciate any help. God bless. In Christ Jesus, Karl. Can someone please help me? How do I move the entire image up on following index page: www.AndyG.com Note that there is a one inch gap between top of computer screen and top of image...I just want to move image way up to top... Thanks a lot! Andy Hi all -- I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide. I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line. I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed. Help! How do I get rid of this white space but still keep the link on the image?? [I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having] Thanks in advance! //kl PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner. CSS: Code: <style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
</head>
Nav Banner: NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space... Code: <body class="oneColFixCtr"> <!-- MAIN NAVIGATION BANNER --> <!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br /> Hello Everyone, i am new to HTML, i am trying to develop my first website. I am using asp.net , C#, HTML, CSS and Visual studio2008 on windows Xp I had a page, in that i moved the tables to center. after moving the tables to center i found the white space on the left and right sides of the page. Now i want to fill the white space which is on the left and right sides of the page with the black color. Can anyone please help me thank you regards john. How can I make the text appear at left bottom... I have 3 taGS RETURNING DATA FROM sql: <p> #TOC# </p> <p> BUSINESS POLICY TRADEMARK REGULATIONS. </p> <p> #Qry.USERSIGN# </p> I want the text from this tag to appear one after other at left bottom: For example: This is basic algebra lesson. BUSINESS POLICY TRADEMARK REGULATIONS. Smith How to do that? Any advise is appreciated.RosieGp Hi, I'm new here but know a little bit about making websites. This one has seemed to stumped me, my webpage he Edit: link removed, problem solved and the other links: Order online, testimonials, about us, and contact us all render exactly in firefox, however my products page gets shoved to the left a couple of clicks for some odd reason. I narrowed it down a bit; it seems as if its only letting me to post a few paragraphs until it does it, meaning i can remove the animation and some paragraphs, and it looks the way i want it, but when I add the paragraphs back even without the slideshow the problem persists. Using expression web 3. Thank You a bunch for your help. I'm just starting to get into HTML / CSS and I had a question I was hoping someone would be able to give me a hand with... The page I'm working on has a logo in the top left corner that gets cut off when the browser window is reduced to a smaller size. The left navigation bar, however, always appears in the browser window, regardless of size. I'd like to have this left side "anchor" to include the logo so that it always appears. Please let me know if you require additional information or if I have not described the issue clearly enough. Thank you! I i open this code in FF i get some padding on the left side of the image which is ok, but when i open it in IE i don't get this padding. Is there any way that I have this padding in IE? thanks Code: <div align="justify"><img src="http://www.site.com/default1.gif" style="padding-left:27px;" alt="Cleveland" align="right" width="152" height="136" border="0" /> <p> Ticketchest.com is the Number One provider of Major League Baseball tickets in the United States. You came to the right place for great Cleveland Indians tickets -- close to the field or anywhere you desire. Ticketchest.com has a huge supply of great tickets to sold-out or hard-to-get Cleveland Indians baseball games. <br> </p> <p>Whether you need group tickets for a professional or corporate outing or just a pair of tickets, The Ticket Chest is your source for the best Cleveland Indians baseball tickets on demand. Also, check into our other Major League Baseball teams. We do the hard work so you can focus on eating peanuts. <br> </p> </div> Hi, My name is Salman im new to this forum. i currently program in asp. But now one of my relative want's me to do some work for his website which has already been developed by somebody but due to some conflict that guy left in between. the site is Utsaveu.com. Now what my Relative needs is he wants some images on the white band on the left of the website. I have managed to create some pages and menu's for him but images on that white band i couldn't. i fiddled with the div tags of the website but always ended up in spoling the orientation. Plzz help me. and plzz reply with what code will be relevant to post for this problem of mine. Hello, I have a simple problem and tried to google but did not get anything much. I want a simple HTML page which had a image aligned absolutely to the right in the middle and touching the scrollbar. Now, I can achieve this by having the image as the body background. However, when I use it in a image tag, it is aligned to the right ut there is space between the scrollbar and image. about a centimeter. Can anyone help.? Please note that there is no text just a image which has a map tag. I just need to align it to the extreme left or right touching the browser. this works great. if I put the no repeat option Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>S</title> </head> <body background ="6.jpg"> </body> </html> however when I use as a regular image there is a gap. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>S</title> </head> <body> <img src = "6.jpg" align = right> </body> </html> Thanks, Sunil Dont know how to explain this but i have some flash centered in the middle of the screen and i would like to put a image that to the left and right of the centered flash im running at 1024x768, i did seem to manage this but when i tried a higher resolution the flash stopped center and the left and right image kept to the left and far right of the screen when what i wanted is the left and right image to stay flush left and right to the centered flash. Below is my code minus the left and right image, could someone help me add a image to the left and right of the centered flash, so even if the resolution is increased the left and right image will stay flush with the centered flash. 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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style></head>
<body >
<table width="770" border="0" align="center">
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="swflash.cab#version=7,0,19,0" tppabs="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="70">
<param name="movie" value="bombay-logo-top.swf" />
<param name="quality" value="high" />
<embed src="bombay-logo-top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="70"></embed>
</object></td>
</tr>
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="swflash.cab#version=7,0,19,0" tppabs="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="400">
<param name="movie" value="main.swf" />
<param name="quality" value="high" />
<embed src="main.swf" main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="400"></embed>
</object></td>
</tr>
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="swflash.cab#version=7,0,19,0" tppabs="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="100">
<param name="movie" value="time.swf" />
<param name="quality" value="high" />
<embed src="time.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="100"></embed>
</object></td>
</tr>
</table>
</body>
</html>
Hi. I can't figure out how to have all the tables on my site aligned to the centre yet have the text in them aligned to the left. In other words I want 2 margins either side of the central body of my site. How can I do this? Thanks. |
|||||||