background problem

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
aravona
Forum Contributor
Posts: 347
Joined: Sat Jun 13, 2009 3:59 pm
Location: England

background problem

Post 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
User avatar
Jade
Forum Regular
Posts: 908
Joined: Sun Dec 29, 2002 5:40 pm
Location: VA

Re: background problem

Post 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?
aravona
Forum Contributor
Posts: 347
Joined: Sat Jun 13, 2009 3:59 pm
Location: England

Re: background problem

Post 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]
User avatar
Jade
Forum Regular
Posts: 908
Joined: Sun Dec 29, 2002 5:40 pm
Location: VA

Re: background problem

Post 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;
aravona
Forum Contributor
Posts: 347
Joined: Sat Jun 13, 2009 3:59 pm
Location: England

Re: background problem

Post 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.
Post Reply