I have 4 images in a css vertical sprite that I want each become a href's on my page going horizontal. Starting at left:250px top:2px and with padding of 3px between each image.
CSS
.sprites {
background:url('/pic/sprites.jpg')no-repeat top left;
width:36px;
height:36px;
}
.sprites.sprites.twitter {
background-position:0px 0px;
}
.sprites.sprites.facebook {
background-position:0px -46px;
}
.sprites.sprites.google-plus {
background-position:0px -92px;
}
.sprites.sprites.pinterest {
background-position:0px -138px;
}
.social {position:relative;left:250px;top:2px;}
I can figure out how to start in 250px from the left and 2px from the top, but I can not figure out how to get the images going horizontally as a href's with padding of 3px
html
<div class=social>
<div class='sprites google-plus'></div>
<div class='sprites facebook'></div>
<div class='sprites twitter'></div>
<div class='sprites pinterest'></div></div>
You need to add display: inline-block/block; depending on what you want to achieve, this should work for you
Related
I'm working on a tiny css action which based on A element hover, will display another element. The code is pretty basic:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">LOREM IPSUM</div>
</a>
.portfolio-reaction {
width:250px;
height:250px;
display:block;
}
.headline-overlay {
background:none;
height:100%;
width:100%;
display:none;
position:absolute;
top:10%;
z-index:999;
text-align:left;
padding-left:0.5em;
font-weight:bold;
font-size:1.3em;
color:#000;
}
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
and jsfiddle: https://jsfiddle.net/yL231zsk/1/
This solution works in 99%. The missing percent is the effect - while moving mouse arrow through the button, text is blinking. I have no idea why. Secondly - what if I want to extend number of appearing elements from 1 to 3. So to have:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<p class="element-1">abc</p>
<p class="element-2">111</p>
<div class="element-3">X</div>
</div>
</a>
Thank you for any tips and advices.
You wrote the following in your css file :
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
It won't work since .attachment-grid-feat isn't the parent of .headline-overlay. So it won't select the state when the parent is selected because there are no element .healine-overlay inside .attachment-grid-feat. Also no need to add ~ between the two. The right selector is the following :
.portfolio-reaction:hover .headline-overlay {
display: block;
}
This way you are targeting the child div .healine-overlay when parent div .portfolio-reaction (you might want to make the <a> tag a <div> tag) is hovered.
.portfolio-reaction {
width: 250px;
height: 250px;
display: block;
}
.headline-overlay {
background: none;
display: none;
position: absolute;
top: 10%;
z-index: 999;
text-align: left;
padding-left: 0.5em;
font-weight: bold;
font-size: 1.3em;
color: #000;
}
.portfolio-reaction:hover .headline-overlay {
display: block;
}
<div title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<div id="element-1">Hello 1</div>
<div id="element-2">Hello 2</div>
<div id="element-3">Hello 3</div>
</div>
</div>
In this code snippet, three elements are contained inside .headline-overlay. On hover, all three elements are displayed.
First, change the last CSS line from this:
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
into this:
.attachment-grid-feat:hover .headline-overlay {
display:block;
}
And will "half" work. You need after to change the width and height of your <div class="headline-overlay"> from a smaller percentage to match your square width and height(leaving it to 100% covers the entire screen, and as a result, the text wont dissapear, no matter where you will move the cursor). Or, If you want your <div> element to match automaticaly the square size, then you leave the width and height unchanged and change only his position:absolute into position:relative and of course, a little adjusting his position from top.
Here is a working fiddle: https://jsfiddle.net/yL231zsk/9/
Here is fiddle example: example
Question1: I have a flowing arrow triangle css:
.wrapper {
background-color: black;
width: 100px;
height: 100px;
}
.downArror {
float: left;
display: inline-block;
border: 15px solid rgba(0, 0, 0, 0);
border-bottom-color: #fff;
margin: 8px;
}
HTML:
<div class="wrapper"><div class="downArror"></div></div>
Just wondering, is there a way to change the css that make this triangle to a '^' shape?
what I'd like to have is something like this:
Question2:
Is there a way to make a tick like this using code?:
I am currently using √ but, the shape is slightly different
I actually created this effect awhile back for a menu. You can find it here:
http://codepen.io/spikeyty/pen/IFBro
Basically, I took a transparent div, added bottom-left and bottom-right borders, and then rotated the div 45deg using transform. For extra sweetness the example has a neat hover effect. Enjoy!
It's possible using css : (Hope you meant this)
.wrapper{
background-color:black;
width:20px;
height:20px;
text-align:center;
}
.downArror_black:before{
content:'\2227';
color:#fff;
}
.tick:before{
content:'\2713';
color:#fff;
}
<div class="wrapper">
<div class="downArror_black"></div>
</div>
<br />
<div class="wrapper">
<div class="tick"></div>
</div>
I'm writing a CSS for a store. I need a div that sets the buy button to the left, and a Prev and View Next images to the right, which is working.
My real problem is that sometimes the "buy" button will be not present, because of the PHP.
When the buy button is not present images must be centered, because if they are not, it will be empty space to the left side (where the buy button was)
At first i think on margin:0px auto, but this will need a constant width set, right?
I really thought at the beginning this will be very simple. But i got stuck/
fiddle
Simplified to get the idea
I think im just missing something basic that i cant see know.
HTML:
<div id="comprarbtn">
<div id="wrappcomprarbtn">
<input class="comprarbtn commonButton" type="button" value="Buy Now" id="buynowlogin">
<div id="naviminicc"> <img src="images/navmini_01.png" class="navmini1">
<img src="images/navmini_02.png" class="navmini2" rel="#mies1"> <img src="images/navmini_03.png" class="navmini3">
</div>
</div>
</div>
CSS:
.comprarbtn { width:175px;
line-height:51px;
background-image:url(image.jpg);
border:0px;
font-size:12px;
padding-left:10px;
cursor:pointer;
overflow:hidden;
text-indent:0px;
z-index:10;
}
#comprarbtn {
float:left;
position:absolute;
width:321px;
text-align:center;
height:51px;
z-index:1000;
display:table-cell;
background-color:#f4f4f4;
}
#wrappcomprarbtn { margin:0px auto;}
#naviminicc { width:145px; float:right;}
#naviminicc a { margin:0px; padding:0px; }
.navmini1 { cursor:pointer; margin:0px; }
.navmini2 {cursor:pointer; margin:0px; }
.navmini3 {cursor:pointer; margin:0px; }
#navmini { width:135px; max-width:135px;}
I'm not sure what's going on with the CSS and HTML you posted, but to achieve what you want to do in theory:
Give the wrapping div a fixed width large enough to contain both the button and the images
Give it margin: 0 auto to center it and text-align: center.
Make the inner contents display: inline
css:
.wrapper {
width: 200px; /* Large enough to contain everything */
text-align: center;
margin: 0 auto;
}
.wrapper .buttons {
display: inline;
}
Problem: The idea is the div that changes the colour of its contents on hover. Except the text and image (sprite) colours change at different points; the text on hover above the 'address' div and the image above the 'addressicon' div. Does anyone know how I could I get both to change on hover over the the 'address' div.
HTML:
<section id="gallery">
<div class="container" style="padding-top:40px;">
<div class="address"><div class="title"><span>Address</span></div><br>
<div class="addressicon"></div>
<p><br>Address1<br>
Address2<br>
Address3<br>
Area<br>
City<br>
PostCode
</p>
</div>
<div style="width:33%;height:400px;display:inline-block;background-color:#000000"></div>
<div style="width:33%;height:400px;display:inline-block;background-color:#000000"></div>
</div>
</section>
CSS:
.address {
width:33%;
height:400px;
display:inline-block;
background-color:#CCC;
color:#bcb7af;}
.address:hover {color:#000000;}
.address span {
color:#bcb7af;
align:center;
font-size:24px;
width:100%;}
.address:hover span {
color:#000000;}
.title {text-align:center;}
.addressicon {
background: url(../images/address.png) bottom;
width:202px;
height:130px;
margin: 0px auto;}
.addressicon:hover {
background-position: 0 0;}
Many thanks
Problem Solved New CSS:
.address > .addressicon {
background: url(../images/address.png) bottom;}
.address:hover > .addressicon, {
background-position: 0 0;}
.address:hover > .addressicon {
color: SOMETHING;
}
And never leave a div empty. Put an in it, to prevent it from stupid behaviors.
I've got a dialog box made of a series of divs for the header, body and footer which are further subdivided into left, center and right sections each. Picture a tic tac toe board and you'll get the idea. For some reason, as soon as I put a textarea in the body center it overlaps the left and right body divs. The problem is occurring somewhere in the div section that uses the "con" classes.
Here's a picture of the problem: http://s8.postimage.org/fvlt9qi51/Dialog_Overlap.jpg
Edit: I managed to make it work by replacing height: 100% with height: 175px in the .con section of CSS. What I don't understand is why that looks ok, but height: 100% doesn't? The top level div that contains all the sub divs that make up the dialog has it's dimensions specified in pixels, as does the dialog header and footer. Why does the middle have to have an exact value specified as well? I'd rather not do it this way as it means I'll need a special CSS class for each dialog box so that a specific height value can be added to the middle of the dialog.
The HTML is below, CSS is after that.
<div class="ttl">
<div class="ttlt">
<div class="ttlt-l"></div>
<div class="ttlt-m">
<a class="close" href="javascript:void(0);" onclick="cancelNotes();this.blur();return false;"></a>
<span>Create Note</span>
</div>
<div class="ttlt-r"></div>
</div>
<div class="ttlb">
<div class="ttlb-l"><span></span></div>
<div class="ttlb-m"><span></span></div>
<div class="ttlb-r"><span></span></div>
</div>
</div>
<div class="con">
<div class="con-l"></div>
<div class="">
<input type="hidden" id="hdnNoteID" />
<textarea id="txtNote" rows="11" cols="50"></textarea>
</div>
<div class="con-r"></div>
</div>
<div class="ftr">
<div class="ftr-l"></div>
<div class="ftr-m">
<a onclick="cancelNotes();this.blur();return false;" href="javascript:void(0);" class="btn"><span>Cancel</span></a>
<a onclick="addNotes();this.blur();return false;" href="javascript:void(0);" class="btn"><span>Add Note</span></a>
</div>
<div class="ftr-r"></div>
</div>
CSS
/* Title Bar */
.ttl { width:100%;height:38px; }
/* Close button */
.ttl a { margin-top:4px;display:block;float:right;width:23px;height:21px;background:transparent url("img/dialog/static.png") no-repeat -18px 0;cursor:default; }
.ttl a:hover { background-position:-18px -21px; }
.ttl a:active { background-position:-18px -42px;outline:none; }
.ttlt { width:100%;height:30px; }
.ttlt-l { width:9px;height:30px;background:transparent url("img/dialog/static.png") no-repeat;float:left; }
/* ttlt-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
.ttlt-m { width:432px;height:30px;background:#000 url("img/dialog/horizontal.png") repeat-x;float:left; }
.ttlt-mWide { width:632px;height:30px;background:#000 url("img/dialog/horizontal.png") repeat-x;float:left; }
.ttlt-mExtraWide { width:930px;height:30px;background:#000 url("img/dialog/horizontal.png") repeat-x;float:left; }
.ttlt-r { width:9px;height:30px;background:transparent url("img/dialog/static.png") no-repeat -9px 0;float:left; }
.ttlt span { cursor:inherit;margin-left:4px;line-height:30px;color:#fff;font-weight:bold;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px; }
.ttlb { width:100%;height:8px; }
.ttlb span { display:none; }
.ttlb-l { width:9px;height:8px;background:#000 url("img/dialog/static.png") no-repeat 0 -30px;float:left; }
/* ttlb-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
.ttlb-m { width:432px;height:8px;background:#fff url("img/dialog/horizontal.png") repeat-x 0 -67px;float:left; }
.ttlb-mWide { width:632px;height:8px;background:#fff url("img/dialog/horizontal.png") repeat-x 0 -67px;float:left; }
.ttlb-mExtraWide { width:930px;height:8px;background:#fff url("img/dialog/horizontal.png") repeat-x 0 -67px;float:left; }
.ttlb-r { width:9px;height:8px;background:#000 url("img/dialog/static.png") no-repeat -9px -30px;float:left; }
.tabbed .ttlb-l { background-position:0 -38px; }
.tabbed .ttlb-m { background-position:0 -75px; }
.tabbed .ttlb-r { background-position:-9px -38px; }
/* Body */
.con { width:100%;height:100%;background-color:#fff;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px; cle}
.con-l { width:9px;height:100%;background:#000 url("img/dialog/vertical.png") repeat-y;float:left; }
/* con-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
.con-m { width:432px;height:100%;background-color:#fff;float:left; }
.con-m .top { margin-top:2px; }
.con-mWide { width:632px;height:100%;background-color:#fff;float:left; }
.con-mExtraWide { width:930px;height:100%;background-color:#fff;float:left; }
.con-r { width:9px;height:100%;background:#000 url("img/dialog/vertical.png") repeat-y -9px 0;float:left; }
/* Dialogue footer */
.ftr { width:100%;height:37px;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px; clear: left;}
.ftr-l { width:9px;height:37px;background:transparent url("img/dialog/static.png") no-repeat 0 -75px;float:left; }
/* ftr-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
.ftr-m { width:432px;height:37px;background:#eee url("img/dialog/horizontal.png") repeat-x 0 -30px;float:left; }
.ftr-mWide { width:632px;height:37px;background:#eee url("img/dialog/horizontal.png") repeat-x 0 -30px;float:left; }
.ftr-mExtraWide { width:930px;height:37px;background:#eee url("img/dialog/horizontal.png") repeat-x 0 -30px;float:left; }
.ftr-r { width:9px;height:37px;background:transparent url("img/dialog/static.png") no-repeat -9px -75px;float:left; }
It is hard to help there without access to real thing.
Block .con and its left and right parts have height:100%. This will work only if they parent have height in pixels. Now this left and right parts invisible, because they have height 0. It will be simpler to help if you will provide html and css for outer div for this blocks. Try to set fixed height for it like 300px.
Also I can suggest dirty workaround. Add this css after your styles:
.con {
border:9px solid #000;
border-width:0 9px;
padding:0 9px;
width:auto;
}