This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > April 2006 > fixing size of page layout sections to replace tables
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
fixing size of page layout sections to replace tables
|
|
|
| Hi.
I'm trying to get a page layout using css instead of tables, where the
various sections have fixed widths even when you resize the browser window.
The css below produces the correct layout but I cannot get the center id=txt
section to fix at 700px.
Does anyone know how I can achieve this?
/* set margins, padding, and inline-level content alignment */
body,div { margin: 0; padding: 0; text-align: center }
/* set widths and float nav & ads div content boxes */
#hdr { margin-left: 100px; height: 150px; }
#nav { float: left; width: 150px; height: 100% }
#ads { float: right; width: 120px; height: 100% }
/* note: if you change the widths above also change the margins in the rule
below */
/* set side txt margins and height */
#txt { margin-left: 150px; margin-right: 120px; height: 100%; width:
00px; }
/* ensure footer stays at the bottom */
#ftr { clear: both }
/* show boundaries and set image sizes - for clarity only */
#hdr, #ftr { background: aqua }
#nav, #ads { background: yellow }
#txt { background: lime }
/* stretch image to represent content - for clarity only */
#hdr img { width: 250px; height: 25px }
#ads img { width: 75px; height: 100px }
#txt img { width: 150px; height: 200px }
Cheers,
--
Harry Smith
| |
| Neredbojias 2006-04-14, 6:47 pm |
| To further the education of mankind, "Harry"
<cellerymail-harry<at>yahoo.co.uk> declaimed:
> Hi.
>
> I'm trying to get a page layout using css instead of tables, where the
> various sections have fixed widths even when you resize the browser
> window.
>
> The css below produces the correct layout but I cannot get the center
> id=txt section to fix at 700px.
>
> Does anyone know how I can achieve this?
>
>
>
> /* set margins, padding, and inline-level content alignment */
> body,div { margin: 0; padding: 0; text-align: center }
>
> /* set widths and float nav & ads div content boxes */
> #hdr { margin-left: 100px; height: 150px; }
> #nav { float: left; width: 150px; height: 100% }
> #ads { float: right; width: 120px; height: 100% }
> /* note: if you change the widths above also change the margins in the
> rule below */
>
> /* set side txt margins and height */
> #txt { margin-left: 150px; margin-right: 120px; height: 100%; width:
> 00px; }
>
> /* ensure footer stays at the bottom */
> #ftr { clear: both }
>
> /* show boundaries and set image sizes - for clarity only */
> #hdr, #ftr { background: aqua }
> #nav, #ads { background: yellow }
> #txt { background: lime }
>
> /* stretch image to represent content - for clarity only */
> #hdr img { width: 250px; height: 25px }
> #ads img { width: 75px; height: 100px }
> #txt img { width: 150px; height: 200px }
700px what? If width, you have that set to "00px".
--
Neredbojias
Infinity can have limits.
| |
|
| Yes, sorry.... that should have read
#txt { margin-left: 150px; margin-right: 120px; height: 100%; width:
00px; }
That was a mistake when I pasted the code, it does read 700px in the
stylesheet yet only the #nav and #ad sewctions
#nav { float: left; width: 150px; height: 100% }
#ads { float: right; width: 120px; height: 100% }
keep their widths when the window is resized.
--
Harry Smith
"Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html> wrote in
message news:Xns97A58FB7FAB93httpwwwneredbojiasco@208.49.80.251...
To further the education of mankind, "Harry"
<cellerymail-harry<at>yahoo.co.uk> declaimed:
> Hi.
>
> I'm trying to get a page layout using css instead of tables, where the
> various sections have fixed widths even when you resize the browser
> window.
>
> The css below produces the correct layout but I cannot get the center
> id=txt section to fix at 700px.
>
> Does anyone know how I can achieve this?
>
>
>
> /* set margins, padding, and inline-level content alignment */
> body,div { margin: 0; padding: 0; text-align: center }
>
> /* set widths and float nav & ads div content boxes */
> #hdr { margin-left: 100px; height: 150px; }
> #nav { float: left; width: 150px; height: 100% }
> #ads { float: right; width: 120px; height: 100% }
> /* note: if you change the widths above also change the margins in the
> rule below */
>
> /* set side txt margins and height */
> #txt { margin-left: 150px; margin-right: 120px; height: 100%; width:
> 00px; }
>
> /* ensure footer stays at the bottom */
> #ftr { clear: both }
>
> /* show boundaries and set image sizes - for clarity only */
> #hdr, #ftr { background: aqua }
> #nav, #ads { background: yellow }
> #txt { background: lime }
>
> /* stretch image to represent content - for clarity only */
> #hdr img { width: 250px; height: 25px }
> #ads img { width: 75px; height: 100px }
> #txt img { width: 150px; height: 200px }
700px what? If width, you have that set to "00px".
--
Neredbojias
Infinity can have limits.
| |
|
| Did it again dammit...
Should have read:
#txt { margin-left: 150px; margin-right: 120px; height: 100%; width:
700px; }
--
Harry Smith
"Harry yahoo.co.uk>" <cellerymail-harry<at> wrote in message news:...
> Yes, sorry.... that should have read
>
> #txt { margin-left: 150px; margin-right: 120px; height: 100%; width:
> 00px; }
>
> That was a mistake when I pasted the code, it does read 700px in the
> stylesheet yet only the #nav and #ad sewctions
>
> #nav { float: left; width: 150px; height: 100% }
> #ads { float: right; width: 120px; height: 100% }
>
> keep their widths when the window is resized.
>
>
>
> --
> Harry Smith
> "Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html> wrote in
> message news:Xns97A58FB7FAB93httpwwwneredbojiasco@208.49.80.251...
> To further the education of mankind, "Harry"
> <cellerymail-harry<at>yahoo.co.uk> declaimed:
>
>
> 700px what? If width, you have that set to "00px".
>
> --
> Neredbojias
> Infinity can have limits.
>
| |
| Neredbojias 2006-04-15, 6:43 am |
| To further the education of mankind, "Harry" <cellerymail-harry<at>
yahoo.co.uk> declaimed:
> Did it again dammit...
>
> Should have read:
>
> #txt { margin-left: 150px; margin-right: 120px; height: 100%; width:
> 700px; }
Ah, I see. Now, -er, what was the question again?
--
Neredbojias
Infinity can have limits.
| |
| Schraalhans Keukenmeester 2006-04-15, 6:57 pm |
| Harry <cellerymail-harry wrote:
> Hi.
>
> I'm trying to get a page layout using css instead of tables, where the
> various sections have fixed widths even when you resize the browser window.
>
> The css below produces the correct layout but I cannot get the center id=txt
> section to fix at 700px.
>
> Does anyone know how I can achieve this?
>
>
>
> /* set margins, padding, and inline-level content alignment */
> body,div { margin: 0; padding: 0; text-align: center }
>
> /* set widths and float nav & ads div content boxes */
> #hdr { margin-left: 100px; height: 150px; }
> #nav { float: left; width: 150px; height: 100% }
> #ads { float: right; width: 120px; height: 100% }
> /* note: if you change the widths above also change the margins in the rule
> below */
>
> /* set side txt margins and height */
> #txt { margin-left: 150px; margin-right: 120px; height: 100%; width:
> 00px; }
>
> /* ensure footer stays at the bottom */
> #ftr { clear: both }
>
> /* show boundaries and set image sizes - for clarity only */
> #hdr, #ftr { background: aqua }
> #nav, #ads { background: yellow }
> #txt { background: lime }
>
> /* stretch image to represent content - for clarity only */
> #hdr img { width: 250px; height: 25px }
> #ads img { width: 75px; height: 100px }
> #txt img { width: 150px; height: 200px }
>
>
> Cheers,
>
Have a link for us to see the thing in action? Does the code validate ?
(If not, that will be first answer you'll get next post... Make sure it
does!)
Sh.
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|