homepage Welcome to WebmasterWorld Guest from 174.129.163.183
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Button with left and right images
greencode




msg:4623067
 7:51 pm on Nov 13, 2013 (gmt 0)

I don't think there's a way of doing this but thought I'd ask anyway.

I have a site that has a tiled pattern and therefore I have to have to use transparent images for buttons and suchlike.

What I would like to do is have a button and then using :before and :after to add images on the left and right of the text and then have a repeating x image on the button text background.

I would normally do this the following way:


<div class="left"></div>
<div class="mid">Button</div>
<div class="right"></div>


and then add the background image to the left and right divs and have a repeated background image on the mid div.

The thing is i'm trying to style a plugin in Wordpress and it's way too much hassle to go through all instances of buttons and code them again so I would like to be able to do this:


<div class="my-button">Button</div>


and then using css have something like this:


.my-button {
background: transparent url('images/bt-cn.png') no-repeat;
background-size: auto 40px;
line-height: 48px;
}

.my-button:before {
display: block;
content: "";
width: 13px;
height: 48px;
background: transparent url('images/bt-lf.png') no-repeat;
float: left;
margin-right: 10px;
}

.my-button:after {
display: block;
content: "";
width: 13px;
height: 48px;
background: transparent url('images/bt-rt.png') no-repeat;
float: right;
}


But the problem with that is the repeated image on the my-button div spans over the left and right images. This would be achievable if the buttons had a solid background but they're transparent.

Any ideas or help would be greatly appreciated.

 

swa66




msg:4623135
 2:05 am on Nov 14, 2013 (gmt 0)

Why not give the button a fixed width margin so that the background is not under the floated fixed width pseudo elements?

lucy24




msg:4623159
 5:25 am on Nov 14, 2013 (gmt 0)

:: quick detour to CSS3 ::

###, I was thinking of borders.

Now, if your button were sitting on top of an element that had left and right border images...

greencode




msg:4623165
 6:13 am on Nov 14, 2013 (gmt 0)

Thanks for your replies, not sure I follow though?

lucy24




msg:4623174
 7:11 am on Nov 14, 2013 (gmt 0)

I think what swa is describing is a button contained within another element, so the main background belongs to the container while the left and right backgrounds belong to the button. But :before and :after pseudo-elements go inside the real element's margins and padding-- they're really shorthand for "content begins with" and "content ends with"-- so wouldn't you be right back where you started?

I'm a little confused by this:
have a repeated background image on the mid div.
<snip>
.my-button {
background: transparent url('images/bt-cn.png') no-repeat;


Isn't this the one you do want to repeat?

Read the CSS3 section on border images. It's pretty thrilling ;)

greencode




msg:4623177
 7:27 am on Nov 14, 2013 (gmt 0)

Sorry, yes that is supposed to repeat. As mentioned in the first post, I can't add any more html to the button.

greencode




msg:4623178
 7:30 am on Nov 14, 2013 (gmt 0)

Border image looks interesting but it's not spurred in IE at all is it?

lucy24




msg:4623188
 8:59 am on Nov 14, 2013 (gmt 0)

but it's not supported in IE at all is it?

According to caniuse dot com, no :( MSIE 10 is supposed to be pretty similar to a browser, but for border-images we have to wait for 11.

:: rewind ::

11 is now "current"? I've barely started seeing 10! FF and Safari yes-- back to the dawn of time if you include -webkit- and -moz- variants-- and similarly Opera (-o- Presto, as-is Webkit).

swa66




msg:4623201
 10:23 am on Nov 14, 2013 (gmt 0)

But :before and :after pseudo-elements go inside the real element's margins and padding-- they're really shorthand for "content begins with" and "content ends with"-- so wouldn't you be right back where you started?

Nope.
Positioning ... allows you to put things where you want at will.

e.g.:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8" />
<title>polyglot HTML5 test</title>
<style>
html, body {
height: 100%;
background: rgb(255,255,128);
}
#target {
width: 50%;
height: 100px;
line-height: 100px;
text-align: center;
background-color:rgba(0,255,0,0.5);
margin: 0 100px;
position: relative;
}
#target:before, #target:after {
width: 100px;
height: 100px;
position: absolute;
top:0;
}
#target:before {
content:"red";
background-color:rgba(255,0,0,0.5);
left:-100px;
}
#target:after {
content:"blue";
background-color:rgba(0,0,255,0.5);
right:-100px;
}
</style>
</head>
<body>
<div id="target">GREEN</div>
</body>
</html>


The div and the before and after of it have translucent backgrounds so the yellow on the body shines through.

The div has margins to make space for the before and after outside of the div and then the negative offset on the positioning allows the pseudo elements to move outside of the div ...

Note the div is given positioning (this is essential).

Only tested in chrome, obsolete versions of IE will not support this (or most of the rest of what's nifty for that matter).

DrDoc




msg:4624588
 7:50 pm on Nov 19, 2013 (gmt 0)

Multiple backgrounds [css3.info] are fairly well supported, as long as IE9 is a good starting point for you.

greencode




msg:4624594
 8:06 pm on Nov 19, 2013 (gmt 0)

Thanks for this @DrDoc but the only trouble I have is that the buttons have transparent left and right sides and so multiple backgrounds would work as I need the centre section to tile horizontally.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved