Home/ Questions/Q 550171
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T11:15:37+00:00

This is my code: <div id=divCategoryMenu name=divCategoryMenu style=background-color:#BCD2E6;> <ul id=ulCategoryMenu name=ulCategoryMenu> </ul> </div> The

  • 0

This is my code:

<div id="divCategoryMenu" name="divCategoryMenu" style="background-color:#BCD2E6;">
  <ul id="ulCategoryMenu" name="ulCategoryMenu">

  </ul>
</div>

The list is dynamically filled. But there is a problem:

When the list fills inside this Div, the items are center-aligned by default when I have not used any align property in the above code and also in the code that I am using to dynamically fill it. How to align so that items appear and look like this:

alt text http://www.freeimagehosting.net/uploads/b0f0daf6a2.jpg

At present it is displayed in a dirty form like this:

alt text http://www.freeimagehosting.net/uploads/901540953d.jpg

**** Edited ****

In my case, the items are actually labels not

  • . Secondly, what CSS to include to give it a look like the first image.

    **** Edited further ****

    The CSS code for the hard-coded HTML of the first image looks like this:

    <style type="text/css">

.urbangreymenu{
width: 200px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 12px Verdana;
color: white;
background:#006699 url(media/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

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

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

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E4F0F5;
display: block;
padding: 5px 0;
line-height: 12px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}


.style14 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style15 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #006699; font-size: 11px;}
</style>
    • Share

    Leave an answer

    You must login to add an answer.

    Need An Account,

    1 Answer

    1. Editorial Team

      Like RegDwight says, it’s about margin/padding not alignment. You have to add the following style items to your UL item, and also to the actual LI items of your list.
      Update: Actually a little more had to be done to get the white spaces between the list items. See the code below.

      Since the LI items are generated and not present on your initial HTML code, you have to define their styles in CSS as children of your UL item.

      Update: I had to edit the code a little to make it look exactly like in your example. I’ve pasted the complete new HTML and CSS, it should be ok now.

      <html><head>
<style type="text/css">
.urbanbluemenu{
    width: 200px; /*width of menu*/
}

ul#ulCategoryMenu {
    background-color: white;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul#ulCategoryMenu li {
    background-color: #BCD2E6;
    margin: 2px 0 2px 0;
    padding: 0 0 0 10px;
}

</style>
</head>
<body>

<div class="urbanbluemenu" id="divCategoryMenu" name="divCategoryMenu">
  <ul id="ulCategoryMenu" name="ulCategoryMenu">
     <li><label>John</label></li>
     <li><label>Bill</label></li>
  </ul>
</div>

</body>
</html>
      • 0