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..
niths -1 Posting Whiz in Training
Lusiphur 185 Practically a Posting Shark Team Colleague Featured Poster
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.
niths -1 Posting Whiz in Training
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
Lusiphur 185 Practically a Posting Shark Team Colleague Featured Poster
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.
niths -1 Posting Whiz in Training
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..?
Lusiphur 185 Practically a Posting Shark Team Colleague Featured Poster
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
mahesh2011 0 Light Poster
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..
Lusiphur 185 Practically a Posting Shark Team Colleague Featured Poster
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
.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
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.
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.