sunkiller
14th December 2007, 10:18 PM
I'm a new guy with CSS+HTML, so I have a question about a navigation bar using CSS.
CSS code for the sidebar (goes in CSS file):
#framecontent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 170px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: #666666;
color: #000000;
}
#maincontent{
position: fixed;
top: 0;
left: 170px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #999999;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 0 0 0 150px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}This is means it gives me the ability to have a sidebar, which is linked to the page where I want it.
Code for the page that I have it on (goes in HTML file):
<div id="maincontent">
<div class="innertube">
To decrease the amount of space I'm using up I removed the contents and replaced it with this sentence.
</div>
</div>
<div id="framecontent">
<div class="innertube">
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="bio.html">Bio</a>
</ul>
</div>
</div>How do incorporate the links in the design that I want? Is there a way where I do not have to put the frame content on each individual page? If I have to put it on each individual page, when I add a new navigation link, I would have to change the list on every single page.
If I need to give more code within the document, I will.
http://www.dynamicdrive.com/style/layouts/item/css-left-frame-layout/ - Original code used
Perhaps some other useful code:
Code for what the buttons look like:
ul.navbar {
list-style-type: none;
padding: 0;
margin: 10;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
ul.navbar li {
background: #CCCCCC;
margin: 0.3em 0;
padding: 0.3em;
border-right: 1em solid grey}
ul.navbar a {
text-decoration: none}
a:link {
color: #333333}
a:visited {
color: #333666 }
CSS code for the sidebar (goes in CSS file):
#framecontent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 170px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: #666666;
color: #000000;
}
#maincontent{
position: fixed;
top: 0;
left: 170px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #999999;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 0 0 0 150px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}This is means it gives me the ability to have a sidebar, which is linked to the page where I want it.
Code for the page that I have it on (goes in HTML file):
<div id="maincontent">
<div class="innertube">
To decrease the amount of space I'm using up I removed the contents and replaced it with this sentence.
</div>
</div>
<div id="framecontent">
<div class="innertube">
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="bio.html">Bio</a>
</ul>
</div>
</div>How do incorporate the links in the design that I want? Is there a way where I do not have to put the frame content on each individual page? If I have to put it on each individual page, when I add a new navigation link, I would have to change the list on every single page.
If I need to give more code within the document, I will.
http://www.dynamicdrive.com/style/layouts/item/css-left-frame-layout/ - Original code used
Perhaps some other useful code:
Code for what the buttons look like:
ul.navbar {
list-style-type: none;
padding: 0;
margin: 10;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
ul.navbar li {
background: #CCCCCC;
margin: 0.3em 0;
padding: 0.3em;
border-right: 1em solid grey}
ul.navbar a {
text-decoration: none}
a:link {
color: #333333}
a:visited {
color: #333666 }