|
HTML - Ipad Portrait Web Shrink/scale?
Ok, I've been designing this site: www.patbianco.com.au and I have small problem I havent been able to solve. The design is specifically for an ipad, and I''ve been using the ipadpeek.com site to help me to check the site aswell as a borrowed ipad.
The site works great landscape, but once turned to portrait it gets scaled, the header should be the width of the screen. It's not just he header that is scaled, its the whole page. Here a screen shot of landscape: http://i53.tinypic.com/2sb4dhe.jpg Here a screen shot of portrait: http://i52.tinypic.com/2lj5pau.jpg Portrait CSS: http://pastext.net/2550 HTML: http://pastext.net/2551 Thanks In advance if anyone is able to help me. Hopefully there is, as I'm on a deadline Similar TutorialsWith the attached png images (in zip file) and code below, can anyone help me fix the first broken image? These frames will display thumbnails either in landscape or portrait. Also, I plan on having more than just these two frames on this page. I would like to have maybe 4 rows of 5 thumbnails per row and whether the thumbnail is portrait or landscape is totally random. I would rather do all this with css and divs but do not understand divs, so I am using tables. Thank you. 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-Language" content="en-us" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled 1</title> </head> <body style="background-color: #000000"> <table style="width: 242px; height: 177px" cellspacing="0" cellpadding="0"> <tr> <td style="width: 24px; height: 24px"> <img src="upleft.png" width="24" height="24" /></td> <td><img src="up.png" width="194" height="24" /></td> <td style="width: 24px; height: 24px"> <img src="upright.png" width="24" height="24" /></td> <td style="width: 24px; height: 24px"> </td> <td style="width: 129px; height: 24px"> <img src="upleft.png" width="24" height="24" /></td> <td style="width: 24px; height: 24px"> <img src="v_up.png" width="129" height="24" /></td> <td style="width: 24px; height: 24px"> <img src="upright.png" width="24" height="24" /></td> </tr> <tr> <td><img src="left.png" width="24" height="129" /></td> <td style="width: 194px; height: 129px"> </td> <td><img src="right.png" width="24" height="129" /></td> <td rowspan="2" style="width: 24px; height: 194px"> </td> <td rowspan="2" style="width: 129px; height: 194px"> <img src="v_left.png" width="24" height="194" /></td> <td rowspan="2" style="width: 24px; height: 194px"> </td> <td rowspan="2" style="width: 24px; height: 194px"> <img src="v_right.png" width="24" height="194" /></td> </tr> <tr> <td style="width: 24px; height: 24px"> <img src="downleft.png" width="24" height="24" /></td> <td><img src="down.png" width="194" height="23" /></td> <td style="width: 24px; height: 24px"> <img src="downright.png" width="24" height="24" /></td> </tr> <tr> <td style="width: 24px; height: 24px"> </td> <td> </td> <td style="width: 24px; height: 24px"> </td> <td style="width: 24px; height: 24px"> </td> <td style="width: 129px; height: 24px"> <img src="downleft.png" width="24" height="24" /></td> <td style="width: 24px; height: 24px"> <img src="v_down.png" width="129" height="23" /></td> <td style="width: 24px; height: 24px"> <img src="downright.png" width="24" height="24" /></td> </tr> </table> </body> </html> How to code to make row in a table can grow and shrink automatically based on the data in each cell? Okay, this is my first post at this forum and I should let you all know I'm very new and am so overwhelmed with it all that I don't even know where to start, I mean my mind keeps wondering off in different directions there is just so much to know. On with my question. I have a simple table with some css format, I would like to know how to stop the table from shrinking when the browser window shrinks. Basically if you make your browser smaller then you wouldn't be able to see all my content. Does this make sense? Code: <%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style>
h4
{ text-align: left;
}
td.table2 {border-top: blue thin ridge; width: 900px; height: 100px}
td.table3 {border-right: red thin ridge; border-top: red thin ridge; border-left: red thin ridge; width: 900px; border-bottom: red thin ridge; height: 100px}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<center><table>
<tr>
<td class="table3">
<h4>Text Text Text</h4></td>
</tr><tr><td class="table2">
<h4>Text Text Text</h4></td></tr>
</table>
</center>
</div>
</form>
</body>
</html>
I have a DIV that is a fixed size. I want to display a JPG within the div that is stored elsewhere. The problem is the jpg used can change and can be any size. What I want to try and achieve is to scale this jpg so it fits within the div but still maintainig its original proportions. Is there anyway to do this using HTML and CSS, or do I have to use JS? Thank you for any help in advance. Hi, I'm looking for a way (any way, could be html, css or javascript) to make an image to be scale down only. Here is what I means: if I have something like Code: <img src="picture.jpg" width="100%" alt=""/> it will fill the full space it can occupy (let say the whole viewport). Now if I have image with width resolution of 800px, and my viewport is 1024px, it will be scaled up, and if the viewport is 640px, it will be scaled down. What I want is that if the viewport is 1024px, it is not scaled at all (remain at the original resolution, that is 800px). But if the viewport is less than 1024px, than it will be scaled down to fit. Is there a way to do this? Hello. =) I'm trying to make font "shrink" or "grow" based on the browser's width/height...but so far, I'm having problems. I made this page as an example. If you manually resize your browser (ie: drag the sides of it and make it become smaller and smaller), you'll see that the picture maintains the same proportions, and the text stays in the same place. ...But the text doesn't "shrink" for some reason. If your browser is "small", I want the picture AND the text to get small too. For example, if the page is REALLY big, then the font should be size 18, and if it's really small, then the font would be size 1 or something. =\ Does anyone know how I can do this? Would I need to use the "Zoom" property? (I just recently heard about this property, so I don't know too much about it. But if I do need to use "zoom", please tell me: will it work in Firefox and other non-IE browsers?) Thanks in advance!! Hello I'm new to HTML Now straight to the point : I have a web page that looks too big when screen resolution is 1024x786 , but on the other pc (screen resolution 1280x1024 ) the same page looks too small and I have white spaces around it. I want my whole page with it's elements adapt to the browser window size and fit exactly to it ( I don't want to see that scrolling thing on the right or bottom ). You could just give me the link of the function/code I have to use. Here is my code if that helps. Code: <html>
<title>AiiT</title>
<body background="b.png" style="background-repeat:no-repeat; background-position:center center; width: 1024px;height:768px;">
<div style="background-image: url('1.png'); width:764px; height:557px; position: absolute;
top: 12%;
left: 50%;
margin-left: -382px; text-align:center;
"><div style="background-image: url('Tr.png'); background-repeat:no-repeat; position: relative; left:30px; top:30px;"><img src="Her.png" border="0" style="margin-top:10px;"><br><br>
<a href="en/"><img src="an.png" border="0"></a> <a href="lt/"><img src="li.png" border="0"></a><br><br><img src="Logo.png" border=0"></div></div>
</body>
</html>
Help appreciated. Hi Folks! I'm hoping to get some help with figuring out some html code for my optin page. Heres the prob, I created an opt in page but when its done it stretches my autoresponder subscribe box way out with a lot of empty space which looks bad and I can't figure out what in the html is causing it, was wondering if you might have a look and see if you can pick it up? I'll attach the entire opt in page and just the autoresponder code so you can see whats happening, I'd like to make the email aces box be the same size on my opt in page if possible. Well if you can I would appreciate it immensely! Thanks to all, Brian Jackson If I'm using basic html/css stuff and tables, how do I get it so my graphics and everything on my site scales properly to the viewers screen resolution? Any tutorials on this? thanks! i have a floating div who's height is determined by content, i would like acquire that div's hight and apply it's hight to a div on the page, when the page loads... This is for a flash site but I think it needs to be coded in the html page. My Flash swf size is approximately 1000x700. If the browser size is smaller than this the site needs to scale down but if it is larger I don't want it to scale. Just like this http://www.milesaldridge.com/. I've tried publishing the Flash settings at ScaleDefault(Show All) which scales it but I need to stop the scaling upwards at 1000x700. I'd have thought that I could say in the html if (width<1024){scale;} and if(height<700){scale;}. But it's not working. Should it all be done in the html and if so how? Hello all. I hope you can help me with the following problem with the mobile version of http://thekind.tk, my band's website. (direct link for desktops) As you can probably see, the website isn't that big but on my ipod it appears zoomed out. Of course the first thing I tried was putting this line between my <head>: Code: <meta name="viewport" content="width=device-width, initial-scale=1.0"/> But somehow this doesn't do anything for me. Even if I play with the parameters such as putting the scale at 2 or 3, the whole meta thing doesn't seem to affect my site's viewport at all. Any ideas on how to solve this? Basically I want to put this page "http://3d-story.com/Old-Afgan.html" into a 3rd party widget. When I place this 3rd party widget on my page I can scale the widget frame to any size I want, but the page within it doesn't scale. Looks like this "http://www.wix.com/mettam/test" What code do I need to put into my HTML code so that it will scale to the frame of the widget ? Here is an example of my code with in the widget. Code: <html>
<head>
<title>Old Afgan</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Old Afgan.jpg) -->
<script type="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
Old_Afgan_03_over = newImage("images/Old-Afgan_03-over.gif");
preloadFlag = true;
}
}
// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (Old Afgan.jpg) -->
<table id="Table_01" width="977" height="695" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://3d-story.com/images/Old-Afgan_01.gif" width="977" height="82" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://3d-story.com/images/Old-Afgan_02.gif" width="190" height="613" alt=""></td>
<td>
<a href="#"
onmouseover="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03-over.gif'); return true;"
onmouseout="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03.gif'); return true;"
onmousedown="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03-over.gif'); return true;"
onmouseup="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03-over.gif'); return true;">
<img name="Old_Afgan_03" src="images/Old-Afgan_03.gif" width="497" height="251" border="0" alt=""></a></td>
<td rowspan="2">
<img src="http://3d-story.com/images/Old-Afgan_04.gif" width="290" height="613" alt=""></td>
</tr>
<tr>
<td>
<img src="http://3d-story.com/images/Old-Afgan_05.gif" width="497" height="362" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
hello, i can not get the layout on the ipad right for a client. I do not own an ipad and am paying per minute of processing time to test. can someone please tell me what is wrong? http://sinupulse.com/index.php?p=1nf It is either to small or to large everytime either i or the site owner have tested it. thanks, Travis The first part , this page i need to put an widesky ad on both sides of the image & also want something that will rescale image to fit page as i need to fit in large images on the page , can this be done people? Hi there, I cannot figure out why this mp4 video will not play on ipad/iphone - i generated the video in 720 width at 30 fps. Please help, thanks. http://leilanimunter.com/12-02.14.htm Apple is obviously rejecting Flash to protect it's 'App' revenue. I've been on Android phones that run Flash and display all my content perfectly smooth. It can be quite frustrating how they are trying to bury it when I still have yet to see HTML5 replicate the type of interactive content Flash is capable of producing. Is there any way to display a message on the iPad when the Flash player is not found? I'd like it to says something along the lines of: "Unfortunately the Apple iPad does not support the Flash player because their business interests do not want it taking away from their App revenue. Did you know that the Dell Streak, HTC Flyer, Blackberry Playbook, Motorola Xoom, Samsung Galaxy Tab, Toshiba Thrive, and HP Touchpad all support the Flash player?" My HTML code looks something like this... <html> <head> <title>My Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#ECECEC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <body onresize="setFlashSize()"> <div id="flashid" style="width:100%; height:100%;"> <script type="text/javascript" language="JavaScript"> function setFlashSize(){ var viewportheight = document.body.clientHeight; var viewportwidth = document.body.clientWidth; var mydiv = document.getElementById("flashid"); var styleheight = parseInt(mydiv.style.height); var stylewidth = parseInt(mydiv.style.width); if (viewportwidth<880){ document.getElementById("flashid").style.width = 880+"px"; } else { document.getElementById("flashid").style.width = 100+"%";} if (viewportheight<760){ document.getElementById("flashid").style.height = 760+"px"; } else { document.getElementById("flashid").style.height = 100+"%";} } setFlashSize(); document.write('<object data="index1.swf" width="100%" height="100%" type="application/x-shockwave-flash">'); document.write('<param name="movie" value="index1.swf" />'); document.write('<param name="allowScriptAccess" value="always" />'); document.write('</object>'); </script> <noscript>Javascript must be enabled to view Flash movie</noscript> </div> </body> </html> My site is built with Microsoft Frontpage. I am willing to rebuild in Dreamweaver but I know it will take a very long time. My goal is to have my site display nicely on Ipads and Mobile phones. It looks good now except for the swf movie on my home page. Any ideas how to convert a swf movie to play on Ipads and mobile phones? Thanks! 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> Hello. My site is MoveHumanityForward.org and I'm trying to make the Facebook "like" area aligned on the right side with everything else, and have the remaining items go lower. Can you point me in the right direction? Thanks, Mikeal |
|||||||