I'm trying to create a heading with lines on both sides.
For some reason it doesn't work on IE only on the left side.
http://jsfiddle.net/1qp9dvuL/
h2 {
position: relative;
overflow: hidden;
text-align: center;
}
h2:before,
h2:after {
position: absolute;
top: 44%;
overflow: hidden;
width: 50%;
height: 1px;
margin-left: 5%;
content: '\a0';
background-color: red;
}
h2:before {
margin-left: -55%;
text-align: right;
}
<h2>THE HEADING</h2>
Solution that works in Chrome/FF/IE
Here is an alternative work-around that works for content/text with varying widths.
Example Here
The reason it wasn't work in IE was because the pseudo elements weren't being positioned relative to the text. To work around that, I removed the absolute positioning from the pseudo elements, and set the display to table-cell so that they are positioned relative to the text.
Adjust the right/left positioning to control the space around the text.
.line {
display: table;
white-space: nowrap;
overflow: hidden;
text-align: center;
}
.line:before,
.line:after {
content: '';
display: table-cell;
position: relative;
top: 0.5em;
width: 45%;
height: 1px;
border-top: 1px solid #f00;
}
.line:before {
right: 5%;
}
.line:after {
left: 5%;
}
<h2 class="line">THE HEADING</h2>
<h2 class="line">THE LONGER HEADING</h2>
Related
I'm trying to overarchitect a tooltip. The goal is for the tooltip abstraction to not have any knowledge of the wide context (document). Instead, it should be placed in an element and just work.
However, I'm having difficulty achieving max-width behaviour:
Understandably so, since the content has white-space: nowrap.
However, without it, I face this problem:
Help me fix the layout so that I may get a proper max-width behaviour. Specifically, when there is no more room in the line, wrap the content in a new line.
Here's the example: https://jsbin.com/fucujak/3/edit?html,css,output
helper {
display: inline-block;
position: relative;
top: 30%;
left:30%;
padding: 10px;
background: green;
color: white;
border-radius: 300px
}
tooltip {
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
tooltip:hover tooltip-anchor {
display: block;
}
tooltip-anchor {
display: none;
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
}
tooltip-container {
display: block;
position: absolute;
}
tooltip-positioner {
display: block;
position: relative;
left: -50%;
}
tooltip-content {
display: block;
padding: 10px;
/* white-space: nowrap; */
background: blue;
color: white;
max-width: 100px;
}
<helper>
i
<tooltip>
<tooltip-anchor>
<tooltip-container>
<tooltip-positioner>
<tooltip-content>
Some long, extended tooltip content
</tooltip-content>
</tooltip-positioner>
</tooltip-container>
</tooltip-anchor>
</tooltip>
</helper>
You can simply do like below:
helper {
display: inline-block;
position: relative;
top: 30%;
left: 30%;
padding: 10px;
background: green;
color: white;
border-radius: 300px
}
tooltip {
position: absolute;
display:none;
top: 100%; /* place at bottom*/
/* center*/
left:50%;
transform:translateX(-50%);
/**/
margin-right: -200px; /* this is the trick that will make sure the content can go up to 180px (an arbitrary big value) */
max-width:180px; /* your max-width*/
padding:10px;
background:blue;
}
helper:hover tooltip {
display:block;
}
<helper>
i
<tooltip>
Some long, extended tooltip content
</tooltip>
</helper>
<helper>
i
<tooltip>
Some long
</tooltip>
</helper>
I am looking to display a 'SALE' tag just before an image, I have tried to do this using the 'before' pseudo element however nothing seems to be displaying on the screen.
I am trying to create the 'SALE' tag inside a circle with black background.
Below is the code that I have used
<span class"bag-image">
<img src="https://images-na.ssl-images-
amazon.com/images/I/71lDa7EbWSL._UY395_.jpg" class="image">
</span>
.bag-image::before{
background-color: #red;
content: 'SALE';
border-radius: 500px;
display: inline-block;
width: 100px;
height: 100px;
}
For visual reference:
LIKE THIS
https://codepen.io/anon/pen/rgLPdp
Make the bag-image class position: relative;
Make the bag-image:before position: absolute; and position it with top/left or margins and set the line-height to vertically center the SALE text.
You can give the pseudo-class a lower z-index so that only the top half is visible, e.g. z-index: -1;
You can use margin-top: -2.5em; margin-left: 175px; in the pseudo-code to position it.
div.bag-image {
display: inline-block;
/* just so that we can see in the example */
margin-top: 3em;
}
div.bag-image:before {
position: absolute;
background-color: #ff0000;
content: 'SALE';
text-align: center;
color: #ffffff;
margin-top: -2.5em;
margin-left: 175px;
/* optionally make it a circle */
border-radius: 9999px;
height: 3em;
padding: 1em;
line-height: 3em;
}
/* just for clarity */
img.image {
border: 1px solid #ccc;
}
<div class="bag-image">
<img src="https://images-na.ssl-images-amazon.com/images/I/71lDa7EbWSL._UY395_.jpg" class="image">
</div>
I think you want this. Also check the codepen.Codepen
<style>
.bag-image{
text-align:center;
}
.bag-image::before{
content: 'SALE';
border-radius: 50px;
background: red;
display: inline-block;
width: 100px;
height: 100px;
position: absolute;
line-height: 100px;
color: #fff;
}
</style>
In summary, you need to add the position: relative property to the span, and the position: absolute property to the ::after element. Something like this:
.bag-image {
position: relative;
display: block;
}
.bag-image::after {
background-color: red;
content: 'SALE';
border-radius: 500px;
display: block;
width: 100px;
height: 100px;
position: absolute;
top: 0px;
text-align: center;
left: 100px;
}
<span class="bag-image">
<img src="https://images-na.ssl-images-amazon.com/images/I/71lDa7EbWSL._UY395_.jpg" class="image">
</span>
Play with the left (and maybe the top) property to place the text in the desired position.
You can try this code:
your code background-color: #red; is the wrong to declared #red it's instant of only red.
the sale is a position by my self parent relatively, you can learn about more position https://www.w3schools.com/css/css_positioning.asp .
here also write a shadow element related to some code for needed your answer.
maybe it solves your problem.
=== Thanks ===
.bag-image {
margin-top: 50px;
position: relative;
border: 1px solid red;
}
.bag-image img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.bag-image::before{
background-color: red;
content: 'SALE';
border-radius: 500px;
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color: #fff;
position:absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="bag-image">
<img src="https://images-na.ssl-images-amazon.com/images/I/71lDa7EbWSL._UY395_.jpg" class="image">
</div>
In order to design with html and css the following way to display numbers ( it's an image counter related to a caroussel )
I'm facing a problem which is putting a sort of line break in "content" so that the .down_numb (36) can be a little bit under the slash like a previous image.
This is my code:
#container{
width: 150px;
height: 150px;
background-color :black;
margin-left: auto;
margin-right: auto;
position: relative;
}
/*Similar parameters between the 2 classes*/
.up_num , .down_num{
position: absolute;
font-size: 25px;
width: 10px;
height: 10px;
color: white;
}
/*Position of up num*/
.up_num{
top:20%;
left: 45%;
}
/*Position of down num*/
.down_num{
top:40%;
left: 45%;
}
/*Pseudo class of down_num with content "/" */
.down_num:before{
content : ' \002F ';
}
<div id="container">
<div class="up_num">1</div>
<div class="down_num">36</div>
</div>
Thanks everyone.
I would apply display: inline-block; and position: relative to the inner DIVs (i.e. putting them into one line and using top settings to offset them from that line), apply position: absolute to the before element containing the / and adjust settings approximately as in my snippet:
#container {
width: 150px;
height: 150px;
background-color: black;
margin-left: auto;
margin-right: auto;
position: relative;
box-sizing: border-box;
padding-top: 34px;
padding-left: 52px;
}
#container>div {
display: inline-block;
position: relative;
}
.up_num,
.down_num {
font-size: 25px;
color: white;
}
.up_num {
top: 20%;
}
.down_num {
top: 35%;
left: 0.2em;
}
.down_num:before {
content: ' \002F ';
position: absolute;
top: -30%;
left: -0.3em;
}
<div id="container">
<div class="up_num">1</div>
<div class="down_num">36</div>
</div>
You can do it using pseudo elements. Simmilar issue is solved in this answer.
Thanks to transform: rotate(angle); you can rotate the line as you want and it doesn't interfere with other elements as it is essentially a part of the element you assign it to. You will still need to play with it for a bit though.
Here is my jfiddle - fiddle, everything is perfect here but only the probelm is when you minimise the window the image goes down , need to fit that image in vertically center which is not happening now
HTML:
<div class="left_panel">
<div class="slide-frame">
<img src="http://www.w3schools.com/bootstrap/paris.jpg">
</div>
</div>
CSS:
.left_panel {
border: 1px solid #ddd;
border-collapse: collapse;
bottom: 0;
left: 0;
position: absolute;
right: 300px;
top: 0;
background:#ddd;
}
.left_panel .slide-frame::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.left_panel .slide-frame{
height: 100%;
text-align: center;
width: 100%;
}
.left_panel .slide-frame img {
display: inline-block;
height: auto;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
width: auto;
}
The reason for this behaviour is, that the :after element is an inline element. That causes a little gap between the image and that element. With setting the fon-size to zero, you remove that gap:
.left_panel {
font-size: 0;
}
Good article about that topic on CSS-Tricks. This solution is preferable, because you aren't using text. With text, there are other approaches to remove the space between inline elements.
Please check this for vertical and horizontal div without using height. https://jsfiddle.net/hardyrajput/myuqm5x8/2/
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 50%;
padding: 20px;
color: white;
text-align: center;
}
use this
.left_panel .slide-frame {
height: 100%;
text-align: center;
width: 100%;
display: inline-table;
}
just add display property
I'm facing an issue that I'm struggling to overcome.
This is best demonstrated with an example I guess:
As a fiddle: http://jsfiddle.net/wchv2hmn/3/
In the browser:
div {
background-color: blue;
text-align: center;
}
span {
position: relative;
background-color: green;
}
span:after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
height: 10px;
width: 100%;
background-color: red;
}
<div>
<span>
htejuteujetjtjehrehreheherhrehrehre sghosgjosjoskoskfosjofshohofshofusofhrehrhrehehhrehrherheheuorfos
</span>
</div>
I need the :after pseudo element to take on the width of the last line of text within the <span>, not the first.
Adding inline-block to the span, results in the text just being displayed as a block level element, as seen here in chrome and Firefox 39:
div {
background-color: blue;
text-align: center;
}
span {
position: relative;
background-color: green;
display:inline-block;
}
span:after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
height: 10px;
width: 100%;
background-color: red;
}
<div>
<span>
htejuteujetjthehtehtehethetje sghosgjosjoskoskfosjofshohofshofusethehetthehehterfos
</span>
</div>
It's as if the <span>s min-width is set to the length the <span> will occupy when all the text fits on one line. So when the window shrinks, and the text splits to occupy two or more lines, the width can't shrink any smaller than it's assumed min-width...
Does anyone have any ideas? Preferably without having to alter the DOM, although it can be done if absolutely necessary.
You need to set the span as block element.
Html
<div>
<span>
htejuteujetjtje sghosgjosjoskoskfosjofshohofshofusofuorfos
</span>
</div>
CSS
div {
background-color: blue;
}
span {
position: relative;
background-color: green;
}
span{display:block;}
span:after {
content: '';
display: block;
height: 10px;
width: 100%;
background-color: red;
position: absolute;
}
Add display:inline-block to span style
span {
position: relative;
background-color: green;
display:inline-block;
}
Result: