Arrow Bullet List Menu

[Kazi]

1) Script Title: Arrow Bullet List Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...let_list_menu/

3) Describe problem: Hello i am kazi. new member...just joined today. first of all thanks to dynamicdrive.com for such a great site.

i tried to use Arrow bullet list menu on my new website. it didn't work. as i am using three column css template, while i tried to include this code it totally messed up. i have an image so you can check that.

need help to fix this problem.

thx in advance

[Nile]

Can you please post a link to your page and the code. The picture is to small to basically make out whats in there. So the code and page would help please.

[Kazi]

thanks nile for your response.

my site isn't online. i am developing this by using dreamweaver.

here is my code:

CSS code:

#container {
width: 850px;
margin-right: auto;
margin-left: auto;
}
#header {
border:1px solid #E1E1E1;
height: 100px;
width: 850px;
background-image: url(images/header.jpg);
}

#content {
width: 500px;
padding: 10px;
margin-right: 160px;
margin-left: 160px;
}
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#ddcolortabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}

#ddcolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}


#ddcolortabs a{
float:left;
color: white;
background: #678b3f url(media/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#ddcolortabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding:4px 9px 2px 6px;
}

#ddcolortabs a span{
float:none;
}


#ddcolortabs a:hover{
background-color: #8cb85c;
}

#ddcolortabs a:hover span{
background-color: #8cb85c;
}

#ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: #8cb85c;
}

#ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #678b3f;
}

</style>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.arrowlistmenu{
width: 180px; /*width of menu*/
}

.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}

.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

</style>

#sidebar {
border:1px solid #E1E1E1;
padding: 10px;
float: right;
width: 130px;
background-color: #ffffff;
height: 390px;

}

#footer {
border:1px solid #E1E1E1;
background-color: #ffffff;
padding: 10px;
clear: both;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}


h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: bold;
color: #063B81;
line-height: 24px;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
color: #2F77F1;
line-height: 20px;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
color: #000000;
line-height: 20px;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 11pt;
margin-top: 3px;
margin-right: 0;
margin-bottom: 3px;
margin-left: 0;
padding-bottom: 9px;
}

a {
color: #E82525;
font-weight: bold;
text-decoration: underline;
}
a:visited {
color: #E82525;
text-decoration: underline;
font-weight : bold;
}
a:hover {
color: #901BBE;
text-decoration: none;
}

.smalltext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 3px 0;
margin: 3px 0;
line-height: 12pt
}


HTML 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">
<head><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://www.flat-stomach-exercises.com/favicon.ico" />

<title>Your Title</title>
<META Name="Description" Content="description" />
<META Name="Keywords" Content="keywords separated by commas"/>
<link rel="Shortcut Icon" href="/favicon.ico" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>

<div id="container">

<div id="header"><img src="../Banner/loss-d8.jpg" alt="weight loss" width="850" height="100" /></div>

<div id="ddcolortabs">
<ul>
<li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>Product Reviews</span></a></li>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised"><span>Weight Loss Article</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools"><span>Newsletter</span></a></li>
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums"><span>Contact Us</span></a></li>
</ul>
</div>

<div id="ddcolortabsline">&nbsp;</div>

<div class="arrowlistmenu">

<h3 class="headerbar">CSS Library</h3>
<ul>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS </a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS </a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and </a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Button</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>

<h3 class="headerbar">CSS Drive</h3>
<ul>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
</ul>

</div>

<div id="sidebar">
<p> This is where you put sidebar text. It's a great place for text and banner ads or news items.</p>
<p>Define the look and feel of this area by editing the <strong>sidebar</strong> section in the style.css file
that came with this template.</p>
<p>You can also adjust the color, height, etc. of this area if you wish.</p>
</div>

<div id="content">

<h1>Title of Page (Edit the H1 Tag on style sheet to change look of title.)</h1>


<p>This area is controlled by the &quot;container&quot; section on your style sheet. If you want to adjust the size of this space, change the gray background color, etc. then you can play with the values underneath &quot;container&quot; section in the style.css file.</p>
<p>To change the font size and style, edit the &quot;p&quot; attribute.<a href="http://www.yahoo.com">This is a hyperlink</a>. To change the color of the hyperlink and the color it changes when you mouseover it, edit the &quot;a&quot;, &quot;a: visited&quot; and &quot;a: hover&quot; sections in style.css.</p>
<h2>This is H2 Subtitle Text. Change the H2 tag in the style sheet to change the design of this text.</h2>
<h3>This is H3 Subtitle Text. Change the H3 tag in the style sheet to change the design of this text.<br />
</h3>
</div>


<div align="center" id="footer">
<p>This is the footer section. To edit the colors, font style, etc. Edit the &quot;footer&quot; section in style.css</p>
<p class="smalltext">copyright 2008 &copy;Pill4weightloss.com - All Rights Reserved </p>
</div>

</div>



</body>
</html>

i would be glad if you can help me

[Nile]

Try giving the container an absolute position:

#container {
width: 850px;
margin-right: auto;
margin-left: auto;
position: absolute;
}

[Kazi]

it didn't work. i have done exactly what you have said but no result

[Kazi]

i don't know why every vertical menu i am using..results are same.

the siderbar column is below leftside menu and content area under this

i am using three column css template. can anyone please help me to solve this problem.