|
HTML - Newbie, Bear With Me. Centering Image Regardless Of Screen Resolution
Guys, hopefully someone can give me a hand here. bear with me, Im a newbie to html yet Im an intermediate/advanced flash programmer. I learned flash but never learned html the right way and am struggling to make html entrance pages for my flash sites.. I know its usually the other way around. i learned flash first.
ok, I have a website I made which is opened in a fixed window. the html index page says "enter here" and that button opens the fixed size window. that works fine. The problem is Im trying to learn the html and whenever i have an image on this index page, ( some graphics and the "enter here" button) it may look centered @ 1024 x768 but at a higher resolution ( 1280 x 1024) it will appear on the top left of the screen. I have been tinkering with dreamweaver but im really confused. I keep seeing all of these sites where everything looks aligned regarless of the screen setting. Im not sure if I should use tables , divs or whatever. i have my website logo as a jpg and some other graphics, and im not sure how to put it into the page so it always looks appropriate no matter what screen setting you are on. There is a company that makes nice websites and their entrance pages are always good. I am gonna attach the url of one of these. I notice that they always use divs, a LOT. Is thsi the right approach? and can someone look at the example and tell me how they are doing it? i dont put the url in the post becuase I do want google or other engines indexing the url to this post (for privacy) Thanks a lot url.zip Similar TutorialsI placed all my adsense ads into iFrames but when I resize the window small all the ads are pushed to the middle of the screen. How can I make them stay put. I tried working with divs too but it makes the ads the highest layer and it makes an invisible border stretching across the screen and I cant click anything thats in that border range. heres some of my code: <html> <head> <link rel="stylesheet" type="text/css" href="style2.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <center> <head> <title>BIO</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> </tr> </table> <!-- End ImageReady Slices --> <iframe src="/adsense.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:1173;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense2.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:-92;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense3.htm" width="728px" height="90px" frameborder="0" style="position:relative;Left:50;bottom:518" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense4.htm" width="336px" height="280px" frameborder="0" style="position:relative;Left:195;bottom:1560" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> </body> </center> </html> Hi All, I need to have a wide (1984px) image centred on the screen. If the screen is only 1024px wide it always aligns left. I am probably missing something basic here but can anyone offer advice? Thankyou. Alright I am new to this and I just finshed a fairly elaborate site for a buddy of mine. However, I didn't realise I was setting the whole site up under my screen resolution which is 1680x1050. Is there any way to make the site automatically adapt to different screen resolutions without me having to change every page I made. Please Help !!! Hi all i have my website all complete but the one thing i would like to do is put an image on the opening page that fills the screen.. no matter what screen resolution someone is on... i have seen this on sites before but cannot remember where it was. has anyone got any idea how i coul do this? any help would be much apreciated Thanks Ok, I'm new to this stuff. But I'm learning. How wide do you want to set your width of your webpage in pixels? 1000px, 1200px, or what? I'm working in dreamweaver and I have a big screen monitor and I have the resoultion at 1920x1080. I'm am guessing based on my experience you should use high screen resolutions, but I'm not sure how much to set the [wrapper] width in the CSS settings. I look at web pages with a 1920x1080 resolution and they strech all the way across the screen, but except the middle part. The middle part I'm guessing is at a smaller px size. I'm guessing it could be at a 1000px width. Am I'm right here? But this part is what i'm trying to figure out here. How do you make a page be viewed on a big resolution page like at 1920x1080 resolution and make it compatible with all of the other screen resolutions. Any Expert Advice or Very Helpful Hints Will Help Me Very Much, Thanks, Chris Clark Hello, I am a html/php newbie, I will like to have a border (one image) with a iframe in the middle of it. I have tried (sorry if it is a bit messy!): Code: <div align="center">
<!--Begin Template-->
<table id="Table_01" width="640" height="822" border="0" cellpadding="0" cellspacing="0">
<tr>
<!--Header-->
<img src="images/header_01.png" width="640" height="151" alt="header 1">
</tr>
<tr>
<!--Nav Bar-->
<img src="images/index_02.png" width="640" height="21" alt="nav bar">
</tr>
<tr>
<!--Begin border/iframe-->
<img src="images/index_01.png" width="640" height="384" alt="border 1">
<div id="top" style="center: 1023x; top: 167px; position: relative; left: 399px; height: 730px;">
<iframe src="news.html" width="1023" height="478" name="frame" scrolling="auto" frameborder="no"></iframe>
</div>
</tr>
</table>
</div>
But this only works at 1280x1024 screen resolution. Is there any way to make it compatible with any resolution? Thanks. Hey I made the site princeoflayouts.com, and am having trouble with my last step. The resolution size of the screen. On my laptop the website looks perfect, but then on my schools computers the whole web site is out of whack. I tried to mess with the margins but that didn't help the issue. I used dreamweaer 8 to build the site and have seen the section where it has screen resolution but it only allows me to click it and nothing can be applied or changed. If you have any advice please tell me. I have a book that helped me through the whole process but this section was not in there. Thank You Hi all, Im just wondering if it is possible in any way to undertake this functionality.... I have different homepages which are essentially the same content but each is designed for a different screen resolution so that when in full screen mode the data will occupy the complete screen. Is there any way to load a certain homepage based on a user's screen resolution, eg if their resolution is 800x600 then homepage A is loaded, if 1024x768 then homepage B is loaded etc. Since a user's screen resolution info is readily available is it possible to undertake such a feature? Thanks in advance! McB Hi, could you check my site: http://www.monkeygambling.com and tell me if it works on your screen resolution. I've had some problems with diff resolutions. On 1024 x 768 it sometimes does a slight repeat of the background image because the text i have on there pushes the table down a bit. thanks How to make the same layout for all pages in different screen resolutin? For example, user's screen may set up relolution in pixels as 800x600, 1024x768, 1280x800 Well I got a website I want to code and I'm not too good in coding though I'm designing/coding websites for 2-3 years(ocassional hobby).I always tried and retried and asked and searched but I always got side effects.So I want to make this one by-the-book 100% XHTML Strict/transitional W3C Valid So I was thinking where should I start with and I thought I should start with the background.I can't seem to manage even this one. As in every single thing I ever done I can't get it to look the same in every evil screen resolution ....Enough talking.As you see in the picture it has 2 parts. the first is a gradient from blue to white(bottom to top) and the other part is a black pattern thing. How can I implement it?I can't simply adjust it's size to fit my resolution and browser.It needs to look the same for everyone. Also while the top part can be made with a vertical 1px slice the bottom one has a pattern so it can't. i was thinking I could divide the website in 2 DIVS:main and footer and set a height percentage % like 80&20 from CSS.Use as background for main a vertical slice and a big image for the footer.But still that wouldn't fix too much ...I don't know. What would you do if it was your website? _____________________________ I need to figure out my navigation bar & how exactly I'm going to do it. I'd prefer to have it one long row, but I'm running at 1280x1024 and it looks great, but I dont think most people run their screens at that. So what should I do? Keep it long, or make 2 even rows? Will it adjust to be smaller on the smaller resolutions? Is there a way to make it liquid? Hi I have some websites that i would like to centralise on the screen irrelevant of the users screen resolution... some screens the site looks centred etc and its great but then the higher the screen resolution the viewer uses the more stuck up at the top it appears... is there a simple solution so the website centralises on any screen? Thanks in advance for any help... i really need to get this working Steve I am trying to create a table that does not change size depending on what the screen resolution is set to. I know that it is good practice to use percentages, however, as I am used to using pixels, I am finding it frustrating as I don't get the desired table size I want when the resolution is changed Here is an example of the table, if anyone can help me with the changes, it would be much appreciated or if you could point me in the direction of a tutorial that makes the table resize to reflect the chosen resolution preference, that too would be welcomed Code: <font color="#FFFFFF" face="Verdana" size="2">
<table width="810px" align="center" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#000033">
<td height="130px" colspan="2"><div align="center">Header</div></td>
</tr>
<tr>
<td width="130px" height="130px" bgcolor="#000066"><div align="center">Login</div></td>
<td width="680px" height="130px" bgcolor="#000099"><div align="center">Image</div></td>
</tr>
<tr bgcolor="#0000CC">
<td height="80px" colspan="2"><div align="center">Page Title</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center"></div></td>
<td rowspan="15" bgcolor="#0066FF"><div align="center">Body</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 1</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 2</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 3</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 4</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 5</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 6</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 7</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 8</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 9</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 10</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 11</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center">Link 12</div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center"></div></td>
</tr>
<tr>
<td bgcolor="#0033FF"><div align="center"></div></td>
</tr>
<tr bgcolor="#003399">
<td height="30px" colspan="2"><div align="center">Footer</div></td>
</tr>
</table></font>
Thanks in advanced Ive posted several times here before about this part of my website, guess what.. another challenge yet again In has got this pop outscript that pops out at the left side of the screen when hovered on. Click here, see the button on the bottom left to see it working. Now, I just tested the site on a 1024x768 resolution and when hovered on, it shows but fails to create a solution for the small screen. ( a horizontal scrolling bar perhaps? ) It just pops up and only half gets shown. I have tried adding overflow:visible, overflow-x:visible, etc. etc. Frankly I dont know how to solve it, could appreciate some help. Thanks. Hi All, I started doing a website that had a picture, then flash overlaid on top of the picture, then some text centered on the flash... the size of the picture and flash is 990px in width and 792px high, the reason i put a picture on screen 1st is the flash take a few minutes to load, so it looks good till the flash kicks in. Anyway it looks good on my 1024 x 768 monitor, some of my friends have widescreen and say they is a huge gap to the right.. so how can i center width only an image of 900 x 792 and then in the exact postion of the centered image place the flash, and then add some text on top of the flash once again centered on top of the flash... this if it can be done will leave a even gap to the left and right if on widescreen and be virtually full screen on a normal 1024 x 768 monitor. I tried absolute Code: <center><div style="position: absolute; top: 0px; "> the image </div></center> <center><div style="position: absolute; top: 0px; "> the flash </div></center> <center><div style="position: absolute; top: 100px; "> the text </div></center the image and flash and text had the right html to show, just used the above code to show what i tried... anyway it did not work right for some reason, im sure im going down the wrong path and they is a much better way to do this... Can anyone help me Thanks Hi All, I have a problem with centering a page to the screen on a new site. The page is 945px wide, and is fine in IE. But in both Firefox and Safari the page is moved to the left of the screen. Does anyone have an idea of what I have done wrong here? Here is a link to the page:- Website Hi Guys, I dont know if i am over thinking this, or just been dumb! But I want to position a flash object file in a div to the the center of my screen. However heres the catch, my flash file is 1900 pixels wide, and of course a screen can be anything wide. I can get CSS background images for divs ok, but not objects like a flash movies. So assuming my screen is 1600 wide, the user would see the center of my 1900 wide flash file with 150 pixels missing on the left aand right. For some reason, maybe i am tired, but i can not get it working or get my head into gear today. thanks for any input! Oh and heres an image of my problem to help explain it http://i44.tinypic.com/33p9e0l.jpg hi guys, I have this code he 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=windows-1251" />
<title>Under construction</title>
</head>
<body style="background-color:#121212">
<div style="background: url(under_construction.jpg) no-repeat center top ;
height: 1024px;
margin: auto;">
</div>
</body>
</html>
the image under_construction.jpg is basically the page itself, it has a size of 1680x1024. As of right now the page doesn't adjust automatically to the users screen. Please help me change the code so that it'll adjust automatically to the user screen Hi guys, i put only one image in my page. but its not align of center of the screen. It aligned only horizontally. i want also vertically centered alignment. the image should align horizontally center and also vertically center align. how can it possible please send me the valuable solution or opinion. i gave one sample image. |
|||||||