For a given word wrapped in a span element, I am trying to make a tooltip appear on hover using plain CSS only (without the various tooltip functions, the reason being that I need to have LaTeX displayed within the tooltip). The tooltip itself is a span within its parent span. Currently I'm getting a tooltip that is off center (left) while I'm trying to achieve the result on the right:
JSFiddle here. I've tried various combination of display (inline, table, block) with auto 0 margin etc. unsuccessfully.
Try adding the following css property and let me know how that works for you:
.link-cont:hover .tooltip{
display: table;
left: 10%;
}
You ought to be able to adjust to suit your needs - 10% seemed to do the trick with this particular example.
(I've updated your JS fiddle for you with the above)
It's because your tool tip is position absolute. You can't use margin auto on absolute.
Try having your container to place the tool tip above the text absolute and then have another child element inside that is relative. You can the give that element margin auto.
A fairly easy way to center the tool-tip is to create a wrapper .tip-wrap that is
a child element of the link text block .link-cont. tip-wrap has the same width
as its parent and has text-align: center to center the inline-block .tooltip.
.tip-wrap is absolutely positioned just above the top border of .link-cont.
Since you specifiec a height of 20px, and the decorative triangle is 5px, the
top offset is 25px.
Note: If your tool tip is longer than the link text, then you need to make some
adjustments to the positioning of the .tip-wrap. Specify a sufficiently long
width (the exact length does not matter), and then apply a negative margin equal
to half of the specified width.
.tip-wrap {
position: absolute;
left: 50%;
margin-left: -100px;
bottom: 25px;
width: 200px;
display: none;
text-align: center;
}
.link-cont {
display: inline-block;
cursor: default;
position: relative;
background: grey;
width: auto;
text-align: center;
white-space: nowrap;
overflow: visible;
}
.tooltip {
background: #000;
color: #fff;
text-decoration: none;
padding: 15px;
border-radius: 10px;
display: inline-block;
height: 20px;
height: auto;
text-align: center;
}
.link-cont:hover .tip-wrap {
display: block;
}
.tooltip .tooltip-triangle {
display: block;
position: absolute;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: "";
}
.tooltip .tooltip-triangle {
border-top: 5px solid #000;
bottom: -5px;
left: calc(50% - 5px); /* slightly more accurate */
}
<p>Text.
<br>
<br>
<br>This is a <span class="link-cont">loooooooooooooooooooooooooong
<span class="tip-wrap"><span class="tooltip ">the content<span class="tooltip-triangle"></span></span>
</span>
</span> word.</p>
<p>This is a sentence containing a <span class="link-cont">short
<span class="tip-wrap"><span class="tooltip ">the short word content<span class="tooltip-triangle"></span></span>
</span>
</span> word and a few extra at the end.</p>
Related
This is the html code:
<div class="produto_title">
<h2 th:text="${produto.name}"></h2>
Baixar
Comprar <span th:text="${produto.preco}"></span>
</div>
Could anyone give me a hint how to place the three items inside .produto_title in a same line (h2 floating at left and the two a floating at right).
Also, h2 has a border around item and the a is displayed like a button; I want add a line behind crossing all the "line" formed by this three elements, like this:
jsfiddle: https://jsfiddle.net/klebermo/sf7a6fnj/5/
ps.: also, how let the content of tag <span> inside the button, like the text?
An hr is a block element that's essentially just a line with a border.
I'd recommend sticking one of those at the top of the container and giving it a negative margin that vertically centers it in the parent. position: absolute is more trouble than it's worth.
https://jsfiddle.net/JackHasaKeyboard/0juqg4j7/
As for aligning the elements to the left and the right, I'll let you figure that out. There's many ways to accomplish it, the simplest way being with float.
I would look at twitter's bootstrap, specifically the row and col components.
You could do
<div class="row">
<div class="col-md-4">
// something here
</div>
<div class="col-md-4">
// something here
</div>
<div class="col-md-4">
// something here
</div>
</div>
This will all be displayed on the same line, splitting the row into equal thirds
btns{
height: auto; //Fix the span not being in the element
margin-top: 20px; //line everything up with the top of the heading element.
}
As for the line you can make a div and give it a absolute position (remember to give parent a relative position) and then position it accordingly.
.parent{
position: relative;
width: 100%;
}
.line{
height: 4px;
background-color: #000;
position: absolute;
z-index: -1;
top: 50%;
width: 100%;
}
This is a very bare-bones answer but it will be a start for you to go off.
For the first question, you can do that easily by manipulating margin or vertical-align properties. For example, if you put margin: 30px 5px; on your btn elements, it would be on the same line-ish.
Secondly, the <span> problem: if you set fixed width: 60px; of element (in your case .btn_comprar), text would either overflow from button to the right or bottom. Try setting width: 90px; or more on button elements, or height: auto; if you need it to be fixed.
Updated fiddle
First of all, you can't set a fixed width on a button if you want the text to not wrap. I recommend leaving the buttons at a width: auto and using padding to control the spacing around the text. I'd also bundle the styles for both button selectors, as they're exactly the same
Secondly, the only way (I know of) to get items to vertically align while they're float: right is by manually pushing them down, so I recommend making your buttons position: relative and setting a top: 25px;
/* Bundled both buttons together as they share the same styles */
.btn_free,
.btn_comprar {
float: right;
/* width: 60px; Removing this to allow the text to set the button width */
/* height: 20px; Removing this to let the line-height set the button height */
background: silver;
border-radius: 5px;
padding: 1px 15px;
box-shadow: 1px 1px 1px #000;
/* display: block; Removing this as floats are automatically display: block; */
/* text-align: center; Removing this since the text is already setting width */
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
font-family: arial;
font-size: 12px;
line-height:20px;
position: relative; /* Pushing buttons down a bit */
top: 25px;
margin: 0 10px; /* Spacing buttons out */
}
.btn_free:hover,
.btn_comprar:hover{
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}
Thirdly, remember to use a clearfix so the .produto_title container maintains height!
.produto_title:after {
content: "";
display: table;
clear: both;
}
Lastly, rather than using another div to make the line, I'd use the :before psuedo-element on .produto-title (can't use :after if you're also doing a clearfix).
.produto_title:before {
content: '';
height: 1px;
background: #000;
width: 100%;
position: absolute;
left: 0;
top: 50%;
display: block;
}
Here's a working demo:
https://jsfiddle.net/zcqLbg4h/1/
I have a HTML file which I cannot edit.
<section>
<h2>Section heading</h2>
<p>Paragraph text</p>
<img src="image.jpg" />
</section>
The design is asking for the photo to be in the top right of the section, which is easy if the image is the top child of section. Unfortunately the image in the supplied HTML is right at the bottom of the section in the HTML, so simply floating right won't work. With a little work I figured out how to absolute position a div while keeping it in the page flow by faking the flow with another floated element.
* {
box-sizing: border-box;
}
section {
position: relative;
outline: 1px solid #CCC;
}
div {
display: inline-block;
width: 140px;
height: 140px;
background-color: green;
border-radius: 100px;
position: absolute;
top: 0;
right: 0;
}
h2::before {
content: "";
display: inline-block;
float: right;
width: 150px;
height: 150px;
outline: 1px solid red;
}
h2 {
outline: 1px solid blue;
}
See https://jsfiddle.net/tnxhy0po/3/
Div - Using it to demonstrate an image in the fiddle.
Red outline - Right floated ::before pesudo element for
the header.
Blue outline - Header outline.
Silver outline - Section
outline.
Now for the problem.
The header contains the words "Meet the Owner, Julie" and Julie is meant to be on a separate line. If I limit the width of the header in order to do this, the floated spacer element gets contained in the width of the header, which means that text below it doesn't flow up to the image.
See https://jsfiddle.net/s7eke1gy/16/
I'm not sure how to make the image float in the top right corner of the section. Placing it there is easy but making it a part of the flow isn't.
Alternatively, the current float + absolute position solution would work if I could find some way to get "Julie" to move to the next line.
Edit: While testing I had set the section to a max width and forgot to remove it. The width of section is dynamic and as such 100%. I've removed the max-width property from the section in here and in the jsfiddles. Sorry for the confusion!
If I understand you correctly, you want to put Julie on a separate line and leave the text floating like on https://jsfiddle.net/tnxhy0po/1/
You can try to combine before and after pseudo elements, use :before to wrap h2
( move Julie to new line ) and :after to wrap paragraph.
h2::before {
content: "";
display: inline-block;
float: right;
width: 150px;
height: 25px;
outline: 1px solid red;
}
h2::after {
content: "";
display: inline-block;
float: right;
width: 10px;
height: 120px;
outline: 1px solid red;
}
You can see result on https://jsfiddle.net/s7eke1gy/13/
Hope I understand you and this can help.
I want to vertically center a text by its underline and overline. The text element is inside a div that is absolutely positioned and has an unknown (variable) height. The text's font size and horizontal position also have to be variable.
In other words: I want to position the text so that the center between underline and overline is exactly at the center of the containing div.
Additionally, I want to display a rectangle (using a div) in front of the text:
<div class="container">
<div class="rectangle"></div>
<div class="text">Text</div>
</div>
Here's an example: http://codepen.io/zabbarob/pen/CHxLe
* { margin: 0; padding: 0; border: 0; }
.container {
position: absolute; top: 5px; height: 25px;
zoom: 800%; /* debugging */
vertical-align: middle;
}
.rectangle {
display: inline-block;
width: 50px; height: 100%;
background-color: green;
}
.text {
display: inline-block;
text-decoration: underline overline;
font-size: 20px;
position: absolute; left: 50px;
background: lightgreen;
/* center vertically by underline and overline */
top: 0; bottom: 0;
line-height: 25px;
}
Hmm, rather than using an actual overline/underline (which could be a bit of a headache to customize), have you considered mimicking it using border top/bottom instead? So you could modify your CSS definition for text as follows:
.text {
display: inline-block;
/*text-decoration: underline overline;*/
font-size: 20px;
position: absolute; left: 50px;
background: lightgreen;
/* center vertically by underline and overline */
top: 0; bottom: 0;
line-height: 23px; /* Height of the element beside it, minus 2px for the borders */
border-top:1px solid #000;
border-bottom:1px solid #000;
}
Here's a modified CodePen to demonstrate. Depending on your requirements, this may not be optimal (for example, border scales with zoom, whereas underline does not), but it does at least give you a different way of approaching the problem.
Hope this helps! Let me know if you have any questions.
Have you tried using the methods outlined here: http://css-tricks.com/centering-in-the-unknown/ ?
Always works for me.
Hope this helps
I am new to stackoverflow and have searched through some of the other answers and tried a lot of different things but can't seem to get it right.
I need to vertically align the 'Hide Message' button with the paragraph of text so that the button appears in the centered alongside the text (jsFiddle link below). The button also needs to align with another div on the page so it has to have:
position: fixed;
right: 50px;
The main problem I am having with some of the other solutions is that if you shrink the browser, it doesn't stay vertically aligned with the text:
http://jsfiddle.net/d3R6v/2/
I don't think position: fixed; is a way to go here, instead of using fixed you should be using absolute but before that assign position: relative; to the parent element and modify your #hideMessage as
#hideMessage {
display: inline-block;
padding: 5px 10px;
background-color: #555;
color: #fff;
cursor: pointer;
position: absolute;
right: 50px;
top: 50%;
margin-top: -15px; /* Negate 1/2 the total height of the button,
this value currently is approx */
}
Demo
The reason I insisted position: absolute; is because that it will align related to the parent element whereas using fixed is relative to the viewport.
For more information over positioning, you can refer my answer here
If you have dynamic text
Coming to more cleaner solution, it would be better if you use display: table; for the parent element, and display: table-cell; for the child elements, and for the parent element of the button i.e now display: table-cell;, you can use vertical-align: middle; to vertically align the button to the dynamic text on the left hand side and also on resize, the button won't overlap the text.
Demo 2
#parent {
background-color: #bbb;
color: #fff;
width: 100%;
padding: 10px;
display: table;
}
#text {
width: 80%;
display: table-cell;
}
#hideMessage {
display: table-cell;
color: #fff;
cursor: pointer;
vertical-align: middle;
text-align: center;
}
#hello {
background-color: #555;
padding: 5px 10px;
white-space: nowrap; /* Add if you want to prevent the
button to wrap on resize */
}
I am having an issue with positioning text inside a div. I want the image on the right top corner (which I was able to do) and the text kind of center the bottom text in the box.
This is an example of what I want to do: http://jsfiddle.net/Lucky500/Nq769/
I created a div .bottom_box and added:
.bottom_box {
position: relative;
bottom: -50px;
left: 50px;
}
Is there an easier or more correct way to do this?
Alright -
Added text-align:center to your and elements.
Set your outer_box position to relative.
Set the img value to absolute and positioned with 0.25 em top and right instead of margin.
http://jsfiddle.net/mr_mayers/Nq769/2/
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: .5em;
Position: relative;
}
.bottom_box {
position: relative;
bottom: -50px;
}
p {
color: blue;
text-align: center;
}
img {
position: absolute;
padding: 3px;
top: 0.25em;
right: 0.25em;
}
h1 {
text-align: center;
color: red;
}
You can achieve your layout as follows:
For this HTML:
<div class="outer_box">
<img src="http://placehold.it/100x50">
<div class="bottom_box">
<h1>$25 OFF</h1>
<p>$25 off your first cleaning!</p>
</div>
</div>
Try the following CSS:
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: 0.5em;
}
.bottom_box {
clear: both;
border: 1px dotted gray; /* for demo only, optional */
}
img {
float: right;
padding: 3px;
margin: 0 0 1em 1em;
}
p {
color: blue;
margin-left: 50px;
}
h1 {
color: red;
margin-left: 50px;
}
Since your image is floated, simply clear the .bottom-box.
Use margin-left on the child elements to get any white space.
See sample: http://jsfiddle.net/audetwebdesign/3SjRG/
You can use text-align: center if you are centering the p and h1 content, but I was not sure if you wanted ragged left or ragged right alignment on the text block;
You'd be better off using text-align:center and position: absolute
See example
There are some solutions.
An other way is to make the box relative and positioning the text and image inside absolute.
I would create a container div with a border for your box, then set the inner divs (one with your image and one with your text) to position absolute. then you can use top:0; right:0; for the picture on the right corner. then bottom:xx; and left:yy; for positioning the text div.
This is just a different method than you used. If it works, doesn't break in any situation, and is simple, then it's correct. Many ways to skin a cat in programming.