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;
}
Related
I'm trying to accomplish the following layout, but I'm having trouble with the description box height definition. I'm trying to avoid javascript.
Right now I have both the wrapper and the title bar working as they should, the title and description divs being nested inside the wrapper div:
#wrapper{
position: fixed;
right: 0;
width: calc(100vw - 1.51 * 95vh - 5vh);
top: calc(40px + 2.5vh + 2.5vh);
height: calc(100vh - 40px - 40px);
}
#title{
width: 100%;
height: auto;
top: calc(2.5vh + 40px + 2.5vh + 5vh);
}
What about the description div? Can anyone point me in the right direction?
Thanks!
Flexbox can do that.
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
header {
background: lightblue;
}
.content {
flex: 1;
overflow-y: auto;
background: orange;
}
.spacer {
height: 2000px;
/* for demo purposes */
}
<div class="container">
<header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos tenetur magnam labore laboriosam dolores, fugit ipsum quibusdam, aperiam totam itaque soluta debitis cumque provident repudiandae.</header>
<div class="content">
<div class="spacer"></div>
</div>
</div>
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>
Currently how it looks on page:
The goal: I'm trying to make the orange buttons set at an equal height regardless of the (blurred) text above it.
Relevant SCSS:
.medium-2 {
padding: .5rem;
background-color: white;
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.10);
margin-left: 2.5em;
text-align: center;
float: left;
width: 20%;
height: 450px;
h4 {
font-size: 16px;
border: none;
color: #5d5d5d;
font-family: $font-family-sans-serif;
}
p {
padding-bottom: 10%;
}
.button {
text-align: center;
}
}
Is there a non-hacky way to do this? Right now my only fix is to go into the html.erb file and add in some additional padding-down to the smaller block of p to push the orange button down in place.
Flexbox can easily solve this for you.
.content {
height: 200px;
width: 200px;
border: 1px solid;
display: inline-flex;
flex-direction: column;
margin-right: 10px;
}
p {
margin: 0;
}
button {
margin-top: auto;
width: 200px;
}
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit rerum neque laboriosam perspiciatis sapiente optio ipsam ea magni, accusantium eos quaerat ullam facilis hic quo aperiam a iure porro inventore.</p>
<button>Button</button>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
<button>Button</button>
</div>
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.
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>