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
2
Maybe not enough CSS there. Can you post a link? Then the answer will be quick.
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 ?
if anything missing please add that and tell give me solution
ralphm
March 22, 2011, 11:24am
5
Just post the complete html and css then.
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
7
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]
}