HTML - Website Size
How do you make the website The same size on different resolution?
Thanks for all of your help. Similar TutorialsHello everyone again, I have searched everywhere to get the info to make the website adapt to the resolution size. I can not understand how it works. Will someone please be able give me the info on how to make the website adapt to the resolution. Thanks for all of your help My website will have a picture that is cut in 3 parts (see below for the chop up). now my question is. I want the sides to gradually disapear if the browser window becomes smaller, as the main part of the website is displayed on the middle part of the website Say that the total size of the image is 1300px. and the respectively from left to right. the picture is chopped up in 250px - 800px - 250px. now if the browser is wide enough it would just show the whole 1300px of the website. however if the browser is at most able to show 1000px of the website, the side would reduce corespondingly showing the website as 100px - 800px - 100px. and that offcourse that the picture on the left side doesn't look weird. I hope everything is still clear. it bassically means that of the 250px of the left picture, the picture would be cut up from left to right, rather than the default right to left. thus cutting 150px away from the left and not the right. leaving the colors in the picture below, continue on flowing like they should. How would I go about doing this? Hey guys im sure this question has been answered, but having tried a large majority of the answers none seem to work. I have been building websites using my laptop (15 inch screen) after upgrading to a 17 inch screen im getting problems with the web page. It now has a horizontal scroll bar which i find rather annoying as do many other people that visit my sites. This is what it looks like at the moment on larger screens what i need to find out is how to make it so the page fits within the parameters of the screen without a horizontal scroll bar. this is the code that i used to make on of my sites, if possible could some one tell me where to maybe edit the string of html to get it to fit all screens? <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title></title> </head> <body style="color: rgb(255, 255, 51); background-color: rgb(0, 0, 0);" alink="#ffff33" link="#ffff33" vlink="#ffff33"><div style="text-align: center;"><img style="width: 750px; height: 225px;" alt="" src="http://i488.photobucket.com/albums/rr248/kingofkingspoker/PCKBIGBANER-1.png"><br> <big><br> Home | Investigations | Gallery | Locations | The Team | Methods | Contact us<br> <br> </big> <table style="width: 800px; text-align: left; margin-left: auto; margin-right: auto;"> <tbody> <tr> <td style="text-align: center;"> <div align="center"><font color="#000000" size="+1"> <marquee bgcolor="#FF0000" direction="left" loop="99999" width="75%"><strong>We are accepting private bookings. Please contact Tim Harris on 07533119768 or email Tim at tim.paranormalknights@yahoo.co.uk</strong></marquee> </font></div> </td> </tr> </tbody> </table> <big><br> </big> <table style="background-color: rgb(0, 0, 0); text-align: left; margin-left: auto; margin-right: auto; width: 1312px; height: 459px;"> <tbody> <tr> <td style="text-align: center; vertical-align: top;"> <div style="margin-left: 40px;">Hello and welcome to Paranormal Knights Cymru. The group was founded in 2008 with the soul intentions of finding answers that we the team have been searching for, for all our lives! We are a unique team that reside in the south Wales area and have many many years of paranormal investigating experience between us. The things that make us such a unique team of paranormal investigators is that we take things to a higher level, we go to such a high level that other teams are left stranded whilst we soar above and beyond the grave. We use techniques such as Clairvoyance, Clairaudiance, Clairsentience and also the scientific approach with electronical equipment such as EMF detectors, EVP recording devices, still camera's and also video camera's. We also use non electrical equipment such as dowsing rods, oujia boards, glass swirling and table tipping. All of these methods are tried and tested and proven to be the main source of communications with the paranormal phenomena. To get an understanding of what these techniques entail and how they work please check out the methods page. <br> <br> So with that said will you be able to put the fear of the unknown behind you and join us in our quest for answers?<br> <br> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"><span class="Apple-style-span" style="color: rgb(51, 0, 153);"></span></span><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"><span class="Apple-style-span" style="color: rgb(51, 0, 153);"></span></span></div> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td style="text-align: justify; vertical-align: top;"><img style="width: 498px; height: 253px;" alt="" src="http://i488.photobucket.com/albums/rr248/kingofkingspoker/Margam_Castle.jpg"></td> <td></td> <td></td> </tr> </tbody> </table><div style="text-align: left;"><br> </div> <br> </div> </body> </html> My new website test pages are at: http://www.monkeygambling.com/new%20pages/index.shtml I have a small probelm with the menu on the left side. It is not vertically aligned. The reason why is that I have an empty table inserted above it. This table is quite important as it makes the search engine spider miss the left menu out and move to the central section. My question is, is there a way to make this table exisit with no size (e.g. height =0), or just be there without affecting anything else? thanks Does anyone happen to know if there is a way, other than resizing everything in a site manually, to display a website layout at half size but still functional? Basically what I want to do is display my design work on my site, but at only half size so that it 1) it fits within *my* design and 2) it is obvious that it is not the actual website. Taking screenshots is all well and good, but they really don't display the actual functionality of the website--CSS rollovers, etc. So I'd like to be able to pull up the actual code within either a div or an iframe. Is this something someone has already thought of and invented a solution? Hi guys, I'm currently trying to sort out the background for a website. What I'd like is to have a silhouette of a few people on a gradient background. I'd like to keep the quality high, but it also makes the file size large. If there were no silhouette then I would have a one pixel strip of the gradient set to repeat. Is it possible to add two background pictures, or is there another way I can reduce the file size that I hadn't thought of? i have 2 frames in my parent frame say 1.htm ie left frame and 2.htm ie right frame now this 1.htm is quite a long frame and has a scrollbar and 2.htm is a short one i dont the scroll bar beside my frame 1 but want it to be for my entire parent window ie i wont to scroll both my left and right frames together how do i do that Hi! I have a page that contains a text area. What I want it to do is to change its size according to the size of the browser window. How can I make it do that? I did it once but just can't seem to remember how I did it. Thanks All: Working to update a previously designed website. Original design uses an <img> tag to create a top banner and another <img> tag to create a side banner. In each case there are mapped coordinates on each banner as links for the subsequent pages. Basic page design is as follows: Code: <table> <tr> <td> <img usemap="Map1"> <map name="Map1"> <area> <area> <area> </map> </td> </tr> </table> <table> <tr> <td> <img name="Map2"> <map> <area> <area> <area> </map> </td> <div> ***PAGE CONTENT*** </div> <tr> <table> The challenge is that the [PAGE CONTENT] varries in length througout the site causing some pages to be much longer or shorter than others. This causes some inconsistencey in the relationship between the side banners height and the page content. In other words in some cases the banner is exceptionally longer than the page content and the reader must scroll past significant "dead-space" before being brought to the lowest mapped links in the side banner; or... ...in some cases the side banner is significantly shorter than the page content causing the banner image to appear "poorly-fit" to the page design. I considered altering the 2nd table instance in the above design so that the banner is carried in a <td> tag that is adjacent to the page content and hopefully to allow the tag carrying the image to size relative to the <td> tag carring the content.... Code: <table> <tr> <td> <img usemap="Map1"> <map name="Map1"> <area> <area> <area> </map> </td> </tr> </table> <table> <tr> <td size="100%"> <img name="Map2"> <map> <area> <area> <area> </map> </td> <td size="100%" > <table> ***PAGE CONTENT*** </table> </td> <tr> <table> The problem I've found with this is that as the content size causes the image to "flex", either readablilty or image quality or both are effected, AND the mappings become inconsistent as the image coordinates constantly change. I've considered 2 solutions and am leaning toward one, but thought I'd post this and see if there are better ideas I'm overlooking. One idea was to add additional table rows inside the [PAGE CONTENT] table presumably creating a "defalut" page size that would never be smaller than a standard for the side banner. Problem: larger page sizes are still a problem as are the changing map coordinates My other idea was to return to the original page design listed first above and again settle on a standard side banner "height"... ...any page that was significantly longer than that height would be split to 2 or more pages with a [NEXT>>] button at the bottom of the page navigating to the additional content. Problem: ...possible complications splitting content... Benefit: ...consistent page design that allows a consistent side banner with navigable links... Question for the group: Does this sound reasonable? Are there better alternatives I am overlooking? THANKS IN ADVANCE FOR ALL INPUT!! hello, i need a website for german customers, somethign like www.podmod.de because i would like to offer the same. So if anyone has an idea where to start, or even can offer me something i can buy, please do so. my email: verenamueller999@web.de thanks verena. Hi How to add a website counter to my website. So that when ever a visitor visits the website I want the counter to increase say from 101 to 102 and then for a new visitor it should be 103 and then again for the next visitor 104 and so on..... I want to know the code. There are number of websites that are offering this but they put their advertisement which I don't want I have some links (in the header, the SUPPORTERS) to different websites, but when I click on them the address in the address bar does not change to the address of the website that I clicked. How do I make it show the address that I clicked on? Thanks. http://www.ac.wwu.edu/~fencing/ I am a total noob but volunteered to administrate the website, because there was no one else to do it. Hi, I am trying to find a way in which a website that is linked on my homepage can be opened while keeping at least one form of my homepage open as well. e.g.: Google images :http://images.google.com/imgres?imgu...en-us%26sa%3DG sorry for the massive link. Hope you get the idea. So what i want is to have a bar on top that is my homepage (like the google bar in the link), but the rest is the actual website that has been linked. I don't really care much about the url. It doesn't have to be my homepage url, it can be the actual website url. Google has been able to do that somehow, so it is possible. I would just like to know how and if it is hard to do. If someone knows how to do it, it would be great if you could give me a link to a tutorial, or explain it. thanks I'd like my div to automatically expand when there is more text but I don't want it smaller than a certain size. Is this possible? Please look at the following site to see what I mean and click on the Writing tab. (The right hand div is what I'd like to fix--you see the text is cut off.) Thank you so much! http://rkgrant.110mb.com/rkghome2.html Why are my 1000 pixels wide images are ok in FF and Chrome but seem to be 1.25% larger in IE? Thanks Hello Folks, Okay, I am trying to finally master this. I am working with a CSS Joomla layout that has some flash as main content (for images). I would like for this layout to resize based on the visitors screen size. I've played around with the % in width and so-forth. However my embedded Flash starts to scoot around the page as I change the size of the window. Can someone guide me on exactly how to do this so that "all" the info scales and stays in place. I am assuming that there will be an issue for the site getting really big if the person uses a massive screen (say 27inch plus) In that case how do you limit the size? Any help will be most appreciated. I don't know what part of this html is making the pictures in my table compressed width wise but if someone could help that would be fantastic. Here is the code: <style type="text/css"> body,table, td, li, p, div, textarea {font-family:Tahoma; font-size:12pt; color:ffffff; font-weight:none;} table, td { background-color:transparent; border:none; border-width:0;} body{background-image:url(http://i7.photobucket.com/albums/y28...onlybkgd.jpg); background-attachment:fixed; background-repeat:no-repeat; background-position:bottom right; background-color:179f99; } body {scrollbar-face-color:179f99; scrollbar-shadow-color:ffffff; scrollbar-highlight-color:ffffff; scrollbar-3dlight-color:ffffff; scrollbar-darkshadow-color:ffffff; scrollbar-track-color:87f5f3; scrollbar-arrow-color:ffffff;} .text {font-family:Tahoma; font-size:12pt; color:000000; font-weight:none} .redtext{font-family:Tahoma; font-size:10pt; color:000000; font-weight:bold} .redbtext{font-family:Tahoma; font-size:10pt; color:000000; font-weight:bold} .orangetext15{font-family:Tahoma; font-size:10pt; color:000000; font-weight:bold} .lightbluetext8{font-family:Tahoma; font-size:10pt; color:000000; font-weight:bold} .whitetext12{font-family:Tahoma; font-size:10pt; color:000000; font-weight:bold} .blacktext12{font-family:Tahoma; font-size:10pt; color:000000; font-weight:bold} .nametext{font-family:Tahoma; font-size:10pt; color:000000; font-weight:bold} .blacktext10{font-family:Tahoma; font-size:10pt; color:000000; font-weight:bold; background-color:transparent} strong, b {font-weight: bold; color:000000;} a{font-family:Arial; font-size:12pt; font-weight:normal;background-color:transparent;} a:link{color:000000;font-weight:bold;font-family:Arial} a:active{color:000000;font-weight:bold;font-family:Arial} a:visited{color:000000;font-weight:bold;font-family:Arial} a:hover{color:000000;font-weight:bold;font-family:Arial} a.redlink{font-family:Arial; font-size:12pt; font-weight:normal;background-color:transparent;} a.redlink:link{color:000000;font-weight:bold;font-family:Arial} a.redlink:active{color:000000;font-weight:bold;font-family:Arial} a.redlink:visited{color:000000;font-weight:bold;font-family:Arial} a.redlink:hover{color:000000;font-weight:bold;font-family:Arial} a.navbar{font-family:Arial; font-size:12pt; font-weight:normal;background-color:transparent;} a.navbar:link{color:000000;font-weight:bold;font-family:Arial} a.navbar:active{color:000000;font-weight:bold;font-family:Arial} a.navbar:visited{color:000000;font-weight:bold;font-family:Arial} a.navbar:hover{color:000000;font-weight:bold;font-family:Arial} a.man{font-family:Arial; font-size:10pt; font-weight:normal;background-color:transparent;} a:link{color:000000;font-weight:bold;font-family:Arial} a:active{color:000000;font-weight:bold;font-family:Arial} a:visited{color:000000;font-weight:bold;font-family:Arial} a:hover{color:000000;font-weight:bold;font-family:Arial} </style> <style> table, tr, td {background-color: transparent; border: 0px; padding:2;} table table {border: 2px;} table table table {border: 16px dotted; border-color: 87f5f3; background-color: ffffff; background-image:url(); padding:0;} table table table table{border: 0px;} table table table table table, table table table table table </style> <style> } table table table table {border:0px;} .{content:"Text and Link Properties";} input {background-color:transparent !important;} td, div, input, textarea, a, table td div div font, div table tr td font {font-family:Verdana !important;} td, div, input, textarea, table td div div font,div table tr td font {color:000000!important; font-size:10pt !important;} .nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12, .blacktext12 span,.redtext, .redbtext, .blacktext10, .btext {color:000000!important; font-size:10pt !important;} a {color:000000!important; font-size:10pt !important;text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;} a:hover {color:000000!important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;} <style type="text/css"> table table table {width:400px; !important;} table table td img {display:none;} table table table td img {display:inline;} table td td {width:0px;} table {width:500px;} table table {width:400px; !important;} table table td {padding:3px;} table table table td {padding:0px;} table table table {width:400px !important; height:0px;} td.text td a img {display: inline !important; } table table table table table, table table table table table td { width:0px !important; padding:0px !important;} td.text a img {width:130px } td.text td.text a img {width:100px !important; } td td td div strong {width:200px !important; display:block;} .redblackfonttext14{font-weight:normal} textarea, input, font, a, table, td, div, b {font-size:10pt !important;font-family:century gothic!important;font-weight:normal!Important;text-transform:lowercase} span {font-size:10pt !important;font-family:century gothic!important;font-weight:normal!Important;text-transform:uppercase} embed, object {display:inline} .orangetext15, .blacktext10 { display:block; width:300px; font-size:10pt !important;} td.text td.text .orangetext15, td.text td.text table table div {display:none;} .thanks:mrk{.} .mct{www.myspace.com/contacttables} </style> Yeah it's my myspace page. Sorry I'm such a dummy at html..... A simple problem when I populate my combo using javascript my combo size changes (Problem is only on) Ie works ok in ff. My code is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>123</title> <script type="text/javascript"> function test(){ var listFileClass = document.getElementById('listFileClass'); alert("listFileClass ="+listFileClass); for (var loop = 0; loop < 6; loop=loop+1) { var newDomainValueOption = document.createElement('option'); newDomainValueOption.setAttribute("value",loop); newDomainValueOption.appendChild (document.createTextNode(loop)); listFileClass.appendChild(newDomainValueOption); } } </script> </head> <body> <table> <tr> <td width="100%"> <select style="width:100%" name="listFileClass" id="listFileClass"> </select> </td> <td> <input type="button" value="test" onclick="test();"> </td> </tr> </table> </body> </html> |