removing a menu from template

**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:

Code:

<!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 &quot;<strong><a href="http://www.strictlycss.com/articles/article/40/the-only-css-layout-you-need">The 
  only CSS layout you need(?)</a></strong>&quot;. 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>

**jscheuer1** · 06-22-2008, 01:49 PM

I don't know what you mean. Depending upon how you count, there is either only one menu near the top of the page and another near the bottom, each with three items - or you could say that there are three menus at the top and three at the bottom. It all depends upon how you look at it. But there is nothing resembling what you stated in your post:

Originally Posted by apoc.3.21

well it actually has two top menus, and two footer menus.

That said, if you want to get rid of an item, simply delete it:

Code:

          <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>

So that you would then have:

Code:

          <ul>
            <li><a href="#">Left menu 1</a></li>
            <li><a href="#">Left menu 2</a></li>
          </ul>

The same principle applies to the other set (unordered list - ul group).

**apoc.3.21** · 06-23-2008, 02:58 PM

if you put the code in notepad and view it as htm, then you will see,

.

I want to remove the second menu on the top and the first menu on the footer. sorry for not clarifying that before. I think that maker used divs for making the left, the top, the bottom, the content area etc... and I tried removing them. but nothing.

**jscheuer1** · 06-23-2008, 04:41 PM

That's what I saw, and the advice I gave will work. You just need to select the particular <li> element to get rid of.

Thread: removing a menu from template

Thread Tools

Search Thread

removing a menu from template

Bookmarks

Bookmarks

Posting Permissions