I am trying to vertically align to the middle at all times an open quote by a pseudo element. As you shrink the size it aligns, but by default it's above my quote. Is there a way I can have it vertically in the middle aligned at all times?
CSS
blockquote {
margin: 3em;
padding: 0 3em;
position: relative;
}
blockquote::before {
content: open-quote;
left: -40px;
}
blockquote::before, blockquote::after {
top: 50%;
color: #F1722E;
font-size: 124px;
position: absolute;
transform: translateY(-50%);
}
HTML
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus iure rem repudiandae incidunt corporis obcaecati voluptate officia. Facere laborum ipsam molestiae dolorum libero nesciunt ducimus aliquid voluptatibus. Ad praesentium fugiat.</blockquote>
http://jsfiddle.net/gfybkpc9/
You can do it by adjusting the margin top of the open quote. See this fiddle
I adjusted the CSS like so:
blockquote {
margin: 3em;
padding: 0 3em;
position: relative;
}
blockquote::before {
content:'"';
left: -40px;
}
blockquote::before, blockquote::after {
top: 50%;
color: #F1722E;
font-size: 124px;
position: absolute;
margin-top:-48px;
}
Essentially, the margin top would be half the height of the element, which would position the middle of the element at 50%, per the top property. Since it's a quote mark, we have to fudge the numbers a little.
Related
I have seen the gradient borders with radius work on css-tricks with this particular code snippet.
<div class="fem">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum neque debitis at ad fugit, esse sequi rem ab consequatur id sint veniam ex quam adipisci. Ab itaque officia atque id!
</p>
</div>
.fem {
padding: 1rem;
position: relative;
background: #000;
color: white;
border-radius: 8px;
}
.fem:before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
width: calc(100% + 10px);
height: calc(100% + 10px);
z-index: -1;
border-radius: 12px;
background: linear-gradient(130deg,#ff7a18,#af002d 41.07%,#319197 76.05%);
}
I have tested this code on jsbin and it seems to be working perfectly fine.
Now, I'm working on a tailwind application and this same code isn't working for me.
I feel that some of the base styles might be causing this erratic behaviour. I can't seem to figure out how to correct it.
Here is the link to tailwind play
On tailwind, I'm seeing invisible gradient borders
<div class="main">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ullam fugit quaerat voluptates culpa dolores id
veritatis suscipit quo officia minus, ex totam velit praesentium explicabo, exercitationem blanditiis numquam
doloremque?
</div>
<style>
.main {
background-color: black;
max-width: 80%;
padding: 1rem;
position: relative;
color: white;
border-radius: 8px;
}
.main:before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
width: calc(100% + 10px);
height: calc(100% + 10px);
z-index: -1;
border-radius: 12px;
background: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%);
}
</style>
So I have some php outputted text/data that's centered on my page. I've centered it like this with css
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
font-size: 100%;
font-weight: 1;
font-family: 'rationale';
background:black;
}
#data {
position: absolute;
width: 100%; /*makes the element 100%, to center it. */
top: 180px;
right: 0px;
line-height: 40px;
}
I'd like to make the data a truncated output, where after a certain amount of space it cuts the output off and gives a "...".
text-overflow: ellipsis;
If I can't get that to work, I'm okay with a
text-overflow: clip;
Thing is, I can't get it to work with my existing css, I believe because to have the text-overflow work, I have to set the width to a specific size. But, when I do this and remove the width 100% on my data, no longer is it centered nicely.
*By the way the reason for the two css divs before data, is that it keeps my entire page centered regardless of any resizing, which is helpful.
Any thoughts on how to get this working, in this situation? A bit stuck.
Thanks so much.
You can get by using following css approach
.box {
text-align: center;
border: 1px solid red;
width: 500px;
margin: 0 auto;
}
.content {
width: 50%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin: 0 auto;
}
<div class="box">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda adipisci vel, dolore aspernatur iste iure blanditiis quam esse repudiandae aperiam debitis doloribus necessitatibus placeat tempora voluptate totam exercitationem neque quae.
</div>
</div>
I have a fixed side bar on the left and a right content area. Is there an alternative to calculating the content width other than calc()? I wanted a more browser safe method.
.left-sidebar {
width: 160px;
height: 100%;
border-right: 1px solid black;
position: fixed;
top: 72px;
}
.right-content {
position: absolute;
left: 160px;
top: 72px;
width: calc(100% - 160px);
overflow: hidden;
}
I have already done a similar example, which I would like to share. You need to use positioning for this case. This is a case of fixed-fluid:
+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+
Or
+-------+-----------+
| FIXED | FLUUUUUID |
| | FLUUUUUID |
+-------+-----------+
Fixed-Fluid Model. In my snippet, I have demonstrated two kinds of examples. In the first case, the fluid is less in size. And the next has too long content.
Snippet
.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid</div>
</div>
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>
For a better fixed fluid, I have done with the same kind for you:
.main-content {border: 1px solid #999; padding: 5px; position: relative; min-height: 200px; padding-left: 125px;}
.left-sidebar {position: absolute; left: 0; top: 0px; width: 120px; background-color: #eee; height: 100%;}
<div class="main-content">
<div class="left-sidebar"></div>
<div class="right-fluid">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum libero iure facere quam iste, nostrum laborum in, dolorum beatae optio rem explicabo voluptates qui quos eius accusamus! Accusamus blanditiis, et!
</div>
</div>
I am attempting to define a global style for block-quotes on a site I'm working on.
The goal is to style the block-quotes so that they appear similar to the image below. I would like to avoid having to modify the DOM structure.
Using pseudo-classes I would like to display horizontal parallel borders above and below the element but the lines should only be half as wide as the element itself and centered horizontally.
This is as far as I've gotten so far, but the lines are not centered properly.
blockquote {
margin: 0 auto;
position: relative;
text-align: center;
display: table;
font-size: 15px;
}
blockquote:before {
content: '\A';
height: 1px;
width: 40%;
position: absolute;
background: #000;
top: -8px;
}
blockquote:after {
content: '\A';
height: 1px;
width: 40%;
position: absolute;
background: #000;
bottom: -8px;
}
<blockquote>
Neque porro quisquam e porro quisquest qui dolorem ipsum quia dolor sit<br />
est qui dolorem ipsum quia dolor sit amet rem ipsum quia
</blockquote>
If the width is fixed you can use negative margin-left to center element. In your case margin-left: -20%;:
blockquote {
margin: 0 auto;
position: relative;
text-align: center;
display: table;
font-size: 15px;
}
blockquote:before, blockquote:after {
content: '';
position: absolute;
top: 0;
left: 50%; /* <-- put left edge in the middle */
margin-left: -20%; /* <-- shift to the left by half of the width */
width: 40%;
height: 1px;
background: #000;
}
blockquote:after {
top: inherit;
bottom: 0;
}
<blockquote>
Neque porro quisquam e porro quisquest qui dolorem ipsum quia dolor sit<br>
est qui dolorem ipsum quia dolor sit amet rem ipsum quia
</blockquote>
Im trying to left align a menu icon.
The icon is displaying above the menu name but I would like to align in to the left of the menu name.
The CSS I have is:
.icon_name_here:before {
content: '';
width: 24px;
height: 24px;
display: inline-block;
float: left;
background: url('http://url_of_icon_here.com') no-repeat left;}
How / what do I have to do to align the icon to the left of the menu name?
Without posting a relevant code its hard to give a exact answer. I've tried to re-build on the assumption of the CSS you posted and here I've build a demo. See the DEMO .
CSS is like this.
ul{margin:0;padding:0;}
ul li {padding:4px;}
.icon_name_here:before {
content: '';
width: 24px;
height: 24px;
display: block;
float: left;
padding:4px;
background: url('http://lorempixel.com/24/24/') no-repeat 0 0;}
HTML is like it.
<ul>
<li class="icon_name_here">Item1</li>
<li>Item2</li>
</ul>
Updates
you have to add a display:inline-block on <a> tag. Check the uploaded image.
HOME
use display: inline style for both image and Text
You can use this method like a variant. It can be helpfull when you want to use sprites
HTML
<div class="your-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, beatae consequatur dolore doloribus dolorum harum, laboriosam magnam natus, numquam odit officiis quia quisquam suscipit tempora voluptatum. Facere quae quis sed?
</div>
CSS
.your-content {
position: relative;
padding: 0 0 0 10px; /*space between block edge and displaying of your text*/
}
.your-content:after {
content:'';
position: absolute;
top: 0px; /*position of your icon*/
left: 0px; /*position of your icon*/
width: px; /*width of your icon*/
height: px; /*height of your icon*/
background: url(img/your-icon-bg.png) no-repeat;
}