Hi Guys,
Im looking for some help on creating a site layout like the attached image. the menu and logo will be in the upper dark green area....all text should come up on the brown area. I have been struggling to find any info/tut/texts on this type of layout. I think it can be achieved using css but I need some sort of example or something. Any and I mean any help would be appreciated.
ThanksYou image is 800x565 so you could just use that as the background of a page div containing a header div about 165 high and a content div about 400 high.
<style type="text/css">
#page { width:800px;height:565px;
background: url(req-layout.jpg) fixed; }
#header { height:165px; }
#content { height:400px; }
</style>
<div id="page">
<div id="header"></div>
<div id="content"></div>
</div>
And put your stuff in as needed.ok it looks great
thank you....gonna play around with it a bit to get it right. only real problem i can see is ....when a user clicks on a link....usually if i was using frames and what not i would change the main frame to point to the requested section of site. With the div's it would be a whole new ballgame i think...because i would have to reference the div with its id to change content.....and if i remember correctly i can also add/remove inner tags and stuff in the div.what is the easiest way to do this. I have studied css and xhtml for a year at uni as part of my course but that was 2 years ago and i forget alot 
Thanks for your helpok I managed to create the layout...I still have the above problems tho attached is the test layout for my site.
Having problems with Mozilla and Internet explorer 5 tho.
in mozilla the the background placed in the wrong place but text and images where they should be. in IE 5 its ok but with lower resolution the text is too big...now Im using the em size but its either too small on 1024x768 and too big on 800x600 or the other way around. its frustrating.
Anyway any help is appreciatedA couple of suggestions. First, whatever it looks like in Mozilla is probably correct so it's better to start there and then "adjust" as necessary for IE's quirks. Second, absolute positioning is far more trouble than it's worth so just forget it exists and only use it as a last resort.
A tool I use is thin colorful borders around the divs when I need to figure out what's going wrong. So replace your style section with the following and then remove the borders after you see what's going on:
<code>
<style type="text/css">
#page { width: 800px;
background: url(pictures/req-layout.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
text-align: center;}
#header { height: 150px;
color: white;
font-family: chiller,arial;
font-size: 1.5em;
text-align: center;
border: 1px solid yellow;}
#header a{ text-decoration: none;
color: white}
#header a:hover { color: orange}
#content { height: 300px;
margin: 20px 70px;
overflow: auto;
border: 1px solid red;}
#footer { margin-top: 50px;
color: white;
font-family: chiller,arial;
font-size: 1.5em;
text-align: center;
border: 1px solid yellow; }
</style>
[/code]Originally posted by ray326
A tool I use is thin colorful borders around the divs when I need to figure out what's going wrong.Slightly off-topic, but you could use Mozilla's Web Developer Extension (<!-- m --><a class="postlink" href="http://chrispederick.myacen.com/work/firebird/webdeveloper/">http://chrispederick.myacen.com/work/fi ... developer/</a><!-- m -->) to make it easy to see all block-level elements.
Originally posted by fredmv
Slightly off-topic, but you could use Mozilla's Web Developer Extension (<!-- m --><a class="postlink" href="http://chrispederick.myacen.com/work/firebird/webdeveloper/">http://chrispederick.myacen.com/work/fi ... developer/</a><!-- m -->) to make it easy to see all block-level elements.
I do but it throws the layout off inserting its little lables.ok those colored borders work great got the layout working perfectly in ie and mozilla have u any thoughts on my other questions? I still have no idea of how to change the content in the content area when link clicked. once i know how to do this then shouldnt be a problem.
ThanksCheck out this news page and see if that gives you some ideas. I actually load the nav menu on my site that way, too.
<!-- m --><a class="postlink" href="http://raymcvay.home.comcast.net/news.htmlok">http://raymcvay.home.comcast.net/news.htmlok</a><!-- m --> thnx tried that page and that sorta how i would have done it. but i dont see the jscript functions anywhere on the page how does he reference them if they not there? ok wait i do so how whoops hes got a refernce to .js file
Im looking for some help on creating a site layout like the attached image. the menu and logo will be in the upper dark green area....all text should come up on the brown area. I have been struggling to find any info/tut/texts on this type of layout. I think it can be achieved using css but I need some sort of example or something. Any and I mean any help would be appreciated.
ThanksYou image is 800x565 so you could just use that as the background of a page div containing a header div about 165 high and a content div about 400 high.
<style type="text/css">
#page { width:800px;height:565px;
background: url(req-layout.jpg) fixed; }
#header { height:165px; }
#content { height:400px; }
</style>
<div id="page">
<div id="header"></div>
<div id="content"></div>
</div>
And put your stuff in as needed.ok it looks great
thank you....gonna play around with it a bit to get it right. only real problem i can see is ....when a user clicks on a link....usually if i was using frames and what not i would change the main frame to point to the requested section of site. With the div's it would be a whole new ballgame i think...because i would have to reference the div with its id to change content.....and if i remember correctly i can also add/remove inner tags and stuff in the div.what is the easiest way to do this. I have studied css and xhtml for a year at uni as part of my course but that was 2 years ago and i forget alot Thanks for your helpok I managed to create the layout...I still have the above problems tho
attached is the test layout for my site.Having problems with Mozilla and Internet explorer 5 tho.
in mozilla the the background placed in the wrong place but text and images where they should be. in IE 5 its ok but with lower resolution the text is too big...now Im using the em size but its either too small on 1024x768 and too big on 800x600 or the other way around. its frustrating.
Anyway any help is appreciatedA couple of suggestions. First, whatever it looks like in Mozilla is probably correct so it's better to start there and then "adjust" as necessary for IE's quirks. Second, absolute positioning is far more trouble than it's worth so just forget it exists and only use it as a last resort.
A tool I use is thin colorful borders around the divs when I need to figure out what's going wrong. So replace your style section with the following and then remove the borders after you see what's going on:
<code>
<style type="text/css">
#page { width: 800px;
background: url(pictures/req-layout.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
text-align: center;}
#header { height: 150px;
color: white;
font-family: chiller,arial;
font-size: 1.5em;
text-align: center;
border: 1px solid yellow;}
#header a{ text-decoration: none;
color: white}
#header a:hover { color: orange}
#content { height: 300px;
margin: 20px 70px;
overflow: auto;
border: 1px solid red;}
#footer { margin-top: 50px;
color: white;
font-family: chiller,arial;
font-size: 1.5em;
text-align: center;
border: 1px solid yellow; }
</style>
[/code]Originally posted by ray326
A tool I use is thin colorful borders around the divs when I need to figure out what's going wrong.Slightly off-topic, but you could use Mozilla's Web Developer Extension (<!-- m --><a class="postlink" href="http://chrispederick.myacen.com/work/firebird/webdeveloper/">http://chrispederick.myacen.com/work/fi ... developer/</a><!-- m -->) to make it easy to see all block-level elements.
Originally posted by fredmv Slightly off-topic, but you could use Mozilla's Web Developer Extension (<!-- m --><a class="postlink" href="http://chrispederick.myacen.com/work/firebird/webdeveloper/">http://chrispederick.myacen.com/work/fi ... developer/</a><!-- m -->) to make it easy to see all block-level elements.
I do but it throws the layout off inserting its little lables.ok those colored borders work great got the layout working perfectly in ie and mozilla
have u any thoughts on my other questions? I still have no idea of how to change the content in the content area when link clicked. once i know how to do this then shouldnt be a problem.ThanksCheck out this news page and see if that gives you some ideas. I actually load the nav menu on my site that way, too.
<!-- m --><a class="postlink" href="http://raymcvay.home.comcast.net/news.htmlok">http://raymcvay.home.comcast.net/news.htmlok</a><!-- m --> thnx tried that page and that sorta how i would have done it. but i dont see the jscript functions anywhere on the page how does he reference them if they not there? ok wait i do so how
whoops hes got a refernce to .js file