|
HTML - Scale/resize Div Based On Another Div?
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...
Similar TutorialsI 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? 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! 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 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? 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? 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>
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? Hello, I wrote the following HTML code: HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Admin Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="main">
<h2>Admin Page</h2>
<hr width="420" color="black" align="left">
<form method="post" action="$_SERVER[PHP_SELF]" name="form" >
<div class="textbox" style="height:35px;">
Username:
<input type="text" id="username" name="username" maxlength="30" />
</div>
<div class="textbox">
Password:
<span style="position: relative; left: 4px;"><input name="password" type="password" id="password" maxlength="30" /></span>
</div>
<br />
<div class="button">
<input type="submit" value="Sign In" name="submit">
</div>
</form>
<hr width="420" color="black" align="left" style="position: relative; top: -5px;">
<div id="info">
info here
</div>
</div> <!-- End main div -->
</body>
</html>
and the following CSS code: HTML Code:
body {
background-color:gray;
font-family:Comic Sans MS;
font-size:12pt;
color:black;
}
#info {
font-family:sans-serif;
font-weight:bold;
position:relative;
left:0px;
width:420px;
top:20px;
}
#main {
position:relative;
width:500px;
left:420px;
top:50px;
}
The problem I have is when you resize the browser nothing resizes. Can someone please help me get this page to resize? Help will be greatly appreciated. Thanks. I have read a bunch of stuff on this and checked the 14 pages, but I am getting confused. Will I be able to have my site open up full size according to the setting of the user computer by added a script to my site pages? TIA Hello, i need help understanding how to make my website automaticly resize depending on the resolution its viewed on i am viewing it on 1680 x 1050 and it looks fine but i then view it on a smaller monitor and everything gets moved about and squished, i notice on other websites that this is not the case and i do not know how its possible. my website url: http://mylocalmenu.co.uk/ you are able to view the source code and css files from the browser please help me with this problem, as it is the only problem i cannot fix. Thank you in advance to any help that i receive http://wantedfraternity.webs.com/oncall.html I cant resize the font of the "GOM" in the center. Its set at 13, but I need it around 18px. :-\ Help here plz. Hi all, I notice that on some websites when you minimize and maximize the window, the content on the site displays differently. For example if i reduce the browser window on this website - all content is still displayed as if it were open in a fully maximised window. What is this called? and How do you do it?? Cheers Raggy I am having a frustrating problem with IE7. I have a set of images that load in the proper place when the page loads in IE7. Then, if you resize the browser in any way the images do not move, but the rest of the page moves with the browser resize. This causes the images to go over other items on the page instead of staying where they should when the resize occurs. Does anyone have an idea about what the difference between Mozilla and and IE7 is that makes this type of problem occur? Anything I should look into or try to make the images "stick" to their proper place during a resize in IE7? Thanks. I am having a problem with images that vary in size. I let the user upload images and then display it on a web page. The problem is that the images that the users submit are different sizes. Some look good while others look distorted. Any Ideas? I have no earthly idea where this should actually go, so feel free to move. Our webpage is approx. 650 pixels across, which translates into too large of a document to be printable. It slices off a small amount of the right-hand side of the page when folks try to print it from IE. I noticed that when using Firefox though, the page is automatically resized to fit into an 8.5x11 space. If I want to add a "Print this page" element to the page, is there code that would tell the website to automatically resize itself to fit into a letter-sized document? I tried looking for tutorials but there either aren't any or I was getting the keywords wrong. Just curious, as this would be a helluva lot easier than resizing the entire site pixel-wise. Thanks for any suggestions =) I am looking for an easy code that when applied will resize an image link. I am trying to get around code that swaps one image for another on mouseover. I just want one image that will be resized on mouseover. I know this won't work, but something like: onMouseOver= width="180" height="180" with the original swap image being: width="190" height="190" Thanks for the help and for not slamming me for my ignorance! Peace. Hi, So i need some help. I hope i post this at the right place. I'm making a website, and i want the iframe to have auto resize, because the first page is a news page, and will therefor end up being pretty long, i dont want a scroll bar inside the iframe because i dont like the way it looks. I found a javascript thing that helped with i resize, the iframe extends if the news page gets longer with the news i post. BUT. if i go to any other page on the website, the iframe keeps the first pages height, and i dont want that, i want it to "shrink" and be as long as the information inside the iframe. this is the website right now, far from done by the way. http://martin.scorpionshops.com/spwebsite/index.html and as you can see the height of the iframe stays the same if you klick on any of the links in the menu, is there a way to fix this? this is the code that ive applied to the iframe and such on the index page where the iframe is located <!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> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SimplePlanWorldwide</title> </head> <body topmargin="0" link="black" vlink="black" alink="black"> <script language="JavaScript"> <!-- function autoResize(id){ var newheight; var newwidth; if(document.getElementById){ newheight=document.getElementById(id).contentWindow.document .body.scrollHeight; newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth; } document.getElementById(id).height= (newheight) + "px"; document.getElementById(id).width= (newwidth) + "px"; } //--> </script> <div align="center"> <table width="1024" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="4" background="header.jpg" height="294" border="0"> </td> </tr> <tr> <td colspan="4" height="65" border="0"><img src="menu.jpg" border="0" usemap="#Map2"></img></td> </tr> <tr> <td width="227" height="108" background="welcome.jpg" border="0"><p><font size="1" face="arial narrow" vlink="black" hlink="black" color="#ffffff"><br> Welcome to SimplePlanWorldwide!<br> SimplePlanWorldwide.com is a fansite for Simple Plan <br> and we are here to give you the latest about the band<br> and feed your Simple Plan cravings. Enjoy!</font></p></td> <td width="196" height="108" background="sitestats.jpg" border="0"><font size="1" face="arial narrow" vlink="black" hlink="black" color="#ffffff" valign="left"><br> <B>Owner:</B> Matilda | About <br> <B>Launched:</b> 2012.30.05 <br> <b>Layout:</b> Version 1.0<br> <b>Like this site?</b> Bookmark us!</font></td> <td width="204" height="108" background="disclaimer.jpg" border="0"><p><font size="1" face="arial narrow" vlink="black" hlink="black" color="#ffffff"><br> SimplePlanWorldwide is not affiliated with the <br> band, Simple Plan, Pat, Frenchie, Atlantic Records</font><font size="1" face="arial narrow" vlink="black" hlink="black" color="#ffffff"><br> or Lava Records, and we don't know the guys<br> personally. We're just a fansite for SP.</font></p></td> <td><img src="linksofficial.jpg" width="397" height="108 border=" border="0" usemap="#Map"0"></td> </tr> </table> <table width="1024" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" witdh="755" background="mainbackground.jpg" border="0" repeat="norepeat"><br> <center><iframe align="top" SRC="news.php" width="100%" height="200px" name="iframe1" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe></center> </td> <td valign="top" width="269" background="sidebackground.jpg" border="0"> <div class="twitter"> <center><br> <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'list', rpp: 8, interval: 30000, title: '', subject: 'SIMPLE PLAN TWEETING', width: '250', height: 700, theme: { shell: { background: 'transparent', color: '#999999' }, tweets: { background: 'transparent', color: '#444444', links: '#000000' } }, features: { scrollbar: false, loop: false, live: true, behavior: 'all' } }).render().setList('matildawr', 'simple-plan').start(); </script> </div></td> </tr> </table> <map name="Map" id="Map"> <area shape="rect" coords="7,22,151,77" href="http://www.simpleplanfoundation.org" target="_blank" alt="map" /> <area shape="rect" coords="164,13,226,100" href="http://www.officialspcrew.com" target="_blank" alt="map" /> <area shape="rect" coords="236,23,388,82" href="http://www.merchdirect.com/simpleplan" target="_blank" alt="map" /> </map> <map name="Map2" id="Map2"> <area shape="rect" coords="86,6,148,42" href="news.php" target="iframe1" alt="menumap" /> <area shape="rect" coords="190,7,331,40" href="information.html" target="iframe1" alt="menumap" /> <area shape="rect" coords="372,7,434,40" href="tour.html" target="iframe1" alt="menumap" /> <area shape="rect" coords="610,6,738,41" href="multimedia.html" target="iframe1" alt="menumap" /> <area shape="rect" coords="772,5,833,38" href="www.html" target="iframe1" alt="menumap" /> <area shape="rect" coords="474,6,568,38" href="http://martin.scorpionshops.com/spwebsite/forum/" target="_blank" alt="gallerymap" /> </map> </body> </html> So.. do you have any ideas? I dont know much css or javascript, or php for the matter, but i am willing to learn to make it work, so ANY methods that will make this work, just help me Hello! I am pretty new to HTML, but I was asked to make a webpage for my girlfriend's small business. What I want to do is copy the style used on the main image of this website: http://www.stellamccartney.com/. What I am looking to do is take an image and have it resize whenever I resize the browser window. If you can tell, the image is actually zooming in and out in order to maintain its correct ratio. I am not interested in copying anything else from this website, only the way the main image works. Looking at the source code has me baffled; I believe they wrote this using javascript, but I can't tell. If anyone knows how to create a similar effect as this site I would greatly appreciate the help. Thank you! Hi All, We have images which are displayed in panel series. We have images if all sizes and width, we have tried using width=100% which makes all the images to fit the width allotted, which makes the image BLUR if the image is very small. Is there a way by which we can have width=100% for only the oversize images and leave the others as it is. Regards, Nagesh |
|||||||