Page 1 of 1

background problem

Posted: Wed Jul 07, 2010 8:06 am
by aravona
I have a negative text indent, and its moved my background.

I've tried using background-position but I cannot get it to move the same negative distance. What would be the best way to move a background -2em?

Thanks,

Aravona

Re: background problem

Posted: Wed Jul 07, 2010 2:21 pm
by Jade
Is your text in a div tag? If it is then I don't see how it could also be moving your background unless your background is in a parent <div> instead of on the document body tag... Can you post your code?

Re: background problem

Posted: Thu Jul 08, 2010 3:02 am
by aravona
Its a list. Its a bit twisted because its wordpress.

The navigation code:

Code: Select all

<?php wp_list_categories('orderby=order','title_li=' . __('Categories:')); ?>
The CSS:

[text]#leftnav {

width: 180px;

padding-left: 15px;

color:#000000;

list-style:none;

}

#leftnav li {

list-style: none;

color:#000000;

}

#leftnav ul {

list-style: none;

padding: 0px;

margin: 0px;

color:#000000;

}

#leftnav ul li {

list-style: none;

padding: 2px 3px 0px 3px;

margin: 0px;

margin-left: 2px;

background: url('images/navbg.png');

background-repeat:no-repeat;

color:#FFFFFF;

}

#leftnav ul li a{

list-style: none;

padding: 0px;

color:#FFFFFF;

text-decoration:none;

letter-spacing:normal;

}

#leftnav ul li li{

list-style: none;

padding: 0px;

margin: 0px;

margin-left: 2em;

background: url('images/navlitebg.png') repeat -30px;

text-indent: -2em;

}


#leftnav ul li li a{

list-style: none;

padding: 0px;

margin: 0px;

background: url('images/navlitebg.png') repeat;

color:#000000;


}

#leftnav ul li li a:hover{

list-style: none;

padding: 0px;

margin: 0px;

background: url('images/navdarkbg.png') repeat;

color:#000000;

}

#leftnav ul li li li{

text-indent: 15px;

}[/text]

Re: background problem

Posted: Thu Jul 08, 2010 10:04 am
by Jade
I'm not sure I understand what you're doing here:

Code: Select all

#leftnav ul li li{

list-style: none;

padding: 0px;

margin: 0px;

margin-left: 2em;

background: url('images/navlitebg.png') repeat -30px;

text-indent: -2em;
}
Why give it a 2em margin-left if you're just going to pull the text-back again? Wouldn't it be better to take off the margin-left: 2em; and then your text should have moved back the 2em like you're trying to do with text-indent: -2em;

Re: background problem

Posted: Mon Jul 12, 2010 3:31 am
by aravona
Because the navigation is set away from the side of the page and it requires that only the second line is indented. Thats what that code does, it sets the second line to indent but not the first, so it looks like:

item 1 is this long
.....so it goes over

but where the fullstops are white space.