PDA

View Full Version : Make page fit entire browser window??


noloc45
04-10-2010, 01:37 AM
So Im creating a page completely from scratch (no templates, etc). Everything looks good and what not, but whenever I open up the page in a browser and say I make the browser fit the entire screen, the page cuts off and then there is white space that I can scroll up/down & left/right. How do I make my page fit the entire page. Or how do I make it (elastic or fluid?) so that if I resize, the page resizes as I go?

Thank you!
GC

edbr
04-10-2010, 02:54 AM
width: 100%;

edbr
04-10-2010, 02:55 AM
having said that i prefer to set a width so the page looks the same and centre the content.

gentleone
04-10-2010, 09:29 AM
In order to get a liquid layout fits nicely on all the different screen resolutions there are can be quite challenging, but is not so difficult.
This article will get you where you want and make it more understandable (percentages, ems, minimum-width, etc.):
http://www.maxdesign.com.au/articles/liquid/

noloc45
04-11-2010, 09:11 PM
760Im not sure how to set the width. Ok here is what Ive done. I wanted to use the CSS layouts, but, it doesnt look like I want to to look because the main content is centered and then you get this grey space on the sides. If I fill in the background color, I still have the main content in th middle. I dont want that. I want to design my page from scratch. Ive been using the "AP Div" so that I can create whatever sized object I want and fill it in with whatever content I want. Problem is, whenever I preview the page, if I expand my browser, I have all this empty space wherever my content cuts off. So it doesnt expand with the browser. I want to create something like THIS PAGE (http://www.maxdesign.com.au/articles/liquid/) in terms of what the content does or doesnt do. If I expand the browser I want things to expand with it. But I do like the CSS layouts where everything is in the center. I want things on the sides and what not. HELP!!

edbr
04-12-2010, 03:56 AM
use properties or code view.
use floated relative positioning generally for layout,
Apdivs only for child items. use percentages and margins ( can also be percentages)
look up and learn about these aspects and you will be good to go

gentleone
04-12-2010, 05:43 AM
Ed is right. AP divs are not the right way to get a liquid layout. On the contrary, using AP divs for layout is actually not a good idea at all.

You don't need a position at all to get a stretchy div. A div will naturally fill a 100% width of the screen, so you don't have to set a width of 100% on that div.
The 'THIS PAGE' example of yours is what they called a semi-liquid layout. Only the header and the footer stretches on that page while the div that holds the content has a fixed width and has been centered with margin: 0 auto;

Here is another article with different examples (columns) of liquid layouts and a bit more up-to-date (2007) to the CSS techniques of these days than Max Design's article:

http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

noloc45
04-17-2010, 12:43 AM
Ahh! Im just a suuuuper novice when it comes to web design. I do video editing, not web coding or anything. But Im trying to learn.

So, let me start again. I selected the page layout "2 column liquid, right sidebar, header & footer" and I get THIS (http://www.iglesiarpc.com/1.png). So I go to the "CSS Styles" box in dreamweaver and I click on the ".twoColLiqRtHdr #container" and I changed it's width from 80% to 100% and I get THIS (http://www.iglesiarpc.com/2.png). Now..after I do that, I get rid of all that grey area around except for the bottom part. So I figured I would go back to the properties and change "height" from empty to "100%" like I did width. But nothing happens. That grey area is still there. How can I get the container to stretch out to the bottom of the page? Thanks guy!

edbr
04-17-2010, 01:00 AM
ost a link to your page if its 'live'

noloc45
04-17-2010, 01:16 AM
I started messing around with the template properties and got to this:

www.iglesiarpc.com/test.html