|
HTML - Shrink/expand Whole Page To Browser Window
Hello
I'm new to HTML Now straight to the point : I have a web page that looks too big when screen resolution is 1024x786 , but on the other pc (screen resolution 1280x1024 ) the same page looks too small and I have white spaces around it. I want my whole page with it's elements adapt to the browser window size and fit exactly to it ( I don't want to see that scrolling thing on the right or bottom ). You could just give me the link of the function/code I have to use. Here is my code if that helps. Code: <html>
<title>AiiT</title>
<body background="b.png" style="background-repeat:no-repeat; background-position:center center; width: 1024px;height:768px;">
<div style="background-image: url('1.png'); width:764px; height:557px; position: absolute;
top: 12%;
left: 50%;
margin-left: -382px; text-align:center;
"><div style="background-image: url('Tr.png'); background-repeat:no-repeat; position: relative; left:30px; top:30px;"><img src="Her.png" border="0" style="margin-top:10px;"><br><br>
<a href="en/"><img src="an.png" border="0"></a> <a href="lt/"><img src="li.png" border="0"></a><br><br><img src="Logo.png" border=0"></div></div>
</body>
</html>
Help appreciated. Similar TutorialsHello, I want to open a html page in a same browser window with fullscreen mode. I tried following code: window.open("hello.html","_self","fullscreen,scrollbars") However if I use _self, I did not get page in fullscreen mode. Any help is really appreciated. Regards, John Hello; I am a graphic designer that codes pages quick and dirty entirely with tables. The one I am currently working on needs to be centered in all browser windows at all sizes. I understand that this shouldn't be hard, however everything that I have tried so far hasn't worked. My thoughts are that since it is built entirely in tables (with a java search tool) that I need to make a centered container and place the entire page inside of it. I have tried a few codes I've pulled from other forums with no luck temporary url (and I know the code is dirty) www.showcasepublishing.com/myoutandabout Thanks in advance I have a terrible problem how to make this page resize whatever the resolution of the browser. I've already did liquid layout via percent but the height doesn't do it. They want the content to be scalable in whatever browser dimensions they want. Kindly help me. Thanks. Here is the html: Code: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Porter House New York</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/jquery.js"></script>
<script src="js/drop-down-menu.js"></script>
<!--[if IE]>
<script src="js/CreateHTML5Elements.js"></script>
<![endif]-->
<!--[if IE 6]>
<script src="js/unitpngfix.js"></script>
<![endif]-->
</head>
<body>
<header> <a href="index.html"><img src="images/logo_porter_house_new_york.png" alt="Porter House New York" class="logo" title="Porter House New York" /></a> </header>
<!-- end header -->
<nav>
<ul>
<li><a href="#" class="about" title="about">about</a>
<ul>
<li><a href="#" title="The Restaurant">The Restaurant</a></li>
<li><a href="#" title="The Chef">The Chef</a></li>
<li><a href="#" title="The Owners">The Owners</a></li>
</ul>
</li>
<li><a href="#" class="menus" title="menus">menus</a></li>
<li><a href="#" class="press" title="press">press</a></li>
<li><a href="#" class="photos" title="photos">photos</a></li>
<li><a href="#" class="private" title="private dining">private dining</a></li>
<li><a href="#" class="gift" title="gift certificates">gift certificates</a></li>
<li><a href="#" class="contact" title="contact">contact</a></li>
<li><a href="#" class="watch" title="contact">contact</a></li>
<li><a href="#" class="reserve" title="contact">contact</a></li>
</ul>
</nav>
<!-- end nav -->
<div id="content">
<div id="contentTop"> </div>
<!-- end contentTop -->
<div id="side"></div>
<!-- end side -->
<div id="main">
</div>
<!-- end main -->
<div id="contentBottom"> </div>
<!-- end contentBottom -->
</div>
<!-- end content -->
<footer>
<p>© Copyright 2007. Porter House New York. Powered by 2B-Unique.com</p>
</footer>
<!-- end footer -->
</body>
</html>
Here is the CSS: Code: /* ---------------------------------------- */
/* CSS RESETS */
/* ---------------------------------------- */
@import url('reset.css');
body {
background: #fff url(../images/bg.jpg) repeat-x center 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
/* ---------------------------------------- */
/* HEADER */
/* ---------------------------------------- */
header {
position: relative;
margin: 1% auto 0;
height: 20%;
width: 98%;
background: url(../images/header.png) no-repeat 0 0;
*background: url(../images/header_ie.gif) no-repeat 0 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
header img.logo {
margin: 3% 0 2% 3%;
height: 50%;
width: 25%;
}
/* ---------------------------------------- */
/* NAV */
/* ---------------------------------------- */
nav {
position: relative;
margin: 0 auto;
height: 28px;
width: 98%;
background: url(../images/nav.png) no-repeat 0 0;
*background: url(../images/nav_ie.gif) no-repeat 0 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
nav ul {
margin-left: 1.1%;
position: relative;
}
nav li {
position: relative;
float: left;
}
nav a {
display: block;
text-indent: -9999px;
height: 25px;
background: url(../images/nav_sprites.png) no-repeat 0 0;
}
nav a.about {
background-position: 0 0;
width: 73px;
}
nav a.about:hover {
background-position: 0 -25px;
}
nav a.menus {
background-position: -73px 0;
width: 85px;
}
nav a.menus:hover {
background-position: -73px -25px;
}
nav a.press {
background-position: -158px 0;
width: 83px;
}
nav a.press:hover {
background-position: -158px -25px;
}
nav a.photos {
background-position: -241px 0;
width: 98px;
}
nav a.photos:hover {
background-position: -241px -25px;
}
nav a.private {
background-position: -339px 0;
width: 145px;
}
nav a.private:hover {
background-position: -339px -25px;
}
nav a.gift {
background-position: -484px 0;
width: 166px;
}
nav a.gift:hover {
background-position: -484px -25px;
}
nav a.contact {
background-position: -650px 0;
width: 84px;
}
nav a.contact:hover {
background-position: -650px -25px;
}
nav a.watch {
background-position: -741px 0;
width: 252px;
}
nav a.watch:hover {
background-position: -741px -25px;
}
nav a.reserve {
background-position: -993px 0;
width: 121px;
}
nav a.reserve:hover {
background-position: -993px -25px;
}
nav ul ul {
position: absolute;
left: -10px;
top: 25px;
z-index: 900;
padding: 3px 0;
background-color: #ffffeb;
}
nav ul ul li {
float: none;
width: 143px;
}
nav ul ul a {
margin: 0 3px;
padding-left: 10px;
height: 16px;
width: 127px;
background: none;
color: #71462d;
font: normal 12px Tahoma;
text-indent: 0;
text-decoration: none;
text-transform: uppercase;
}
nav ul ul a:hover {
background: url(../images/submenu_hover.jpg) no-repeat 0 0;
color: #fff;
}
/* ---------------------------------------- */
/* CONTENT */
/* ---------------------------------------- */
#content {
position: relative;
margin: 0 auto;
overflow: hidden;
height: 304px;
width: 98%;
background: url(../images/content.png) repeat-y 0 0;
*background: url(../images/content_ie.gif) repeat-y 0 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
#contentTop {
position: absolute;
top: 0;
left: 1.05%;
z-index: 100;
background: url(../images/content_top.png) repeat-x 0 0;
*background: none;
height: 2%;
width: 97.85%;
}
#contentBottom {
position: absolute;
bottom: 0;
left: 1.05%;
z-index: 100;
background: url(../images/content_bottom.png) repeat-x 0 0;
*background: none;
height: 2%;
width: 97.75%;
}
#side {
position: relative;
float: left;
display: inline;
margin-left: 1.1%;
height: 304px;
width: 19.62%;
}
#main {
position: relative;
float: right;
display: inline;
margin-right: 1.1%;
min-height: 276px;
width: 76.07%;
padding: 28px 0 0 12px;
}
/* ---------------------------------------- */
/* FOOTER */
/* ---------------------------------------- */
footer {
position: relative;
margin: 0 auto;
width: 98%;
background: url(../images/footer.png) no-repeat 0 0;
*background: url(../images/footer_ie.gif) no-repeat 0 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
footer p {
margin: 20px 0 0 11px;
display: inline-block;
text-indent: -9999px;
height: 50%;
width: 40%;
background: url(../images/copyright.png) no-repeat 0 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
Hi im aware how to fit the width of a page so it fills the browser window but im curious on how to set the height of the page? the width works perfectly and just the height im stuck with hello, I'm an HTML novice who designed/maintains my own site without any expertise at all. One problem I can't seem to figure out: When the browser window is sized more narrowly than the content on the page, the table sections get shoved down underneath one another. Most sites I see don't do that -- when the browser window narrows, the site content stays in place. Any insight about what my error is? You can check out the problem at www.adamgwon.com. Thanks much. Hi Folks! I'm hoping to get some help with figuring out some html code for my optin page. Heres the prob, I created an opt in page but when its done it stretches my autoresponder subscribe box way out with a lot of empty space which looks bad and I can't figure out what in the html is causing it, was wondering if you might have a look and see if you can pick it up? I'll attach the entire opt in page and just the autoresponder code so you can see whats happening, I'd like to make the email aces box be the same size on my opt in page if possible. Well if you can I would appreciate it immensely! Thanks to all, Brian Jackson why the table i have dont expand over browser borders when sum of td widths is bigger than screen width? How can i overcome this problem? 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 How can I make the browser window that my site is in automatically have specific height/width dimensions? Making toolbar and scrollbar go away would also be nice. i got a problem i cant figure out. in dreamweaver when i add the behavior "open new browser window" to a link that is not external....but like a small pop up page.....when the user clicks on the link, the window opens, but the main window resets....meaning if the link was at the bottom of the page and the user scrolled down to get there....they then have to rescroll on the page to get back to the bottom. how can i get the new window to open without changing the view of the main page. many thanks! Hi: I would like to maximize a browser window after a page is loaded: I believe the command would be something like: <body onload="window.maximize" > Would someone care to correct or adjust or revamp the above statement please ? Thanks Mel Smith (still wandering about in the html wilderness) Suppose a user types the url of a website in their browser, so that the script http://url/index.htm is displayed in the browser. In other words, the user is not opening the page via a link or whatever, they are just typing in your url. In that situation, what (if anything) can you put in that script itself that gives the user's browser window a name that can be referred to later. The reasons why I want to do this are complicated, but in a nutshell this first window will become the parent window of other windows that open up later via links within the page, and script within those windows will have to refer to it by a name. Alternatively, is there some standard name that your browser window automatically recieves when you open up a website, like "parent" or something, that allows you to refer to it? Howdy! Is there a way to force a new browser window to automatically maximize itself? I have a few links from my home page to some of my other pages that I have included the target="_blank" code to in order to get these pages to open in a new browser window when someone clicks on the link. Here's an example: <a href="nextpage.html/" target="_blank">My next page</a> Is there a way to get this new browser window to open maximized? Thanks for your help on this. JohanM Similar to how most pop-up windows are a fixed size, I was curious as to how I could fix the size of a browsing window (particularly the width) of a page. Vertical scrolling isn't as important, but I would like my index page as well as the pages within the Iframe in the index page to remain a certain width so viewers would only have to scroll vertically to view the entire content of the html document. I have tried "stealing" the coding used in pop-up windows, trying it in both the head and body of the code but to no avail. I have searched for countless hours on the 'net looking for a tutorial that gives the code for this and have had zero luck. (I know it must be possible.) Any and all help/input is greatly appreciated! Thanks so much in advance, Dereck Hello, hopefully you can help me. I have the following code, which opens a new internet browser window: <form> <p align="center"><b></b> <select id="setit" style="color: #0000FF" size="1" name="test"> <option value="">Please Select</option> <option value="http://www.nu.nl">nu</option> <option value="http://www.telegraaf.nl">telegraaf</option> <option value="http://www.google.com">Google</option></select> <input type="button" value="Go" onclick="window.open(setit.options[setit.selectedIndex].value)"> </p></form> What do I need to change so the onclick opens the link in the same internet browser window instead of opening a new one? Many thanks, Ralfie 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> How can I get a browser window to open maximized regardless of screen size, screen res, or browser type/version? Thanks... 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? Im in the process of redoing my website. I originally did it in dreamweaver with a very cheesy method of just using hotspots. So Im going through and redoing it by hand in html. Im doing the index page right now and playing around with the idea of having the whole page in one table. My problem is the table isnt starting in the top left corner where I want it. I have the border set to "0" but theres still space around the table. How do I get rid of this space? My website pops up a browser window that cannot be resized. Occassionally though, the window's content exceeds its size. Is it possible to implement a scrollbar/scrollpane inside the window using just html? Cheers, James |
|||||||