Positioning form field(s) over graphic in responsive design

HTML & CSS
1

I’m dipping my toes into responsive design, re-doing an old site temporarily housed at http://goto-hwl.com/XcitingIdeasNEW/

I’m doing ok except I can’t figure out how to have the top right-hand graphic contain "name’ and “email” fields as an opt in form. Is this even possible? I’ve tried building a form and using the graphic as a background but can’t make the form fit the size of the other graphics.

We want to start with a static one like this first, then perhaps (if I can figure out how to do it!!) replace it with a popup version later.

(Note: I’m still working on the “responsive” parts; it’s definitely a work in progress)

2

That would be the way to do it, using it as a background image. But because the image has text in it, I presume you want the form elements to clear that. I would be best if the text was actual text, not part of the image, that would help in keeping it clear and with semantics.

3

Good point! Thanks for the comment. Sometimes my brain gets stuck on a single track; thanks for bumping me out of it.

4

Hi, when I looked at the site I thought you meant the “don’t go nuts…” piece. (That’s even more at the top right. )

When I reread your post I had already a fix for the "fit the size of the other graphics, (the logo on the top left I thought. )

I’ll have a look again for the form part. Make the html commented out form as an overlay of the image instead of a background would be an easy solution with the html as is, but not very semantic.

As @SamA74 pointed out, the text could be content above the form and the image as background. I think the other three images could move to the css as backgrounds to three link containers with the same look. But that would need another html structure of the “productshome” part.

Anyway here is my fix for the “Don’t go nuts” piece:



@media only screen and (min-width: 769px) {
    #text {
        font-size: 1.8vw; /* relate an inherited size to the viewport width to make text grow fluidly like the logo does */
    }
}
@media only screen and (min-width: 1404px) {
    #text {
        font-size: 26px;/* fix size when the gridContainer's max-width 1232px kicks in  */
    }
}
5

Thanks Erik. I did mis-speak (mis-type?). I should have said the top-right graphic of the group of 4 (or the 2nd graphic down on a phone). It’s the graphic with the green dragon (which I hate but the site owner loves) that needs to have the form attached to it. Interesting thought about having the graphics as background images - thanks for that!

6

I’ve a habit of misunderstanding what people ask for, can be fun sometimes.

I said it would be easy to achieve what you originally asked for. It was, though I simplified the html a bit. Just to show how it could be done:


#productshome img {
    width: 48%;
    height: auto;
    border: 1px solid #000;
    margin-right: .25em;
    margin-bottom: .25em;
}
#signup {
    display: inline-block;
    position: relative;
    margin: 0 .25em .25em 0;
    width: 48%;
}
#signup img{
    display: block;
    width: 100%;
    height: auto;
}
#Emailcapture {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 47% 5% 0 0;
    font-size: 1.8vw;
    font-weight: bold;
}
#Emailcapture input{
    float: right;
    clear:right;
    margin-bottom: -1px;
    color: #369;
    font-size: inherit;
    font-weight: inherit;
}
#Emailcapture input[type=text]{
    width: 53%;
    padding:0;
}
#Emailcapture input[type=submit]{
    margin: .2em 13% 0 0;
}

@media only screen and (min-width: 769px) {
    #text {
        font-size: 1.8vw;
    }
}
@media only screen and (min-width: 1404px) {
    #text {
        font-size: 26px;
    }
    #Emailcapture {
        font-size: 24px;
    }
}


<div id="productshome">
    <a href="http://goto-hwl.com/XcitingIdeasNEW/Wearables.php"><img src="images/WEARABLES.jpg" alt="Wearables"></a>
    <div id="signup">
        <form id="Emailcapture" action="http://goto-hwl.com/ProcessForm.php" method="post" name="Emailcapture" enctype="multipart/form-data">
            <input type="hidden" name="subject" value="Sign me up!" />
            <input type="hidden" name="email_only" value="email" />
            <input type="hidden" name="sender_email" value="email" />
            <input type="hidden" name="sender_name" value="sender-name" />
            <input type="hidden" name="exclude" value="SubmitButton" />
            <input type="hidden" name="link_url" value="http://xcitingideas.ca" />
            <input type="hidden" name="required" value="sender-name, email" />
            <input type="hidden" name="recipient" value="0" />
            <input name="sender-name" type="text" id="sender-name" size="40" placeholder=" Your Name" />
            <input type="text" name="email" size="40" placeholder=" Email address" />
            <input type="submit" name="SubmitButton" value="Sign me up" />
        </form>
        <img src="images/Signup-form.jpg" alt="Sign up offer">
    </div>
    <a href="http://goto-hwl.com/XcitingIdeasNEW/QEForms.php"><img src="images/UNIQUE-items.jpg" alt="Unique items"></a>
    <a href="http://goto-hwl.com/XcitingIdeasNEW/QEForms.php"><img src="images/BUSINESS-forms.jpg" alt="Business forms></a>
</div> <!-- products -->

I applied the text sizing relative viewport to the form too. Hope you don’t mind.

7

Thank you!!!

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.