Question

I’m sorry for being a css noob and would appreciate someone to guide me in the right direction.

Webpage i need help with can be found at http://filefx.com

When you hit the page, you will notice that the “Select Files” icon and “Upload Files” icon are not on the same line.

The “Select Files” icon is actually an psuedo upload icon that overlays the real

Right now, whenever i try to put the two icons next to eachother, the “Upload Files” icon gets pushed to the next time and I need these two objects to be on the same line.

So if someone could advise a method to get this done, you’d make me one happy camper.

🙂 Thanks

Answer 1

here’s how I did it:

the HTML around the upload button with the inline style I changed to:

<div style="position: absolute; right: 0pt; top: 0pt;">     <div id="upload_buttons_container">
        <!--<input type="image" SRC="templates/default/images/Flexshare-Reset.png" id="reset_button" name="reset_button" value="Reset" class="upload">-->
        &nbsp;&nbsp;&nbsp;
        <input type="image" class="upload" value="Upload" name="upload_bn" id="upload_button" src="images/uploadfiles.PNG">
      </div></div>

In the CSS I made the following changes:

.upload {
position:relative;
width:100%;
}

#upload_buttons_container {
width:300px;
}

form .fakeupload {
background:url("../images/selectfiles.PNG") no-repeat 100% 100% transparent;
height:75px;
width:300px;
}