[SOLVED] auto indent

[M.O.S. Studios]

Hey guys,

 

here is my problem,

 

I use css to design my main menu,

for each menu option it indents the item and add a bullet, this works fine for the most part, the problem occours when the item is too long for the line, the word is cut off and starts on a new line with out indenting, any one know how to make it auto indent?

 

 

the css

.module_s1				{margin:0px 0px 7px 0px; width:100%; background:url(../images/mainmenu_top.gif) no-repeat 0 0 #1e2224}
.module_s1 div 			{background:url(../images/mainmenu_bottom.gif) no-repeat bottom left}
.module_s1 div div		{}
.module_s1 div div div	{padding:0px 0px 14px 0px; width:194px}
.module_s1 div div div div	{background:none; padding:0px 0px 0px 0px;}
.module_s1 h3			{font:bold 17px Arial; color:#f2f4f7; padding:17px 0px 0px 27px; margin:0px 0px 12px 22px; background:url(../images/h3_bullet.gif) no-repeat left 17px}
.module_s1 table		{}
.module_s1 td 			{padding:0px 0px 5px 0px;}
.module_s1 td div		{margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; background:none; /*width:138px !important*/}   /*sub_main_menu indent*/
.module_s1 a			{background:url(../images/mainmenu_bullet.gif) no-repeat left top; padding:0px 0px 0px 21px; color:#ffffff !important; font:normal 13px Arial; text-decoration:underline; margin:0px 0px 0px 32px;}	/* Item Of Menu Main */
.module_s1 a:hover		{text-decoration:none}
.module_s1 img			{width:0px; height:0px}

 

the html

 

<table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
              <h3>Clothing</h3>
            </td>
         </tr>
        <tr align='left'>
       <td align='left'><a href='index.php?page=store&prod=11' class="mainlevel" >Sereno suit w/embroidery</a>
       </td>
    </tr>
</table>
</div>
</div>
</div>
</div>

 

[attachment deleted by admin]

[M.O.S. Studios]

sorry this is the html

 

<div class="module_s1"><div><div><div>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
              <h3>Clothing</h3>
            </td>
         </tr>
        <tr align='left'>
       <td align='left'><a href='index.php?page=store&prod=11' class="mainlevel" >Sereno suit w/embroidery</a>
       </td>
    </tr>
</table>
</div>
</div>
</div>
</div>

[Axeia]

It's because you're using the wrong tag for the job.

Instead of the table use

<h3>Clothing</h3>

<ul>

  <li><a href='index.php?page=store&prod=11' class="mainlevel" >Sereno suit w/embroidery</a></li>

</ul>

 

[M.O.S. Studios]

i tired that, but it is giving me the same problem, still dosn't line up the 2nd line to the first

[Axeia]

Use the ul/li

Then apply something like

ul { margin: 0; padding: 0; list-style: none; } 
li {
    padding-left: 25px;
    background: url( ../images/mainmenu_bullet.gif ) 2px 2px no-repeat;
}

adept the 2px/2px to position the bullet where you want it.

[M.O.S. Studios]

awesome,

i had to change it a bit to get it to work, but i got it,,, thanks for all the help,

 

this is the final code

 

css

module_s1				{margin:0px 0px 7px 0px; width:100%; background:url(../images/mainmenu_top.gif) no-repeat 0 0 #1e2224}
.module_s1 div 			{background:url(../images/mainmenu_bottom.gif) no-repeat bottom left}
.module_s1 div div		{}
.module_s1 div div div	{padding:0px 0px 14px 0px; width:194px}
.module_s1 div div div div	{background:none; padding:0px 0px 0px 0px;}
.module_s1 h3			{font:bold 17px Arial; color:#f2f4f7; padding:17px 0px 0px 27px; margin:0px 0px 12px 22px; background:url(../images/h3_bullet.gif) no-repeat left 17px}
.module_s1 table		{}
.module_s1 td 			{padding:0px 0px 5px 0px;}
.module_s1 td div		{margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; background:none; /*width:138px !important*/}   /*sub_main_menu indent*/
<!---.module_s1 a			{background:url(../images/mainmenu_bullet.gif) no-repeat left top; padding:0px 0px 0px 32px; color:#ffffff !important; font:normal 13px Arial; text-decoration:underline; margin:0px 0px 0px 32px;}	/* Item Of Menu Main */-->
.module_s1 a			{padding:0px 0px 0px 0px; color:#ffffff !important; font:normal 13px Arial; text-decoration:underline; margin:0px 0px 0px 0px;}	/* Item Of Menu Main */
.module_s1 ul                   {margin: 10; padding: 0; list-style: none; } 
.module_s1 li                   {padding-left: 35px; background: url( ../images/mainmenu_bullet.gif ) 20px 2px no-repeat;}
.module_s1 a:hover		{text-decoration:none}
.module_s1 img			{width:0px; height:0px}

.mainlevel				{} 	
a.mainlevel:visited 	{color:#2b465b;}
a.mainlevel:hover 		{color:#2b465b;}

 

 

html

<div class="module_s1"><div><div><div>
<h3>Clothing</h3>
<ul>
  <li><a href='index.php?page=store&prod=12' class="mainlevel" >Trofeo track suit</a>
</ul>
</div>
</div>
</div>
</div>