|
HTML - Stretch Images
Hello, I just sliced a website template and i was wondering how i get it so the images stretch all the way across the screen instead of it showing the background. http://www.legouniverseforums.com/blowupreviews.html here is the link to it if you would like to edit my code that would be great. All help appreciated.
Similar TutorialsHi, I have a fixed width and height images <img width="200" height="300" src ... /> and several images of different size. How can I avoid to stretch the images and just crop them ? thanks Hi Don't know if this is the correct forum, but I will add it here. I am doing a new site, and trying my best to get it working in IE6. Everything is going OK with the set up so far. However, I have to use PNGs for a drop shadow. (if anyone knows a better way, btw, that works in IE6, please tell me :-) ) Anyway, all the positions, etc are correct and they become transparent. The issue is they seem to be getting a larger vertical size than they should have. You can see this on the top corner shadow, as it overlaps the one below. Test Page Is there a cure for this? Can anyone help? Thanks in advance I'm trying to get into the grip of using CSS and what not. I know, I'm so way behind.... anyway, I have a master page and the first header content will have an image. I want the image to be indented about 20% in from the left, and I have done this using the css padding-left. That's cool The next concern is the image itself. is there a way for it to maintain some what the quality even when stretching it? So I have an img tag, and given it a fixed width and height for an image. of course, looks odd but I am trying to get some nice images in the header at random when loadtime. so.... is there a way to maintain the quality perhaps? Or maybe I am doing this all wrong? Hi, I'm making a website template, and I'm about finished. I'm having trouble though, I want the table on the bottom right, the "MAIN" table with content saying "MAIN" to stretch 100% so even if the typing doesn't reach the end of the table, it will still stretch, and I have no Idea what wrong. Any help would be appreciated. the full code is attachted im trying to stretch a image for the top of my page here is a code i saw on another page that was working but i cant get it to work for me and i cut / paste it, so i cant figure this out... heres the code i used... im confused why its a background = when its only the top background on his page... i just wanted this to be the top banner of my page and have it stretch acording to the viewers screen size, any help would be great... <tr class=td2><td class=td2;align="center" colspan="2"> <table border="0" cellspacing="1" width="100%"> <tr> <td width="100%" background="banner-top.JPG"> <table border="0" cellpadding="0" cellspacing="0" width="100%" bordercolor="#FFFFFF"> <tr> <td width="100%" background="banner-top.JPG" height="80"> <p align="center"><font color="#FFFFFF" size="3" face="Arial"><b> </b></font></td> <font></td> Hi guys, Ok, i have dreamweaver 4, yes i know its and old version but it works for me. The question i have is proberly a simple solution for you guys but its been giving me a headache for ages. i want to create a webpage that will auto stretch to meet the users screen size when viewed from the web. Now i beleive its somthing to do with putting % in a table instead of numbers for the size? Ok, that bit i get, so let me ask in a little more detail. when i open dreamweaver 4 up, the 1st thing i do is create the main area for my content, in dreamweaver 4 this is defined by showing a green bordered box... Now is it this box area that i make sure to put the % figures in before i continue to then add more areas for content inside the main box so that the webpage when finished will auto stretch to any screen? Or do i have to % all the other areas i create withing the main webpage area too? regards Gary Hi guys, It's my first time on these forums, and I thought you all would be the best help I could get for my HTML problem. I've just recently created a blog and I am currently using a custom template. I'm not too familiar with HTML, or any sort of coding really, and I would like to stretch the content area of the template so that I could place larger images without it overlapping the grey bars. I have no idea what values to change though or what I should be looking for. Could you guys help me out? Many thanks, AciesEdge I want to know how to make a div stretch to the full height of a container! Here is the 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>This site is currentely out of order! Chack back later.</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container" style="display:block"> <div id="leftside" style="display:block"><img src="images/leftside.gif" alt="" /></div> <div id="logo" style="display:block"> <img src="images/logo.gif" alt="" width="315" height="140" title="" /> </div> <div id="content" style="display:block"> <br /> <br /> <br /> <br /> <br /> <br /> </div> </div> </body> </html> And then the css: Code: /* START - Master */
div {display:none} /* Keep NO MATTER what - Keep at top */
body {background-color:#000000; background-image: url('images/watermark.gif'); background-repeat: no-repeat; background-attachment: fixed}
#container {width: 85%; margin-left: 7.5%; background-color: #666666; color: #030303}
#leftside {float: left; min-height: 100%; height: 100%; background-image: url('images/leftside.gif'); background-repeat: repeat-y}
/* END - Master */
/* START - Header - No change */
#logo {width: 85%; margin-left: 7.5%; background-color: #7B7B7B; text-align: left; font-size:15pt; border: none}
/* END - Header - No change */
/* START - Content */
/* END - Content */
/* START - Footer - No change */
/* END - Footer - No change */
The "leftside" image is supposed to be the full length of the header + content. Thanks! I made some slices in photoshop to manage the links from Front Page but the links look like this.Check the photo... any one knows what shall i do ? Hi There, Pulling my hair out over this. For the life of me, cant make it work: http://www.cowboytuffwebsitedesign.c...cialdeals.html I've used positive padding negative margin to stretch both div's heights to match each other. But the content div, when needed to be higher than the menu div, will overflow its content past the container divs bg. As well the footer will only clear past the menu div, not the content div. HELP! PLEASE! I can copy and paste HTML right into the thread if needed. Thanks Hi Everyone, I'm slightly confused by this one. But i'm sure theres a hack out there to fix it. Basically, in firefox and konqueror, running on kubuntu, the top navigation bar at http://www.tendervendors.com/dev/payroll.html displays correctly, and when you hover over it, it fills the li with a semi-opaque background. This is correct. Its done, by filling the a element, with a background-color and then applying opaque: 0.5; The a element also has padding, which makes it fill out to the size of the li element, so the a element fills its portion of the ul, and looks like the li has the affect applied to it. However, in opera, the right and left padding is correct, but the height padding doesn't work. Does anyone know of a bug in opera that would be causing this problem, and possibly a code fix for it? TIA Matthew Millar ok i found a website i registerd got my domain and i uploaded my website my index.html and all the other files and i added all my images but wen i look at my site the images do not appear its just the blank site with text what do it? Hi My site is at www.bigbadroo.com.au/dht/index.php It's looking ok in most browsers at the moment, but I have a couple of questions: 1) why is ie6 cutting off and repeating the background images? 2) why is ie6 putting big red crosses and borders on my three main button images? 3) how do I get the DIV box1 to extend all the way to the top of the screen in IE6 and IE7? Thanks for your time and help guys. Shaun Hi, im new to this so sorry for my lack of knowlage. Anyway, I have made a new directory on my website to house our gaming reviews I have copied exactly the same image directorys that work on our main directory in there and the images show up when previewing on my pc but not when i upload to the web, also appartnly no images or styles work in IE? www.gameoracle.co.uk help much appriciated I'm currently in the process of rebuilding my website and I'm having some trouble. I'm looking to get the page to look like this: http://img170.imageshack.us/img170/5833/designwh9.png This is what I'm at right now: http://www.bclw.ca/content/index2.html The buttons (unlike in the image design) are not touching each other. Is there a way to do this only using HTML? Or am I going to have to purchase one of those Website Design programs? Thanks for any help you can give! Can't seem to find the discrepancy within the code. All the image files are in the same location. As stated in the title, some images appear and some do not. http://webpages.charter.net/projects...vertmedia.html Thanks for you help, -=Devil Duck=- Hi, I currently have a bit of a problem, you can see for yourself at http://el-nath.net/forum Notice that all the images are around 3-4 pixels off their place that they're supposed to be at. Can someone please view the source code and give me a solution? Greetings, I just recently started learning HTML and I am currently taking an HTML class in my college. One of my assignments was to create a web page with a certain amount of requirements but for some reason my teacher was not able to view the pictures when she tried to look at my assignment. Can someone please take a look at my source code and let me know what is wrong with it? <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Internet Security</title> <style type="text/css"> h1 {text-align: center} h3 {text-align: center} body {background-color: #FFEBCD} </style> </head> <h1>Security and the Internet</h1> <body> <p>Internet Security has become vital in today's society. With the imposing attempts to breach other computers, it is important to have good anti-virus software. Viruses can come in many different types. First and foremost are your standard <em><strong>trojan viruses</strong></em>. These viruses are used to steal passwords so the hacker can attempt to gain pertinent user information. Another form of a virus is a <em><strong>boot virus</strong></em>. A boot virus infects floppy disk or master boot records on a hard drive. They replace the boot record program (which is responsible for loading the operating system in memory) copying it elsewhere on the hard drive or overwriting it. Boot viruses load into memory if the computer tries to read the disk while it is booting.<hr /></p> <h3>Other Types of Security Dilemmas</h3> <p>Other security problems that are slowly rising include wireless network hacking. In this particular method of breaching, the perpetraitor attempts to steal a wireless connection by using DOS (denial of service attacks), man in the middle, Identity theft or MAC spoofing and sometimes, caffe latte attacks. The most frightening part of this type of breach, or any for that matter is the hackers ability to gain personal information by using the aforementioned methods. It is very important to secure your computer with an anti-virus program as well as, a firewall to ensure you are not a victim. Below is a security checklist which will aid in keeping hackers out of your system.<hr /></p> <h4 style="color:#DC143C">Ways to Stay Internet Safe</h4> <!-- The following six lines represent how ordered list work and would appear on a web page --> <ol> <li>Install an anti-virus program and firewall and, <strong>keep the definitions up to date</strong></li> <li><strong>NEVER</strong> open any attachments unless you know the sender</li> <li>Do not close your anti-virus and firewall. Real time protection is often active while they are open</li> <li><strong>DO NOT</strong> visit un-safe websites. Again, virus protection usually has a site watch plug in to aid in this</li> </ol> <p>Follow these helpful tips and you should remain virus free</p> <p>The following pictures to the right indicate two great antivirus and spyware programs used for Internet security today. I personally use both of these. Each of these particular pieces of software serve their own purpose. The AVG Free is used for scanning for viruses while the SuperAnti-Spyware is used to scan and resolve issues pertaining to spyware and adware. <!-- Picture links are displayed below --> <p><a href="http://free.avg.com/" title="click here to visit AVG's website"> <img src="AVG.gif" alt="photo of anti-virus software" border="0" align="right" width="140" height="140"/></a></p> <p><a href="http://www.superantispyware.com/" title="click here to visit SuperAnti-Spyware's website"> <img src="super.gif" alt="picture of SuperAnti-Spyware" border="0" align="right" width="140" height="140"/></a></p> <br> <br> <br> <br> <br> <br> <br><hr /> <p>In the next few steps I am going to describe how to stay virus free if using a wireless network</p> <h2 style="colorC143C">Instructions For Setting Up a Safe Wireless network</h2><br> </body> </html> Simple question. I have 2 images I'm displaying but they are displaying side by side. I want them to be one on top and one on the bottom. Here is my code: <p> <img src="images/GoldCard_Page_1.jpg" Align="left"> </p> <p> <img src="images/GoldCard_Page_2.jpg" Align="left"> </p> I have a two questions if you see an image on the web for example a map you would like to create yourself can you look at the webpage's source and use that as a guide? Does copyright laws apply? Well second question will come when I get an answer to first question. Thanks sunrise |
|||||||