menu bars

[Lesley Blakey]

Hi

I am a bit of a novice dreamweaver user and would appreciate a little help
with css. I hope this is the correct newsgroup, if not can someone point me
to the right one.

I have created a horizontal menu bar and a vertical menu (using a table)
using the code below. The vertical menu bar is 20% wide and I want the menu
choices to be 100% of this. However, when I apply 100% to the vertical menu
bar, the atrtibutes then apply themselves to the horizontal bar as well,
which I don;t want. I can see than it's all to do how the "a" is defined as
both bars reference "a href". Is there a work around this. Hope what I
have said makes sense. Will try and explain a bit better if needed.

Thanks in anticipation
Lesley

horizontal
-----------

ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-colorurple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}


<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
--------------------

vertical
-------

div.container_leftmenu
{
width:19%;
margin:0px;
border:1px solid gray;
line-height:150%;
position:absolute;
left:10px;
top:270px;
background-color:#FFFFFF;
}



<div class="container_leftmenu">
<div class="left"><table width="100%" border="1" cellpadding="0"
cellspacing="0" bgcolor="white">

<tr>
<td><a href="link_a.htm">Link A</a></td>
</tr>
<tr>
<td><a href="link_b.htm">Link B</a></td>
</tr>
<tr>
<td><a href="link_c.htm">Link C</a></td>
</tr>
</table>

 

[jojo]

I am a bit of a novice dreamweaver user and would appreciate a little help
with css. I hope this is the correct newsgroup, if not can someone point me
to the right one.

Yes, you can post it here.

I have created a horizontal menu bar and a vertical menu (using a table)

If you are already using CSS, why don't you do your menu with CSS than?

using the code below. The vertical menu bar is 20% wide and I want the menu
choices to be 100% of this. However, when I apply 100% to the vertical menu
bar, the atrtibutes then apply themselves to the horizontal bar as well,
which I don;t want. I can see than it's all to do how the "a" is defined as
both bars reference "a href". Is there a work around this. Hope what I
have said makes sense. Will try and explain a bit better if needed.

Post a link so everybody can see how it looks? And perhaps an image how
it *should* look?

Thanks in anticipation
Lesley

horizontal
-----------

ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-colorurple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}

ASFAIK this is not necessary. Correct me if I'm wrong, but I think <li>
is already inline by default?

BTW: Why do you use a list if you don't want it to look like one?

<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
--------------------

vertical
-------

div.container_leftmenu
{
width:19%;
margin:0px;
border:1px solid gray;
line-height:150%;
position:absolute;
left:10px;
top:270px;
background-color:#FFFFFF;
}



<div class="container_leftmenu">
<div class="left"><table width="100%" border="1" cellpadding="0"
cellspacing="0" bgcolor="white">

Try to avoid mixing up CSS and styling within HTML. Why don't you style
the table per CSS? Try this:

table {
position: relative;
/*
So the table is styled relative to the last element with
"position:absolute;", the <div> in your case. Maybe *this*
solves your problem
*/
width: 100%;
border: 1px solid black;
background-color: white;
padding: 0px;
margin: 0px;
}
td, th {
padding: 0px;
margin:0px;
}

<tr>
<td><a href="link_a.htm">Link A</a></td>
</tr>
<tr>
<td><a href="link_b.htm">Link B</a></td>
</tr>
<tr>
<td><a href="link_c.htm">Link C</a></td>
</tr>
</table>

HTH, jojo

 

[jojo]

jojo wrote:

ASFAIK this is not necessary. Correct me if I'm wrong, but I think <li>
is already inline by default?

Sorry, I was wrong. They are "list-item" (or at least they should be,
most browsers do not support "display:list-item;").

<snip>

 

[les64]

Thank you for your advice jojo - I have not been at pc since I posted
the original item, so many apologies for the delay in replying. I'll
go and spend some time reminding myself what I was doing and then try
your suggestions. I'll let you know how I get on.

Thanks again
Lesley