apoc.3.21
06-20-2008, 06:25 PM
i found a css template website, and am using a one column with a top and footer menu. well it actually has two top menus, and two footer menus. I want to remove the second top menu and the first footer menu. could any one help me. I try to hide it but i can't.
the code is:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>One column CSS layout - top and footer menu | Strictly CSS</title>
<style type="text/css">
/*
CSS-file for Strictly CSS three column layout 2006
http://www.strictlycss.com
Developed by Eivind Savio
*/
* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}
body, html {
color: #000;
font-family: Verdana, Arial, Tahoma, sans-serif;
background-color: #eee;
text-align: center; /*** Centers the design in old IE versions ***/
}
body {
font-size: 70%;
}
p {padding: 7px 0 7px 0;}
a {
color: #000099;
}
a:hover{
color: #0000FF;
text-decoration: none;
}
h1, h2, h3 {
font-weight: bold;
padding-bottom: 5px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
h1 a, #header h2{
color: #fff;
}
.clear { clear: both; }
#mainContainer {
width: 760px;
margin: 0 auto; /*** Centers the design ***/
min-height: 300px;
background: #add8e6;
text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #mainContainer {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
/**************************
HEADER
**************************/
#header {
background: #000099;
padding: 10px
}
/**************************
CONTENT AND COLUMNS
**************************/
.outer {
margin-top: 50px; /*** We need to add some space for our top menu ***/
}
* html .outer {
/*** No need for hacking IE on this layout ***/
}
.inner {
/*** No need to do anything with a one column solution ***/
}
* html .inner {
/*** And therefor no need for hacking IE either ***/
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
float: left;
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
float: left;
width: 760px;
background: #fff;
}
* html #content {
position: relative; /*** IE needs this ***/
}
.contentWrap {
padding: 5px;
}
.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 35px;
}
.contentWrap li {
padding-bottom: 2px;
}
/**************************
LEFT COLUMN - this is our top menu
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
div.left is carried over into the proper position.
***/
#left {
float: right;
width: 750px;
background: #fcc;
height: 40px;
padding: 5px;
margin: -50px 0 0 -760px; /*** Move the left column so it takes the positon as a top menu ***/
}
* html #left {
position: relative; /*** IE needs this ***/
}
#left ul {
list-style: none;
}
#left li {
display: inline;
padding-right: 15px;
}
/*************************
RIGHT COLUMN - This is our footer menu
**************************/
#right {
float: left;
width: 750px;
background: #cfc;
padding: 5px;
height: 40px;
}
* html #right {
position: relative; /*** IE needs this ***/
}
#right ul {
list-style: none;
}
#right li {
display: inline;
padding-right: 15px;
}
/**************************
FOOTER
**************************/
#footer {
width: 760px;
margin: 0 auto;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="header">
<h1><a href="/" title="Strictly CSS - a collection of CSS sites and resources">Strictly CSS </a></h1>
<h2>One column CSS layout - top and footer menu</h2>
</div>
<div class="outer">
<div class="inner">
<div class="float-wrap">
<div id="content">
<div class="contentWrap">
<h2>First in source</h2>
<p>Here the three column CSS layout is transformed into a one column
layout with top- and footer menu. This layout DO NOT support 100%
height with footer since the footer menu isn't outside the mainContainer,
but <a href="http://www.strictlycss.com/articles/article/22/css-faux-columns">faux
columns</a> are supported if you want to use that.</p>
<p>For further information about how this one column layout with top-
and footer menu is made, take a look in the source code.</p>
<h3>What is this about?</h3>
<p>This example page is belonging to the article "<strong><a href="http://www.strictlycss.com/articles/article/40/the-only-css-layout-you-need">The
only CSS layout you need(?)</a></strong>". A three column CSS layout is by
changing mainly floating, margin and padding values (no absolute positioning is used)
in the CSS transformed into ten different layouts:</p>
<ol>
<li><a href="/examples/three-column-layout-1.asp">Three
column CSS layout - left and right menu</a>. This is the basis layout for
all the different layouts.</li>
<li><a href="/examples/three-column-layout-2.asp">Two
column CSS layout - top and left menu</a></li>
<li><a href="/examples/three-column-layout-3.asp">Two
column CSS layout - top and right menu</a></li>
<li><a href="/examples/three-column-layout-4.asp">Two
column CSS layout - left and footer menu</a></li>
<li><a href="/examples/three-column-layout-5.asp">Two
column CSS layout - right and footer menu</a></li>
<li><a href="/examples/three-column-layout-6.asp">Three
column CSS layout: 100% height with footer</a>. This layout is also using
<a href="/articles/article/22/css-faux-columns">Faux
columns</a>. </li>
<li><a href="/examples/three-column-layout-7.asp">Three
column CSS fluid layout: 100% width</a></li>
<li><a href="/examples/three-column-layout-8.asp">Three
column CSS fluid layout: 100% width and with column borders</a></li>
<li><a href="/examples/three-column-layout-9.asp">Two
column CSS layout - header and left menu</a></li>
<li><a href="/examples/three-column-layout-10.asp">One
column CSS layout - top and footer menu</a></li>
</ol>
<h3>Related CSS articles and examples</h3>
<p>Below are some articles that are related to these examples.</p>
<ol>
<li><strong><a href="/articles/article/46/three-column-fluid-css-layout-with-rounded-content-corners-and-100-height">Three
column fluid CSS layout with rounded content corners and 100% height</a></strong>.
<ol>
<li>Example: <a href="http://www.strictlycss.com/examples/three-column-rounded-corners-100-percent-height-and-width.asp">Three column fluid CSS layout: 100% height + 100% width and rounded content corners</a></li>
</ol>
</li>
<li><strong><a href="/articles/article/47/css-fluid-layouts-with-faux-columns">CSS fluid layouts with faux columns</a></strong>.
<ol>
<li>Example: <a href="http://www.strictlycss.com/examples/fluid-css-layout-with-faux-columns-1.asp">Three column fluid CSS layout with faux columns and 100% height</a></li>
<li>Example: <a href="http://www.strictlycss.com/examples/fluid-css-layout-with-faux-columns-2.asp">Three column fluid CSS layout with faux columns</a></li>
</ol>
</li>
</ol>
<p>You can use any of these examples for free. Hope you find them useful.</p>
</div>
</div>
<!-- end centered div -->
<div id="left">
<h3>Second in source</h3>
<ul>
<li><a href="#">Left menu 1</a></li>
<li><a href="#">Left menu 2</a></li>
<li><a href="#">Left menu 3</a></li>
</ul>
</div>
<!-- end left div -->
<div class="clear"></div>
</div>
<div id="right">
<h3>Third in source</h3>
<ul>
<li><a href="#">Right menu 1</a></li>
<li><a href="#">Right menu 2</a></li>
<li><a href="#">Right menu 3</a></li>
</ul>
</div>
<!-- end right div -->
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer"><p>This is our footer</p>
</div>
</body>
</html>
the code is:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>One column CSS layout - top and footer menu | Strictly CSS</title>
<style type="text/css">
/*
CSS-file for Strictly CSS three column layout 2006
http://www.strictlycss.com
Developed by Eivind Savio
*/
* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}
body, html {
color: #000;
font-family: Verdana, Arial, Tahoma, sans-serif;
background-color: #eee;
text-align: center; /*** Centers the design in old IE versions ***/
}
body {
font-size: 70%;
}
p {padding: 7px 0 7px 0;}
a {
color: #000099;
}
a:hover{
color: #0000FF;
text-decoration: none;
}
h1, h2, h3 {
font-weight: bold;
padding-bottom: 5px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
h1 a, #header h2{
color: #fff;
}
.clear { clear: both; }
#mainContainer {
width: 760px;
margin: 0 auto; /*** Centers the design ***/
min-height: 300px;
background: #add8e6;
text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #mainContainer {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
/**************************
HEADER
**************************/
#header {
background: #000099;
padding: 10px
}
/**************************
CONTENT AND COLUMNS
**************************/
.outer {
margin-top: 50px; /*** We need to add some space for our top menu ***/
}
* html .outer {
/*** No need for hacking IE on this layout ***/
}
.inner {
/*** No need to do anything with a one column solution ***/
}
* html .inner {
/*** And therefor no need for hacking IE either ***/
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
float: left;
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
float: left;
width: 760px;
background: #fff;
}
* html #content {
position: relative; /*** IE needs this ***/
}
.contentWrap {
padding: 5px;
}
.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 35px;
}
.contentWrap li {
padding-bottom: 2px;
}
/**************************
LEFT COLUMN - this is our top menu
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
div.left is carried over into the proper position.
***/
#left {
float: right;
width: 750px;
background: #fcc;
height: 40px;
padding: 5px;
margin: -50px 0 0 -760px; /*** Move the left column so it takes the positon as a top menu ***/
}
* html #left {
position: relative; /*** IE needs this ***/
}
#left ul {
list-style: none;
}
#left li {
display: inline;
padding-right: 15px;
}
/*************************
RIGHT COLUMN - This is our footer menu
**************************/
#right {
float: left;
width: 750px;
background: #cfc;
padding: 5px;
height: 40px;
}
* html #right {
position: relative; /*** IE needs this ***/
}
#right ul {
list-style: none;
}
#right li {
display: inline;
padding-right: 15px;
}
/**************************
FOOTER
**************************/
#footer {
width: 760px;
margin: 0 auto;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="header">
<h1><a href="/" title="Strictly CSS - a collection of CSS sites and resources">Strictly CSS </a></h1>
<h2>One column CSS layout - top and footer menu</h2>
</div>
<div class="outer">
<div class="inner">
<div class="float-wrap">
<div id="content">
<div class="contentWrap">
<h2>First in source</h2>
<p>Here the three column CSS layout is transformed into a one column
layout with top- and footer menu. This layout DO NOT support 100%
height with footer since the footer menu isn't outside the mainContainer,
but <a href="http://www.strictlycss.com/articles/article/22/css-faux-columns">faux
columns</a> are supported if you want to use that.</p>
<p>For further information about how this one column layout with top-
and footer menu is made, take a look in the source code.</p>
<h3>What is this about?</h3>
<p>This example page is belonging to the article "<strong><a href="http://www.strictlycss.com/articles/article/40/the-only-css-layout-you-need">The
only CSS layout you need(?)</a></strong>". A three column CSS layout is by
changing mainly floating, margin and padding values (no absolute positioning is used)
in the CSS transformed into ten different layouts:</p>
<ol>
<li><a href="/examples/three-column-layout-1.asp">Three
column CSS layout - left and right menu</a>. This is the basis layout for
all the different layouts.</li>
<li><a href="/examples/three-column-layout-2.asp">Two
column CSS layout - top and left menu</a></li>
<li><a href="/examples/three-column-layout-3.asp">Two
column CSS layout - top and right menu</a></li>
<li><a href="/examples/three-column-layout-4.asp">Two
column CSS layout - left and footer menu</a></li>
<li><a href="/examples/three-column-layout-5.asp">Two
column CSS layout - right and footer menu</a></li>
<li><a href="/examples/three-column-layout-6.asp">Three
column CSS layout: 100% height with footer</a>. This layout is also using
<a href="/articles/article/22/css-faux-columns">Faux
columns</a>. </li>
<li><a href="/examples/three-column-layout-7.asp">Three
column CSS fluid layout: 100% width</a></li>
<li><a href="/examples/three-column-layout-8.asp">Three
column CSS fluid layout: 100% width and with column borders</a></li>
<li><a href="/examples/three-column-layout-9.asp">Two
column CSS layout - header and left menu</a></li>
<li><a href="/examples/three-column-layout-10.asp">One
column CSS layout - top and footer menu</a></li>
</ol>
<h3>Related CSS articles and examples</h3>
<p>Below are some articles that are related to these examples.</p>
<ol>
<li><strong><a href="/articles/article/46/three-column-fluid-css-layout-with-rounded-content-corners-and-100-height">Three
column fluid CSS layout with rounded content corners and 100% height</a></strong>.
<ol>
<li>Example: <a href="http://www.strictlycss.com/examples/three-column-rounded-corners-100-percent-height-and-width.asp">Three column fluid CSS layout: 100% height + 100% width and rounded content corners</a></li>
</ol>
</li>
<li><strong><a href="/articles/article/47/css-fluid-layouts-with-faux-columns">CSS fluid layouts with faux columns</a></strong>.
<ol>
<li>Example: <a href="http://www.strictlycss.com/examples/fluid-css-layout-with-faux-columns-1.asp">Three column fluid CSS layout with faux columns and 100% height</a></li>
<li>Example: <a href="http://www.strictlycss.com/examples/fluid-css-layout-with-faux-columns-2.asp">Three column fluid CSS layout with faux columns</a></li>
</ol>
</li>
</ol>
<p>You can use any of these examples for free. Hope you find them useful.</p>
</div>
</div>
<!-- end centered div -->
<div id="left">
<h3>Second in source</h3>
<ul>
<li><a href="#">Left menu 1</a></li>
<li><a href="#">Left menu 2</a></li>
<li><a href="#">Left menu 3</a></li>
</ul>
</div>
<!-- end left div -->
<div class="clear"></div>
</div>
<div id="right">
<h3>Third in source</h3>
<ul>
<li><a href="#">Right menu 1</a></li>
<li><a href="#">Right menu 2</a></li>
<li><a href="#">Right menu 3</a></li>
</ul>
</div>
<!-- end right div -->
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer"><p>This is our footer</p>
</div>
</body>
</html>