|
HTML - Stop Page From Rearranging Itself When Resized
I know this is kind of an obvious question for all you guru's, but how do you stop your web page from shifting when you change the size of the window?
Similar Tutorialsgot a very basic page as this stuff is super new to me, not sure where to put or ask about this ... when the page is resized or when the bookmarks tab comes on in firefox browser my graphics all move around , didn't use to do this but i'm not sure. happens when u resize the actual page. everything kinda lines up to fit in the new space --- i really dont know -->loaded page up temporarily http://www.legendofthegknight.com/test/index.html I have this widget that a friend made for me. It allows the user to select the colors on the bracket bands on a picture of a mouth full of braces. If you grab a color and click on individual teeth - no problem. If you click on one of the buttons that colors all, top only, bottom only, odd only, even only, etc. When the button is clicked the page resets to the top. Play with it and you'll see what I mean. http://www.ellisorthodontics.com/brace-painter.php Any idea how I can make this not reset? The widget is html - it is on a php page. any help would be appreciated. I have a page that has links that are embedded into SWF games and the like. Is there any way to stop the DOCUMENT from allowing navigation off of the current html page. What I want to do is not allow any navigation to any other page once I am on a certain html document. thanks greg Is there anyway to stop the page 'jumping to the top' when using a link like the below? <a href="#">karthi</a> .. I just want it to stay in the same position on the page & not jump to the top of the page every time a link like that is clicked. Hi trying to throw down a couple of buttons along a line, but for some reason my second button gets put down to a second line instead of going right beside the first one. I changed over the <div> tags in the recommended button code to <span> in an attempt to stop the line break, but it persisted. Here is the url for test page: http://yournukes.com/PictureFlow4/test.html And specifically here is the code using for the buttons (I know they are style and there is a css section, but I believe this is an html/semantic question): <style> #rollover a { background: url(http://www.yournukes.com/tester1.gif) 0 0 no-repeat; padding-left: 20px; padding-top: 10px; width: 130px; height: 24px; vertical-align: middle; font-size: 14px; color: #000000; display: block; text-decoration: none; } #rollover a:hover { background-position: -150px 0; color: #FFFFFF; } </style><span id="rollover"><a href="#"></a></span><style> #rollover1 a { background: url(http://www.yournukes.com/parks.gif) 0 0 no-repeat; padding-left: 20px; padding-top: 10px; width: 130px; height: 24px; vertical-align: middle; font-size: 14px; color: #000000; display: block; text-decoration: none; } #rollover1 a:hover { background-position: -150px 0; color: #FFFFFF; }</style> <span id="rollover1"><a href="#"></a></span> ...BUT it might make more sense to view the code on the page to see it in context... Thanks so much... I have a way of complicating simple questions... So everytime I add a picture or text my website page gets "longer". I then move the text or picture with the "div" tag so I can position it where I like. But the webpage is still the same length as it was before I moved the object. So How can I stop the page from getting longer everytime I add text or picture to it? Thanks the web link is: http://bestusedexpress.com/junk_you_car_for_cash.html The send button is really big on the page, but when viewed in frontpage it is the size i want it to be. I put the height and width in the code but it cant be resized? Does anybody know if there is a way to change it, I think it might be automatically resizing to the size of a form box or something. Thanks in advance. Hi.. Back with more image questions.. May i know how/what do i do if i want to have a smaller image (in a size that i want)on my website.. and when i click on it.. it goes to a new page and shows e actual size? Right now, what i have is this.. .image { height: 85px; width: 85px; } <div style="position: absolute; top: 350px; left: 60px; z-index: 5;"> <img class="image" src="http://img97.imageshack.us/img97/6893/honey.jpg"> </div> <div style="position: absolute; top: 438px; left: 60px; z-index: 5;"> <img class="image" src="http://img82.imageshack.us/img82/4149/jessicaalba.jpg"> </div> Thanx.... I can't figure out why when this page is resized in IE7 the text and pictures disappear and all that is left is the background image. There is no problem with FireFox. Any suggestions? http://www.brackinsbaraz.com How do I stop images/pictures from moving when a browser window is resized? The images/pictures move underneath the navigation buttons when it is resized..........Thank You Here is the website. www.prasse.com 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?? I am using the body onload to open a new window but is it possible to check if the window is already open and if so to not refresh it as I am using it as a music player and hitting the home link starts it off again. Any suggestions and if so as much detail as possible would be greatly appreciated :-) Thanks, root. hi.. i jst noticed tht in a website its flash or its css background can be grabbed very easily. can any one suggest how to stop the grabbing of css and flas like grabbing is not possible in www.leoburnett.com so whts the technology behind tht website thanku ankit gupta I have display:inline and its adding in two drop boxes that it shouldnt. After the drop boxes it then stops the inline. Im new to css, have only been trying it for the past couple of days. The two drop down boxes are suppose to be on the left, under the links at the top. Can someone explain to me why inline stops where it does? Thanks. Oh yeah, the links under <li> I know their to the wrong address's. body { font-family:georgia,'times new roman',times,serif; color:#BD0A70; background-color:#F2F2F2; } ul.navbar { list-style-type: none; padding:0; width:32em; float:left; } ul.navbar li { display:inline; font-size:125%; background-color:#007BA7; margin:.10em; } ul.navbar a,ul.navbar a:visited { color:#ffffff; text-decoration:none; } ul.navbar a:hover { background:#00008B; } form.jump { /* position: absolute; */ float: left; } div.floatright { /* position: absolute; */ float: right; } h1 { clear:both; font-family:helvetica,geneva,arial,SunSans-Regular,sans-serif; } ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> <a charset="ISO-8859-1"> <!-- Site navigation menu --> <ul class="navbar"> <li><a href="index.html">Change email</a> <li><a href="musings.html">Change Password</a> <li><a href="town.html">F.A.Q.</a> <li><a href="town.html">Contact</a> <li><a href="links.html">Log out</a> <li> </li> </ul> <form class="jump" action="/reredirect.php" align="left" method="post"> <input type ="text" name="userpage" size="17" value="Jump to user page" onFocus="this.value=''"> <img src="cooltext406694699.png" align="absbottom" onmouseover="this.src='cooltext406694699MouseOver.png';" onmouseout="this.src='cooltext406694699.png';" input type="submit" value="Submit" name="submit"></img> </form> <div class="floatright"> <script type="text/javascript"><!-- /* 234x60, created 11/22/08 */ google_ad_slot = "0343255875"; google_ad_width = 234; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <!-- Main content --> <table> <tr> <td> <form method="post" action="/redirect.php" name="event"> <select name="select" class="breakinline" onChange="this.form.submit()"> <OPTION SELECTED>Select friend <OPTION value="/users/sharon">name1 <OPTION value="/users/carrie">name2 <OPTION value="/users/capy">name3 <OPTION value="/users/charla">name4 </SELECT> </FORM> <td> <form id="myeventz" method="post" action="/changeevent.php" name="myevent"> <select name="myevent" class="tabletxt" onChange="this.form.submit()"> <OPTION SELECTED=>12/25 Christmas</option> <OPTION value="0101 Event One">01/01 Event one <OPTION value=" 0202Eventtwo">Remove this event <OPTION value=" ">Add a new event </SELECT> </FORM> </td> </tr> </table> <p>Select item's to remove</p> i have a page with code below HTML 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-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Pixelate(enabled=false,duration=1,maxSquare=50)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate(enabled=false,duration=1,maxSquare=50)" /> <script src="http://www.savethedevelopers.org/say.no.to.ie.6.js"></script> <title>Untitled Document</title> </head> <body> <img src="http://www.sf4stu.com/attachments/month_0804/20080412_7374481915abcecb4439HQ4ovRdyjWnf.gif" /> </body> </html> when i test locally, i saw there is a information bar right on my IE browser how could i stop the information bar? since i trust my code is save~ Hello My video just keeps playing over and over! How do I stop it? Here's the coding: <table width="158" border="0" align="center" cellpadding="0" cellspacing="0"> <tr><br /><br /> <td height="126" align="center" valign="middle"><script> //<!-- AC_RunFlContentX ("src","Isokinetics.swf","quality","high","width","550","height","315","wmode","transparent","autost art","false"); //-->1 z </script></td> </tr> </table> even though I used clearInterval, it still move forever? why? How can I stop it? Code: var count = 10;
function run()
{
x = window.setInterval("MoveRight()",10);
}
function MoveRight()
{
count += 5;
document.getElementById("p2").style.left = count;
<!--p2 is a index of a pragraph-->
if (document.getElementById("p2").style.left == 400) {
clearInterval(x);
}
}
Thanks! I have done this before, but forgot exactly how I forced (and I mean FORCED) it to work in both IE and FireFox. I am creating borders. I clearly set the width and height of the divs that contain the border images. corners do not tile, vertical borders do not tile in the x dimension, and horizontal borders do not tile in the y dimension. Or they're not supposed to. To force IE to act right, I have to add overflow:hidden to the style. Everything works except for the horizontal borders, which tile one extra border. Like this: Anyway, would someone please examine this simple code and tell me why it isn't working? By the way... KE is our prefix, B is Border, V is Vertical, H is Horizontal, and C is corner, to help you figure out what the style names are. So, KEBC is a Border Corner which could be top-left, top-right, bottom-left, bottom-right. I MUST use background images for tiling purposes with the vertical and horizontal borders, so please, no lame answers to the effect: "just embed an <img> instead of using backgrounds..." THat doesn't solve the problem. ...In advance... HTML Code: <html>
<head>
<style>
.KEBC
{
position:absolute;
width:5px; height:5px;
background:no-repeat;
overflow:hidden;
}
.KEBVS
{
position:absolute;
width:5px;
background:no-repeatx;
overflow:hidden;
}
.KEBHS
{
position:absolute;
height:9px; width:5px;
background:no-repeaty;
overflow:hidden;
}
</style>
</head>
<body bgcolor="#000000">
<!-- Make a Framed Container DIV element -->
<!--~FC--><div style="width: 200px; height: 100px; background:#333333; position:absolute;">
<!-- -- First, do the corners -- -->
<!-- Top Left Corner (tlc.png) is 5x5 -->
<!--~TLC--><div class="KEBC" style="left:0px; top:0px; background:url(tlc.png)"></div><!--TLC~-->
<!-- Top Right Corner (trc.png) is 5x5 -->
<!--~TRC--><div class="KEBC" style="left:195px; top:0px; background:url(trc.png)"></div><!--BRC~-->
<!-- Bottom Left Corner (blc.png) is 5x5 -->
<!--~BLC--><div class="KEBC" style="left:0px; top:95px; background:url(blc.png)"></div><!--BLC~-->
<!-- Bottom Right Corner (brc.png) is 5x5 -->
<!--~BRC--><div class="KEBC" style="left:195px; top:95px; background:url(brc.png)"></div><!--BRC~-->
<!-- -- Next, do the top, sides, and bottom. You must specify width for horizontal borders and height for vertical borders -- -->
<!-- Top Side (t.png) is 1x5 repeatable, width of container - 10, left = 5, top = 0 -->
<!--~T--><div class="KEBHS" style="left:5px; top:0px; width:190; background:url(t.png);"></div><!--TLC~-->
<!-- Right Side (r.png) is 1x5 repeatable, height of container - 10, top = 5 -->
<!--~R--><div class="KEBVS" style="left:195px; top:5px; height:90; background:url(r.png);"></div><!--BRC~-->
<!-- Bottom Side (b.png) is 1x5 repeatable, width of container - 10, left = 5 -->
<!--~B--><div class="KEBHS" style="left:5px; top:95px; width:190; background:url(b.png);"></div><!--BLC~-->
<!-- Left Side (l.png) is 1x5 repeatable, height of container - 10, top += 5, left += 5 -->
<!--~L--><div class="KEBVS" style="left:0px; top:5px; height:90; background:url(l.png);"></div><!--BRC~-->
<!-- -- Next, do the horizontal split. You must specify width for the horizontal border -- -->
</div><!--FC~-->
</body>
</html>
Hi there, I'm trying to get the pictures he http://profiles.no-nick.com/example/ To look more like this: http://profiles.no-nick.com/pictures/female/ How can I get the gap out from between them? Hello! Made this layout mostly with tables. When the window is made smaller than the width the layout was originally intended for, the cells get narrower and taller, making the background image tile itself. Is there a way to stop the tables from resizing themselves when the window is made less wide? Page is here |
|||||||