HTML - Text Resizing
Hi there,
I have some text inside a layer and I am pretty happy with it. Trouble is that I would like to disable the resizing from the browser so that the user cannot choose a text size that would mess up my text. I am refering to "View > Text Size" in IE. Can u help? Thks Similar TutorialsHi everybody, I created a training/FAQ/general information website at work and now I'm trying to take the website a step further, both aesthetically and functionally. I don't have a lot of formal training in web page design or coding, so please forgive me ahead of time for my lack of knowledge. I have noticed that when some users view the website on their computer that their zoom or text settings take precedence over my code. Is the fix for this as simple as defining the text size or are there additional steps that I need to take to ensure that the text doesn't resize and my tables/menus don't run off of the visible page? Here's some quick info about my site: - It's essentially a series of documents viewed in a browser (calling it a web page, in the traditional sense, feels like I'm lying since there's no URL & no server). - It's entirely client side scripting...HTML and Javascript, with some external CSS markup. I don't have the resources or permissions to use PHP or ASP or anything like that since I'm not a computer administrator. - The only browsers being used are IE 6.0 and 7.0 Thanks for the help... Hi... I have two (hopefully simple) questions: First, is there any way to make a table resize automatically to fit a browser window regardless of the size of the window when the table contains images? I know how to make the table fit the window using <width="85%">, but that only works to a certain point. What I would like to have the image resize itself as the table shrinks. Is this possible? Also, How do I get text to wrap around an image. Like have the image in the upper left corner. Then the text would start at the top of the image directly to it's right and continue on to the bottom of the image. Then it would drop down below the image all the way to the images left edge. I hope I am asking this correctly. Thanks in advance! hello all, I am facing a wiered pbm on text area resizing in chrome 2 and safari 4. I have on textarea which gets enabled/focus upon completion of one method (init()) . But after successful execution of init() method that text area doesnt enable user to type UNTIL user resizes the text area. I have put a css to disable the resizing of text area with resize:none style. but still the text area on chrome 2 and safari 4 isnt getting snabled/focus after init() method. Any one plz help me to solve this , will be very thank ful to him. I have even tried few options like increase the size of text area but didnt wrk, What worked is if while defining text area if I put default value , then only it focus the text area afyer init() method. But this options clashes with my requirment thanks Ani Hey everyone, I feel like this is a noob question, but I'm going to ask anyway. How do write my site so that my body stays in the same place and doesn't smash together when I manually resize my page? Any help is greatly appreciated. Thanks Hello, I'm kinda new to HTML, but have used it for a long time, just haven't used it to do stuff from scratch before. I was wondering how I would set up a page to resize and not have scrollbars. I'll attach an example. I want there to be a footer that will ALWAYS be at the bottom of the window, not just the content. I wan to have a middle section that will stretch between my header and footer, and I want it to have somewhat of an internal scrollbar if the content inside is bigger than the window: Code: The header footer, and middle section should fill the browser window ----------------------------------------------- header ----------------------------------------------- xxxxxxxxxxxxxxxxxx[^] -------------- xxxxxxxxxxxxxxxxxx| | | content: height=100%| | | | xxxxxxxxxxxxxxxxxx| | | | xxxxxxxxxxxxxxxxxx| | | more | xxxxxxxxxxxxxxxxxx| | | here | xxxxxxxxxxxxxxxxxx[v] _________| ------------------------------------------------ footer(bottom aligned to browser window ------------------------------------------------ Ok the ASCII isn't working too well... EDIT: Ok I got the footer working, but what about making the middle part span the width from the bottom of the header to the top of the footer without stretching out the page? I have a link that needs to open in a new, smaller window. I have the target="_blank" attribute set but the window opens at full size. I know that some people advise against opening links in a new window, but I need this one to do so. Any help greatly appreciated. I'm using the example frame as laid out he http://www.quackit.com/html/template...example_6.html and I'm struggling to figure out how to resize the 'Related' frame. I want to make it stretch to the top and bottom of the page (therefore making the width of the top and bottom rows smaller). The frame set code is: <frameset rows="100,*,80" frameborder="0" border="0" framespacing="0"> <frame name="topNav" src="top_nav.html"> <frameset cols="200,*,200" frameborder="0" border="0" framespacing="0"> <frame name="menu" src="menu_1.html" marginheight="0" marginwidth="0" scrolling="auto" noresize> <frame name="content" src="content.html" marginheight="0" marginwidth="0" scrolling="auto" noresize> <frame name="related" src="related.html" marginheight="0" marginwidth="0" scrolling="auto" noresize> </frameset> <frame name="footer" src="footer.html"> </frameset> </html> and the codes for the frames can be found he http://www.quackit.com/html/examples...ple_6_code.cfm To give you an idea of what I'm trying to achieve, I want to make the right hand lion extend up and down so that when the page resizes, the colours for the top and bottom borders will always match seamlessly. At the minute I have only managed to make the horizontal JPG smaller, not the actual frame. I know it sounds silly to even be asking questions about imagemaps, but i can't figure out any other way of getting what I want. Here's my issue: At the side of my page, in a frame, I want to have an image map that serves as a navigational pane for the whole site (links like 'home', 'about us', 'links'. . . ). From previous experience with websites getting all mucked up when viewed on different sized monitors or with different resolutions, I've made every image on the site resize-able as the the window dimensions are changed, hopefully ensuring nothing will ever get lost off the sides or mutated in wrap-around's. Everything looked great, and I was ready to apply the parameters to the image map, but of course, half-way through programming the imagemap, I realized the inevitable problem: As the image size changes, the co-ordinates of my imagemap will no longer apply to the graphic. I don't want to resort just putting ugly text over the scalable background image (which is where I'm at now) when everything else on the site looks so rich (or so I think). I'm certain that image maps aren't the answer, but is there anything else? My basic problem is that I want an series of links at the side of my page, attatched to buttons designed in photoshop, and totally resizeable as the all the other images on the site. Any help? Hi, is there a way that a window opens with a specific size? (not the window that opens with a link on a page) for example, when i go into www.gucci.com-the window will automatically resize to their specific size. I want my own website to open in a specific size but im not sure how.. I have a site which uses frames. I recently added a new page and in the page there is a link to open up a jukebox ,I made, in the upper frame. The frame the link is in is below the one where it is suppose to open. Everything works fine but the size for the top frame is smaller than the jukebox I want in there. So when you open up the link it opens the jukebox up but only a portion is shown. I have it so you are allowed to scroll but I'd prefer that the frame would be automatically rezized to fit the jukebox. Is that possible? If so can you please let me know how? Any Help is Appreciated Is there a way to disable the resizing of a window in firefox? I'm using this code: window.open('google.com','newwin','width=200,height=200,resizable=no') In Internet Explorer it's working fine but in Firefox it's not Thanks OK, what I want to do is set an image in a cell which will change size as the browser window is resized. So, say I have a three-cell table: ------------------------------------------------ | ---------------------------------------------- | | ---------------------------------------------- | |----------------------------------------------| | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | ------------------------------------------------ It is set to width=100% and height=100% (using css). The top cell has a fixed height of 50, the bottom-right cell has a fixed width of 600 (all this is just hypothetical, the actual page will be much more complicated). So, the bottom-left cell will be changing in height and width as the browser window is resized. The problem is that when I put an image in the cell and say height="100%" and width="100%" the thing doesn't work. If I give the cell and image a set width or height, the other dimension (height or width) stretches just fine. I know that the problem is that the image wants to maintain a certain aspect ratio (say, 1:3). What I want to know, in short, is if there is any way to override this and make the image render to the size of the cell whether or not that maintains the proper aspect ratio. hi.i need some help : i got a web page that looks something like this how can i make the background image to autoresize according to the screen resolution of the monitor from where the page is seen?same with the banner and the rest of the images.i basically want my website to look exactly like in the picture no matter what is the resolution of the screen and without a scroll bar. and another thing: how can i make to load only the text on the orangebox when i click a side link(e.g:assus) without refreshing the hole page.and how can i put a scroll only on the orange box so i can put a longer text and not to exit from that rectangular space? thank you Hi, I've created a page in a table that's 1080 pixels width with 3 columns, two side bars that are 165 and 200 pixels with banners and ads and a central panel 600 pixels for content and my screen settings are 1024x768 when I change my screen resolution to a smaller setting the table stays the same size but the content in the three columns shrinks so the page does not fit properly in the table and everything is out of place. What is the best way to format a page to stay the same no matter what the screen resolution or screen size is? Thank you in advance for your help. Sorry it's an intranet site but here is the html. Thanks for the tip Zegron <html> <head> <title>OCC Net</title> </head> <body> <table WIDTH="100%" valign="top" border="2" cellpadding="0" cellspacing="0"> <tr> <td></td> </tr> <tr> <td rowspan="200" width="163" valign="top"> <!--#include file="includes/links.asp"--> </td> <td align="left" valign="top" width="620"> <!--#include file="includes/CenterPanel.asp"--> </td> <td width="220" valign="top" rowspan="200"> <!--#include file="includes/RightMenuHome.asp"--> </td> </tr> </table> </body> </html> I have a site which I made relative and positioned to my 15" laptop screen... instantly I found a problem when I saw it on a smaller screen... and then on a larger screen... I need to somehow figure out a way for the images, text and div boxes to resize relative to the monitor being used. I've figured it out for the div tags, using a percentage, rather than pixel... but imaging size/possitioning and text size are a little more trickier to figure out? Code: .logo{ position:absolute; width:100%; top: 11px; } The images have been given a pixel width and height because the actual image is slightly bigger. What can I do? I work it out by dividing my screen resolution: (1280 x 800) by the actual pixels on my screen to get a percentage... is this the right way? (for example the div class .logo is 11 px from the top... would this then be 11 / 800 (resolution height) ... which gives me 0.013% is there another way perhaps? Hi I know how to resize an image to certain dimensions Code: <IMG src="http:www.example.com/image.jpg" alt="Image" align="top" border="0" width="50" height="50"> However, I dont want that! I want to resize it according to its original shape Like Myspace do with Images The image is resized but stays tall or wide What is the resizing code guys I'm re-styling a website I've build for people at work. It contains a header (or title) DIV, a menu DIV and a so-called InfoCell DIV (which is nothing more then a DIV containing an iframe that shows the requested page from the menu). The problem is that the iframe always resizes to a minimum size and can not show the requested page entirely. (see here) I want the iframe to resize to the InfoCell DIV which will in turn resize to the browser's viewing window (like the rest of the page does). (remark: the office uses IE6 atm cause upgrading to 8 or using a different browser appears to be a problem for some web-applications used at the office) I've tried JavaScripts, I've tryed adjusting CSS settings, but I can't get the iframe to resize itself to the size of its parent DIV. I can make the iframe fit the full size of the InfoCell DIV when I use fixed width and height in the css. But this cancels the ability of resizing the browser window to the user's liking. The parent DIV does resize when I resize the browser window, as do the menu and title DIVs. The XHTML code: Code: <div class="title"> Servicedesk ICT Web Application Portal </div> <div class="menu"> ...code for menu items... </div ... <div class="infocell"> <iframe src="http://rsdweb.info.uwv.nl/servicedeskrsdweb/" name="info" id="infoframe" /> </div> the CSS code: Code: div.infocell { margin:4px; padding:2px; border:1px solid #e0e0e0; background:#c3c3c3; overflow:auto; } div.infocell iframe { margin:0; border:none; } Any tips/tricks on how to make the iframe always fit 100% in its parent DIV? (so resizing the browser window will resize the DIV and the Iframe in turn). thnx Hello. I am currently making a website using tables. Basically I'm collecting php data feeds from an open-source CMS and feeding the data into different table cells via a php tag in each. I'm using a single background image for the whole table as I want that image to stay the same and I can't really use CSS for this. However, I cannot keep my table the same size. Of course, when my table shifts, it knocks all my data out of line and it doesn't sit right with the background image anymore. It is only about 780 pixels wide and I don't want it to resize with browsers etc, the size it is is fine to stay like that all the time. The text that is feeding into it doesn't appear to be wrapping and then just stretches the table, even though I've specified widths etc already. Any help would be much appreciated. Ta. Can anyone help me with a small issue I have with some frames? I've not used frames for ages, but have to for this project. I have 3 frames with fixed height and width, and the noresize attribute. Then I have 6 surrounding frames so the 3 content frames are always centered. My problem is the content frames resize when you shrink the browser. How can I stop this from happening? Page in question he http://www.swnetsolutions.com/frames/ The page is using the following code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title>Untitled</title> <!-- start frames --> <frameset rows="*,351,*" cols="*,823,*"> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> <frameset cols="322,501"> <frame noresize="noresize" name="image" src="image1.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" /> <frameset rows="51,300"> <frame noresize="noresize" name="nav" src="test.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" /> <frame noresize="noresize" name="content" src="test2.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" /> </frameset> </frameset> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> </frameset> <!-- end frames --> </head> <body> </body> </html> Hey everyone! I am a game developer and some of my games apear in Internet Explorer. The problem is that the players can resize the window if they got IE7 or IE8. On the previous versions this wasn't possible because I blocked it using HTML. How do I block this resizing option (100%..125%...) now? THANKS |