SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Overlay Technique for E-mail Submission Box:

    Hello all,

    Similar to what was discussed in one of my previous threads here, I would like to utilize the same concept for the e-mail submission box, in anticipation that the visitor may have images turned off in their browser; however, this would be going over a form element, and there seems to be a bit more than an anchor that has a span over it.

    This is the markup for the form:
    Code:
     <form id="emailbox" name="form1" method="post" action="">
            <div>
              <input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)"/>
              <input type="submit" value="Join" />
            </div>
          </form>
    I would like to put some text under the image somehow, so that it will be displayed if the images are turned off. Thinking back on the previous thread, this is the technique utilized:

    Code:
    <h3 id="sectionhomelink"><a alt="Home Page" title="Go to the Home Page." href="index.html">Back to Home Page<span></span></a></h3>
    Code:
    h3#sectionhomelink{
    	height:48px;
      	position:relative;
        width:360px;
    }
    #sectionhomelink a{
        height:48px;
        width:360px;
    }
    #sectionhomelink a:hover, #sectionhomelink a:active, #sectionhomelink a:focus{color:#FC6; text-decoration:none;}
    #sectionhomelink span{
    	background:url("sectionhomelink.gif") no-repeat 0 0;
    	height:48px;
    	position:absolute;
    	width:360px;
    	top:0;
    	left:0;
    }
    #sectionhomelink a:hover span{
    	background-position:0 -48px;
    	height:48px;
    	width:360px;
    }
    /* positioning the link */
    #sectionhomelink{margin-top:5px; padding-right:10px; float:right;}
    Thanks for your insight.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by etidd View Post
    I would like to put some text under the image somehow
    Under which image?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As Ralph said above which image do you mean as there is o image in your form code.

    If you are using a background image in the submit then you will have the value holding the text content anyway so nothing needs to be done unless you are moving the text content out of the way of course (with something like text-indent). In that scenario images off will show nothing as the css is removed although screen readers will probably be ok as they will see the value attribute.

    What I have done previously is to use an associated label to hold the text and then place the input on top to hide it. This ensures that in any scenario of images/css on/off the user will still get something usable.

    Here's an old (and rough) example.

    View source as the code is in the head.

  4. #4
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The image is the "join the mailing list" image at the bottom of this page.

    I have looked over that example, yet I still find myself confused as to what you mean by associated label.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    OK, we misunderstood what you were asking. It would be better to separate the text from the background image, and put that text in the HTML itself. Then you could use an image replacement technique if you wanted to eep the font you have:

    http://pmob.co.uk/temp/headerreplacement2.htm

    Or you could use a web font instead.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I was thinking of something like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #emailbox {
    	float: left;
    	height: 54px;
    	margin: 2px 0 0 58px;
    	width: 216px;
    	position:relative;
    	overflow:hidden;
    }
    #emailbox label, #emailbox label span {
    	position:absolute;
    	top:0;
    	left:0;
    	z-index:1;
    	height: 54px;
    	width: 216px;
    	text-align:center;
    }
    #emailbox label span { background:url(http://www.atlantareviewgroup.com/style/sectionemailbox.gif) no-repeat 0 0; }
    #go {
    	margin:26px 0 0 19px;
    	width: 130px;
    }
    .submit {
    	overflow:hidden;
    	margin:26px 0 0;
    }
    #emailbox input {
    	position:relative;
    	z-index:2;
    }
    </style>
    </head>
    
    <body>
    <form id="emailbox" action="" method="post" name="form1">
    		<div>
    				<label for="go">Join the Mailing List<span></span></label>
    				<input id="go" type="text" onblur="input_reset(this)" onclick="input_focus(this)" value="your e-mail" name="go">
    				<input class="submit" type="submit" value="Join">
    		</div>
    </form>
    </body>
    </html>

  7. #7
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Yes, I believe this produced what I need to cover for when images are turned off. However, this seems to be a very different image replacement technique than the one I learned about before.

    I understand how the z-index comes into play so that the input fields appear above the image. I understand the span over the label. I understand why emailbox and the span are absolutely placed- because #emailbox has the image attached to it, and so that the image appears over the label's text, which is placed relatively below the image in the span.

    What I don't understand:
    1. #emailbox is given a float for reasons unknown
    2. Overflow is hidden, which I don't understand.

    Thank you for your posts. This is just what I needed.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by etidd View Post
    Y
    What I don't understand:
    1. #emailbox is given a float for reasons unknown
    It was taken from your own code which had the element floated left so I left it in place as you obviously needed it floated. It is not needed for the technique to work.

    2. Overflow is hidden, which I don't understand.
    The overflow:hidden is to stop any text from peeking out under the image should the text be wider than the image or indeed should the user resize the text larger.
    Thank you for your posts. This is just what I needed.
    You're welcome and glad you are asking questions


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •