Jump to content

Overlay Form Textfield Over Graphic Image


Web Weenie
 Share

Recommended Posts

Hi everybody...This is my first post and need some help to overlay a form text field on top of a graphic image. I'm trying to simulate an apple text field using an oval image and making the form text field background invisible. I have two issues; I can't get the two elements to overlay and don't know how to get the textfield to be invisible. This whole shebang is inside a table cell. Should I fake the oval graphic by incorporating it in a background image of the cell? I have a css external file for my css stuff.I have no idea how to go about this and couldn't find any examples on how to do this. I'm fairly code challenged so specific instruction is appreciated. Thanks for any help on this.

Link to comment
Share on other sites

If you do not need the input to change sizes, then this should work:
input.mac_style {   border: 0;   background-image: url(oval.jpg);}

Hey thanks for the reply. I'm not sure if this was supposed to be inline or in an external css but I couldn't get this to display anything but the textfield... Am I missing something? I'm am completely lost so let me start over.I have two images, an oval ala Apple search field and a go button (round with the same diameter as the oval height). I need to place this in the center of a table cell and overlay a form textfield as to make the oval and textfield appear as one. I have a transparent gif as the submit button and I need to overlay this on the go button image. I need the testfield to have a transparent background so it's birders don't show.I'm sorry if I'm not getting your solution, but it's about a mile over my head on this, so I'll need more to go on than what you provided to get this working.I'll keep trying to figure this out myself, but I'm just fumbling in the dark on this... I anyone has a smarter way to do this or can point me to an example please chime in. Please go slow whit me, I'm really trying to get up to speed on css and anything beyond HTML.
Link to comment
Share on other sites

ok, i worked this out, although I never did find a way to get the two objects to overlay.My solution was to make the oval graphic and go button graphic as the background image of the table cell. That way I only had to tinker with the placement of the textfield. which took me about an hour of trial and error to get all positioned properly. At this rate I'll have the web site done in May, 2020.To show you how much of a noob I am. I finally realized I need to do a page reload to reflect my changes to in my css file. I'd been making changes but nothing changed until I refreshed the page. Which was why I posed this topic in the first place as I was getting nowhere. Ok, everybody... stop laughing! Yes I'm an idiot.thanks for the assist anyway. I am learning and that's my goal, so I guess it's not a total waste of time.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...