|
HTML - Automatically Shrink/grow Font Size?
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!! Similar TutorialsHow to code to make row in a table can grow and shrink automatically based on the data in each cell? 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 Hi, I'm currently designing this website: www.carmelalopez.com and I'm trying to get the images on the left to fit the size of the browser screen on the right when you click on them. The images themselves are huge, so I'd like some kind of code that resizes the images to fit the size of the visitor's screen, which will vary from user to user. This might not be an HTML question (maybe CSS), but any guidance in the right direction would be greatly appreciated. Thank you. If you can, look at my blog in both Firefox and IE. http://muttonpizza.com I work in Firefox so that is what I want it to look like. But in IE the captions under the pictures are 1/3 the size and in the "About This Blog" box the text is at least twice as big and looks like a different font. Any ideas what's going on. I can post the code if needed. I have taken over a website that has font size option. and now that i added some text, the text will not change when i use the font size option buttons on the left. anyone have any thoughts? http://www.aacwinnip...enda_Sklar.html Hello, I am have a small problem with text color. When I make the size smaller the color of it changes to a light grey instead of black. You can see it in the comments box... http://www.mesquitechristmas.com/loc...?id=2#comments Here is the CSS for the text I am using Code: .commentsDetails {
color: #000000;
font-weight: normal;
font-size-adjust: 0.40;
font-family: Tahoma, Verdana, Arial, Georgia, sans-serif;
}
Any idea why this is happening and how to fix it? -Thanks Hello Everyone I need help with this I know it is something easy but I cant get it to do what I want Im trying a Nudge For my heading and I would like it in the center and bigger and I cant get it to work for my other title of the screen look HTML Code: <!-- START OF SCRIPT -->
<html>
<head>
<title></title>
<script language="JavaScript1.2" type="text/javascript">
/*
Nudging text by Matthias (info@freejavascripts.f2s.com)
Modified by Dynamic Drive to function in NS6
For this script and more, visit [url]http://www.dynamicdrive.com[/url]
*/
//configure message
message="Fabric Shipping Rates!"
//animate text in NS6? (0 will turn it off)
ns6switch=1
var ns6=document.getElementById&&!document.all
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";
function jump0(){
if (ns6&&!ns6switch){
jump.innerHTML=message
return
}
if(message.length > 6){
for(i=0; i != message.length;i++){
txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"<\/span>"};
jump.innerHTML=txt;
txt="";
jump1a()
}
else{
alert("Your message is to short")
}
}
function jump1a(){
nfinal=(document.getElementById)? document.getElementById("n0") : document.all.n0
nfinal.style.left=-num2;
if(num2 != 9){
num2=num2+3;
setTimeout("jump1a()",50)
}
else{
jump1b()
}
}
function jump1b(){
nfinal.style.left=-num2;
if(num2 != 0){num2=num2-3;
setTimeout("jump1b()",50)
}
else{
jump2()
}
}
function jump2(){
txt="";
for(i=0;i != message.length;i++){
if(i+num > -1 && i+num < 7){
txt=txt+"<span style='position:relative;top:"+mes[i+num]+"'>"+message.charAt(i)+"<\/span>"
}
else{txt=txt+"<span>"+message.charAt(i)+"<\/span>"}
}
jump.innerHTML=txt;
txt="";
if(num != (-message.length)){
num--;
setTimeout("jump2()",50)}
else{num=0;
setTimeout("jump0()",50)}}
</script>
<meta content="Evrsoft First Page" name="GENERATOR">
</head>
<body>
<div id="jumpx" style="COLOR: blue"></div><script type="text/javascript">
if (document.all||document.getElementById){
jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx
jump0()
}
else
document.write(message)
</script><!-- END OF SCRIPT -->
<p align="center"> </p>
<p align="center">8 yards of cotton fabric in a flat rate envelope $4.25 (domestic) $9.50 (Int'l) & $7.50 (Canada) - FLANNEL would be approx 4 yds. </p>
<p align="center">Flat Rate Box for $8.25 (domestic only) which I can fit up to 18 yds regular cotton OR 10 yds of flannel.</p>
<p align="center"><font size="5"><strong><u>Every thing Else in our store Shipping Rates</u></strong></font></p>
<table bordercolor="#666666" cellspacing="0" cellpadding="2" width="400" align="center" border="1">
<tbody>
<tr>
<td width="50%" bgcolor="#336633">
<center>
<font color="#FFFFFF"><strong>Total Purchase Amount</strong></font>
</center>
</td>
<td width="50%" bgcolor="#336633">
<center>
<font color="#FFFFFF"><strong>Shipping Cost</strong></font>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 0 to 4.99</b>
</center>
</td>
<td>
<center>
FREE
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 5 to 9.99</b>
</center>
</td>
<td>
<center>
$6.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 10 to 39.99</b>
</center>
</td>
<td>
<center>
$7.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 40 to 59.99</b>
</center>
</td>
<td>
<center>
$8.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 60 to 79.99</b>
</center>
</td>
<td>
<center>
$9.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 80 to 109.99</b>
</center>
</td>
<td>
<center>
$11.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 110 to 119.99</b>
</center>
</td>
<td>
<center>
$12.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 120 to 169.99</b>
</center>
</td>
<td>
<center>
$14.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 170 to 229.99</b>
</center>
</td>
<td>
<center>
$16.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>230 to 269.99 </b>
</center>
</td>
<td>
<center>
$19.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>270 to 299.99</b>
</center>
</td>
<td>
<center>
$20.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>300 to 399.99</b>
</center>
</td>
<td>
<center>
$24.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>400 to 499.99</b>
</center>
</td>
<td>
<center>
$26.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>500 to 599.99</b>
</center>
</td>
<td>
<center>
$28.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 600 to 699.99</b>
</center>
</td>
<td>
<center>
$29.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>700 to 899.99</b>
</center>
</td>
<td>
<center>
$30.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>900 to 999.95</b>
</center>
</td>
<td>
<center>
$34.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>1000 to 1499.99</b>
</center>
</td>
<td>
<center>
$36.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>1500 to 1999.99</b>
</center>
</td>
<td>
<center>
$37.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>2000 to 2499.99</b>
</center>
</td>
<td>
<center>
$39.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>$2500 to 2999.99</b>
</center>
</td>
<td>
<center>
$41.95
</center>
</td>
</tr>
</tbody>
</table>
</body>
</html>
If you can Please help me How can I remove the font size Hi Guys, I wanted to large bold text (around 30px) in a field when typed in. Is this possible with HTML? My code is below. Thanks, Colin85 HTML Code: <form method="post" action="sendmail.php"> <div style="position:absolute; bottom:285px; left:250px;"> <input name="email" type="text"><br /> </div> <br /> <div style="position:absolute; bottom:174px; left:250px; "> <textarea name="message" rows="1" cols="40"> </textarea><br /> </div> <div style="position:absolute; top:569px; left:274px;"> <INPUT TYPE="image" SRC="http:/example.jpg" left= "200" BORDER="0" ALT="Submit Form"> </div> </form> </div> </div> I recently updated my homepage to include more text, and moved some of the image buttons around. I noticed however, that if I view the site and increase the size of the font (control+mouse wheel) it also increases the amount of spacing between the buttons, enough to move one of the images to the next row. Is there any way to stop these images from moving? The site is he http://www.bacchanalpromotions.com The current code is written like this, I think the margin tags are what gets increased when the font size goes up, but I don't know for sure... I tested on Firefox 3.6, at 1400x900 resolution. Code: <a href="booking.php?page=thss"><img height="100px" width="123px" src="performers_images/home-circus.png" onmouseover="this.src='performers_images/home-circus2.png'" onmouseout="this.src='performers_images/home-circus.png'" alt="" /></a> <a style="margin-left:13px" href="booking.php?page=fire"><img height="100px" width="123px" src="performers_images/home-fire.png" onmouseover="this.src='performers_images/home-fire2.png'" onmouseout="this.src='performers_images/home-fire.png'" alt="" /></a> <a style="margin-left:13px" href="booking.php?page=sideshow"><img height="100px" width="123px" src="performers_images/home-sideshow.png" onmouseover="this.src='performers_images/home-sideshow2.png'" onmouseout="this.src='performers_images/home-sideshow.png'"alt="" /></a> <a style="margin-left:13px" href="booking.php?page=stilts"><img height="100px" width="123px" src="performers_images/home-stilts.png" onmouseover="this.src='performers_images/home-stilts2.png'" onmouseout="this.src='performers_images/home-stilts.png'" alt="" /></a> I have this html page, you may see in the attachment. The body font-size is currently at 70%, this creates indentations for the lines below first line. If I change body font-size to 80%, the indentation is gone. Why is there such indentation if font-size is less than 80%? Thanks. I am running on firefox. Hi guys, I have two problems with my site http://www.djash.com Both problems have to do with charts section. 1. The font size for the charts shows bigger in firefox and chrome - it shows correctly on IE as intended. 2. I need to decrease the gap between the "Mainstream House" Charts and the "RnB" charts but I haven't been able to find a way to do it. thanks a lot in advance for anyone who can help with these 2 issues Andreas I am in the process of re-designing my website. old site www.ghilliesuitsource.com new site still a work in progress www.ghilliesuitsource.com/gss_test I am struggling with 2 things on my new site. 1) The parallelogram (tilted rectangle) images in the background are seperated by paragraph breaks so that I can alternate between left and right aligned. While all of the forground "stuff" text and product images are AP DIV elements so they hold their spacing. Page looks like I intend it to in IE but netscape/firefox appear to use a different paragraph break line size causing the forground "stuff" to appear lower and lower with respect to the parallelograms, and it gets worse the further down the page you go. 2) It appears as though IE will not change text size inside an AP DIV element when you go to "view-Text Size" This is good because I am using a graphic to act as a border around text. Netscape and Firefox do change font sizes in AP DIV elements so when you select a larger fontsize the text "spills" out of the border. If you can help me out with either of these problems I would certainly appreciate it. What's an easier (shorter) way to combine these elements? Code: <font face="verdana"><font size="3"><font color=#000000;"> thanks Hi all, I'm not sure if I'm posting in the right place but I have an issue with Internet Explorer 7. Apparently, when user's are looking at my website (it's internal) with IE 7 - the size of the font shrinks to 2 (or even lower). the site looks ok on fireFox/older version on IE. can anyone advise how to fix it? THANK YOU! hello people, I checked the other day how is easy to have a slider with html5 and how great looks, but I was wondering how can I use it to control the font size or color of the font or background. I use already the font size option for the user to my blog's posts but with javascript and by clicking on two images (plus, minus). A simple slider would be perfect but I cant find on internet how can I get the values from slider and feed the size or color. I only found one tutorial on html5 slider which just prints the number on the slider. I am not an excerpt so any help will be much appreciated. cheers Hello I am a total newbie to html and I am sure this can probably be answered in a second.... I am trying to make my title text very large to make a statement - maybe 5 cm high. It doesnt seem to matter how big i make it in my nvu editor, ( in the normal screen mode) once i upload it to my webspace online it only appears at a much smaller size. I can make it so the title literally fills the screen in my nvu editor and then upload it to my webpage and it still restricts the maximum size it shows it at. Does it sound like i am doing something wrong in my nvu html editor or should i be using some html text in the source mode to make the large text recognisable to my webspace, ie: using some font size comands? I hope this makes sense. Any help would be greatly appreciated Thanks Alex Hello All, I am increasing the font size of the text using javascript. In IE, the div size increases or text get automatically wrapped when font size increased. But in firefox browser, the div size remain same and text flows out of the div. Anybody having any idea to correct his behavior in firefox? Please help. Hello all, It'd be much appreciated if someone could tell me how to make the font smaller and remove visible tags (found on the left hand side) on my Tumblr page. I have the option to edit the HTML, but don't know where to begin. Here's a link to my Tumblr page. Any and all help would be appreciated. Thank you. |
|||||||