SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy background image repeated

    Hi all,

    I have a button with rounded edges and I want it with a minimum width. However I want it to be able to change the width according to any text it has written on (which is generated from some php code).

    First I got the original image button and took the rounded edges parts of left and right into single images each and then took 1px from the centre so I can repeated from CSS according to how much I need it.

    Can anyone guide me on how to do this with CSS and DIVS? Or give me a good link. I got blanked at the moment.
    An early reply is highly appreciated. Thanks a lot guys

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Show me what your button looks like and where it goes in the page and I'll show you how to do it myself rather than just linking you to some third party tutorial.

    Not only will you get a personalized tutorial right here on the forums, but you'll also get a working product you can use right away (now how cool would that be?).

    Oh, and by the way, welcome to SitePoint!

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have attached the whole image. This is the default size I want it to be. I just want to stretch horizontally if a longer text is written on it.

    I just want it to be able to do this and aligned to the center. Thanks
    Attached Images Attached Images

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just one question before I start writing (and from the looks of things, I may not need to). Does this also have to expand vertically as well, or just horizontally?

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Horizontally only if possible, just to fit in some more text with font-size 12 and bold...its for a landing page and the button to press and download product for a particular process etc..

    By the way thanks for your help. I am eagerly awaiting your reply as I need to finish this possible by early this afternoon

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. Just so you know, font sizes CAN be increased by the user (we as designers and developers have absolutely no control over the font size used, though we can guide the user with our "recommendations"). But to save myself the trouble of having to write something that's already been documented not once, not twice, not even three times, but FOUR times (once by myself), check these out.


  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is how far I got...can you help me or fix it for me


    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Sliding Headers</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
     
    body {
    	background: #FFF;
    	color: #000;
    	font: 100%/1.2 Tahoma, "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
    }
     
    #header {
    	background: #2a852a url('button_line.gif') repeat-x;
    	/*border-bottom: 2px solid #765;*/
    	max-height: 400px;
    	position: relative;
    		top: 1em;
    		left: 1em;
    	text-align: center;
    	width: 15em;
    }
    	h1 {
    		background: url('norm_right.gif') no-repeat right top;
    		font: 200%/1.2 Georgia, Garamond, "Times New Roman", Times, sans-serif;
    	}
    		h1 span {
    			background: url('norm_left.gif') no-repeat left top;
    			display: block;
    			padding: 5px 15px;
    			position: relative;
    			z-index: 1;
    		}
    </style>
    </head>
    <body>
    <div id="header">
    	<h1><span>Free Scan for .sdaewrwq</span></h1>
    </div>
    </body>
    </html>
    Attached Images Attached Images

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you please help?

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to extend the width of the right image so that it can slide in and out. How wide do you need the header to be?

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed some things, but its not getting wider and shorter horizontally. The original width is as in the code below. I would like to have the text to stay in one line not wrap in a second line when it is long. Mind you the text wont be longer as in the below example. Thanks for your help!


    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Sliding Headers</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
     
    body {
    	background: #FFF;
    	color: #000;
    /*	font: 100%/1.2 Tahoma, "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
    */	font:Verdana, Arial, Helvetica, sans-serif, bold;
    	font-size:12px;
    }
     
    #header {
    	background:  url('button_line.gif') repeat-x;
    	/*border-bottom: 2px solid #765;*/
    	max-height: 81px;
    	position: relative;
    		top: 1em;
    		left: 1em;
    	text-align: center;
    	width: 261px;
    }
    	h1 {
    		background: url('norm_right.gif') no-repeat right top;
    		font: Arial, Helvetica, sans-serif;
    		font-size:14px;
    		font-weight:bold;
     
    	}
    		h1 span {
    			background: url('norm_left.gif') no-repeat left top;
    			display: block;
    			padding: 15px 15px;
    			position: relative;
    			z-index: 1;
    			height: 60px;
    		}
    </style>
    </head>
    <body>
     
    <div id="header">
    	<h1><span>Free Scan for .sdaewrwq defwwewtw</span></h1>
    </div>
    </body>
    </html>
    Last edited by Dan Schulz; Mar 14, 2008 at 09:10. Reason: fixed closing highlight tag

  11. #11
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like I said, you have to make the right side image bigger. About 3000px should do it (if you really want to be certain anyway), though the forum limit here is 1600px so I'll go with that.
    Attached Images Attached Images

  12. #12
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I changed the image and still not getting there quite I used the imaged you attached but it was smaller so I changed it with mine. I changed the width to 500px, which is far more than enough for me. Can you please take a look at the code again below and tell me what is wrong? Also I will attach my image again. Thanks.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Sliding Headers</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    #header {
        background:  url('button_line.gif') repeat-x;
        text-align: center;
    }
        h1 {
            background: url('norm_right.gif') no-repeat right top;
            font-family:Tahoma, arial, verdana, "times New Roman", serif, sans-serif;
            font-size:22px;
            font-weight:bold;
            color: #ffffff;
        }
            h1 span {
                background: url('norm_left.gif') no-repeat left top;
                display: block;
                padding: 15px 15px;
                height: 81px;
            }
    </style>
    </head>
    <body>
     
    <div id="header">
        <h1><span>Free Scan for .sdaewrwq defwwewtwd erwrwrewr</span></h1>
    </div>
    </body>
    </html>
    Attached Images Attached Images

  13. #13
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan seems to be offline, so I'll jump in to give a hand.

    The h1 need to adapt to content width. Float or absolute position will make its auto-width shrink to content. I suggest the use of float.

    Another way to use "sliding doors" that allows the use of only one image to make the background expand without repeating;
    1. Take your original image with round ends, and extend its width to the widest length you need.
    2. Use the same image as background on both the h1 and the span, and use margin on span to control background overlap.
    Like in this version of your code:
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Sliding Headers</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
     
    #header h1 {
    	float: left;
    	background: url('norm.gif') no-repeat left top;
    	border-bottom: 12px solid #272;   /* to replace the 'button_line.gif' */
    	overflow: hidden;                 /* only needed to hide image overflow if neg.margin-bottom on span */
    }
    * html #header h1 {width:1%} /* IE6 will expand width to fit */
     
    #header h1 span {
    	display: block;
    	background: url('norm.gif') no-repeat right top;
    	margin-left: 30px;
    	margin-bottom: -5px;              /* to adjust space between span and h1 bottom border */
    	padding-top: 1px;                 /* to avoid the vertical margin collapse on b-tag */
    	padding-right: 30px;
    	height: 81px;
    	white-space: nowrap;
    	text-decoration: none;
    	color: #fff;
    }
    #header h1 span b {     /* this tag is only needed to vertically align the text */
    	display: block;
    	line-height: 1em;     /* gives no extra space above the typeface */
    	margin-top: -0.5em;   /* find the typeface vertical centre */
    	padding-top: 35px;    /* where we want the text vertical centre to be */
    }
    </style>
    </head>
    <body>
    <div id="header">
    	<h1><span><b>Free Scan for .sdaewrwq defwwewtwd erwrwrewr</b></span></h1>
    </div>
    </body>
    </html>
    How it works:
    First h1 will show the image from left end, then span will overlap showing the image from right end.
    The span has a margin-left to set where to start overlap and a matching padding-right for the text to push.
    To grow with text content, the h1 can't have a set width, but the float will make it fit content.

    My added extra b-tag allow the use of padding-top together with negative margin-top for vertical text alignment without affecting span height. This makes it handle different font-sizes without the need to adjust height . (Ofcourse an anchor can be used instead of the b-tag.)

    Anyway, apply float (and width:1% for IE6) on h1 in your posted code to make it work the way you want.
    Last edited by Erik J; Mar 16, 2008 at 15:20. Reason: The last remark
    Happy ADD/ADHD with Asperger's

  14. #14
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Erik, thanks a lot for your reply. I am getting something wrong here and I don't know what it is, I am attaching a screenshot of what my result is and the code below I am using. I am doing something stupid and can't figure out. Thanks for your help.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Sliding Headers</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
     
    #header h1 {
        float: left;
        background: url('button.gif') no-repeat left top;
        border-bottom: 12px solid #272;   /* to replace the 'button_line.gif' */
        overflow: hidden;                 /* only needed to hide image overflow if neg.margin-bottom on span */
    }
    * html #header h1 {width:1%} /* IE6 will expand width to fit */
     
    #header h1 span {
        display: block;
        background: url('button.gif') no-repeat right top;
        margin-left: 30px;
        margin-bottom: -5px;              /* to adjust space between span and h1 bottom border */
        padding-top: 1px;                 /* to avoid the vertical margin collapse on b-tag */
        padding-right: 30px;
        height: 81px;
        white-space: nowrap;
        text-decoration: none;
        color: #fff;
    }
    #header h1 span b {     /* this tag is only needed to vertically align the text */
        display: block;
        line-height: 1em;     /* gives no extra space above the typeface */
        margin-top: -0.5em;   /* find the typeface vertical centre */
        padding-top: 35px;    /* where we want the text vertical centre to be */
    }
    </style>
    </head>
    <body>
    <div id="header">
        <h1><span><b>Free Scan for .sdaewrwq defwwewtwd erwrwrewr</b></span></h1>
    </div>
    </body>
    </html>
    Attached Images Attached Images

  15. #15
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also please find attached the image i am using now. Sorry forgot to attach it with the previous post!!
    Attached Images Attached Images

  16. #16
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it is about IE6, then overflow can be a problem. Try change the line for IE6 to:
    Code CSS:
    * html #header h1 {width:1%; overflow:visible; } /* IE6 will expand width to fit */
    Happy ADD/ADHD with Asperger's

  17. #17
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spfc View Post
    Also please find attached the image i am using now. Sorry forgot to attach it with the previous post!!
    When I last posted your attachment weren't available.

    The text is wider than the image is, so it can't cover all background. If you cut the demo-text shorter, you will see that it works the way you want.

    According to the text width on your attached screenshot, the image in test need to be at least 788px to cover the width, but it is only 550px wide.

    So your present code does work, only the image needs to be wider, and it need a canvas cut at right end to get symmetrical with left end.

    (As in the demo, because I used a negative bottom margin on span to pull the h1 bottom border closer; the h1 need to hide its image overflow. IE6 though, use visible overflow to extend the h1 width, and without width h1 will expand all wide. So add "overflow: visible" to IE6 as suggested above.)
    Last edited by Erik J; Mar 17, 2008 at 01:05.
    Happy ADD/ADHD with Asperger's

  18. #18
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I changed the image width to 800px and it worked brilliant. Also I added the fix for IE6, with overflow to visible and its working fine in all browsers

    Thanks a lot for you helpm, both of you

  19. #19
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad it worked the way you wanted.
    Happy ADD/ADHD with Asperger's


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
  •