please help me arrange these 3 buttons horizontally like this photoshopped image:
Please take a look at the code here.
CSS:
a.facebookbt {
background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat 0 0;
width: 132px;
height: 52px;
display: block;
}
a.facebookbt:hover { background-position: 0 -52px; }
a.facebookbt:active { background-position: 0 -104px; }
a.twitterbt {
background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat -132px 0;
width: 132px;
height: 52px;
display: block;
}
a.twitterbt:hover { background-position: -132px -52px; }
a.twitterbt:active { background-position: -132px -104px; }
a.abpbt {
background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat -265px 0;
width: 286px;
height: 50px;
display: block;
}
a.abpbt:hover { background-position: -265px -52px; }
a.abpbt:active { background-position: -265px -104px; }
HTML:
<a class="facebookbt" href="javascript:;"></a>
<a class="twitterbt" href="javascript:;"></a>
<a class="abpbt" href="javascript:;"></a>
a { float:right; margin-left: 5px;}
and change the html markup to this way:
<a class="abpbt" href="javascript:;"></a>
<a class="twitterbt" href="javascript:;"></a>
<a class="facebookbt" href="javascript:;"></a>
This way the layout will be aligned to the right, and in the correct order like in your screenshot.
Demo: http://jsfiddle.net/FzYkJ/12/
How about:
a {
float:left;
}
or
a {
display:inline-block !important;
}
You can add
float:left;
to each button
http://jsfiddle.net/FzYkJ/2/
Related
I am trying to move a piece of text on a specific part of image using css sprites.But the background position I am applying doesn't seem to work. I have tried changing the background position but the text part(i.e. twitter, facebook) doesn't move to the correct place.
#fixedsocial {
background:url("../img/socials/icon.png") no-repeat;
top:40%;
width:50px;
height: 100px;
position:fixed;
left: 0;
display: block;
z-index: 1000;
background-color: #eee;
text-indent:-9999px;
}
.facebookflat {
background-position: -200px 0;
height:50px;
}
.facebookflat:hover {
cursor: pointer;
}
.twitterflat {
height:50px;
background-position: -400px 0;
}
.twitterflat:hover {
cursor: pointer;
}
<div id="fixedsocial">
<div class="facebookflat" id="shareBtn"></div>
<div class="twitterflat"> </div>
</div>
The reason it's not working is that you assign the background image to the container-div (#fixedsocial), and try to adjust the positioning on the inner-divs, which has no background to position. You need to rethink your CSS a bit, for one you have to assign the background where you actually want to use it.
Here's a fiddle: https://jsfiddle.net/j7kyhgmc/
#fixedsocial {
top:40%;
width:50px;
height: 100px;
position:fixed;
left: 0;
display: block;
z-index: 1000;
background-color: #eee;
}
.facebookflat {
background: url("https://i.stack.imgur.com/LR6bK.png") no-repeat;
background-position: -168px -161px;
background-size: 1430% 1430%;
height:50px;
width: 50px;
}
.facebookflat:hover {
cursor: pointer;
}
.twitterflat {
background: url("https://i.stack.imgur.com/LR6bK.png") no-repeat;
background-position: -430px -161px;
background-size: 1420% 1420%;
height:50px;
width: 50px;
}
.twitterflat:hover {
cursor: pointer;
}
<div id="fixedsocial">
<div class="facebookflat" id="shareBtn"></div>
<div class="twitterflat">
</div>
</div>
I have the following image and i want to turn it to CSS Sprite:
<img height="32" width="139" border="0" onmouseout="this.src='/images/top_menu/nav03.gif';" onmouseover="this.src='/images/top_menu/nav04.gif';" src="/images/top_menu/nav03.gif" />
My CSS is
.sprite-top_menu {
background-image: url(top_menu.png);
background-repeat: no-repeat;
/*display: block;*/
}
.sprite-nav03-top_menu {
width: 139px;
height: 32px;
background-position: 0 -32px;
}
.sprite-nav04-top_menu {
width: 139px;
height: 32px;
background-position: -139px -32px;
}
What is the best way to do it ?
<img> tags don't lend themselves very well for sprites, I recommend doing something like this:
<div class="sprite-top_menu"></div>
CSS
.sprite-top_menu {
background: url(top_menu.png) no-repeat;
width: 139px;
height: 32px;
background-position: 0 -32px;
}
.sprite-top_menu:hover {
background-position: -139px -32px;
}
I use a image sprite for each post type. I call a image by using:
The markup that I am using is:
.format {
height: 60px;
width: 60px;
margin: 0 auto;
float:left;
background: #d7354a url(http://i.imgur.com/sVTJJMV.png) no-repeat 0 top;
}
span.format:hover {
background: #FFF url(http://i.imgur.com/sVTJJMV.png) no-repeat 0 bottom;
}
.format.image { background-position: 0 0; }
.format.location { background-position: -60px 0; }
.format.text { background-position: -120px 0; }
.format.profile { background-position: -180px 0; }
.format.sound { background-position: -240px 0; }
.format.link { background-position: -300px 0; }
<span class="format image"></span>
<span class="format location"></span>
<span class="format text"></span>
As you can see it will display three icons. When you hover over one span, the background change to white and the icon to red. The only problem is that .format:hover use the same x-as as for the normal state. I can create for each format type an hover state css, but I was wondering if it is also possible with only one hover, where the x-as will be the one of that format. Is this possible?
Thanks in advance.
When you update the background property on hover, you will actually have to redeclare all the x- and y- positions for each link element individually. background is simply a shorthand property and therefore will not intelligently "merge" with any exisitng background property values, but override it.
You can of course use background-position-y to override only the y positioning of the element, but it is not supported in some browsers. It is only recently (ca. 2014) introduced to the W3C specifications. An alternative would be using pseudo-elements, but I consider the solution posted by #nicooga as the best.
With regards to the pseudo-element solution, you can do it as follow:
The trick is to double the height of the pseudo-element (using bottom: -100%), and then moving the pseudo-element upwards by its own height (using top: -100%) on hover. In that case, you will only have to declare your background positions once for all your elements.
.format {
height: 60px;
width: 60px;
margin: 0 auto;
float: left;
position: relative;
overflow: hidden;
}
.format::before {
background: #d7354a url(http://i.imgur.com/sVTJJMV.png) no-repeat 0 top;
content: '';
display: block;
position: absolute;
top: 0;
bottom: -100%;
left: 0;
right: 0;
}
span.format:hover::before {
background-color: #fff;
top: -100%;
bottom: 0;
}
.format.image::before {
background-position: 0 0;
}
.format.location::before {
background-position: -60px 0;
}
.format.text::before {
background-position: -120px 0;
}
.format.profile::before {
background-position: -180px 0;
}
.format.sound::before {
background-position: -240px 0;
}
.format.link::before {
background-position: -300px 0;
}
<span class="format image"></span>
<span class="format location"></span>
<span class="format text"></span>
The background property is a short hand to set a bunch of other properties.
When you use it again in span.format:hover you are overriding some of the properties that make it look like you want. Just change the properties you need.
Use this as a rule of thumb: if you are repeating code you are probably doing something wrong.
http://www.w3schools.com/cssref/css3_pr_background.asp
.format {
height: 60px;
width: 60px;
margin: 0 auto;
float:left;
background-image: url("http://i.imgur.com/sVTJJMV.png");
background-color: rgb(215, 53, 74);
}
span.format:hover {
background-position-y: 100%;
background-color: rgb(255, 255, 255);
}
.format.image { background-position: 0 0; }
.format.location { background-position: -60px 0; }
.format.text { background-position: -120px 0; }
.format.profile { background-position: -180px 0; }
.format.sound { background-position: -240px 0; }
.format.link { background-position: -300px 0; }
<span class="format image"></span>
<span class="format location"></span>
<span class="format text"></span>
I have a simple question which I can't seem to solve.
#tps_block {
height: 45px;
width: 940px;
}
#tps_point1 {
width: 351px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point1:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 -45px no-repeat;
}
#tps_point2 {
width: 284px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point2:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px -45px no-repeat;
}
#tps_point3 {
width: 305px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point3:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px -45px no-repeat;
}
<div id="tps_block">
<div id="tps_point1">Point 1
</div>
<div id="tps_point2">Point 2
</div>
<div id="tps_point3">Point 3
</div>
</div>
The idea is that there are 3 images side by side, and when the mouse hover's over each image, the image changes to a highlighted one, and the image is clickable too, so that the user is taken to some other place when the image is clicked.
I have managed to apply the hover effect, but I can't get the linking to work.
Can someone help me out ?
JSFiddle: http://jsfiddle.net/ahmadka/Fjmnt/
If you're able to change the HTML, just lose the inner div tags and apply exactly the same styles to the links themselves:
<div id="tps_block">
Point 1
Point 2
Point 3
</div>
Updated jsFiddle: http://jsfiddle.net/Fjmnt/7/
Best solution if you are unable to modify the HTML.. add the following CSS.
#tps_block a {
display: block;
width: 100%;
height: 100%;
}
This will fill <a> making the entire div clickable.
jsFiddle demo
<div id="tps_block">
<div id="tps_point1"></div>
<div id="tps_point2"></div>
<div id="tps_point3"></div>
</div>
I'm trying to create in HTML/CSS the following menu inside of a sidebar:
myimage http://img1.firenex.net/9Z0eupHnvV7LIPQd950r.png
Every button has its own corresponding pressed/non-pressed image, and when hovered its opacity moves from 0.8 to 1.0 via CSS.
The problem is that I get is this:
myimage2 http://img1.firenex.net/nooUcfe0HvvfMaCmz6N8.png
Not quite the result I expected :)
This is my HTML:
<div id="homepageBtn"></div>
<div id="progressiBtn"></div>
<div id="interessiBtn"></div>
<div id="friendzoneBtn"></div>
<div id="emailBtn"></div>
This is my CSS:
#homepageBtn {
background:url(img/buttons/homepage_btn.png) no-repeat;
opacity: 0.8;
width: 88px;
height: 79px;
margin-left: 30px;
float: left;
}
#homepageBtn:hover {
background:url(img/buttons/homepage_btn.png) no-repeat;
opacity: 1.0;
}
#homepageBtn:active {
background:url(img/buttons/homepage_btn_pressed.png) bottom right no-repeat;
}
#progressiBtn {
background:url(img/buttons/progressi_btn.png) no-repeat;
opacity: 0.8;
width: 88px;
height: 79px;
margin-left: 10px;
float: left;
}
#progressiBtn:hover {
background:url(img/buttons/progressi_btn.png) no-repeat;
opacity: 1.0;
}
#progressiBtn:active {
background:url(img/buttons/progressi_btn_pressed.png) bottom right no-repeat;
}
#interessiBtn {
background:url(img/buttons/interessi_btn.png) no-repeat;
opacity: 0.8;
width: 88px;
height: 79px;
margin-left: 30px;
margin-top: 10px;
clear: left;
float: left;
}
#interessiBtn:hover {
background:url(img/buttons/interessi_btn.png) no-repeat;
opacity: 1.0;
}
#interessiBtn:active {
background:url(img/buttons/interessi_btn_pressed.png) bottom right no-repeat;
}
#friendzoneBtn {
background:url(img/buttons/friendzone_btn.png) no-repeat;
opacity: 0.8;
width: 88px;
height: 79px;
margin-left: 10px;
margin-top: 10px;
float: left;
}
#friendzoneBtn:hover {
background:url(img/buttons/friendzone_btn.png) no-repeat;
opacity: 1.0;
}
#friendzoneBtn:active {
background:url(img/buttons/friendzone_btn_pressed.png) bottom right no-repeat;
}
#emailBtn {
background:url(img/buttons/email_btn.png) no-repeat;
opacity: 0.8;
width: 188px;
height: 29px;
margin-left: 30px;
margin-top: 10px;
clear: left;
}
#emailBtn:hover {
background:url(img/buttons/email_btn.png) no-repeat;
opacity: 1.0;
}
#emailBtn:active {
background:url(img/buttons/email_btn_pressed.png) bottom right no-repeat;
}
I really don't know if I am using the correct method to do this, I would appreciate any solutions at this point... thanks in advance.
PS: this happens with Chrome, with IE for example I get it showed correctly
You are using clear property incorrectly. you can use this code.
<div id="homepageBtn"></div>
<div id="progressiBtn"></div>
<div style="clear:both;border:0px"></div>
<div id="interessiBtn"></div>
<div id="friendzoneBtn"></div>
<div style="clear:both;border:0px"></div>
<div id="emailBtn"></div>
And Remove Clear:left from following CSS
#interessiBtn {
background:url(img/buttons/interessi_btn.png) no-repeat;
opacity: 0.8;
width: 88px;
height: 79px;
margin-left: 30px;
margin-top: 10px;
clear: left; <-- Remove this
float: left;
}
Demo Code
margin-top:.. or padding top but even a better solution is that do the following amendment ,
Add a new and do it like this
<div id="upper">//further divide it in two parts
<div id="homepageBtn"></div>//here goes homepage button
<div id="progressiBtn"></div>
</div > //end of upper
and do same thing for bottom Div
<div id="bottom">//further divide it in two parts
<div id="friendzoneBtn"></div>
<div id="emailBtn"></div>
</div > // end of bottom
and not whatever the dimensions you set for upper div or then bottom div your content will be easily adjustable there