This article describes about how to design page's layout for your site using css.While creating our rails application in views folder structure we will be placing our layout files in Layout folder.Then we be keeping our css files under the public/stylesheets folder.
Now, open your layout file index.html.erb and put this code into <head> tag:
<%= stylesheet_link_tag 'default' %>
In this way our index.html.erb knows the information about page design and css.
Page Layout & css
Before you proceed, it's useful to have an idea about page's sections.
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/*
#wrapper has an absolute width (950 pixel)
The width of inner elements is set to auto,height is upt o you.
in this way all inner elements have the same
width of the element which contains them.Cleaner if needed
*/
*{margin:0;padding:0;}
#wrapper{width:950px;margin:0px auto;}
#header{width:auto;height:80px;display:block;}
#content{width:auto;display:block;margin:5px 5px 5px 5px;}
#leftnav{width:600px;float:left;height:80px;}
#rightnav{height:80px;width:320px;float:right;}
.cleaner{clear:both;}
#footer{height:50px;}
<div id='wrapper'>
<div id='header'>
</div>
<div id='content'>
<div id='leftnav'>
</div>
<div id='rightnav'>
</div>
<div class='cleaner'>
</div>
</div>
<div id='footer'>
</div>
</div>
No comments :
Post a Comment