I have created a fiddle here:
http://jsfiddle.net/ozzy/77dJz/
Somehow ( mind you its 4:30am ) I have cocked up the hover effect on facebook link..
Twitter one works... just not sure what I have done wrong.
Any help appreciated, I am tired lol.
To Iterate:
CSS:
#facebook {
background:url('../images/socialsprite.png') no-repeat scroll 0px 0px transparent;
height:40px;
width:180px;
margin-left:10px;
margin-top:30px;
}
#facebook:hover {
background:url('../images/socialsprite.png') no-repeat scroll 0px -40px transparent;
height:40px;
width:180px;
}
#twitter {
background:url('../images/socialsprite.png') no-repeat scroll -180px 0px transparent;
height:40px;
width:180px;
margin-left:210px;
margin-top:-40px;
}
#twitter:hover {
background:url('../images/socialsprite.png') no-repeat scroll -180px -40px transparent;
height:40px;
width:180px;
}
Cheers
Need twitter and facebook sprite to sit side by side horizontally centered in the master div
What you need to do is float your divs so they don't cover each other.
Here is some simplified CSS. Edit the margins as needed.
#facebook {
background:url('http://sitehelp.com.au/images/socialsprite.png')
no-repeat scroll 0px 0px transparent;
height:40px;
width:180px;
float:left;
margin:25px 10px;
}
#facebook:hover {
background:url('http://sitehelp.com.au/images/socialsprite.png')
no-repeat scroll 0px -40px transparent;
}
#twitter {
background:url('http://sitehelp.com.au/images/socialsprite.png')
no-repeat scroll -180px 0px transparent;
height:40px;
width:180px;
float:right;
margin:25px 10px;
}
#twitter:hover {
background:url('http://sitehelp.com.au/images/socialsprite.png')
no-repeat scroll -180px -40px transparent;
}
http://jsfiddle.net/jasongennaro/77dJz/3/
EDIT
You could further simplify your CSS as follows:
#facebook, #twitter {
background:url('http://sitehelp.com.au/images/socialsprite.png') no-repeat scroll transparent;
height:40px;
width:180px;
float:left;
margin:25px 10px;
}
#facebook:hover {
background-position:0px -40px;
}
#twitter {
background-position:-180px 0px;
float:right;
}
#twitter:hover {
background-position: -180px -40px;
}
http://jsfiddle.net/jasongennaro/77dJz/4/
Quote: "...just not sure what I have done wrong."
The problem is that your Twitter <div> is covering your Facebook <div>.
Simply deleting the Twitter <div> gets your Facebook <div> working again...
And if you want side by side <div>, you need to float them.
this is working...
http://jsfiddle.net/77dJz/2/
Related
The separator image isn't displaying on the right side of the input field. I tried using a plain border and with different positioning, as well as with an image as in my example, but it doesn't show.
PS. This is the seperator image:
jsfiddle
.ui-topbanner {
color:#000;
height: 31px;
background-color: #f2e9da;
border-bottom: 1px solid #d9cebc;
}
.ui-topbanner-title {
position:absolute;
top:5px;
left:4px;
height:26px;
line-height:26px;
padding:0 10px 0 25px;
display:inline-block;
color:#000;
border:1px solid #d9cebc;
border-bottom:none;
background-color:#fff;
font-size:.7rem;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-image: url(http://hardist.eu/public/img/icon_folderyellow3.gif);
background-position: 5px 5px;
background-repeat: no-repeat;
}
.ui-topsubbanner {
position:relative;
color:#000;
height: 30px;
background: -webkit-linear-gradient(top, #f7f1e8 0%, #f4ecdf 100%);
border-top: 1px solid #fff;
border-bottom: 1px solid #efe8da;
}
.ui-topsubbanner-wrapper {
padding:2px 3px 0 5px;
}
.ui-seperator {
width:2px;
height:17px;
display:inline-block;
background-image: url(../images/ui-seperator.png);
background-position: 0 6px;
background-repeat: no-repeat;
}
<div class="ui-topbanner"><div class="ui-topbanner-title">Test</div></div>
<div class="ui-topsubbanner">
<div class="ui-topsubbanner-wrapper">
<input type="text" class="input-search" placeholder="Search...">
</div>
<div class="ui-seperator"></div>
</div>
Check setting float property. It may help you.
.ui-topsubbanner-wrapper {
padding:2px 3px 0 5px;
float: left;
}
.ui-seperator {
width:2px;
height:17px;
display:inline-block;
background-image: url(http://i.imgur.com/ovVm6fW.png);
background-position: 0 6px;
background-repeat: no-repeat;
float: left;
}
The image is actually there, but it's hard to see because it's so similar in color to background and not where you expect. Because the topsubbanner-wrapper div is a block element by default, the separator was getting bumped to the beginning of the next line. I couldn't see it at all until I changed the background of the separator div to red for diagnostic purposes.
You can fix the problem by setting the display of the topsubbanner-wrapper div to inline-block, as you did with the separator, or by setting its float to left.
I want to increase the distance between the border and the background-image ... I tried to add padding: 20px; but it doesn't work.
.Tab1 {
background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
width: 100px;
height: 75px;
display: block;
}
.Tab1:hover {
border: 1px solid green;
}
<div class="Tab1"></div>
You can increase the space between the border and the background image with padding and background-clip:content-box; (see MDN for more info).
Also don't forget to center the background image with background-position:center;
.Tab1 {
background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-position:center;
width:100px;
height:73px;
display:block;
padding:20px;
background-clip:content-box;
}
.Tab1:hover {
border:1px solid green;
}
<div class="Tab1"></div>
If you also want to avoid the position snap on hover created by the border, you can add a transparent border and only change the colour on hover :
.Tab1 {
background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-repeat: no-repeat;
background-position: center;
background-clip: content-box;
width: 100px;
height: 75px;
display: block;
padding: 50px;
border: 1px solid transparent;
}
.Tab1:hover {
border-color: green;
}
<div class="Tab1"></div>
.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-repeat:no-repeat;
background-position:center;
background-clip:content-box;
width:100px;
height:75px;
display:block;
padding:20px;
}
.Tab1:hover{border:1px solid green;}
This is what you need, you first align the background to the centre of the box and then add a padding with the padding CSS, as you originally tried to do. The background-repeat property will stop the background repeating into the padding of the CSS.
Please also remember to add units to the padding value, just in case you had tried to do what you'd written as adding padding:20.
You can check here the space between image and border...
.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
width:100px;
height:75px;
display:block;
padding:15px;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
}
.Tab1:hover{border:1px solid green;}
<div class="Tab1">
</div>
thanks
css code
.Tab1 {
background:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-position:center;
background-repeat:no-repeat;
width:100px;
height:75px;
display:block;
padding:15px;
}
.Tab1:hover {
border:1px solid green;
margin-left:-1px;
margin-top:-1px;
}
I have a problem with center positioning a button in a row in a table.I used width and margin but it don't work.Can you help me? Here's the code for that button(in css):
.subm {
position:relative;
width:130px;
margin-left:auto;
margin-right:auto;
background-image:url('background.bmp');
border:none;
color:white;
opacity:1;
height:25px;
outline:0 none;
box-shadow:1px 1px 2px black
}
.subm:hover {
background-image:none;
background-color:darkgray;
box-shadow:10px 10px 10px black
}
.subm:active {
color:black ;
font-weight:bold;
width:128px;
height:24px;
background-image:none;
background-color:dimgray;
}
simply try this
button{
height:20px;
width:100px;
position:relative;
top:50%;
left:50%;
}
for just horizontal alignment use either
button{
margin: 0 auto;
}
DEMO
To achieve this, I would use following code:
.subm {
position:absolute;
width:130px;
height:25px;
top: calc(50% - 13px); // 50% - 0.5 * height.
left: calc(50% - 65px); // 50% - 0.5 * width.
}
And for the parent:
position: relative;
You can see a working JSFiddle here
If you used width and margin: auto's and it's still not centering you may just need to add display: block to your .sumb class like so:
.subm {
display:block;
position:relative;
width:130px;
margin-left:auto;
margin-right:auto;
background-image:url('background.bmp');
border:none;
color:white;
opacity:1;
height:25px;
outline:0 none;
box-shadow:1px 1px 2px black
}
Demo: http://jsfiddle.net/re079odr/
I have a small text in the footer. The text is aligned to right but i want the text to move up slightly? how can I do that? my code
#foot tag {
width:1000px;
height:30px;
padding:10px;
border:5px solid white;
margin:0px;
text-align:right;
padding-top: 10px;
}
#foot tag {
width:1000px;
height:30px;
padding:10px 10px 20px 10px;
/* You can adjust the above 4 values to add padding to top, right, bottom and left */
border:5px solid white;
margin:0px;
text-align:right;
}
You can do a couple things, it's tough to say without seeing the live site.
1) decrease the top padding by changing:
padding: 5px 10px 10px 10px;
2) use a negative top margin:
margin: -5px 0 0 0;
You can try this. Top and left css property will move you p in parent div
<div style="position: relative"><p style="position: absolute; top: 1px"></p></div>
although my questions has been answered lots of times before, but all the proposed solution I have tried and nothing seems to work.
what am trying to do is a big div that contains li tags; the li tags will also contain anchor tag, 2 divs and p tag.
to understand the big picture.. am trying to make a posting wall (activity-board), the wall will have posts looks like a bubble (div post) and the bubble will point (post-arrow) to a thumbnail image (a thumb3), to make the bubble style I made the post div absolute positioned with z-index less than the arrow-post.
and here is my css:
.activity-board {
background:#fff;
width:600px;
min-height:652px;
height:auto;
border:solid 2px #e7d28d;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
float:left;
margin-left:20px;
}
.post-body{
position:relative;
display:block;
list-style-type:none;
width:600px;
height:auto;
background:#f9f9f9;
border-bottom:1px solid #CBCBCB;
border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
background: #fff;
float:left;
overflow:visible;
clear:both;
z-index:9;
}
.post{
position:absolute;
width:500px;
line-height:20px;
height:auto;
background:#FFF;
display:block;
margin-top:22.5px;
margin-left:77px;
text-align:left;
float:left;
z-index:1;
}
.post-arrow{
position:relative;
margin-top:32px;
margin-left:6px;
width:12px;
height:18px;
background:url(images/post-arrow.png);
float:left;
z-index:5;
}
.post p{ color:#025373; padding:8px; word-wrap:break-word; }
a.thumb-3 {
margin-top:18px;
display:block;
margin-left:18px;
width:46px;
height:46px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index:10;
float:left;
}
a.thumb-3 img{
padding:0;
margin:0 auto;
width:46px;
height:46px;
float:left;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
here is my html:
<ul>
<li class="post-body">
<a class="thumb-3"><img src="images/Alsheikh Center (177).jpg" /></a>
<div class="post-arrow"></div>
<div class="post">
<p>
Hi there!
</p>
</div>
</li>
</ul>
http://jsfiddle.net/r9YpX/
Everything worked fine but the li tag does not expand to the content.. it only expands if I change the position of the post div to relative not absolute, which I cant change because it must be absolutely positioned under the arrow image to give it the bubble look.
any help would be appreciated.
Thanks.
ok Thanks guys i figuered it out.. I made position:relative and changed margin for post div and it worked! I thought I did this but perhaps I did something wrong that make it not work