I'd like to create simple tooltip in CSS3.
Example: http://jsfiddle.net/Cg2SX/
Example HTML (can be changed if necessary):
<div class="icons">
t <span class="tooltip">Twitter</span>
f <span class="tooltip">Facebook</span>
g <span class="tooltip">Google+</span>
</div>
And CSS:
.icons { position: absolute; left: 40px; top: 30px; }
.icons a { text-decoration:none; font-size: 16px; color: #000000; position: relative; margin-right: 70px; border:1px solid red; }
.icons a:hover { text-decoration:none; }
.tooltip { background-color: green; color: #FFFFFF; font-family: Arial,sans-serif; font-size: 10px; padding: 2px 8px; bottom: -20px; position: absolute; }
The problem is - I have no idea how to center tooltips below sharing icons (they will be font icons). It wouldn't be complicated if I knew their width but I don't.
Any ideas appreciated. Is it possible anyway?
You could try doing it like this:
updated fiddle
Using a fixed (big enough) width on the span, setting text-align: center on it & putting the text in a pseudo-element to which you give display: inline-block
HTML:
<div class="icons">
<a href="#">t
<span class="tooltip" data-text='Twitter'></span>
</a>
<a href="#">f
<span class="tooltip" data-text="Facebook"></span>
</a>
<a href="#">g
<span class="tooltip" data-text='Google+'></span>
</a>
</div>
Relevant CSS:
.icons a {
display: inline-block;
position: relative;
margin-right: 70px;
width: 16px;
color: #000;
font-size: 16px;
text-align: center;
text-decoration: none;
}
.tooltip {
position: absolute;
bottom: -20px; left: 8px; /* half the width of link */
margin-left: -35px;
width: 70px;
color: #fff;
font: 10px Arial, sans-serif;
}
.tooltip:after {
display: inline-block;
padding: 2px 8px;
background-color: green;
content: attr(data-text);
}
You could always do something like this demo:
http://jsfiddle.net/Cg2SX/1/
I updated a tags then inside .icons div. Here's what I changed:
.icons a {
display:block;
margin-right:10px /* spacing between a tags - changed from your original code */
float:left;
text-align:center;
width:100px; /* you can change this as needed, but it keeps them all uniform*/
height: 50px; /* Change this to the height of your tallest icon image */
}
Then I update the span.tooltip accordingly, I added this to what you had:
.tooltip {
width:100%;
padding: 2px 0; /* changed the side padding to 0 since width is 100% & it takes the text-align center from the CSS above on the a tag */
display:block; /* Made it a block so the width 100% & centered text would work */
}
This doesn't matter on the exact size of your icon images - they could all be different or the same, but as long as the over a tags are wider and taller than the tallest and widest image, you shouldn't have any problems.
why don't you work with => width:auto;
Related
I am trying to get this to happen.
what I want
So far, I don't know how to overlap one img-div with another text-div and keep white space on the top of the text-div. You will see. What I have right now is:
<div id="some">
<img src="photos/some.png">
<div id="box">
<p>Proudly seeking</p>
<h2>some Cofefe</h2>
<button id="shopNow" class="button">Shop</button>
</div>
</div>
With some CSS that doesn't make it very appealing: what it looks like
#some{
margin-top: 20px;
background-color: red;
}
#some img{
width: 30%;
float: left;
}
#box{
padding-top: 220px;
margin-right: 40px;
font-family: "Eusthalia";
text-align: right;
}
#box p{
margin-right: 32%
}
h2 {
font-size: 2.6em;
}
button {
border: none;
font-family: "Eusthalia";
font-size: 15px;
background-color: #300c06;
color: #eadfc0;
padding: 2px 10px;
}
I am wondering if my whole approach with divs is wrong. I was researching and I found that right:0; doesn't work and stuff like that. How do I get a border to overlap behind the image? How do I give it a width and a height but make it push to the right?
Do I have to make the main div width 100% and then give the img a width 30% and the colored filled in text box 70%? But how would I have the box behind the img?
Drearo, I think you're doing fine with div tags. You just may need a bit more of them to help things along.
I would suggest the divs be position: absolute with the image in one of those. The box of text needs it too. Aside from that, a little CSS would get you the positioning you want. See here:
<div id="some">
<div class="my_img">
<img src="photos/some.jpg" />
</div>
<div id="box">
<p>Proudly seeking</p>
<h2>some Cofefe</h2>
<button id="shopNow" class="button">Shop</button>
</div>
</div>
css:
#some{
margin-top: 20px;
height: 100vh;
width: 100vw;
border: 1px solid #000;
position: relative;
}
.my_img {
position: absolute;
top: 5em;
left: 5em;
z-index: 200;
}
.my_img img {
width: 200px;
}
#box{
position: absolute;
top: 10em;
left: 10em;
transition: translate( -50%, -50%);
font-family: "Eusthalia";
text-align: right;
background: red;
min-width: 60%;
padding-right: 2em;
}
#box p{
margin-right: 32%
}
h2 {
font-size: 2.6em;
}
button {
border: none;
font-family: "Eusthalia";
font-size: 15px;
background-color: #300c06;
color: #eadfc0;
padding: 2px 10px;
}
https://jsfiddle.net/5k94j73p/
How can I vertically align icon inserted using :before method?
Here is what I have:
<div class="button submit">
<a class="submit check_car_search" href="#" >Some Text</a>
</div>
CSS:
.button a{
background: none;
background-color: #32BBE7;
text-indent:1px;
color:#FFF;
text-decoration: none;
display: table-cell;
vertical-align:middle;
text-align:center;
height: auto;
padding: 10px;
border-radius: 3px;
font-weight: 600;
font-size: 50px;
font-style: italic;
}
.button a:hover{
background-color: #2597F0;
}
.button a:before {
content:url(http://i.stack.imgur.com/tKsDb.png);
position: relative
}
JSFiddle: https://jsfiddle.net/1z83tc1o/
How Can I align vertically icon relative to the text?
You can use background and set is size (width, height), Then you can use vertical-align.
CSS
.button a:before {
position: relative;
display: inline-block;
width: 18px;
height: 16px;
vertical-align: middle;
content:"";
background: transparent url(http://i.stack.imgur.com/tKsDb.png) no-repeat center center;
margin-right: 20px; // Optional
}
DEMO HERE
You use background and absolute position the icon to perfectly vertical align in the middle.
.button a:before {
content: " ";
background-image: url(http://i.stack.imgur.com/tKsDb.png);
position: absolute;
width: 18px;
height: 16px;
top: 50%;
margin: -8px 0 0 -25px;
}
Here is the example : https://jsfiddle.net/1z83tc1o/3/
I want to create a white hover caption that is centered vertical and horizontal. Around that i would like to add the same padding/margin and within some padding/margin with the title/caption centered, horizontal and vertical.
Because everything is responsive i think is best to use % for the most of the elements. Maybe the structure of the thumbnail/caption (html) needs to be written differently, i'm a bit stuck now.
In the example image i added some red marks what i mean.
Example:
---> FIDDLE
<div class="col-4">
<a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption"><span>Project title centered vertical and horizontal</span></div>
</a>
</div>
One option can be the use of inline-block on the span element to vertical algin, and for the space use padding and box-sizing on caption. Check this:
.caption {
position: absolute;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
background-color: white;
text-align: center;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
box-sizing:border-box;
padding:5px;
}
.caption span {
display: inline-block;
opacity: 0;
vertical-align:middle;
color: #111;
text-transform: uppercase;
letter-spacing: 1px;
background-color: white;
}
.caption:before {
content:" ";
height:100%;
width:0;
display:inline-block;
vertical-align:middle;
}
DemoFiddle
Check this fiddle.
Display the parent as a table-cell and use vertical align to center everything
.block {
background-color: #eee;
min-height: 200px;
display: table-cell;
vertical-align: center;
text-align: center;
}
.block-contents {
background-color: #fff;
padding: 20px;
margin: 20px;
}
You could always position the span absolutely too.
.caption span {
display: block;
position: absolute;
top:50%;
left:50%;
width:100%;
transform: translate(-50%, -50%);
color: #111;
text-transform: uppercase;
letter-spacing: 1px;
background-color: white;
}
JSfiddle Demo
Im trying to have a button with format like I have in my image 1.
Where I have a div with background red at left, and inside this div I have an image, and I want this image aligned at center of my div.
And then I have the text of my button at right of my red div.
Image 1:
But What Im having is this:
Image 2
I dont have my image at center of my red div, and my button text is stucked in my div.
Do you see what Im doing wrong?
This is my fiddle with issue Im having: http://jsfiddle.net/nXuU2/2/
This is my html
<button class="btn">
<div id="btn_container"><img src="http://placehold.it/30x30" width="30" height="30"/></div>
<span>Button link 1</span>
</button>
And my CSS:
.btn
{
position: relative;
width: 200px;
height: 60px;
margin-bottom:20px;
padding: 0 10px;
text-align: left;
font-size: 16px;
color: #333;
background:gray;
}
#btn_container
{
width:40px;
height:40px;
border-radius:5px;
background:red;
float:left;
}
.btn img
{
margin-right: 10px;
vertical-align:middle;
}
.btn span
{
display:inline-block;
width: 120px;
vertical-align:middle;
}
Just playing with CSS positioning here, make your div with the red background position: relative; and use absolute for your img tag
Demo
.btn img {
left: 50%;
margin-left: -15px; /* 1/2 of total width of your img */
top: 50%;
margin-top: -15px; /* 1/2 of total height of your img */
position: absolute;
}
Demo 2 (Alternate way to do this, you won't need CSS positioning)
In the Demo 2, you won't need CSS positioning, just remove margin-right from .btn img and use text-align: center; on #btn_container, and lastly, apply margin-top to .btn img
I don't think that you will need a wrapping element for background-color, just apply to img tag, so if you don't want to use your wrapping element than refer the solution below ..
CSS
.btn img {
display: inline-block;
vertical-align: middle;
background: #f00;
padding: 5px;
border-radius: 5px;
}
HTML
<button class="btn">
<img src="http://placehold.it/30x30" width="30" height="30"/>
<span>Button link 1</span>
</button>
Demo 3
Try out the below HTML and CSS code:
HTML Code:
<button class="btn">
<div id="btn_container">
<img src="http://placehold.it/30x30" width="30" height="30"/>
<span class="btn-txt">Button link 1</span>
</div>
</button>
CSS Code:
.btn {
background: #fff;
border:3px solid grey;
padding: 5px;
width: 200px;
text-align:left;
}
#btn_container img {
border: 6px solid red;
margin-right: 5px;
vertical-align: middle;
}
.btn-txt {
vertical-align: middle;
}
Check out the DEMO on JSFiddle
You can fix by updating your margins for your img and span
.btn img
{
margin-left: 5px;
margin-top: 5px;
}
.btn span
{
display:inline-block;
width: 120px;
margin-top: 10px;
margin-left: 10px;
}
In addition to the answer above, you can add line-height to match the height of your container to force the button text into a centered position. Also, I used text-indent to push the text away from the image.
.btn span { line-height: 60px; text-indent: 10px;}
.btn img { margin: 5px; }
#btn_container { margin: 10px 0 0 0; }
Fiddle
I wanted the effect from this article: http://css-tricks.com/text-blocks-over-image/
But I want to know how to do it when defining the image in CSS instead of HTML.
If I make a new line that is longer than the previous line it creates a block of background colour which is the same length as the new line, for both lines.
What's the proper way of achieving this effect (without setting up the image in HTML)?
===Additional info===
This is what I was trying earlier..
HTML:
<div class="img-main-wide">
<span class="img-text-green">
"be bold, and venture to be wise."<br />"Begin, be bold, and venture to be wise."
</span>
</div>
CSS:
.img-main-wide{
background-image: url(../images/Pyramids-Egypt.jpg);
max-width: 100%;
width: 100%;
height: 80%;
background-size: cover;
position: relative;
}
.img-text-green{
position: absolute;
margin-left: 1em;
top: 10em;
left: 0;
color: white;
padding-right: .5em;
padding-left: .5em;
background-color: rgba(51,102,0,0.8);
font-size: 36px;
font-style: oblique;
}
When you set position: absolute to span, you implicitly set display: block to it. So absolutely positioned span doesn't behave like text selection any more and behaves like a solid rectangle instead.
To solve this, you can use two nested spans: the outer one for positioning and the inner one for text formatting. E.g.:
HTML:
<div class="img-main-wide">
<span class="img-text-green">
<span>
"be bold, and venture to be wise."<br />"Begin, be bold, and venture to be wise."
</span>
</span>
</div>
CSS:
/* .img-main-wide code is not changed */
.img-text-green {
position: absolute;
margin-left: 1em;
top: 10em;
left: 0;
}
.img-text-green > span {
color: white;
padding-right: .5em;
padding-left: .5em;
background-color: rgba(51,102,0,0.8);
font-size: 36px;
font-style: oblique;
}
Fiddle
Another option is just not to use position: absolute: fiddle
You can use like this:
div{
position: relative;
background-image: url("your-image-url") no-repeat;
/*define width and height also*/
}
.textblock{
position: absolute;
bottom: 20px;
left: 20px;
}