HTML - How To Have A Mobile Page Fill Screen
When I create a test page using DIV and set it to 480 px wide, my iPod Touch does not have it initially filling the screen; I have to double tap it to have it fill the screen.
What step am I missing? Many thanks... Todd Similar TutorialsHi, I'd like to know how to completely fill a web page with an image. This might sound like a simple thing but I would like to have an image fill the web page window 100%, at least top left and right should be possible. When I try this in Dreamweaver by placing the image inside a table there is always a white border around the image, even though I am using the 100% fit attribute. Browsers of importance: IE6/7 I visit a lot of sites where the window is filled exactly. Is it best for the image to be larger than 1024 x 768 or smaller, and if smaller, does the HTML code stretch the image or contents to fit? If I could get past this, I might be able to get interested in web site building, but this has thwarted all my interest if what you create doesn't fit the browser window properly. Thanks in advance! 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. How do you make a page (my home page) that will recognize that the person is on a mobile device (mostly ipod/iphone but regular phones too) and redirect to a wap page? Like wap.dawgtalk.com? Can this be done in a html page? And how do you do it? 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 Hey, Don't really know exactly how to pose this question, so i'll try to explain it in several ways, and maybe one of you can help me. I'm trying to find code, HTML or Java, which would cause the browser to automatically start focused on a different part of the page other than the top (as it normally does when a new page loads). For example, lets say i have an image or text several scrolls down on a page. I want the browser to automatically load the page centered on this. Any ideas on how to do this? Any help would help so much.... i tried to search for it, but i didn't know exactly how to phrase it so i wasn't able to find anything. Thanks again. New poster here! Recently been creating a website using HTML & CSS from scratch using Notepad++. I was under the impression that the more flat, or spread out the design, browsers would squish it automatically to fit on the page. Apparently this is not the case. I current have a page where the main content starts 250 pixels from the left hand side of the screen, this causes some of the content disappear of the right hand side of on lower resolution screens. Should I be starting the content at the far left, or is there another web page design convention I should be following? I assume there is a way around this however I can't seem to find it! Any help would be greatly appreciated. These forums are a wealth of knowledge! Hey everyone, I'm having trouble with this and I have no clue whatsoever how to solve it. My splash page has a css-centered background image which I would like to make it 'look' like a link, v.g. if you click anywhere on the page, the main page loads. I've seen this behavior in some lyrics pages, with a new page opening in a popup when you click anywhere in the screen, but what I need is to make the whole page behave like a giant "A HREF" tag, to load a new page in the same window. Is there anyone out there who can help me with this? Thanks in advance! Can someone please please view my sit at resconsultingnyc.com, i used microsoft expression web 3 to make everything aligned. When the page is maximized on my computer it is all nice and neat but if the screen is not maximized everything falls out of frame. when I tried it on another computer even their maximized page had things out of frame. How can I make all the tables and content stay nice and neat and keep in tact when the page size changes? All the pages have the same problem...thanks here's the 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>Template</title> <meta name="description" content="" /> <meta name="keywords" content="h" /> <link href="styles/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="all" style="height: 772px"> <div class="top"> <OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="766" HEIGHT="233" id="construction" ALIGN=""> <PARAM NAME=movie VALUE="construction.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="construction.swf" quality=high bgcolor=#FFFFFF WIDTH="766" HEIGHT="233" NAME="construction" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT> </div> <div style="margin:0 0 5px 0 "> <OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="766" HEIGHT="60" id="menu" ALIGN="" style="z-index: 1; position: absolute; top: 246px; left: 444px"> <PARAM NAME=movie VALUE="menu.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="menu.swf" quality=high bgcolor=#FFFFFF WIDTH="766" HEIGHT="60" NAME="menu" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT></div> <table width="740" border="0" cellspacing="0" cellpadding="0" id="cont" style="z-index: 2; width: 740px; height: 370px; position: absolute; top: 310px; left: 456px"> <tr> <td valign="top" width="295"> <div id="left_block" style="width:289px; height:234px; margin:0 0 7px 0 "> <img src="images/tit1.gif" alt="" style="margin:25px 0 15px 29px " /><br /> <p style="margin:0 0 3px 43px; width:162px "> </p> <p style="margin:0 0 3px 43px; width:162px; height: 57px;"> </p> <p style="margin:0 0 5px 43px; width:162px "> </p> </div> <div id="left_block2"> <img src="images/question.gif" alt="" style="margin:28px 0 8px 26px " /><br /> <table width="75" border="0" cellspacing="0" cellpadding="0" style="margin:0 0 4px 36px "> <tr> <td width="36"><img src="images/mail.gif" alt="" /></td> <td>E-mail:</td> </tr> </table> <p style="margin:0 0 0 36px "> resconsultingnyc@gmail.com</p> </div> </td> <td valign="top"> <div id="right_block" style="width:445px; height:201px; background:#F1F1F1 url(images/bgs1.gif) no-repeat 100% 100% "> <img src="images/tit2.gif" alt="" style="margin:25px 0 13px 36px " /><br /> <p style="width:335px; margin:0 0 4px 50px ">Welcome to RES Consulting NYC inc.</p> <p style="width:335px; margin:0 0 15px 50px ">Your company for all of your residential and commercial construction consulting services.</p> </div> <img src="images/tit3.gif" alt="" style="margin:28px 0 23px 31px " /><br /> <table width="388" border="0" cellspacing="0" cellpadding="0" style="margin:0 0 0 33px "> <tr> <td valign="top" width="103"><img src="images/pic1.jpg" alt="" /></td> <td valign="top"> <p>Personal dedication to each and every client</p> <p style="margin:10px 0 0 0 "> </p> </td> </tr> </table> </td> </tr> </table> <div id="footer" style="z-index: 1; position: absolute; top: 693px; left: 473px; bottom: 85px; width: 733px"> <table width="620" border="0" cellspacing="0" cellpadding="0" style="margin:14px 0 0 56px "> <tr> <td width="286" valign="top" style="color:#7D7D7D; "> Copyright © 2009 resconsultingnyc.com <br /> All rights reserved. </td> <td valign="top"> <a href="index.html" class="f_link">Home</a> <a href="index-1.html" class="f_link">Company</a> <a href="index.html" class="f_link">News</a> <a href="index-2.html" class="f_link">Projects</a> <a href="index-3.html" class="f_link">Services</a> <a href="index-4.html" class="f_link">Solutions</a> <a href="index-5.html" class="f_link">Contacts</a> </td> </tr> </table> </div> </div> </body> </html> 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 I 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> A customer gave me a Word doc that they want turned into a printer friendly web page. I understand that there are tons of ways to do this but I really want the answer to the subject. What i'm referring to is a form that someone can print from the browser and "fill in the blanks" on the page where there are "underscores". My question is how to code those underscores. I tried manipulating the <hr> tag but it's putting way too much space in between each <hr>. I've already coded a "fill in the blank" line using <u> nbsp;</u> but that looks very messy. What do you guys/gals think? I am not sure where to put this question. I have noticed that some webpages have graphics to make it look like a piece of paper stuck on the wall (and there is a certain amount of blank space left and right - see http://www.infinetwebsolutions.com/) while some webpages occupy the whole screen - see http://www.speakteen.com/. Can someone tell me if there are technical advantages/reasons for doing this? I have been reading webpages and blog pages for dozens of hours and am starting to feel that blogs all look alike. Part of the reason is that almost all of them have the "cut page" look rather than the full page look. Is there an artistic reason to do this? some advantage? I really like nice cut and dried technical stuff but I am more likely to be considered autistic than artistic Looking for a hint on how to detect a mobile device and redirect to a mobile webpage. Also what would be the optimal width for a mobile website? Thanks, Dano What is the reason that i cannot scroll my site left and right on smartphones ? I'd like to write a cross-device mobile application/website. I tried to use this: "<meta name="viewport" content="width=*px" />" in head although I don't understand how it works. It adjusts auto zoom level on mobile browsers. However what will be set to *px? What does it mean if there's "device-width" in place of *px I tried to make a form and I checked it out on WM, Symbian and IOS but each phone visualized other. How can I make this cross-platform? Please help! Balu314 (sry my english is poor) Hello, Why cant i scroll my site on mobile smartphones ? www.muchmarketing.co.il thanks Can any one help me how to design web for mobile. I design a web by Frontpage, look beautiful in PC but can not read in mobile. Thanks in advance Hi I'm a bit of a newbie to any kind of HTML codes Ive made a Test website so I can try out this piece of software that helps to create mobile web sites using HTML Here's the Website : http://82.45.130.37/atozcouriers/ftp...001/index.html Heres the HTML : http://www.2shared.com/document/XdlY...html?(Password :21) I am using notepad to edit as any web editor messes up the viewing of the website in a Mobile Browser The mobile Browser is Safari on iPad,iPhone or iPod touch My problem only happens on one page , the homepage. It aligns the main body to the right a bit and adds a line I've experimented a bit but as I'm a newbie I'd don't know what to do. Any help would be gratefully appreciated. Thanks keirjohnharry Hi I recently used an emulator service to see how a page I made would look on mobile devices. note that it's just a web page - not an app for any of them. Here's the screenshot for four of them: I want it to look like the last one on mobile phones, so that the screen is filled. how do I do that on the iPhone and in Chrome? The wrapper DIV width is 302px. Thanks for your time and help. Shaun Hello. I am not sure if this is the correct place for this question. Please direct me if not. I am trying to set a webpage to redirect and display a different page if the first page is accessed from a mobile device (phone). Does anyone know how I can achieve this? I just need to know how to determine what it is viewed on. The redirect part I know already. Thanks so much for all help! |