Hello everyone,<br />
<br />
I have finished creating my website and there is only one downer. I dont know how to make the size of the website adapt to the different resolution.<br />
<br />
Will anyone be able to help me.<br />
<br />
Thanks for the help that anyone will be able to give me.<!--content-->Typically, through a percentage width. If a 'wrapper' container (I prefer DIVs) is set to a width, then you can margin:0 auto; it, which 'centers' it.<br />
Caveat: -you need a valid !doctype to make this work for IE (you should be using a valid !docytype anyway).<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"><br />
<html><head><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<meta http-equiv="Content-Style-Type" content="text/css" /><br />
<meta http-equiv="Content-Script-Type" content="text/javascript" /><br />
<title></title><br />
<style type="text/css"><br />
*{border:0; padding:0; margin:0;}/* Set everything to "zero" */<br />
<br />
body {min-height:100%; height:101%;<br />
font:x-small Arial, Verdana, sans-serif;<br />
voice-family: "\"}\"";voice-family:inherit;<br />
font-size:small;/*for IE 5.5 */<br />
} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */<br />
font-size: small; voice-family: "\"}\"";<br />
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */<br />
<br />
p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}<br />
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;<br />
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}<br />
h1{font-size: 1.93em;}<br />
h2{font-size: 1.72em;}<br />
h3{font-size: 1.52em;}<br />
h4{font-size: 1.42em;}<br />
h5{font-size: 1.32em;}<br />
h6{font-size: 1.21em;}<br />
</style><br />
<br />
<script type="text/javascript"><!--<br />
// --><br />
</script><br />
<link rel="shortcut icon" href=http://www.webdeveloper.com/forum/archive/index.php/"favicon.ico"><!-- path to your favicon --><br />
</head><br />
<body><br />
<div style="width:95%; border:3px double silver; margin:0 auto;"><!-- "wrapper of page" --><br />
<br />
<div style="padding:25px 15px 25px 20px; margin:20px; background-color:#ececec;"><br />
<h1>First Section</h1><br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.<br />
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,<br />
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac<br />
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.<br />
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla<br />
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum<br />
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor<br />
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan<br />
turpis at erat.</p><br />
<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.<br />
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium <br />
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar<br />
purus, vel hendrerit ipsum tellus at ante.</p><br />
</div><br />
<br />
<div style="padding:25px 15px 25px 20px; margin:20px; background-color:#ececec;"><br />
<h1>Second Section</h1><br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.<br />
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,<br />
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac<br />
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.<br />
Vivamus pretium dolor. </p><br />
</div><br />
<br />
<div style="padding:25px 15px 25px 20px; margin:20px; background-color:#ececec;"><br />
<h1>Third Section</h1><br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.<br />
Praesent nonummy. </p><br />
</div><br />
<br />
</div><!-- end "wrapper of page" --><br />
</body><br />
</html><!--content-->yep, what Webjoel said. Building with CSS layout will make things easier, but if you used tables, then everything basically stays the same size.<!--content-->Thanks for the help guys.<br />
<br />
I do use tables, i have tried <div> but it is abit hard. I only use div for my drop down menus. In my free time i will study on how to use <div>.<br />
<br />
It works what you have told me. There will be loads more question.<br />
<br />
Thanks again for your help.<!--content-->Yeah I know... TABLEs seems easier. But to get a 'table cell' capable of holding any 'data' (text, images, etc), you have to build a TABLE, a TABLE ROW <tr> and a TABLE CELL <td>. <br />
Using DIVisions <div>, you just build the equivelant of a <td> but with the effect of being a TABLE...<br />
<br />
You can can FAR more using DIVs, they're smaller in size, can be used 'nested' whereas TABLE mess-up when nested (WIN_98 hs a particular problem with TABLEs nested three or four deep when using minimal RAM... you can pop a BSOD quite reliably!).<br />
<br />
Trust me... you get your mind around CSS -even a little bit-, it just becomes insanely easy and you can focus upon the content, not the presentation. -I liken it to my childhood days playing football in the park and using a twig to sketch-out an upcoming play in the dirt... to tell a story and make others see my idea. -CSS is kinda like that. You don't have to publish a spiral-bound glossy-paged User's Manual in triplicate (and hope that it has no editorial errors, as does the majority of DW/FP-built TABLE-builds) to present upcoming gameplays to your teamates... Focus on the game, the presentation is 'behind the scenes'.. (I'm sure I lost ya and 98% of the readers at this point...)<!--content-->use tables and set percent width not px.<!--content-->Which is easier?<br />
<br />
<table><tbody><tr><td><br />
<br />
or<br />
<br />
<div><br />
<br />
I think the second is a lot shorter to type and the stylesheet commands for setting out both are almost the same.<br />
<br />
Save using tables for when you have tabular data (like you find in spreadsheets).<!--content-->how do u create rows of <div> like you can do with tables.<br />
<table><br />
<tr><br />
<td></td><br />
<td></td><br />
</tr><br />
</table><br />
<br />
I have no idea at all on how to use it. Well iknow you type<br />
<div><br />
</div><br />
<br />
But there must be something else to type in.<!--content-->how do u create rows of <div> like you can do with tables.<br />
<table><br />
<tr><br />
<td></td><br />
<td></td><br />
</tr><br />
</table><br />
<br />
I have no idea at all on how to use it. Well iknow you type<br />
<div><br />
</div><br />
<br />
But there must be something else to type in.<br />
<br />
My usual way is:<br />
<br />
<div class="container-hold"><br />
<div class="left"><br />
</div><br />
<div class="right"><br />
</div><br />
</div><br />
<div class="container-hold"><br />
<div class="left"><br />
</div><br />
<div class="right"><br />
</div><br />
</div><br />
<br />
With styling applied to the classes by CSS - which reduces coding clutter, and allows for global style changing if required.<!--content-->Thanks for all of the info mate.<br />
O and there will be loads more question coming your way when i need them.<!--content-->
<br />
I have finished creating my website and there is only one downer. I dont know how to make the size of the website adapt to the different resolution.<br />
<br />
Will anyone be able to help me.<br />
<br />
Thanks for the help that anyone will be able to give me.<!--content-->Typically, through a percentage width. If a 'wrapper' container (I prefer DIVs) is set to a width, then you can margin:0 auto; it, which 'centers' it.<br />
Caveat: -you need a valid !doctype to make this work for IE (you should be using a valid !docytype anyway).<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"><br />
<html><head><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<meta http-equiv="Content-Style-Type" content="text/css" /><br />
<meta http-equiv="Content-Script-Type" content="text/javascript" /><br />
<title></title><br />
<style type="text/css"><br />
*{border:0; padding:0; margin:0;}/* Set everything to "zero" */<br />
<br />
body {min-height:100%; height:101%;<br />
font:x-small Arial, Verdana, sans-serif;<br />
voice-family: "\"}\"";voice-family:inherit;<br />
font-size:small;/*for IE 5.5 */<br />
} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */<br />
font-size: small; voice-family: "\"}\"";<br />
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */<br />
<br />
p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}<br />
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;<br />
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}<br />
h1{font-size: 1.93em;}<br />
h2{font-size: 1.72em;}<br />
h3{font-size: 1.52em;}<br />
h4{font-size: 1.42em;}<br />
h5{font-size: 1.32em;}<br />
h6{font-size: 1.21em;}<br />
</style><br />
<br />
<script type="text/javascript"><!--<br />
// --><br />
</script><br />
<link rel="shortcut icon" href=http://www.webdeveloper.com/forum/archive/index.php/"favicon.ico"><!-- path to your favicon --><br />
</head><br />
<body><br />
<div style="width:95%; border:3px double silver; margin:0 auto;"><!-- "wrapper of page" --><br />
<br />
<div style="padding:25px 15px 25px 20px; margin:20px; background-color:#ececec;"><br />
<h1>First Section</h1><br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.<br />
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,<br />
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac<br />
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.<br />
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla<br />
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum<br />
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor<br />
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan<br />
turpis at erat.</p><br />
<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.<br />
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium <br />
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar<br />
purus, vel hendrerit ipsum tellus at ante.</p><br />
</div><br />
<br />
<div style="padding:25px 15px 25px 20px; margin:20px; background-color:#ececec;"><br />
<h1>Second Section</h1><br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.<br />
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,<br />
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac<br />
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.<br />
Vivamus pretium dolor. </p><br />
</div><br />
<br />
<div style="padding:25px 15px 25px 20px; margin:20px; background-color:#ececec;"><br />
<h1>Third Section</h1><br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.<br />
Praesent nonummy. </p><br />
</div><br />
<br />
</div><!-- end "wrapper of page" --><br />
</body><br />
</html><!--content-->yep, what Webjoel said. Building with CSS layout will make things easier, but if you used tables, then everything basically stays the same size.<!--content-->Thanks for the help guys.<br />
<br />
I do use tables, i have tried <div> but it is abit hard. I only use div for my drop down menus. In my free time i will study on how to use <div>.<br />
<br />
It works what you have told me. There will be loads more question.<br />
<br />
Thanks again for your help.<!--content-->Yeah I know... TABLEs seems easier. But to get a 'table cell' capable of holding any 'data' (text, images, etc), you have to build a TABLE, a TABLE ROW <tr> and a TABLE CELL <td>. <br />
Using DIVisions <div>, you just build the equivelant of a <td> but with the effect of being a TABLE...<br />
<br />
You can can FAR more using DIVs, they're smaller in size, can be used 'nested' whereas TABLE mess-up when nested (WIN_98 hs a particular problem with TABLEs nested three or four deep when using minimal RAM... you can pop a BSOD quite reliably!).<br />
<br />
Trust me... you get your mind around CSS -even a little bit-, it just becomes insanely easy and you can focus upon the content, not the presentation. -I liken it to my childhood days playing football in the park and using a twig to sketch-out an upcoming play in the dirt... to tell a story and make others see my idea. -CSS is kinda like that. You don't have to publish a spiral-bound glossy-paged User's Manual in triplicate (and hope that it has no editorial errors, as does the majority of DW/FP-built TABLE-builds) to present upcoming gameplays to your teamates... Focus on the game, the presentation is 'behind the scenes'.. (I'm sure I lost ya and 98% of the readers at this point...)<!--content-->use tables and set percent width not px.<!--content-->Which is easier?<br />
<br />
<table><tbody><tr><td><br />
<br />
or<br />
<br />
<div><br />
<br />
I think the second is a lot shorter to type and the stylesheet commands for setting out both are almost the same.<br />
<br />
Save using tables for when you have tabular data (like you find in spreadsheets).<!--content-->how do u create rows of <div> like you can do with tables.<br />
<table><br />
<tr><br />
<td></td><br />
<td></td><br />
</tr><br />
</table><br />
<br />
I have no idea at all on how to use it. Well iknow you type<br />
<div><br />
</div><br />
<br />
But there must be something else to type in.<!--content-->how do u create rows of <div> like you can do with tables.<br />
<table><br />
<tr><br />
<td></td><br />
<td></td><br />
</tr><br />
</table><br />
<br />
I have no idea at all on how to use it. Well iknow you type<br />
<div><br />
</div><br />
<br />
But there must be something else to type in.<br />
<br />
My usual way is:<br />
<br />
<div class="container-hold"><br />
<div class="left"><br />
</div><br />
<div class="right"><br />
</div><br />
</div><br />
<div class="container-hold"><br />
<div class="left"><br />
</div><br />
<div class="right"><br />
</div><br />
</div><br />
<br />
With styling applied to the classes by CSS - which reduces coding clutter, and allows for global style changing if required.<!--content-->Thanks for all of the info mate.<br />
O and there will be loads more question coming your way when i need them.<!--content-->