I'm trying to make the list produced by this code smaller in the vertical dimension. I'm adapting the code and trying hard to understand how it works, but can't figure it out. Perhaps there's some unneccesary code in there messing things up.
Can anyone offer me any advice? If there's a simpler way to achieve this effect (a subtle 3D rollover menu) I'd love to know how.
Many thanks in advance,
Rob
<style>
/*~~~ workspace sidebar menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.sidebar2 {
BORDER-RIGHT: #cccccc 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #cccccc 1px solid;
PADDING-LEFT: 5px;
FONT-SIZE: 16px;
PADDING-BOTTOM: 5px;
MARGIN: 2px;
BORDER-LEFT: #cccccc 1px solid;
WIDTH: 80px;
PADDING-TOP: 5px;
BORDER-BOTTOM: #cccccc 1px solid;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #efefef
}
ul#leftbar2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
ul#leftbar2 LI {
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; LIST-STYLE-IMAGE: none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none
}
ul#leftbar2 LI A {
BORDER-RIGHT: #efefef 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ffffff 1px solid; MARGIN-TOP: 0px; DISPLAY: block; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 8pt; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 5px; BORDER-LEFT: #efefef 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
ul#leftbar2 LI A:hover {
BORDER-LEFT-COLOR: #efefef; BORDER-BOTTOM-COLOR: #ffffff; BORDER-TOP-COLOR: #cccccc; TEXT-DECORATION: none; BORDER-RIGHT-COLOR: #efefef
}
A.barlarge2:link {
FONT-WEIGHT: bold; FONT-SIZE: 8px; COLOR: #0000cc; FONT-FAMILY: verdana,helvetica,san-serif; TEXT-DECORATION: none
}
A.barlarge2:visited {
FONT-WEIGHT: bold; FONT-SIZE: 8px; COLOR: #0000cc; FONT-FAMILY: verdana,helvetica,san-serif; TEXT-DECORATION: none
}
A.barlarge2:active {
FONT-WEIGHT: bold; FONT-SIZE: 8px; COLOR: #0066ff; FONT-FAMILY: verdana,helvetica,san-serif; TEXT-DECORATION: none
}
A.barlarge2:hover {
FONT-WEIGHT: bold; FONT-SIZE: 6px; COLOR: #0066ff; FONT-FAMILY: verdana,helvetica,san-serif; TEXT-DECORATION: none
}
</style>
<table width="100%" border="3" cellpadding="0" cellspacing="0" style="border-collapse: collapse; ">
<TABLE class=sidebar2 cellSpacing=0 cellPadding=1 width="100%" bgColor=#cccccc border=0 align=right style="margin: 0em 0em 2em 1em;">
<TBODY>
<TR align=right>
<TD>
<TABLE cellSpacing=0 cellPadding=4 width="100%" border=0>
<TBODY>
<TR>
<TD>
<UL class=leftbar2 id=leftbar2>
<LI><A class=barlarge2 href=http://www.webdeveloper.com/forum/archive/index.php/"/">website</A>
<LI><A class=barlarge2 href=http://www.webdeveloper.com/forum/archive/index.php/"/">email</A>
<LI><A class=barlarge2 href=http://www.webdeveloper.com/forum/archive/index.php/"/">map</A>
</UL>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>In "ul#leftbar2" and "ul#leftbar2 li" experiment with smaller pixel values for the margin-top values.I don't understand, all margins in those definitions are set to 0. Changing the padding doesn't work, and negative values doesn't work.
Am I misunderstanding?
Thanks,
RobFirst you need to refactor a lot of that to simplify things then use line-height to sqeeze up the menu.
.barlarge2 { line-height: 8px; font-size: 8px; font-family: verdana,helvetica,san-serif; font-weight: bold; text-decoration: none}
Having id/class conflicts isn't a good idea and the HTML needs clean up.I don't understand, all margins in those definitions are set to 0. Changing the padding doesn't work, and negative values doesn't work.
Am I misunderstanding?
Thanks,
Rob
Sorry, I meant 'padding-top'.Thank you, big help. I've got the size thing fixed, and have cleaned up the code somewhat.
ray326 or others, If you have any comments on the efficiency or logic of what is left, I'd welcome them. It works, but does it make sense?
I'm a little new to this level of CSS, and still trying to understand the difference between the barlarge2 and leftbar2 styles. Once I understand this, I will consider myself competent in this little corner of CSS and will move on to the next.
Regards,
Rob
<style>
.sidebar2 {
border-right: #cccccc 1px solid;
padding-right: 5px;
border-top: #cccccc 1px solid;
padding-left: 5px;
font-size: 16px;
padding-bottom: 5px;
margin: 2px;
border-left: #cccccc 1px solid;
width: 80px;
padding-top: 5px;
border-bottom: #cccccc 1px solid;
font-size: Verdana, Arial, Helvetica, sans-serif;
background-color: #efefef
}
ul#leftbar2 {
padding: 0px; margin: 0px; list-style-type: none
}
ul#leftbar2 li {
padding: 0px; margin: 0px; display: inline; list-style-image: none; list-style-type: none
}
ul#leftbar2 li a {
border-right: #efefef 1px solid; padding-right: 5px; border-top: #ffffff 1px solid; margin-top: 0px; display: block; padding-left: 5px; font-weight: normal; font-size: 8pt; margin-bottom: 0px; padding-bottom: 5px; border-left: #efefef 1px solid; padding-top: 5px; border-bottom: #cccccc 1px solid; font-size: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none
}
ul#leftbar2 li a:hover {
border-left-color: #efefef; border-bottom-color: #ffffff; border-top-color: #cccccc; text-decoration: none; border-right-color: #efefef
}
A.barlarge2:link {
line-height: 6px; font-weight: bold; font-size: 8px; color: #0000cc; font-family: verdana,helvetica,san-serif; text-decoration: none
}
A.barlarge2:visited {
line-height: 6px; font-weight: bold; font-size: 8px; color: #0000cc; font-family: verdana,helvetica,san-serif; text-decoration: none
}
A.barlarge2:active {
line-height: 6px; font-weight: bold; font-size: 8px; color: #0066ff; font-family: verdana,helvetica,san-serif; text-decoration: none
}
A.barlarge2:hover {
line-height: 6px; font-weight: bold; font-size: 6px; color: #0066ff; font-family: verdana,helvetica,san-serif; text-decoration: none
}
</style>
<table class=sidebar2 cellSpacing=0 cellpadding=1 width="100%" bgcolor=#cccccc border=0 align=right>
<tr align=right>
<td>
<table cellSpacing=0 cellpadding=4 width="100%" border=0>
<tr>
<td>
<ul id=leftbar2>
<li><a class=barlarge2 href=http://www.webdeveloper.com/forum/archive/index.php/"/">website</a></li>
<li><a class=barlarge2 href=http://www.webdeveloper.com/forum/archive/index.php/"/">email</a></li>
<li><a class=barlarge2 href=http://www.webdeveloper.com/forum/archive/index.php/"/">map</a></li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
Can anyone offer me any advice? If there's a simpler way to achieve this effect (a subtle 3D rollover menu) I'd love to know how.
Many thanks in advance,
Rob
<style>
/*~~~ workspace sidebar menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.sidebar2 {
BORDER-RIGHT: #cccccc 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #cccccc 1px solid;
PADDING-LEFT: 5px;
FONT-SIZE: 16px;
PADDING-BOTTOM: 5px;
MARGIN: 2px;
BORDER-LEFT: #cccccc 1px solid;
WIDTH: 80px;
PADDING-TOP: 5px;
BORDER-BOTTOM: #cccccc 1px solid;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #efefef
}
ul#leftbar2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
ul#leftbar2 LI {
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; LIST-STYLE-IMAGE: none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none
}
ul#leftbar2 LI A {
BORDER-RIGHT: #efefef 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ffffff 1px solid; MARGIN-TOP: 0px; DISPLAY: block; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 8pt; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 5px; BORDER-LEFT: #efefef 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
ul#leftbar2 LI A:hover {
BORDER-LEFT-COLOR: #efefef; BORDER-BOTTOM-COLOR: #ffffff; BORDER-TOP-COLOR: #cccccc; TEXT-DECORATION: none; BORDER-RIGHT-COLOR: #efefef
}
A.barlarge2:link {
FONT-WEIGHT: bold; FONT-SIZE: 8px; COLOR: #0000cc; FONT-FAMILY: verdana,helvetica,san-serif; TEXT-DECORATION: none
}
A.barlarge2:visited {
FONT-WEIGHT: bold; FONT-SIZE: 8px; COLOR: #0000cc; FONT-FAMILY: verdana,helvetica,san-serif; TEXT-DECORATION: none
}
A.barlarge2:active {
FONT-WEIGHT: bold; FONT-SIZE: 8px; COLOR: #0066ff; FONT-FAMILY: verdana,helvetica,san-serif; TEXT-DECORATION: none
}
A.barlarge2:hover {
FONT-WEIGHT: bold; FONT-SIZE: 6px; COLOR: #0066ff; FONT-FAMILY: verdana,helvetica,san-serif; TEXT-DECORATION: none
}
</style>
<table width="100%" border="3" cellpadding="0" cellspacing="0" style="border-collapse: collapse; ">
<TABLE class=sidebar2 cellSpacing=0 cellPadding=1 width="100%" bgColor=#cccccc border=0 align=right style="margin: 0em 0em 2em 1em;">
<TBODY>
<TR align=right>
<TD>
<TABLE cellSpacing=0 cellPadding=4 width="100%" border=0>
<TBODY>
<TR>
<TD>
<UL class=leftbar2 id=leftbar2>
<LI><A class=barlarge2 href=http://www.webdeveloper.com/forum/archive/index.php/"/">website</A>
<LI><A class=barlarge2 href=http://www.webdeveloper.com/forum/archive/index.php/"/">email</A>
<LI><A class=barlarge2 href=http://www.webdeveloper.com/forum/archive/index.php/"/">map</A>
</UL>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>In "ul#leftbar2" and "ul#leftbar2 li" experiment with smaller pixel values for the margin-top values.I don't understand, all margins in those definitions are set to 0. Changing the padding doesn't work, and negative values doesn't work.
Am I misunderstanding?
Thanks,
RobFirst you need to refactor a lot of that to simplify things then use line-height to sqeeze up the menu.
.barlarge2 { line-height: 8px; font-size: 8px; font-family: verdana,helvetica,san-serif; font-weight: bold; text-decoration: none}
Having id/class conflicts isn't a good idea and the HTML needs clean up.I don't understand, all margins in those definitions are set to 0. Changing the padding doesn't work, and negative values doesn't work.
Am I misunderstanding?
Thanks,
Rob
Sorry, I meant 'padding-top'.Thank you, big help. I've got the size thing fixed, and have cleaned up the code somewhat.
ray326 or others, If you have any comments on the efficiency or logic of what is left, I'd welcome them. It works, but does it make sense?
I'm a little new to this level of CSS, and still trying to understand the difference between the barlarge2 and leftbar2 styles. Once I understand this, I will consider myself competent in this little corner of CSS and will move on to the next.
Regards,
Rob
<style>
.sidebar2 {
border-right: #cccccc 1px solid;
padding-right: 5px;
border-top: #cccccc 1px solid;
padding-left: 5px;
font-size: 16px;
padding-bottom: 5px;
margin: 2px;
border-left: #cccccc 1px solid;
width: 80px;
padding-top: 5px;
border-bottom: #cccccc 1px solid;
font-size: Verdana, Arial, Helvetica, sans-serif;
background-color: #efefef
}
ul#leftbar2 {
padding: 0px; margin: 0px; list-style-type: none
}
ul#leftbar2 li {
padding: 0px; margin: 0px; display: inline; list-style-image: none; list-style-type: none
}
ul#leftbar2 li a {
border-right: #efefef 1px solid; padding-right: 5px; border-top: #ffffff 1px solid; margin-top: 0px; display: block; padding-left: 5px; font-weight: normal; font-size: 8pt; margin-bottom: 0px; padding-bottom: 5px; border-left: #efefef 1px solid; padding-top: 5px; border-bottom: #cccccc 1px solid; font-size: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none
}
ul#leftbar2 li a:hover {
border-left-color: #efefef; border-bottom-color: #ffffff; border-top-color: #cccccc; text-decoration: none; border-right-color: #efefef
}
A.barlarge2:link {
line-height: 6px; font-weight: bold; font-size: 8px; color: #0000cc; font-family: verdana,helvetica,san-serif; text-decoration: none
}
A.barlarge2:visited {
line-height: 6px; font-weight: bold; font-size: 8px; color: #0000cc; font-family: verdana,helvetica,san-serif; text-decoration: none
}
A.barlarge2:active {
line-height: 6px; font-weight: bold; font-size: 8px; color: #0066ff; font-family: verdana,helvetica,san-serif; text-decoration: none
}
A.barlarge2:hover {
line-height: 6px; font-weight: bold; font-size: 6px; color: #0066ff; font-family: verdana,helvetica,san-serif; text-decoration: none
}
</style>
<table class=sidebar2 cellSpacing=0 cellpadding=1 width="100%" bgcolor=#cccccc border=0 align=right>
<tr align=right>
<td>
<table cellSpacing=0 cellpadding=4 width="100%" border=0>
<tr>
<td>
<ul id=leftbar2>
<li><a class=barlarge2 href=http://www.webdeveloper.com/forum/archive/index.php/"/">website</a></li>
<li><a class=barlarge2 href=http://www.webdeveloper.com/forum/archive/index.php/"/">email</a></li>
<li><a class=barlarge2 href=http://www.webdeveloper.com/forum/archive/index.php/"/">map</a></li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>