How do I put menu in my page?

HTML & CSS
1

This is my code:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.borderTable {
	padding: 2px 4px 2px 4px;
	border: 1px solid #660000;
	background-color: #E4E4E4;
}



.fieldwidth{
	float:left;
    width:325px;
	margin:0;
	padding:0;
	height:320px
	/*border:2px solid red;*/
}
.divsign {
 /*border:2px solid green;*/
 margin-top:10px
 
}

.divuser {
 margin-left:10px;
 margin-top:50px
 /*border:2px solid pink;*/
 
}

.divpass {
margin-left:10px;

/*border:2px solid yellow;*/
 
}

.box3 {
	width: 370px;
	height:300px;
	border:2px solid #660000;
	float:right;
	margin-top:10px;
	margin-right:10px;
 }

 .box2 {
	position:relative;
	width: 370px;
	height:300px;
	border:2px solid #660000;
	float:left;
	margin-top:10px;
	margin-left:10px;
	background-color:#ffe574;
	overflow:auto;
	
 }

 .box2tab {
 position:absolute;
 left:0;bottom:0;
 
 clear:both;
 width:100%;


 }
.box2 h3 {
    margin:4px;
    font-size:1.1em;
}

.box2 ul {
    margin:0; 
    padding:0 5px 0 40px;
}


 .spansignup {
 margin-left:10px;
}


 .spanbox2 {
 margin-left:10px;
}

.spanlogin{
 margin-left:80px;
}

 .csspassword {
 margin-left:10px;
}

.container{
/*border:2px solid #0000ff;*/

}

.footer{
margin:0;
padding:0;
border:2px solid #0000ff;*/
}






.borderTable tr td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
}

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li
{
float: left;
margin: 0 0.15em;
}

#nav-menu li a
{

}

/* Hide from IE5-Mac \\*/
#nav-menu li a
{
float: none
}
/* End hide */

#nav-menu
{
width:23em
}



</style>
</head>

<body>
<form>
  <table width="100%" height="130"  class="borderTable" >
    <tr>
      <td width="103">&nbsp;</td>
      <td width="147">&nbsp;</td>
      <td width="94">&nbsp;</td>
      <td width="113">&nbsp;</td>
      <td width="128">&nbsp;</td>
      <td width="142">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>About us </td>
      <td>Feedback</td>
      <td>Blog</td>
      <td>Subscriptions</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  
  
 
  <table width="100%">
  <tr>
    <td>Search</td>
    <td><input type="text" name="textfield"></td>
    <td>Go</td>
    <td>User Name</td>
    <td><input type="text" name="textfield2"></td>
    <td>Password</td>
    <td><input type="text" name="textfield3"></td>
    <td>Login</td>
    <td>Sign Up</td>
  </tr>
</table>

 

  <div class="container">
  
  <div class="box2">
  
   <h3 style="margin-left:15px">abcbsdncsdm</h3>
   <ul>
   
	<li>xdbvxnv</li>
	<li>xdbvxnv</li>
	<li>xdbvxnv</li>
	<li>xdbvxnv</li>
	<li>xdbvxnv</li>
	<li>xdbvxnv</li>
	<li>xdbvxnv</li>

	<li>xdbvxnv</li>
    <li>xdbvxnv</li>
    <li>xdbvxnv</li>
    <li>xdbvxnv</li>
    <li>xdbvxnv</li>
    <li>xdbvxnv</li>
    
	</ul>
	
   </div>



   <div class="box3">
    <object width="370" height="300"><param name="movie" value="http://www.youtube.com/v/-rW-lK9F6TU?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/-rW-lK9F6TU?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="370" height="300"></embed></object>
   </div>
 
  
  
  
  </div>

 
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  
   <div class="footer">
   This is my footer
  </div>
</form>
</body>
</html>

I want to add a horizontal list menu just beneath box2 .

Here is the desired display I’m looking at …

2

  1. float the <ul> left

  2. then create a container for your menu and float it right.

or you can use css position to postion the <ul> and the new menu container in box2

3

which container ? another <div> to hold <ul> ?

4

You don’t really give us a lot to go on but I’m guessing you meant something like this:


<div class="box2">
            <h3 style="margin-left:15px">abcbsdncsdm</h3>
            <ul class="hoz">
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
            </ul>
            <ul>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
            </ul>
        </div>



.box2 ul.hoz {
    float:right;
    list-style:none;
    margin:100px 10px 0 0;
    padding:0;
    clear:both;
}
.box2 .hoz li {
    display:inline
}

As mentioned above it would probably be better to float both those uls with appropriate widths to stop them clashing.

Remove those empty p tags and just clear the footer to keep it below the floats.


.footer{clear:both}

Apply a bottom margin to the float above the footer to move the footer away if needed. A margin-top on the footer will just slide under the float.

I don’t like the use of a table for your top menu though and don’t forget the full doctype.

5

which part you did not understand ? I have provided the desired look and also the faulty code.

Kindly,please let me know which part you did not understand.

please run the faulty code and see the desired look.

your code does not render to the desired look.

6

Sorry i was referring to the screenshot you supplied with some arrows showing the position you wanted but no mention of dynamics and what should happen should either content be wider or smaller than shown in the drawing. Any one of those implications could change the way in which the layout should be produced.

e.g. Should the menu be a fixed width? What happens if the content on the left is much wider? Should that be a fixed width also or should the content stay clear of the menu but wrap when underneath if there is more content.

your code does not render to the desired look.
The code I gave you renders exactly as I thought you wanted and as shown in the screenshot attached.

Please explain what is wrong with the display and what you want to happen. The more relevant the information you provide the better the chances you will receive the reply you desire.

Here is the code I was testing with (which as I said before still needs addressing regarding the tables used):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.borderTable {
    padding: 2px 4px 2px 4px;
    border: 1px solid #660000;
    background-color: #E4E4E4;
}
.fieldwidth {
    float:left;
    width:325px;
    margin:0;
    padding:0;
    height:320px/*border:2px solid red;*/
}
.divsign {
    /*border:2px solid green;*/
 margin-top:10px
}
.divuser {
    margin-left:10px;
    margin-top:50px/*border:2px solid pink;*/
}
.divpass {
    margin-left:10px;/*border:2px solid yellow;*/
}
.box3 {
    width: 370px;
    height:300px;
    border:2px solid #660000;
    float:right;
    margin-top:10px;
    margin-right:10px;
}
.box2 {
    position:relative;
    width: 370px;
    height:300px;
    border:2px solid #660000;
    float:left;
    margin:10px 0 10px 10px;
    display:inline;
    background-color:#ffe574;
    overflow:auto;
}
.box2tab {
    position:absolute;
    left:0;
    bottom:0;
    clear:both;
    width:100%;
}
.box2 h3 {
    margin:4px;
    font-size:1.1em;
}
.box2 ul {
    margin:0;
    padding:0 5px 0 40px;
}
.spansignup {
    margin-left:10px;
}
.spanbox2 {
    margin-left:10px;
}
.spanlogin {
    margin-left:80px;
}
.csspassword {
    margin-left:10px;
}
.container {
/*border:2px solid #0000ff;*/

}
.footer {
    margin:0;
    padding:0;
    border:2px solid #0000ff;
}
.borderTable tr td {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
}
#nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#nav-menu li {
    float: left;
    margin: 0 0.15em;
}
#nav-menu li a {
}
/* Hide from IE5-Mac \\*/
#nav-menu li a {
    float: none
}
/* End hide */

#nav-menu {
    width:23em
}
.box2 ul.hoz {
    float:right;
    list-style:none;
    margin:100px 10px 0 0;
    padding:0;
    clear:both;
}
.box2 .hoz li {
    display:inline
}
.footer {
    clear:both
}
</style>
</head>
<body>
<form>
    <table width="100%" height="130"  class="borderTable" >
        <tr>
            <td width="103">&nbsp;</td>
            <td width="147">&nbsp;</td>
            <td width="94">&nbsp;</td>
            <td width="113">&nbsp;</td>
            <td width="128">&nbsp;</td>
            <td width="142">&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>About us </td>
            <td>Feedback</td>
            <td>Blog</td>
            <td>Subscriptions</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    <table width="100%">
        <tr>
            <td>Search</td>
            <td><input type="text" name="textfield"></td>
            <td>Go</td>
            <td>User Name</td>
            <td><input type="text" name="textfield2"></td>
            <td>Password</td>
            <td><input type="text" name="textfield3"></td>
            <td>Login</td>
            <td>Sign Up</td>
        </tr>
    </table>
    <div class="container">
        <div class="box2">
            <h3 style="margin-left:15px">abcbsdncsdm</h3>
            <ul class="hoz">
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
            </ul>
            <ul>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
            </ul>
        </div>
        <div class="box3">
            <object width="370" height="300">
                <param name="movie" value="http://www.youtube.com/v/-rW-lK9F6TU?fs=1&amp;hl=en_US">
                </param>
                <param name="allowFullScreen" value="true">
                </param>
                <param name="allowscriptaccess" value="always">
                </param>
                <embed src="http://www.youtube.com/v/-rW-lK9F6TU?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="370" height="300"></embed>
            </object>
        </div>
    </div>
    <div class="footer"> This is my footer </div>
</form>
</body>
</html>
7

Looking again at your drawing I guess that you didn’t mean you wanted the menu in the middle of that yellow box but you wanted it underneath box2 instead. The arrow you placed on the menu made me think that you wanted the menu moved into the middle of that yellow area (and it seems kalon thought the same also).

If you want the menu underneath box2 then you need to wrap box2 in another wrapper of the same width and float it left and the menu will be inside this wrapper but underneath box2 as follows.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.borderTable {
    padding: 2px 4px 2px 4px;
    border: 1px solid #660000;
    background-color: #E4E4E4;
}
.fieldwidth {
    float:left;
    width:325px;
    margin:0;
    padding:0;
    height:320px/*border:2px solid red;*/
}
.divsign {
    /*border:2px solid green;*/
 margin-top:10px
}
.divuser {
    margin-left:10px;
    margin-top:50px/*border:2px solid pink;*/
}
.divpass {
    margin-left:10px;/*border:2px solid yellow;*/
}
.box3 {
    width: 370px;
    height:300px;
    border:2px solid #660000;
    float:right;
    margin-top:10px;
    margin-right:10px;
}
.box2 {
    position:relative;
    width: 370px;
    height:300px;
    border:2px solid #660000;
    float:left;
    margin:10px 0 10px 10px;
    display:inline;
    background-color:#ffe574;
    overflow:auto;
}
.box2tab {
    position:absolute;
    left:0;
    bottom:0;
    clear:both;
    width:100%;
}
.box2 h3 {
    margin:4px;
    font-size:1.1em;
}
.box2 ul {
    margin:0;
    padding:0 5px 0 40px;
}
.spansignup {
    margin-left:10px;
}
.spanbox2 {
    margin-left:10px;
}
.spanlogin {
    margin-left:80px;
}
.csspassword {
    margin-left:10px;
}
.container {
/*border:2px solid #0000ff;*/

}
.footer {
    margin:0;
    padding:0;
    border:2px solid #0000ff;
}
.borderTable tr td {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
}
#nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#nav-menu li {
    float: left;
    margin: 0 0.15em;
}
#nav-menu li a {
}
/* Hide from IE5-Mac \\*/
#nav-menu li a {
    float: none
}
/* End hide */

#nav-menu {
    width:23em
}

[B].boxwrap{
    float:left;
    width:370px;
}
ul.hoz {
    clear:both;
    list-style:none;
    margin:0 0 10px 15px;
    padding:0;
    clear:both;
}
.hoz li {
    display:inline
}
.footer {
    clear:both
}[/B]
</style>
</head>
<body>
<form>
    <table width="100%" height="130"  class="borderTable" >
        <tr>
            <td width="103">&nbsp;</td>
            <td width="147">&nbsp;</td>
            <td width="94">&nbsp;</td>
            <td width="113">&nbsp;</td>
            <td width="128">&nbsp;</td>
            <td width="142">&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>About us </td>
            <td>Feedback</td>
            <td>Blog</td>
            <td>Subscriptions</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    <table width="100%">
        <tr>
            <td>Search</td>
            <td><input type="text" name="textfield"></td>
            <td>Go</td>
            <td>User Name</td>
            <td><input type="text" name="textfield2"></td>
            <td>Password</td>
            <td><input type="text" name="textfield3"></td>
            <td>Login</td>
            <td>Sign Up</td>
        </tr>
    </table>
    <div class="container">
      [B]  <div class="boxwrap">
        <div class="box2">
            <h3 style="margin-left:15px">abcbsdncsdm</h3>
            <ul>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
                <li>xdbvxnv</li>
            </ul>
        </div>
        <ul class="hoz">
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
            </ul>
        </div>[/B]
        <div class="box3">
            <object width="370" height="300">
                <param name="movie" value="http://www.youtube.com/v/-rW-lK9F6TU?fs=1&amp;hl=en_US">
                </param>
                <param name="allowFullScreen" value="true">
                </param>
                <param name="allowscriptaccess" value="always">
                </param>
                <embed src="http://www.youtube.com/v/-rW-lK9F6TU?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="370" height="300"></embed>
            </object>
        </div>
    </div>
    <div class="footer"> This is my footer </div>
</form>
</body>
</html>

Is that what you meant?

I told you it wasn’t clear :slight_smile:

8

YES. I meant that. Thanks.

sorry to know you found paint to understand it.

I have run your code and this time it works fine. However, I need a little tuning though.

Will it be possible to move menu group a little bit up ? ( see the red arrow)

Like this

I wish the menu group to move up a little. ( see the red arrow)

I tried changing the your CSS… I increased the bottom margin but it does not work.

ul.hoz {
clear:both;
list-style:none;
margin:0 0 15px 15px; // this does not work
padding:0;
clear:both;
}

Is there any way I can move up the menu group a little ? ( see the red arrow)

Thanks for the help.

9

What’s making the horizontal menu to be pushed down isn’t the margin-bottom of the horizontal menu, it’s the margin-bottom of the div right above it (.box2).

.box2 {
    position:relative;
    width: 370px;
    height:300px;
    border:2px solid #660000;
    float:left;
    margin:10px 0 10px 10px; 
    display:inline;
    background-color:#ffe574;
    overflow:auto;
}

Note it states margin: 10px 0 10px 10px; The highlighted 10px is the bottom margin (remember top right bottom left is the order). Change this to 0 or 1px if you want to move the horizontal menu up.