Welcome!

[Preeminent]

Ugh, I hate to even post this, because this should be something very simple. It just won't work for me though.
I have a div(welcomebox) that has it's background image specified within the html, not css. This is because I want to have a class(intro) specified to it for the purpose of jquery.
Within the div I have an H2 heading and a paragraph. Within this div I also want to add in a little X image that can be clicked-- again for the purpose of jquery. I have tried to add in this X image in the html and tried to floatRight it. Did not work. I have tried to give this X image it's own div and added it within the above mentioned div and gave it position:relative. Did not work. I also messed around with z-index . I just can't get it to work. I must be doing something wrong. Anyone have any ideas?
*****************************************************************

<div id="welcomebox">
<img src="welcomebox.png" alt="Online home." class="intro" />
<h2>Welcome to Preeminent Productions!</h2>
<p>;kua;asklgn;ayupeuranglaiuea[ne</p>

</div>
***********************************************************

#welcomebox {
height:130px;
width:402px;
padding-right:15px;
padding-bottom:15px;
float:right;
bottom:-435px;
right:70px;
position:relative;
}

[HammHetfield]

Code: Select all

#welcomebox img {
position : relative;
left:px to the left;
}


Replace "px to the left" by the number of pixels you want the X image to be moved to the right...

[Preeminent]

Thanks for your reply! I'm sorry, I didn't add in the second image within the div in my html.

There is also <img src="closebutton.png" class="button"/> along with the other image.
So by using the css that you posted, it effects both images. I only want the Closebutton image to be moved to the right. Is there a way to use both images, but only move the one? Can i make just the closebutton image float to the right?


<div id="welcomebox">
<img src="closebutton.png" class="button" />
<img src="welcomebox.png" alt="Online home." class="intro" />
<h2>Welcome to Preeminent Productions!</h2>
<p>;kua;asklgn;ayupeuranglaiuea[ne</p>

</div>

[falkencreative]

You could use Hamm's solution, just give the specific image you want to adjust a class name:

<img class="classname" src="" />

and then adjust the CSS to refer to that class name:

#welcomebox .classname { }

[HammHetfield]

Yes the code I gave you move all images, if there is only one image that you wan't to move, give it a class attribute and use my code replacing "img" by the class of the image as Falken wrote

[breastfed]

Please try this here:

<div id="welcomebox" style="width: 440px;">
<img src="welcomebox.png" alt="Online home." style="float: left; width: 10px;"/>
<h2 style="float: left; width: 400px; margin: 0; margin-left: 10px; ">Welcome to Preeminent Productions!</h2>
<img src="closebutton.png" class="button" style="float: right; width: 10px;" />
<p style="clear: both;">;kua;asklgn;ayupeuranglaiuea[ne</p>

</div>

The 440px and 400px ar just Width for the Example.