|
HTML - Problem Resizing The Window
Hi folks,
I am frustrated and hope that someone can throw their three cents in the mix and offer a solution for a web design problem I'm facing. I am sure it is simple to someone who understands the complexities of web design. I am developing a website ..however when I go to view the site on a smaller monitor, my site looks squished and the elements are all on top of one another. I have a 20 inch monitor and I assume that I should be designing for a 17 inch, eh? What can I do so as my web page resizes correctly for any size monitor? http://www.talktomydog.com/coach.htm Do I need to change the resolution of the monitor to 800x600 when I design the site,,or is it something else I need to do? Thanks so much.. T Similar Tutorialsi'm trying to wrap my head around floats, and implement them into a new design i'm doing. basically it's a 4 column directory listing. it looks fine when the browser is >960px, but once you resize your browser so only two columns fit horizontally, the 3rd column appears below as desired BUT it is off to the right, and the 4th column is below on the left. once you resize your browser so only one column fits horizontally, it appears correct again. any tips to fix the layout when only two columns can fit horizontally? the site is here (css is in the header for now): http://cortlandareatribune.com/test/directory.html 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. 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 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.. 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 When I resize/drag window in IE8 and FF the screen remains perfect by getting a HR scroll bar, but Ie7 is not rendering images/divisions properly while resizing the window, all the text/menu get scrambled initially when dragging, but after refreshing it becomes perfect.. can I know why this happens? Is it problem with css or browser response/refresh time? I cannot give the link since this is an internal project hosted locally.. Any help appreciated.. Thanks Hi Can someone tell me how I can stop an image from moving behind a table - next to it - when the browser window is reduced? Here's the page http://www.tall-shiprace.com/2009/04/19/1247/ When I re-size (from the bottom right corner of the browser) the image floats behind the table - to the left of the image. Can this be stopped?? Greetings, Thanks in advance for any help. Basically, I'm new to HTML, I've made a site with an external CSS file, its all good, except that all the elements stay to the left. The browser background is grey, the actual page background is white (its an image, however, not just the colour). The page adjusts when I resize the IE window, but nothing else does, they just stay there. I've tried absolute positioning, relative, and so on, but nothing seems to fix it. How do I get the elements to move? I've attached the CSS and index file (named portfolio) for reference. I apologise in advance for my general noobiness. I hope the poorly written attachments don't hinder the helping process. Thank you, Panda. 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> Here's the code. I want this Joomla module to open in a new window. Not sure how to do it... Quote: <!-- Start of Flickr Badge --> <style type="text/css"> #flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#FFFFFF;} #flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;} #flickr_icon_td {padding:0 5px 0 0 !important;} .flickr_badge_image {text-align:center !important;} .flickr_badge_image img {border: 1px solid black !important;} #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;} #flickr_badge_uber_wrapper a:hover, #flickr_badge_uber_wrapper a:link, #flickr_badge_uber_wrapper a:active, #flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#FFFFFF;} #flickr_badge_wrapper {} #flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#FFFFFF !important;} </style> <table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="5" border="0"><tr><td> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=<?=$count?>&display=<?=$display?>&size=<?=$size?>&layout=<?=$layout?>&source =<?=$source?>&user=<?=$flickrid?>&tag=<?=$tag?>&group=<?=$flickrid?>"></script> </td></tr></table> <a href="http://www.flickr.com" target="blank" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a> </div> <!-- End of Flickr Badge --> I am new to HTML coding. I am trying to create a form, which, automatically submits the form contents and finally automatically close the browser window. But I am not able to get the self form submissions and self window closing. The code that I have written is found below. Kindly advice on how to get it working. Thanks in advance. <html> <body> </form> <p><b>This form submits an HTTP POST request to url '/forms_example/post'</b></p> <form name="form1" form method="POST" action="http://localhost/forms_example/post"> <table> <tr> </tr><tr><td>Name</td><td><input type="Text" name="name" VALUE="roger"></td></tr> <tr><td>Address</td><td><input type="Text" name="address" VALUE="smith"></td></tr> <tr><td>Phone</td><td><input type="Text" name="phone" VALUE="25714988"></td></tr> <tr><td>E-Mail</td><td><input type="Text" name="email" VALUE="roger.smithatgmail.com"></td></tr> <tr><td><input type="Submit" VALUE="submit" > </td></tr> </table> </form> </script> function GO(){ setTimeout("subForm()",0) } function subForm(){ document.form1.submit() } t = null; function closeMe(){ t = setTimeout("self.close()",2000); } </script> </body onload="GO()";"closeMe()"> </html> ok.. well.. im making a control panel.. that updates the parent window... this is the code in the parent window to pop up the child: <img src="g2cpanel.jpg" onClick="window.open ('cpanel.html', 'newWin', 'width=255, height=255')"> and this is the whole page of my child window: <html> <head> <title>boyo productions::control panel</title> <style type="text/css"> body {background-color: black; text-color: yellow; } .maintitle {background-color: yellow; text-align: center; }</style> <script language="JavaScript"> function updateParent(newURL){ opener.document.location = new URL } </script> </head> <body><center> <img src="cpanel.jpg"><br> <div class="maintitle">welcome to the control panel!</div> <a href="javascript: updateParent('index.html')">**home**</a><br><br> <a href="javascript: updateParent('codes.html')">**get the codes!**</a><br><br> <a href="javascript: updateParent('forum.html')">**forum(coming soon)**</a><br><br> <div class="maintitle">© boyo productions 2007-2008</div> </body> </html> my problem is that i can get the control panel to pop up once the image is clicked on, but, in that child window of a control panel, the links wont update the parent window.. whats wrong with my code? plz help me.. ty all Hi all, I am wondering if anyone know how to have a link, once clicked, open a popup window WHILE also changing the page in the existing window. I know how to code them separately, but I do not know how to combine the two actions. HTML Code: <A HREF="javascript:popUp('popup.html')">link name</A>
My site currently uses the above code to open popup windows. Any help would be much appreciated, David Here is the case. I have an HTML page that opens a pop-up. Within the popup I need upon click to open a new window. The code is as it should be according to all references: <a href="some url" target="_blank">text</a> Everything is ok with IE6 and IE7 - a new window is being opened. What happens in Firefox is very strange - tabs are shown and the currently opened popup becomes one of the tabs and the new window opens in a new tab of the pop-up window instead in a new normal window. Did anybody encounter the same problem? Any solutions? Hi all, I have two html file (first.html and second.html) i called the first.html from batch Command file, then the batch file calls the second.html file. what i want is that while loading the second.html it will close the first.html using script. If its a parent then i can use top.close() or parent.close() but its not a parent window. Here no parent file. please help me to do this. Thanks Jay 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? 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 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 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? |
|||||||