tags:

views:

58

answers:

3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; 
<html xmlns="http://www.w3.org/1999/xhtml"&gt; 
<head>
<style type="text/css">
#action-icons
{
    float:right;
}
#action-icons.img
{
    position:relative;
    top:-30px;
    padding-right:200px;
}
</style>
</head> 

<body> 
    <h1 class="edit">Some nifty title
    <span id="action-icons"> 
    <img src="foo.png" width="64" height="64" alt="" id="newsticky"/> 
    <img src="bar.png" width="60" height="60" alt="" id="trash"/> 
    </span> 
    </h1> 
</body> 
</html>
+2  A: 

Try adding:

#action-icons.img
{
    position:relative;
    top:-30px;
    padding-right:200px;
}

Might do it.

Edit: You have #action-icons.img remove the dot so it's #action-icons img.

The dot sets img up as a class, so as you have it, the HTML would look like:

<img src="bar.png" width="60" height="60" alt="" id="trash" class="img"/>

Hope it helps.

Edit - Here is the full working code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; 
<html xmlns="http://www.w3.org/1999/xhtml"&gt; 
<head>
<style type="text/css">
#action-icons
{
    float:right;
}
#action-icons img
{
    position:relative;
    top:-30px;
    margin-left:50px;
}
</style>
</head> 

<body> 
    <h1 class="edit">Some nifty title
    <span id="action-icons"> 
    <img src="foo.png" width="64" height="64" alt="" id="newsticky"/> 
    <img src="bar.png" width="60" height="60" alt="" id="trash"/> 
    </span> 
    </h1> 
</body> 
</html>
Kyle Sevenoaks
It doesn't work.
ripper234
Thanks, now it does :)
ripper234
Heh, it turns out the inline wasn't needed, the problem was just my the selector.
ripper234
Fair enough, took me a while to see the selector anyway :)
Kyle Sevenoaks
+2  A: 

Try margin-right

and use

#action-icons img 

to address the image.

#action-icons.img

means "any element with the ID action-icons and the class img.

Pekka
It doesn't work.
ripper234
@ripper additionally, use `img#action-icons` instead of `#action-icons.img`. As it stands, the rule doesn't get applied.
Pekka
I didn't copy! :)
Kyle Sevenoaks
Your answer still didn't work ... @Kyle's did the trick. Thanks for the effort.
ripper234
@Pekka: Unless I'm mistaken, `img#action-icons` would match any img with the id 'action-icons', though. You want `#action-icons img` - any image that is a descendant of a node with the id 'action-icons'.
pinkgothic
@pinkgothic you're right of couse. D'oh! Corrected, thanks.
Pekka
+2  A: 

Change

#action-icons.img

To

#action-icons img

and check

it works for me on firefox

Salil