|
HTML - Web Page Shifting With An Image
Hi,
I have a problem which I can't seem to sort out at all. When I add an image to a website page which I am trying to create the page shifts about half a centimetre to the left. The page can't be getting wider, as the grey fading off sections on the left and the right are one image (which is around 800x1 pixel in size), so things such as the blue navigation bar would start to overlap the grey image if it was doing that. All the other (so far blank) pages on the website all stay in the same place. I just think it looks bad when you are browsing when the page shifts - especially if more pictures end up on further pages, and so every time you click onto a new page it shifts to a new area of the screen! Has anyone else had this problem before and know any way of resolving it? Kind Regards. Matt Similar TutorialsI'm building a webpage for this nonprofit company and after moving data over from the old website to my newly created site it looks fine in Firefox but shifts halfway down the page. I am using dreamweaver to make the site. any ideas why? Here's a sample of what I mean: http://www.doornetwork.org/test/s_week.htm other pages look fine like this: http://www.doornetwork.org/test/miami.htm the original site has them set correctly like this: http://www.doornetwork.org/d_week.htm I didn't make the old site and am a relatively amateur website maker. Any help would be grateful. edit: a few friends have confirmed it looks right in Opera and IE7 Hello, I am building a website for a local organization from an HTML template, and am having issues with images shifting to the right in IE, Firefox and other browsers on PC. I am working on a Mac and the images appear as they should on Mac browsers, but are shifted a few pixels to the right on PC browsers. Changing the pixel alignment from top and left of the page doesn't solve my problem because then the images will appear too far to the left on a Mac. Here are examples of two pages. Everything else appears as it should on PC browsers, except for the images. http://www.chuffed.ca/BIAWebsite/renaissance.html http://www.chuffed.ca/BIAWebsite/events.html Thanks in advance for any ideas that might be able to help me out... I am working on http://kintetaylor.com/smc/ The site displays fine in Firefox and Safari but in Internet Explorer (the bane of my existence) everything is shifted down This is how it should look. Can anyone tell me what is going on? I'm having some trouble with my site. Some images at the bottom are shifting when using IE. On Safari, it looks fine. Just wondering if anyone can help... Here is the site: http://www.ballermag.com/ and here is the code: <td width="100" valign="top"><a href="http://www.ballermag.com/blog/?cat=40" target="_blank"><img src="img/duzzblog.jpg" alt="Duzzyduzz" width="100" height="66" hspace="5" align="left" border="0" /></td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td valign="top" class="video01"></td> </tr> <tr> <td valign="top"><span class="style4">■■■■■■■■</span></td> </tr> </table></td> </tr> </table></td> <td><table border="0" cellspacing="0" cellpadding="3"> <tr> <td width="100" valign="top"><a href="http://www.ballermag.com/blog/?cat=21" target="_blank"><img src="img/jessblog.jpg" alt="J-Dimes" width="100" height="66" hspace="5" align="left" border="0" /></td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td valign="top" nowrap="nowrap" class="video01"></td> </tr> <tr> <td valign="top"><span class="style4">■■■■■■■■</span></td> </tr> </table></td> </tr> </table></td> <td><table border="0" cellspacing="0" cellpadding="3"> <tr> <td width="100" valign="top"><img src="img/what.gif" alt="Who's next?" width="100" height="66" hspace="5" align="left" border="0" /></td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td valign="top" nowrap="nowrap" class="video01"></td> </tr> <tr> <td valign="top"><span class="style4">■■■■■■■■</span></td> </tr> </table></td> This is really strange. Normally I would expect to see something like this happening on pure CSS sites, but this is a good old fashioned table-based layout. If you go to: url and try to click on any of the menus, you'll see the menu item below it moves up. Also if you click on the logo it jumps down to the menu area? Very bizarre and have never seen this behavior in the 10 years I've been coding. Any insight would be greatly appreciated :-) the title makes it sounds really confusing. Ok im making my first website, and i need help with a code, (as you can see on www.dalekblaster.co.uk) i have got a section at the top where the images change from one to another. The code is - HTML Code: // Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 5;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'http://www.dalekblaster.co.uk/images/banner/dalekblasternexttime.jpg'
Pic[1] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster2.jpg'
Pic[2] = 'http://www.dalekblaster.co.uk/images/banner/dalekblastersjanexttime.jpg'
Pic[3] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster.jpg'
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
Now i need help because, i want to link each picture on the slideshow to a differnet page or external site, but im not sure how. (but so they can go to different pages not the same one) can anyone help me? let me start a new page please, can I position an image anywhere I feel like on a page please? I use divs but is there a way to this with divs and without divs or with or without CSS? hello, i am just learning html and creating my own website right now. i ran into a problem and would like some help. what i want to do is this. i created a page with pictures about 200x200 in size. now what i want to do is when you "click" onto the picture have it open up in a new window and a Larger size. But there is more. I would like to have the new window have my page Banner on top and my background Color around the image. I already know how to use a code that Will enlarge the image in a New window but that is all it is is just the image and plain white background. and not what i want to do. So what are my options for the easiest method to do what i am thinking of above. Any help is appreciated. Hi Team, I placed this html code into my web editor by first uploading and saving the image as a .png file. Here is the code I used: <a href="http://www.awin1.com/cread.php?awinmid=2208&awinaffid=107642&clickref=&p=http%3A%2F%2Fwww.1staudiovisual.co.uk%2Fcatalog% 2Fsamsung-ue46b7020ww-inch-p-7066.html"><img src="1stAudioVisual.png" alt="IstAudioVisual.png" title="Samsung UE46B7020WW" /></a> As you can see I put the img src in the same way that I saved it in my files..When I go to the page it comes up without the image and just says what's written in the alt section How do I get the image to show up? Thanks. Sunil. Hi guys, Ive got an html page, and need to run a banner like image right over the whole page. Is this possible? What kind of code would I need? looking forward to your reply. B I recently created a wordpress blog but I would like the visitors to come to a landing page before they reach the blog. This is the type of landing page I am looking for: http://creativetime.org/index.php - An image - The title of our site. When you click on it, you enter the blog - Credits at the bottom of the image. I have basic html knowledge. I browsed html tutorials but don't seem to find a solution. Any ideas? Thank you. So my question is simple and easy. I already have knowledge of how to make a image link you to a web page. but I recently found the need to make a image link you to a webpage but not in a new window (what I mean is not open up a new browser window or tab when the image link is clicked.) how do I do this? Below is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>One Nice Day</title> </head> <body> <div style="margin:5% 15% 0 15%;border:1px solid black;"> <img style="border:1px solid green" src="http://www.oneniceday.com/Artwork/Notice.gif" alt="[One Nice Day] now contains nudity : photographs and drawings of nude men and women, of which I will be posting on this site solely for the purpose of learning figurative art, in which I am using them as learning references / aids. If you are offended by such images, please click the Back button on your browser." /> </div><br /><br /> <div style="margin:1% 15% 0 15%;font:14pt 'Trebuchet MS',Arial,sans-serif;text-align:center;"> <a href="http://www.oneniceday.com/wordpress/" style="font-weight:bold;">ENTER</a> </div> </body> </html> When I view my web page, the <div> doesn't shrink to fit the size of the image, and there's a huge gap next to the image. U can see the result at www.oneniceday.com How do I center my image horizontally on the page? Thanks! Hope someone can help me please... I'm trying to find the best way to place an image slideshow (continual loop, no stopping etc) on my home page. I've tried a few what look like good JavaScript versions, which I cannot get to work properly - seem to conflict with other JavaScripts running on the same page. Does anyone have any ideas? Or is there a way to do this without using JavaScript (or Flash)? I'm using Joomla CMS if that helps/makes a difference... Thanks in advance! Hello, I am a newbie to HTML. I am trying to generate HTML code as a basis to an email. I wish to have a image at the top of the page (page wide 780 pixels) two lines in the sides (based on colored line image) and an image at the button. My problem is: how can I add an image to the left side and the left side of the body part and add text/tables/images etc. between them so it's length will dynamically shorten/lengthen according to the body number of lines ? Thank you for your help Hi, Recently i have designed a site on my personal Dell laptop. The screen width of my laptop is more than the length. I have kept the logo on the header side of the page, in my laptop everything looks fine, but when i see it in a desktop or any other computers the image or logo is looking aukward. When i see the same page at different laptops or desktops where the screen widths are more than the lenghts the image looks fine. Here i am attaching the page which shows the logo. Please find the code below which references a image(logo) in the page. Could any one please check this and let me know the reasons for this kind of look. Regards, Vikram <TD width="40%"> <TABLE cellSpacing=0 cellPadding=0 width=209> <TBODY> <TR> <TD bgColor=#0295e5> </TD></TR> <TR> <TD align=middle><A href="http://eastyconsultants.com/index.html"><IMG height=150 alt="Easty Consultancy Services" src="images/logo.gif" width=339 border=0></A></TD></TR></TBODY></TABLE></TD> <TD width="60%"> <TABLE cellSpacing=0 cellPadding=0 width=209> <TBODY> <TR> <TD class=toplinks style="PADDING-RIGHT: 2px" align=right bgColor=#fb6c00 height=20><IMG height=8 alt="" src="images/contacttop.gif" width=12> <A class=kk3 href="http://eastyconsultants.com/contactus.html">Contact Us</A> | <IMG height=8 alt="" src="images/sitemaptop.gif" width=10> <A class=kk3 href="http://eastyconsultants.com/sitemap.html">Sitemap</A> </TD></TR> <TR> <TD align=middle> <IMG height=152 alt="" src="images/aboutus_img.jpg" width=479> </TD></TR></TBODY></TABLE></TD></TR> Hello Everyone, I've a gif file that I want to display on my jsp page. The file is located on the server If I give something like <img src="\\filer\home\mine\myimage.gif" alt="not found" title="Image"> then "not found" is shown on jsp page I even moved the image to my c: dir and tried this <img src="C:\myimage.gif" alt="not found" title="Image"> but that didn't worked either. Can someone please tell me where am I supposed to put the image file. Thanks. Hello, I'm experiencing a small but annoying problem. My html form works fine when the submit button is an "ugly grey button" (input type=button), but when I try changing the button to show a nice jpg (input type=image) the form still submits ok, but the page always jumps to the top. This is annoying, because people should be able to scroll down through the page, click the button, and continue scrolling down to the next button. Many thanks in advance for any helpful explanations or hints! Simon 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. Hi There Guys, I have a problem! Ive added a background to my site that I want to appear like so fixed center no-repeat. You can see the code below. But for some reason it doesnt line up with the top of my site. It is being pushed down a whole 108px??? You can see from the site how this looks... www.hogansfarm.ie/index.php. To be honest its my first time using fixed center no-repeat so im hoping someone else might have hand this issue and may know whats wrong. You can see the the image there should be no gap http://www.hogansfarm.ie/images/stripe_wide.jpg Thanks for your help! Kat body { background: #1f1e1e url(http://www.hogansfarm.ie/images/stripe_wide.jpg) fixed center no-repeat; color: #000000; font-family: arial, helvetica, sans-serif; font-size: 100.1%; padding: 0px; text-align: center; margin: 0px; padding: 0px; } |
|||||||