HTML - Image Displayed Top Left Of Page, Then Stretched Gif Following
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. Similar TutorialsI 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.) I have a problem with one of the pages I am currently working on for a friend of mine, the page looks fine in firefox, however it looks wider than it is supposed to be in IE. The strange part is that the rest of the pages on the site look fine in IE, it is only this one is that giving me a problem. http://steelarmor.net/index-2.html any help would be much appreciated. thanks. Dont know if it is the right forum place I have html links on my web site. These links are to files. Recently when i clicked the link, the file "open / Save" dialogue appears, but now i receieve a page can not be displayed. Right click save as works i.E 7, What could be causing this Regards, Alan the page is displayed well in IE6, IE7, firfox 3, but not in firefox 2 no matter wht is the height of the page it only shows part of it (about 800px height) how can i solve that????? (i'm working locally) thnx in advance :hat: Hey guys, I'm trying to use submit buttons to display different websites in an iframe (or maybe I could use css?) What I'm basically trying to do is display different SQL databases when you click different buttons. So the code in the website in the iframe will just display the database. Thanks hello why does the stretched gif which makes the right-hand column work on this page - http://www.testtracks.com/bios.html get broken when it goes to this page? - http://www.testtracks.com/test.html help very much appreciated, thanks sandy Hi, Quite some time ago I was faced with putting a website together for the first time for a local community group (my wife nominated me!). Rather than tell you all what it contains and how it looks, it is probably easier for me to give you the link which is the Friends of Clifton Park based in South Yorkshire, UK. This website consists of eight html pages. The first is the index, second is the welcome page and the rest are linked pages via links on the left. On every of the "linked" pages, only the main body changes, with the exception of each link showing in Caps and link disabled. The problem I'm having is that every single one of the linked html pages are the same, except the displayed text. 90% is the page set-up. So my question is: Is it possible to "import" the required text information when a link is clicked on straight into the main body of ONE html page? btw, you'll notice that the page height isn't fixed, it expands depending on amount of information in it. I have tried IFRAME but don't really seem to be getting anywhere as I can't seem to make the height auto-adjust. A specified height value has to be entered for each "page". This is no good as more information will be needed to be put on. So basically what I am trying to do is: Keep the index.html Change the welcome.html to display the main page (graphics/images, etc) Import text into main body into the welcome.html page when a link is clicked on. Thus reducing the need of duplicate html pages and just having text files containing the main body text. The main reason for wanting to do this is a) stop all the duplication of page set-up in each html file, and b) make it easier for the guy that wants to add information where needed, straight into notepad (txt file) and upload it to the website. I hope all the above makes sense and if anyone requires further information, I will only be to happy to provide it! Thank you. I think I have the same problem, I am setting up a site offering bands a personal page on a local music scene website. the band's page is displayed in a frame when I have created a page for the band i want to offer them a url to directly link to their page but still show the entire frameset (index.html) what would this url be or how woul i go about creating it? would really appreciate the help, cheers! Luke 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 I'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. 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. 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! 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. 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 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. 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. I have a left menu column but it's not stretching down the length of the page. The page is quite long and when the links are finished on left column it just ends and as it has abackground colour it looks a little strange. It is floated left and the main_section is also floated left. It is the main section div that is long. I was thinking because this is in a div that the left coumn is also in that the left column would therefore stretch to the length of it's parent div. Any ideas? http://absolute-websites.com/services.html is the link so you can see what I'm talking about. Here is a section of the HTML : HTML Code: <div class="left_column"> <div class="breadcrumb"><p><a href="index.html">home ></a>services</p></div> <div class="icons"><p><a href="services.html#websiteProduction"><img src="images/webIcon-01.png" title="web building" alt="web building icon"/></a></p></div> <div class="icons"><p><a href="services.html#hosting"><img src="images/hostingImgIcon-01.png" title="Hosting & Domain Names" alt="Hosting & Domain Names icon"/></a></p></div> <div class="icons"> <p><a href="services.html#seo" ><img src="images/seo2Icon-01.png" title="Search Engine Optimisation" alt="Search Engine Optimisation icon"/></a></p></div> <div class="icons"> <p ><a href="services.html#marketing"><img src="images/advertsIcon-01.png" title="Marketing" alt="marketing icon"/></a></p></div> <div class="icons"><p ><a href="services.html#design" ><img src="images/designImgIcon-01.png" title="Design" alt="Design icon"/></a></p></div> <div class="icons"> <p ><a href="services.html#photo" ><img src="images/photoIcon-01.png" title="Photoditing" alt="Photoediting icon"/></a></p></div> <div class="icons"> <p><a href="services.html#video" ><img src="images/videoIcon-01.png" title="Video Production" alt="Video Production icon"/></a></p></div> </div> <div id="main_content" class="fl"> <h1 class="h1SecHead" >>SERVICES</h1> Hello everyone. I am having the worst time trying to figure this one out. I created a site for a hair salon and every time the page loads for the first time, it jumps from right to left. Does anyone know why it is doing this? There is an example link below. Thank you so much for taking the time to read this. http://www.erizzo.net/studiod/index.html |