How to decrease or finish margin of left side of my menu

realcoder · March 22, 2011, 9:59am

hii i want to decrease the margin of left side even just want to finish that
but don’t know how it will be decrease try many things
i have attach the screen shot of my Menu

and here is code

    <div id="leftcolumn">
<div class="box_blue">
    <h2>Categories</h2>
    <div class="content">
    <ul>

    <li><a href="">Bollywood Movies</a></li>
    <li><a href="">Pakistani Songs</a></li>
    <li><a href="signup.php">Indian Pop And Remix</a></li>
    <li><a href="earning.php">Bhangra/Punjabi</a></li>
    <li><a href="payinfo.php">Ghazals</a></li>
    <li><a href="payproof.php">Revival / Old Is Gold</a></li>


    </ul>
    </div>
    </div>

and this is css

#leftcolumn .box_blue{
    
   
	}
#leftcolumn .box_blue h2{
	width: 155px;
	height: 22px;
	color: #ffffff;
	margin:0px 0px 0px 0px; 
	padding:3px 0px 0px 40px;
	font-size: 15px;
	text-align: left;
	background: #ffffff url(../images/menu2.png) no-repeat left;
	}
	
#leftcolumn .box_blue .content{

	padding:5px 0px 5px 0px;
	background: #DAEF4A;
	}
		
#leftcolumn .box_blue .content ul {
    margin-left:0px;
margin-right:0px;
	list-style: none;
	line-height: normal;
}

#leftcolumn .box_blue .content li{
	display: block;
	height: 19px;
	padding: 0px 0px 0px 10px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	text-align: left;
	font-weight: normal;
	color: #393939;
	background: url(../images/arrow.png) no-repeat 0px ;
	border-bottom: 1px solid #FFF;
	
}

#leftcolumn .box_blue .content a {
    text-decoration: none;
	color:#000;
}
#leftcolumn .box_blue .content a:hover {
    text-decoration: underline;
	color:#000;
}

where i need to change that i can decrease of finish left side margin
thank:)

ralphm · March 22, 2011, 10:03am

Maybe not enough CSS there. Can you post a link? Then the answer will be quick.

realcoder · March 22, 2011, 11:15am

well m just testing running it on local hosts so can’t provide link
but this is the complete css which m using in this menu …which other thing u need more ?

realcoder · March 22, 2011, 11:19am

if anything missing please add that and tell give me solution

ralphm · March 22, 2011, 11:24am

Just post the complete html and css then.

realcoder · March 22, 2011, 11:27am

here is html


<!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" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="realcoder" />
    <meta name="description" content="Bollywood songs,indian movies songs,pakistani movies songs,live music,bollywood mp3 songs,indian remix songs,pop songs,english songs," />
    <meta name="keywords" content=" Bollywood songs,indian movies songs,pakistani movies songs,live music,bollywood mp3 songs,indian remix songs,pop songs,english songs,pakistani darama songs,pakistani pop songs,indian new songs, " />
    <meta name="revisit-after" content="1 days">
    
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    

	<title>ApniWorld Your Own World of Fun</title>

    

</head>

<body>

<table border="0" width="982" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="" >
<tr class="top"><td width="982" height="40"></td></tr>

<tr><td><table>
<tr>
<td height="150"> <h1>My Logo GO Here</h1></td>
</tr>
<tr><td bgcolor="#DAEF4A" width="982">
<div class="green">
<div id="men">

<ul>
                  <li><a href="/index.php" title="ApniWorld.com" class="current">Home</a></li>
                  <li><a href="/songs" title="Music">Music</a></li>
                  <li><a href="/movies" title="Latest Movies">Movies</a></li>
                  <li><a href="/wallpapers" title="Wallpapers" >Wallpapers</a></li>
                  <li><a href="/mobile" title="Mobiles Tools" >Mobiles</a></li>
                  <li><a href="/games" title="Games" >Games</a></li>

                  <li><a href="/education" title="Jokes" >Education</a></li>
                  <li><a href="/gallery" title="Wallpapers" >Wallpapers</a></li>
                  <li><a href="/chat" title="Chat Room" >Chat Room</a></li>
                  <li><a href="http://www.apniworld.com/blog" title="Entertainment News" >Entertainment Blog</a></li>
                </ul>
</td></tr>
</table></td></tr>

  <tr>
    <td bgcolor="#FFFFFF" align="center"><table align="center" width="100%" border="0" cellpadding="6" cellspacing="0">
    <tr><td height="600" width="300"><table><tr><td height="134" valign="left"><table><tr><td>
    
    <div id="leftcolumn">
<div class="box_blue">
    <h2>Categories</h2>
    <div class="content">
    <ul>

    <li><a href="">Bollywood Movies</a></li>
    <li><a href="">Pakistani Songs</a></li>
    <li><a href="signup.php">Indian Pop And Remix</a></li>
    <li><a href="earning.php">Bhangra/Punjabi</a></li>
    <li><a href="payinfo.php">Ghazals</a></li>
    <li><a href="payproof.php">Revival / Old Is Gold</a></li>


    </ul>
    </div>
    </div>
    </td></tr></table></tr></table><img src="css/600x120.png" /></td><td>


<table cellspacing="0"><tr><td colspan="3"><img src="http://www.sitepoint.com/forums/images/lmm.png" /></td></tr>
<tr><TD align=middle width=569 bgColor=#EFF0F2 height="110"></TD><script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="300px"
//Specify the slider's height
var sliderheight="150px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href='http://localhost/apni/bollywood.php?movie=A Flat'><img src='http://localhost/apni/albumcov/Aisha_Movie_movie_poster.jpeg' border=1></a>'
leftrightslide[1]='<a href='http://localhost/apni/bollywood.php?movie=A Flat'><img src='http://localhost/apni/albumcov/Aisha_Movie_movie_poster.jpeg' border=1></a>'
leftrightslide[2]='<a href='http://localhost/apni/bollywood.php?movie=A Flat'><img src='http://localhost/apni/albumcov/Aisha_Movie_movie_poster.jpeg' border=1></a>'
leftrightslide[3]='<a href='http://localhost/apni/bollywood.php?movie=A Flat'><img src='http://localhost/apni/albumcov/Aisha_Movie_movie_poster.jpeg' border=1></a>'
leftrightslide[4]='<a href='http://localhost/apni/bollywood.php?movie=A Flat'><img src='http://localhost/apni/albumcov/Aisha_Movie_movie_poster.jpeg' border=1></a>'
leftrightslide[5]='<a href='http://localhost/apni/bollywood.php?movie=A Flat'><img src='http://localhost/apni/albumcov/Aisha_Movie_movie_poster.jpeg' border=1></a>'
leftrightslide[6]='<a href='http://localhost/apni/bollywood.php?movie=A Flat'><img src='http://localhost/apni/albumcov/Badmaash-Companywallpapers.jpg' border=1></a>'
leftrightslide[7]='<a href='http://localhost/apni/bollywood.php?movie=A Flat'><img src='http://localhost/apni/albumcov/Badmaash-Companywallpapers.jpg' border=1></a>'



//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

</td></tr>

<script type="text/javascript">

function opn (url){

	window.open(url,'assd','width=200,height=50')

	return falseu

}

</script>
<tr><td colspan="2"><img src="css/480x60.png" /></td></tr>
<tr><td colspan="2" align="center"><a href="downloadzip.php?movie="><b>Download All in One Zip</b></a></td></tr>
</table>
</td><td height="700" width="150"><img src="css/600x120.png" /></td></tr>
</table>
</body></html>

and here is css


.top
{background-color:#DAEF4A;}

.hd {font-family: Arial;font-size: 13px;color: #000000;background-image: url(../images/hd.png);background-repeat: repeat-x;border: 1px solid #333333;height: 20px;text-indent: 10px;font-weight: bold;font-style: normal;}
.tbl_bl {background-image: url(../images/table_bg_bot.jpg); background-position: bottom; background-repeat: repeat-x;height: 6px;}
.tbl_bg {background-image: url(../images/tbl.png);background-repeat: repeat-x;}
#marqueecontainer {position: relative;width: 240px;height: 120px;overflow: hidden;padding: 2px;padding-left: 4px;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;}
.tab_tbl_bg {background-image: url(../images/tab_table_bg.jpg);background-repeat: repeat-x;background-color: #FAFAF8;height: 206px;border: 1px solid #999999;}
.tab_tbl_frame {background-image: url(../images/tab_table_bg.jpg);background-repeat: repeat-x;background-color: #FAFAF8;height: 206px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #CCC;}
.ad{
    border: 4px solid #DAEF4A;
    width:430px;
    padding:15px;
    
}
.green #men{position:relative;display:block;height:28px;font-size:12px;font-weight:bold;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:none;background-color: transparent;background-repeat: repeat-x;background-position: center top;}
.green #men ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.green #men ul li{display:block;float:left;margin-top: 0;margin-right: 1px;margin-bottom: 0;margin-left: 0;}
.green #men ul li a{display:block;float:left;color:#000000;text-decoration:none;height:26px;padding-top: 6px;padding-right: 18px;padding-bottom: 0;padding-left: 18px;}
.green #men ul li a:hover,.blue #men ul li a.current{color:#FFFFFF;background-repeat: repeat-x;background-position: left top;background-image: url(../images/btn.png);}




.shadetabs{margin-left: 0px;margin-bottom: 0;list-style-type: none;text-align: left;font-family: Arial;font-size: 11px;font-weight: normal;padding-top: 2px;padding-right: 0px;padding-bottom: 0px;padding-left: 0;text-decoration: none;margin-top: 0px;margin-right: 0px;}
.shadetabs li{font-weight:bold;display: inline;margin: 0;background-image: url(../images/hd.png);font-size: 12px;color: #000000;background-repeat: no-repeat;font-family: Arial;z-index: 1;}
.shadetabs li a{text-decoration: none;position: relative;z-index: 1;margin-right: 0px;color: #000000;background-image: url(../images/hd.png);background-repeat: repeat-x;height: 20px;padding-top: 1px;padding-right: 21px;padding-bottom: 0px;padding-left: 22px;font-family: Arial;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 0px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color: #333333;border-right-color: #333333;border-bottom-color: #333333;border-left-color: #333333;margin-bottom: 2px;}
.shadetabs li a:hover{color: #000000;background-image: url(../images/tab_selected.jpg);background-repeat: repeat-x;border: 1px solid #999999;}
.shadetabs li a.selected{position: relative;font-family: Arial;color: #000000;border: 1px solid #999999;}
.shadetabs li a.selected{background-image: url(../images/tab_selected.jpg);color: #000000;font-family: Arial;background-repeat: repeat-x;}

.sliderwrapper{position: relative; overflow: hidden;border-bottom-width: 0px;width:450px;height: 145px;}
.sliderwrapper .contentdiv{visibility: hidden; position: absolute; left: 0;  top: 0; padding: 0px;background: white;width: 500px; height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
.pagination{width: 450px; text-align: right;background-color: #DAEF4A;padding: 0px 0px;}
.pagination a{padding: 0 5px;text-decoration: none;color: #FFF;background-color: #F36076;font-family: Arial, Helvetica, sans-serif;font-size: 10px;font-weight: normal;}
.pagination a:hover, .pagination a.selected{color: black;background-color: white;}

.evenRow {
    background-color:#DAEF4A;
}
 
.oddRow {
    background-color: white;
}



#leftcolumn .box_blue{
    
   
	}
#leftcolumn .box_blue h2{
	width: 155px;
	height: 22px;
	color: #ffffff;
	margin:0px 0px 0px 0px; 
	padding:3px 0px 0px 40px;
	font-size: 15px;
	text-align: left;
	background: #ffffff url(../images/menu2.png) no-repeat left;
	}
	
#leftcolumn .box_blue .content{

	padding:5px 0px 5px 0px;
	background: #DAEF4A;
	}
		
#leftcolumn .box_blue .content ul {
    margin-left:0px;
margin-right:0px;
	list-style: none;
	line-height: normal;
}

#leftcolumn .box_blue .content li{
	display: block;
	height: 19px;
	padding: 0px 0px 0px 10px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	text-align: left;
	font-weight: normal;
	color: #393939;
	background: url(../images/arrow.png) no-repeat 0px ;
	border-bottom: 1px solid #FFF;
	
}

#leftcolumn .box_blue .content a {
    text-decoration: none;
	color:#000;
}
#leftcolumn .box_blue .content a:hover {
    text-decoration: underline;
	color:#000;
}

ralphm · March 22, 2011, 12:02pm

OK, I should have seen it, but so much easier with a live page. It’s the default left padding. Adjust the padding below in red to suit:

#leftcolumn .box_blue .content ul {
        margin-left:0px;
        margin-right:0px;
	list-style: none;
	line-height: normal;
        [COLOR="Red"]padding: 0;[/COLOR]
}

realcoder · March 22, 2011, 2:52pm

THANks dear

Topic		Replies	Views
How i can make menu and sidebar styling like this website? HTML & CSS	5	685	October 8, 2014
Menu not on the right place, help please Get Started	3	420	June 23, 2010
Css help - how to close this box HTML & CSS	6	693	October 8, 2014
Trouble with bottom margin on DW SpryMenu HTML & CSS	6	1115	October 8, 2014
How do I put menu in my page? HTML & CSS	8	348	December 3, 2010

How to decrease or finish margin of left side of my menu

Related topics