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
background problem
Moderator: General Moderators
Re: background problem
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
Its a list. Its a bit twisted because its wordpress.
The navigation code:
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]
The navigation code:
Code: Select all
<?php wp_list_categories('orderby=order','title_li=' . __('Categories:')); ?>[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
I'm not sure I understand what you're doing here:
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;
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;
}
Re: background problem
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.
item 1 is this long
.....so it goes over
but where the fullstops are white space.