HTML - Getting My Full Page To Display On Smaller Screens
Hello, I've got a pesky bug that I can't figure out...
I'm designing a website for a record store and the width is a little larger than 800px.. on larger screens, it loads just fine.. however when I try to load it on a smaller screen and scroll to the right (to see the info that is cut off) all of the background colors of my elements continue to be cut off. This does not occur when I start with a small window on a big screen and resize... hope that makes some sort of sense here's the site Similar TutorialsHi, My website, when viewed on my blackberry, is coming out all wrong - assume it is because of the smaller screen size on a phone. However, when I downloaded the initial template (which I have made a lot of html and css changes to), the mod-slide didn't flow down the page as it does now. Please could anyone help. The website is www.auxus.co.uk Thanks, Ishveen Hi all, I was wondering if someone could help me. I want a border around the entire page. It works fine in IE at all resolutions, but breaks in FF. I explicitly stated html and body heights to be 100% but that doesn't help. I should be able to spot the error, but its escaping me. Can someone please look at my code and tell me if you see anything? Thanks Rick --- The HTML: 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>San Jose Cell Phones</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body style="font-family:verdana,tahoma, sans-serif;"> <div style="margin-left:3%;"> <h1 style="font-size:4pt;color:#ffffff;">San Jose Cell Phones ringtones AT&T Yahoo dsl satellite 408 calling dish network</h1> <div align ="center"> <img src="images/sanjose.png" alt="san jose" style="width:195px;height:39px; vertical-align:middle;" /> <img src="images/smallcellphone.jpg" alt="san jose cell phones logo" style="width:72px; height:204px; padding:20px; vertical-align:middle;" /> <img src="images/cellphones.png" alt="cell phones" style="width:246px;height:39px; vertical-align:middle;" /> </div> <h4>Choose Service</h4> <div class="container"> <ul id="navSquare"> <!-- CSS Tabs --> <li><a class="active" href="index.html">Cellular</a></li> <li><a href="ringtones.html">Ringtones</a></li> <li><a href="phonecards.html">Phonecards</a></li> <li><a href="dishnetwork.html">Dish Network</a></li> <li><a href="dsl.html">DSL Service</a></li> </ul> </div> <hr align="center" width="33%" /> <br clear ="all" /> <div style="float:left;color:#006699;width:250px;"> <div style="background-color:#006699;color:#ffffcc;margin-top:30px;height:10px;padding:3px 10px 3px 10px;border:1px solid black;border-bottom:0px;">Hi</div> <div style="line-height:1.3em;padding:10px;text-align:justify;background-color:#FFFFCC;border:1px solid black;"> <p style="font-size:11pt;font-weight:600;padding-top:10px;">The Original Online Prepaid<br /> Domestic and International<br /> Calling Cards Superstore</p> <p><strong>Save up to 80% on long distance calls</strong> <br /> We hand-pick our phone card selection to offer the best of both low cost and reliability. Don't be fooled by other's low teaser rates. We pioneered instant email calling card delivery in 1999, with over 600,000 sold as of September 2006! <br /><br /> <strong>How to use this web site</strong> Use Get Best Rates to choose your phone card, then receive your virtual phone card purchase by email. For a physical card, print the email containing the card image. Login to your account 24 hours a day to check PIN information or to reorder</p> </div> </div> <div style="color:#ffffcc;float:left;clear:none;margin-left:20px;width:460px;"> <div style="background-color:#006699;margin-top:30px;height:10px;padding:3px 10px 3px 10px;border:1px solid black;border-bottom:0px;">FINDING THE BEST PHONE CARD</div> <div style="float:right;clear:none;padding-top:10px;padding-left:3px;padding-right:3px;width:209px;height:158px;"> <script type="text/javascript" language="JavaScript" src="http://www.kqzyfj.com/placeholder-1405157?target=_top&mouseover=N"> </script> </div> <div style="padding:10px 5px 30px 5px;text-align:justify;background-color:#7691d4;border:1px solid black"> <p style="font-size:14pt;padding-left:5px;margin-bottom:-5px;">Is your need for</p> <p style="line-height:1.5em;white-space:nowrap;font-size:.75em;"> <font face="Arial">► </font> International calls from the U.S.?<br /> <font face="Arial">► </font> International calls to the U.S.?<br /> <font face="Arial">► </font> Calling within the U.S.?<br /> <font face="Arial">► </font> Calls while traveling?<br /> <font face="Arial">► </font> Specific recommendations?<br /> <font face="Arial">► </font> Wireless/cell phone refill PINs? </p> </div> </div> <!-- <div align="center"> <p class="sectionheading"><a name="phonecards" id="phonecards">Phone Cards</a></p> <a href="http://www.kqzyfj.com/3566vpyvpxCFEKIDFLCEDGDGMLF" target="_blank" onmouseover="window.status='http://www.zaptel.com';return true;" onmouseout="window.status=' ';return true;"> <img src="http://www.lduhtrp.net/o4101r6Az42ORQWUPRXOQPSPSYXR" alt="Buy the best phone cards at San Jose Cell Phones" width="300" height="250" border="0"/></a></div> <br /> <hr align="center" width="25%" /> <div style="text-align:center;margin:0 auto;margin-top:25px;"><a class="button" href="#top">Top of Page</a></div> <br />--> </div> </body> </html> The CSS: Code: html,body { height:100%; } body { background-color:#ffffff; border: 2px #279DA4 solid; font-family:'Berlin Sans FB Demi', 'Berlin Sans FB', Verdana,'Trebuchet MS',tahoma, sans-serif; font-size:10pt; } .container { width: 500px; padding: 5px; margin:0 auto; border: 1px solid #ccc; background: #fff; margin-bottom:10px; } I need to display an image (size 1024x768) in IE explorer so when i hit f11 (kiosk mode) its full screen. Then I need that image to refresh every X seconds with out flickering on the screen. The file is a bmp and is about 5mb and only will be changed a few times a day by a program I wrote in Vb.net. It will write over the existing file so the webpage would pick up the changes when it refreshes. Codes I'v tried already: Code: <html> <head> <META HTTP-EQUIV="Expires" CONTENT="-1"> <META HTTP-EQUIV="refresh" CONTENT="10;URL="meta.htm";"transition"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> <style type="text/css"> html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;} body {font-family:verdana, arial, sans-serif; font-size:76%;} #background{position:absolute; z-index:1; width:100%; height:100%;} #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} #content {padding:5px 300px 20px 200px;} p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;} </style> </head> <body> <div> <img id="background" src="View.bmp" alt="" style="position: absolute; left: 0; top: 0" width="90%" height="90%" /> </div> </body> </html> and Code: <IMG src="OR View.bmp" name="refresh" Padding="0" Width="1024" Height="768" Scrolling="0"> <SCRIPT language="JavaScript" type="text/javascript"> <!-- var t = 120 // interval in seconds image = "OR View.bmp" //name of the image function Start() { tmp = new Date(); tmp = "?"+tmp.getTime() document.images["refresh"].src = image+tmp setTimeout("Start()", t*1000) } Start(); // --> </SCRIPT> However the first one flickers and the 2nd doesnt display in full screen. Any information or even pointing me in the right direction would help. I know almost nothing about java and html =x the requirement is that ina screen if sso enabled=y the screen for sso should come else the original screen shoudl come ie when sso_enabled =n so but both should be in same page only that one of them shoudl get activated accordingle according to y or n it shoudl not be scrollable any ideas? hey i need some help to scale my webpage to fit all screens. a mate of mine told me to use this code, however it dosn't work Code: <html> <head> <style> span.site { margin-left:auto; margin-right:auto; text-align:left; width:1680px; } </style> </head> <body> <span id="site"> blablabla </span> </body> </html> how should i solve this problem? I've got a very slow server which was making the screen->new screen time very slow, so to prevent there being agonising white inbetweeney screens, i put the meta-tags in: meta http-equiv='Page-Enter' content='blendTrans(Duration=0)' meta http-equiv='Page-Exit' content='blendTrans(Duration=0) which does the trick..but, as I am also showing, hiding elements thru script I am also seeing these elements come and go, which is confusing. Any ideas? Evening one and all, I'm having a little problem. I've created a webpage that's 1280 pixels wide using HTML tables to structure my layout. I've tried viewing my page on a lower screen resolution - for example 800x600 but the page doesn't hold it's structure and allow me to view the page properly by placing a horizontal scroll bar at the bottom of the screen. Instead the browser squashes all the data to fit within the 800 pixel width of the screen. Is there some code I can insert in the page that commands the browser to display a scroll bar instead of squashing all the data to fit the 800 pixel width? I'm testing at the moment in Firefox 3.6.15 on Mac OSX 10.6.3. Thanks. 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 Here's my hypothetical scenario... I have an image map (1000px by 1000px) divided into smaller squares (lets say ten images horizontally by ten images vertically, adding up to one hundred images all together), each linked to a corresponding HTML information file. Now, when talking about download speeds, would it be more efficient for me to use one big image as a map, or should I use one hundred smaller, individual images, each as a link? I don't have anything that would allow me to reliably test the download speeds of both variations, and my site won't be up on the Internet until it is finished (or somewhere close to it). so i'm working on my new site and everything seemed to be working find until i got to the 8th image since the image is wide instead of a scroll arrow appearing to scroll the page over, the image just collapses below my other divs to fit. can anyone help me fix this? thanks in advance guys this is the website http://www.paulodourado.com/x_milk.html and this is the page where I encounter problems http://www.paulodourado.com/thrice.html I am trying to move my title text further to the right. However, when I do (by adding more  , the title breaks into another line instead of moving further to the right. I have tried manipulating the margin px, but it isnt changing. I am not familiar with manipulating floating text. How do I accomplish this? Here is my current code: <td align="center" valign="top"><table width="655" border="0" cellspacing="0" cellpadding="0"> <div style="background:url(/offices.jpg);margin:0;"><br/><br/><span style="float:right;margin:0px 150px 198px 0px;"><font type="Arial Narrow" size="5"><b> &nbs p; &n bsp; <font color="#4E4848">My title</font></b></font> </span> Hi, in Firefox my page displays fine. as picture below. but in IE it messes up. I assume i have missed something in the html FF http://i46.tinypic.com/4uwd43.png IE http://i47.tinypic.com/9ixmj5.png code below Code: <?php include('header.php'); ?> <?php include('RightSide.php'); ?> <div id="primaryContentContainer"> <div id="primaryContent"> <h2>Contact Simple Coders</h2> <p class="nopadd"> If you have any problem, suggestion, comment, or you found a bug. You can send a message to <script type="text/javascript"> //<![CDATA[ document.write('<a'+' href="mailto:sup'); document.write('port@'+'simplecoders.com">'); document.write('support'); document.write('@simplecoders.com<'+'/a>'); //]]> </script><a href="mailto:support@simplecoders.com"></a> <p>Please read the following first:</p> <ul> <li>Please write your message in English, even if your english is very poor. I simply delete other languages because I cannot understand any word.</li> <li> Your email address will only be used to send a reply to your message, if it's needed. I will not give your email to anyone else</li> <li> If you are a spammer, please don't add my email to your list. I already have enough junk in my inbox</li> </ul> <p>You can also fill the form below: </p> </div> </div> <form style="margin: 0px 0px 0px 0px;" method="POST" name="formData" action="contactmail.php"> <div style="position: absolute; top:500px; left: 254px;"> Your Name: </div> <div style="position: absolute; top: 500px; left: 325px;"> <input type="text" name="to" size="30" /> </div> <div style="position: absolute; top:533px; left: 255px;"> Your Email: </div> <div style="position: absolute; top: 533px; left: 325px;"> <input type="text" name="subject" size="30" /> </div> <div style="position: absolute; top:565px; left: 258px;"> No Robots: </div> <div style="position: absolute; top: 565px; left: 325px;"> <input type="text" name="norobots" size="30" value="Ip Address Here" onclick="this.value=''" /> </div> <div style="position: absolute; top:568px; left: 540px;"> Your Ip Address is: <strong><?php echo $_SERVER['REMOTE_ADDR']; ?></strong> </div> <div style="position: absolute; top:598px; left: 266px;"> Message: </div> <div style="position: absolute; top: 598px; left: 325px;"> <textarea id="msg" name="msg" style="width: 400px; height:170px; font-size: 12px;"</textarea> </div> <div style="position: absolute; top: 785px; left: 325px;"> <input type="submit" alt="Submit Form" name="submit" size="30" value="Send" /> </div> </p> </form> <?php include('LeftSide.php'); ?> Our organization's webpage was created in Dreamweaver, with some additional javascript and html code added by an intrepid staff member with just enough knowledge to be dangerous. The page displays properly in Internet Explorer and Firefox for Windows, as well as Firefox and Netscape for Mac. However, the page displays a white screen in Safari. The page is loading, because the page title displays, and it is possible to view the source code for the page using the "View --> View Source" menu option. But none of the page content shows up. I did not find any relevant help in the Safari forums on the apple page, so I'm wondering if this is a simple coding problem that I don't know enough to ferret out. Any assistance would be greatly appreciated. The website address is http://www.buttecounty.net/bclibrary Thanks, Derek Hi all Firstly I’m a repeat newbie... I had a brief spell with a mate doing web things in 2000, playing comand and conquer most of the time over a network, we were poor but we had fun...blimey things have changed, in many ways!! I've put together a web site using a trial version of dreamweaver but the problem is that although it displays fine on all my machines at work and at home, the client (friend really) gets a muddled view on her laptop... Like the screen shot. !! I’ve run the compatibility and validator on dreamweaver and it seems ok. I’ve also run the address through w3.org validator and it seems ok. The adress is www.julietbidwell.co.uk Any help will be much appreciated. Thanks Phil PS – note to self I must stop saying I’ll have a go at stuff for people!! i'm a bit confused.. it always worked, that i uplaoded the hml code as a new web page in the ftp web tool... (without even name it to .html at the end of the site name...) How can I make that the webpage which i uploaded is diplayed as the actual webpage (and not shown the html code instead) WITHOUT have to add .html to the url??? Example: url.com/contact --> shows only html code url.com/contact.html --> shows correct site but if u access any site... you usually never have to add .html to the url: e.g.: www.mtv.com/music PLEASE, thanks Hi, i can't seem to figure this out. How would i go about showing a pages url on the page itself. For example, i am on a page with the url http://www.website.com/page.html, how would i display the pages url on the page automatically, without typing it myself? Any help is greatly appreciated, thanks. Hi, I don't really know html, I have messed around with it and looked at some scripts; I have some understanding of a couple of langauges, but... lets say I'm a beginer. So... I have a website which is designed with WYSIWYG Web Builder and plan to do more advanced things with it. One of the things I plan to do is put a popup for a poll I have created on my hompage. But so users dont get annoyed by the popup everytime they visit I need a Check box; and when ticked sets a cookie to stop the popup coming up. Seen as I'm new to html code I would like the full code/script and maybe instructions please! i have a trivia site, so far with 500 or so questions and answers. the answers each have a separate html page, but i am looking for a way to put them all on about 5 pages, and just have one section display in a frame when the question is answered. i have figured out how to display a certain part of a page, but the problem is, i don't want anything else from the page displayed, because they are all embedded youtube videos and they would all start at once. am i just stuck with having an html page for each answer? if you can help god bless you i'm really stuck on this. this is basically what the page will look like, even though there's much work to be done so all the links aren't working, etc... http://trilogy.awardspace.com/iframe.html Hello friend, If I post article more then some words , it takes two pages to display the content. Please help me to display the whole article in one page. See this: http://www.solvedhow.com/How+to+Lose+Weight-5.html This is the coding in paging.html. Please help me PHP Code: <?php class Lib_Paging { var $output=array(); var $prev; var $next; function Lib_Paging($model,$par,$cssstyle) { if($model='classic') $this->doClassicPaging($par,$cssstyle); if($model='default') $this->doDefaultPaging($par,$cssstyle); } function doClassicPaging($par = array(),$cssstyle) { // print_r($par);exit; // echo $cssstyle;exit; if(count($par)>0) { if(!isset($_GET['page'])) { $start = 1; $end = ($par['length']>$par['totalpages'] ? $par['totalpages'] : $par['length']); $s = 0; for($i=$start;$i<=$end;$i++) { $tmp = $_SERVER['QUERY_STRING']."&page=".$i; if($_GET['page'] == "" && $i==1) $this->output[++$s]= '<span class="current">'.$i.'</span>'; else $this->output[++$s]= '<a href="?'.$tmp.'" class=\''.$cssstyle.'\'>'.$i.'</a>'; } if($par['totalpages']>$par['length']) { $tmp = $_SERVER['QUERY_STRING']."&page=".($start+1); $this->next = '<a href="?'.($tmp).'" class=\''.$cssstyle.'\'>Next </a>'; } return true; } else if (isset($_GET['page'])) { $cpage = $_GET['page']; $mid = (int) ($par['length']/2); if($cpage > ($mid+1)) { $start = ($cpage - $mid); $end = $start + $par['length']-1; } else { $start = 1; $end = ($par['length']>$par['totalpages'] ? $par['totalpages'] : $par['length']); } $s=0; for($i=$start;$i<=$end;$i++) { $tmp = split('page',$_SERVER['QUERY_STRING']); $q = $tmp[0]."page=".$i; $tmp = split('&',$tmp[1]); $q .= (strlen(trim($tmp[1]) > 0) ? '&'.$tmp[1] : ''); if($_GET['page']==$i) $this->output[++$s] = '<span class="current">'.$i.'</span>'; else { if($i<=$par['totalpages']) $this->output[++$s] = '<a href="?'.$q.' " class=\''.$cssstyle.'\'>'.$i.'</a>'; } } if ($_GET['page']<$par['totalpages']) { $tmp = split('page',$_SERVER['QUERY_STRING']); $q = $tmp[0]."page=".($_GET['page']+1); $tmp = split('&',$tmp[1]); $q .= (strlen(trim($tmp[1]) > 0) ? '&'.$tmp[1] : ''); $this->next = '<a href="?'.($q).' " class=\''.$cssstyle.'\'>Next </a>'; } if($_GET['page']>1) { $tmp = split('page',$_SERVER['QUERY_STRING']); $q = $tmp[0]."page=".($_GET['page']-1); $tmp = split('&',$tmp[1]); $q .= (strlen(trim($tmp[1]) > 0) ? '&'.$tmp[1] : ''); $this->prev .= ' <a href="?'.($q).'" class=\''.$cssstyle.'\'>Prev</a>'; } } } } function doDefaultPaging($par = array(),$cssstyle) { // print_r($par);exit; // echo $cssstyle;exit; if(count($par)>0) { if(!isset($_GET['page'])) { $start = 1; $end = ($par['length']>$par['totalpages'] ? $par['totalpages'] : $par['length']); $s = 0; for($i=$start;$i<=$end;$i++) { $tmp = $_SERVER['QUERY_STRING']."&page=".$i; if ($end==1) // For A Single Display Page { $this->output[++$s]= ''; } else { if($_GET['page'] == "" && $i==1) $this->output[++$s]= '<li class=\''.$cssstyle.' selected\'>'.$i.'</li>'; else $this->output[++$s]= '<li class=\''.$cssstyle.'\'><a href="'.$_SESSION['ajasiteset']['sitefullpath'].'?'.$tmp.'" >'.$i.'</a></li>'; } } if($par['totalpages']>$par['length']) { $tmp = $_SERVER['QUERY_STRING']."&page=".($start+1); $this->next = '<li><a href="'.$_SESSION['ajasiteset']['sitefullpath'].'?'.($tmp).'"><span class="view_edit_next"></span> </a></li>'; } return true; } else if (isset($_GET['page'])) { $cpage = $_GET['page']; $mid = (int) ($par['length']/2); if($cpage > ($mid+1)) { $start = ($cpage - $mid); $end = $start + $par['length']-1; } else { $start = 1; $end = ($par['length']>$par['totalpages'] ? $par['totalpages'] : $par['length']); } $s=0; for($i=$start;$i<=$end;$i++) { $tmp = split('page',$_SERVER['QUERY_STRING']); $q = $tmp[0]."page=".$i; $tmp = split('&',$tmp[1]); $q .= (strlen(trim($tmp[1]) > 0) ? '&'.$tmp[1] : ''); if($_GET['page']==$i) $this->output[++$s] = '<li class=\''.$cssstyle.' selected\'>'.$i.'</li>'; else { if($i<=$par['totalpages']) $this->output[++$s] = '<li class=\''.$cssstyle.'\'><a href="'.$_SESSION['ajasiteset']['sitefullpath'].'?'.$q.' " >'.$i.'</a></li>'; } } if ($_GET['page']<$par['totalpages']) { $tmp = split('page',$_SERVER['QUERY_STRING']); $q = $tmp[0]."page=".($_GET['page']+1); $tmp = split('&',$tmp[1]); $q .= (strlen(trim($tmp[1]) > 0) ? '&'.$tmp[1] : ''); $this->next = '<li><a href="'.$_SESSION['ajasiteset']['sitefullpath'].'?'.($q).'" ><span class="view_edit_next"></span> </a></li>'; } if($_GET['page']>1) { $tmp = split('page',$_SERVER['QUERY_STRING']); $q = $tmp[0]."page=".($_GET['page']-1); $tmp = split('&',$tmp[1]); $q .= (strlen(trim($tmp[1]) > 0) ? '&'.$tmp[1] : ''); $this->prev = '<li><a href="'.$_SESSION['ajasiteset']['sitefullpath'].'?'.($q).'" ><span class="view_edit_pre"></span></a></li>'; } } } } } ?> Good day I need some help. I created a website in adobe dreamworks a while ago. I have added another link to a html file hosted on my website, but it doesn't work in IE and works fine in Chrome and Firefox. the link works, but not the whole page loads any suggestions? |