| Width Auto Resize To Fit Screen (CSS) by Nobody: 11:14am On Mar 29, 2010 |
hi guys, is there a way to auto re-size the width to fit the screen? |
| Re: Width Auto Resize To Fit Screen (CSS) by WebMonk(m): 3:55pm On Mar 29, 2010 |
The width of what? A div? A table? When the page loads, or when you resize the window? You have to be more specific. Depending on what, the solution (CSS/JS) might apply. |
| Re: Width Auto Resize To Fit Screen (CSS) by Afam4eva(m): 4:16pm On Mar 29, 2010 |
You have to use Liquid web design. try something like this in your CSS:
#wholepage { position:absolute; margin:0px; width:100%; }
The "width:100%;" will make it to fit the page. 1 Like |
| Re: Width Auto Resize To Fit Screen (CSS) by Nobody: 1:19am On Mar 30, 2010 |
yeah, @poster, go to google and search for how to do a liquid web layout. You can make a 3 column template and allow the middle column to be liquid while the sidebars are fixed - something like that Liquid.html <!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.oneColLiqCtr #container {
width: 100%; /* this will create a container 80% of the browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColLiqCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
-->
</style></head>
<body class="oneColLiqCtr">
<div id="container">
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>
I generated that with dreamweaver cs4 and tweaked it slightly. |
| Re: Width Auto Resize To Fit Screen (CSS) by Nobody: 10:08am On Mar 30, 2010 |
Ya DHTML. is right, i honestly don't think this concerns JS. it is strictly styling.
There r two kinda styling fixed or liquid and the one that can be changed,
The other is usually better when it comes to maintainance, But be more lucid with your request. |
| Re: Width Auto Resize To Fit Screen (CSS) by Afam4eva(m): 1:40pm On Mar 30, 2010 |
Donpuzo:
Ya DHTML. is right, i honestly don't think this concerns JS. it is strictly styling.
There r two kinda styling fixed or liquid and the one that can be changed,
The other is usually better when it comes to maintainance, But be more lucid with your request.
Where did u see DHTMLs post. O boy wake up. |
| Re: Width Auto Resize To Fit Screen (CSS) by Nobody: 2:51pm On Mar 30, 2010 |
Men. Nairaland sucks,
Anyway this is not the first time i am see errors with Nland, If say i smoke or drink Vinno Tinto before posting i go say na my fault,
@Afam4ever. Ok na u post am, Good, |
| Re: Width Auto Resize To Fit Screen (CSS) by Nobody: 7:54pm On Mar 31, 2010 |
and mehn, my post vanished into thin air after i spent several minutes composing it! Mr Poster, i hope you got the drift sha? |
| Re: Width Auto Resize To Fit Screen (CSS) by Nobody: 7:57pm On Mar 31, 2010 |
<!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.oneColLiqCtr #container {
width: 100%; /* this will create a container 80% of the browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColLiqCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
-->
</style></head>
<body class="oneColLiqCtr">
<div id="container">
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>
This was my post. I explained that this was generated by dreamweaver cs4 - the other story is lost permanently |
| Re: Width Auto Resize To Fit Screen (CSS) by Nobody: 9:10pm On Apr 01, 2010 |
and i reposted it again, and yet it vanished a second time. i think i will not post it again, anyone interested in seeing the code can contact me, at least don puzzo claimed to have seen the first one |
| Re: Width Auto Resize To Fit Screen (CSS) by OmniPotens(m): 1:31am On Apr 02, 2010 |
Sorry the spam bot is catching at them to be spam post. Already contacted the Admin on it. |
| Re: Width Auto Resize To Fit Screen (CSS) by Nobody: 5:43pm On Apr 02, 2010 |
well. . . |
| Re: Width Auto Resize To Fit Screen (CSS) by Nobody: 7:53pm On Apr 02, 2010 |
Jen chat abi na Jchat |
| Re: Width Auto Resize To Fit Screen (CSS) by c7(m): 9:57pm On Apr 02, 2010 |
@ *dhtml,
why do u put ur css in html comment. |
| Re: Width Auto Resize To Fit Screen (CSS) by Nobody: 6:10am On Apr 03, 2010 |
let me try post this again for the 3rd and last time |
| Re: Width Auto Resize To Fit Screen (CSS) by Nobody: 6:10am On Apr 03, 2010 |
<!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.oneColLiqCtr #container {
width: 100%; /* this will create a container 80% of the browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColLiqCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
-->
</style></head>
<body class="oneColLiqCtr">
<div id="container">
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>
|
| Re: Width Auto Resize To Fit Screen (CSS) by Seun(m): 6:08am On Apr 09, 2010 |
restored |
| Re: Width Auto Resize To Fit Screen (CSS) by Nobody: 8:07am On Apr 09, 2010 |
thank you very much. |
