fit webpage to the screen

Question

niths -1 Posting Whiz in Training

13 Years Ago

hi all,
i am having a web page.Now what my problem is i need to make the web page fit to any screen size. so i came to know that,it can be done using CSS. so can any one help me please..
Thank u..

web-design

Edited 13 Years Ago by niths because: n/a

3 Contributors
10 Replies
178 Views
7 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by Lusiphur

All 10 Replies

Lusiphur 185 Practically a Posting Shark

13 Years Ago

Niths;

Generally the easiest way to achieve a 'dynamic' page size is via CSS as you said.

One tried and true method is to use nested DIVs within a wrapper DIV to provide a fluid background and content positioning over top of a filler (stationary) background.

The concept is that you use a "wrapper' as a container to hold everything else. Think of the wrapper as the layer of an image that is furthest to the back.

From there you use nested DIVs moving forward in layers until you reach the top-most layer of your content. Something like:

Wrapper(BG DIV(Content DIV)))

Basically the wrapper contains the 'primary' background (stationary) over which the dynamic background DIV floats. Within that is the content itself sized to fit within the background imaging.

It doesn't always need to be as complex as what I've indicated, I'm just giving an example from how I did mine. I used the <body> as my "wrapper" giving a flat #CCCCCC background colour and some of the body-wide formatting to the #Body class in my CSS. I used the first <div> as my sized/centered background image container (my dynamic background is actually encased in 2 DIVs as Internet Explorer won't allow a multiple background image like other browsers will) which is 800 px wide with left and right margins set to auto so it automatically floats left/right based on the browser window size it's being shown in. My inner DIV is used to contain my content which I use tables to further align between my floating background's proportions.

In theory, using CSS and coupling with some JavaScript you can determine the browser's inner-dimensions and have your content resize dynamically as well but this can very easily get messy and inefficient time wise to implement.

Hope this helps you :) Mark as solved if it solves your issue.

Here's my CSS for the 3 sections I mentioned above:

#Content {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	background-color: #CCC;
	background-image: url(imgs/logo_bg.png);
	background-repeat: no-repeat;
	background-position: top;
	padding: 0 0 0 0;
}
#bg {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	background-color: #CCC;
	background-image: url(imgs/bg_patt.png);
	background-repeat: repeat-y;
	background-position: top;
	padding: 0;
}
#bodyBG {
	background-color: #CCC;
	margin-top: 0;
}

And the relevant HTML segments:

<style type="text/css">
<!--
@import url("resStyles.css");
-->
</style>
</head>
<body id="bodyBG" onload="MM_preloadImages('imgs/about_pressed.gif','imgs/cv_pressed.gif','imgs/blog_pressed.gif')">
<div id="bg">
<div align="center" id="Content">

The result can be seen at http://www.bariby-quance.com to give you an idea of how it all fits together. The div with the "bg" id is the background behind my site logo, the div with the "Content" id is the simple repeating (vertically) gradiant lines down either side of my content.

Edited 13 Years Ago by Lusiphur because: n/a

Lusiphur 185 Practically a Posting Shark

13 Years Ago

Sorry, I must've been editing my post while you were asking your question but I added both CSS and HTML examples as well as a link to my site so you can see the results of how it all comes together :) The CSS is stored in a separate file so it can be re-used on all the pages in your site instead of having to re-do <style> tags on each page.

Edited 13 Years Ago by Lusiphur because: n/a

Lusiphur 185 Practically a Posting Shark

13 Years Ago

Did you visit my site? Because it works like that.

Basically if the screen width is wider than the content DIV (mine was set at 800px) then there is no horizontal scroll bar and the content DIV is centered horizontally.

Once inner browser width < div width the div will stop repositioning and you will get a scroll bar to accomodate the div width.

|<-------------Inside width of browser------------->|
|<--------Width of DIV-------->|
No Scroll Bar

|<-Inside width of browser->|
|<--------Width of DIV-------->|
Scroll Bar

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

niths -1 Posting Whiz in Training · Answer 1 · 2010-07-06T11:52:04+00:00

so the above code can solve my problem..? so if my page is opened in large screens also then the page wil fit to the screen.. right

niths -1 Posting Whiz in Training · Answer 2 · 2010-07-06T12:05:11+00:00

so will it works if the screen size is small...? wat i mean is if the screen size is small then i shold not get scroll bar horizontally. so wil it works for that also..?

mahesh2011 0 Light Poster · Answer 3 · 2010-07-06T12:15:06+00:00

It all depends on the resolution of the system.Keeping in mind that which type of monitor it is we can fix a web page..I think there is a function which works dynamically for this type ..but we can do it using css i doubt .....may be there is a dynamic function which takes care of automatically updating the size of web page ..as soon as it is typed in the url..by looking through the Ip address...it may adjust to the resolution..

niths -1 Posting Whiz in Training · Answer 4 · 2010-07-06T12:17:47+00:00

ya i need that. so dynamically it should adjust to the screen no matter if the screen is big or small.it should adjust to that. so hw can i do that..is 800px can solve my problem

Lusiphur 185 Practically a Posting Shark Team Colleague Featured Poster · Answer 5 · 2010-07-06T12:20:41+00:00

There are methods for calling the inner screen resolution of the browser at time of page load using JavaScript and providing tailored output dependant on pre-set resolution values but...

I tend to avoid that sort of process because it means 1) having to tailor content to either have all elements resizable without distortion or 2) creating multiple copies of your pages to accomodate different resolutions and with the vast number of variations in monitor sizes available these days #2 is very impractical and #1 can be unpredictable in the way it displays.

It's generally easier to build to a specific minimum dimension (in my case 800px width) and dynamically account for extra margin space than to try to completely "fit to screen" your content.

Again, just my opinion though :)

niths -1 Posting Whiz in Training · Answer 6 · 2010-07-06T12:28:55+00:00

.maintable
{
	width: 100%;
	background-color: #000000;
	
	
}
.bookmarkus
{
	width: 100%;

}
.logotable
{
	width: 100%;

}
#imagecount
{
	font-family: Calibri;
	font-size: 14px;
	color: #5595F5;
}

so this is my style sheet.i had given link of this css to my home page. so wat necessary steps to be taken. i mean where i have to change to make my problem solve.

Lusiphur 185 Practically a Posting Shark Team Colleague Featured Poster · Answer 7 · 2010-07-06T12:52:39+00:00

Ok... um... let's try this approach (because honestly without knowing your actual html code and without spending the next half hour to an hour writing your code for you all I can do is give an example from my own code).
On my html page(between the <head></head> tags:

<style type="text/css">
<!--
@import url("resStyles.css"); //imports resStyles.css stylesheet
-->
</style>

The body tag:

<body id="bodyBG">

sets the body properties to match #bodyBG in my CSS file

#bodyBG {
	background-color:#CCC;
	margin-top: 0;
}

The first DIV tag

<div id="bg">

sets a "wrapper" around the rest of the page which contains my primary "centered" background image as outlined by #bg in my CSS file

#bg {
	width: 800px; //Sets the width of the DIV to 800px
	margin-left: auto; //Sets the left margin to auto
	margin-right:auto; //Sets the right margin to auto (combined with left makes 800px div 'float' if page wider than 800px)
	background-color:#CCC; //Sets the background colour of the div to #CCC
	background-image: url(imgs/bg_patt.png); //Sets the background image to imgs/bg_patt.png
	background-repeat: repeat-y; //Sets repeat value on background image to have it repeat down the y axis (vertically)
	background-position:top; //Positions background to top of DIV
	padding: 0; //Sets 0 padding to all sides of DIV
}

The second DIV tag

<div align="center" id="Content">

Sets a center aligned DIV with properties to match #Content in my CSS files, this DIV contains the background image behind my logo and navigation segment of the page.

#Content {
	width:800px; //Sets the width of the DIV to 800px
	margin-left:auto; //Sets the left margin to auto
	margin-right:auto; //Sets the right margin to auto (combined with left makes 800px div 'float' if page wider than 800px)
	text-align:center; //Sets the text alignment inside the div to center
	background-color:#CCC; //Sets the background colour of the div to #CCC
	background-image: url(imgs/logo_bg.png); //Sets the background image to imgs/logo_bg.png
	background-repeat: no-repeat; //Sets no-repeat value to background image
	background-position:top; //Positions background to top of DIV
	padding: 0 0 0 0; //Sets 0 padding to all sides of DIV
}

As a note if you're copying any of the rows from the above CSS code you need to remove any segments following "//" as that code is not CSS, merely descriptions I added to clarify the code.

Hope this helps :) Please mark as solved if it clears up your issue.

fit webpage to the screen

Recommended Answers Collapse Answers

All 10 Replies

Recommended Answers