I'm pulling in a tumblr feed using tumblr's code, and using after: to add an image as a separator between posts. I'd like to center the image, but haven't had luck doing so. Since tumblr's generating the content, not me, I don't think I can use span tags, which seems to be the usual answer. Any other ideas?
Page showing feed in use: lumn.net/index.shtml
CSS:
.tumblr_post:after {
content: url(../img/flower.png);
display: block;
position: relative;
margin-top: 42px;
margin-bottom: 24px;
margin-left: auto;
margin-right: auto;
}
Try this:
.tumblr_post:after {
content: url("../img/flower.png");
display: block;
margin: 42px auto 24px;
position: relative;
text-align: center;
width: 100%;
}
While the answer from Zoltan Toth works, it's got a bunch of code that does nothing for the desired effect. This should do the trick and with less code.
.tumblr_post:after {
content: url("../img/flower.png");
display: block;
text-align: center;
}
Here is a working solution on all screens :
.produit-col .img-produit::after{
content: '';
background: url("../img/icone.png") center no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
}
Related
The header position of my website is always aligning to the left side in IE.
But it should be in the middle, in Chrome and Firefox its working without problems.
May i ask for your expertice for this?
Homepage:
CSS Code:
.header {
left: 0;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
max-width: 950px;
height: 141px;
background: url(../img/bg_top.jpg);
background-size: cover;
color: #FFF;
z-index: 100; }
Please try this code for proper solution.
For header class you need to add below CSS
.header {
width: 100%;
}
and for navigation part, you need to update left side margin with below CSS.
.nav .ul .li {
margin-left: 32px;
}
By margin auto and max-width fixed no need to give left and right .It will automatically placed in the center of the page.
So just remove left and right
.header {
top: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
max-width: 950px;
height: 141px;
background: url(../img/bg_top.jpg);
background-size: cover;
color: #FFF;
z-index: 100; }
Sorry for title butchering, but I must admit I have no clue if there are better terms to describe what I'm trying to achieve. Instead I've included an image (they tend to say a thousand words)
What I'm trying to create is the cyan box. I hope the image kind of explains the idea.
SOLVED
Per Kees van Lierop answer I ended up doing the following:
&__label {
#include span-columns(6);
margin-top: 4rem;
background-color: rgba($color-secondary, 0.5);
color: white;
padding: $base-padding;
position: relative;
&::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 100%;
width: 9999px;
height: 100%;
background-color: inherit;
}
}
Giving me a nice result:
You can add a :before pseudo-element which is positioned left to the box, and with the cyan background:
.cyan-box {
position: relative;
&:before {
position: absolute;
top: 0;
right: 100%;
width: 10000000px; // a large amount, long enough to reach the edge
height: 100%;
content: '';
display: block;
background: cyan;
}
}
I'm trying to align some text to the bottom of a loading sequence & I think the best way to get part way there is to use vertical-align. The trouble is that is not working.
I have a replica of the code here.
HTML:
<div id="bg_loader" style="background-image:url(http://www.myhhf.com/images/loading/myhhub_loading_4.gif);"></div>
CSS:
#bg_loader {
width: 100%;
height: 100%;
z-index: 100000000;
background-image: url(../images/loading/myhhub_loading.gif);
background-repeat: no-repeat;
background-position: center;
}
#bg_loader:before {
content: "Thank You for Waiting";
display: inline-block;
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}
I have done extensive research on the matter. From what I can tell it should be working. However, I am using a pseudo element to insert my text & I haven't been able to find much documentation on vertical-align & pseudo in these particular types of cases.
I found this article very useful: Vertical-Align: All You Need To Know
I would like to know why vertical-align is not working. I am also open to better methods of how to place my text below my loading sequence responsively. I am aware of calc(), it is what I am currently using.
CSS:
#bg_loader:before {
content: "Thank You for Waiting";
display: inline-block;
position: absolute;
bottom: calc(60% - 14em);
width: 100%;
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}
Update:
I made some edits to Pangloss's code (marked answer below) to make the coded a little more dynamic:
jsfiddle
#bg_loader:after {
content: "Thank You for Waiting";
display: inline-block;
vertical-align: middle;
width: 100%;
height: 13.86em;
line-height: calc(100% + (13.86em * 2) + 1.575em);
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}
Basically, instead of giving the :after element a fixed padding of icky pixels, I gave it a the same height as the image (in beautiful flowy em values) & a line-height calculated to bring the text to the bottom with a bit of padding.
Now, obviously, this is still going to need some work as this won't be compatible with firefox (Firefox does not support calc() inside the line-height.... I have also noticed issues in iPad. I am currently working to diagnose the issue.
I shall try to keep this post updated. (My progress will be tracked here.)
If you set vertical-align on a inline block element, it actually valign the element itself, rather the content inside, and that element is 100% height, so nothing happens, that is main issue there.
Secondly, the valign position is actually relative to the sibling elements' heights (usually the tallest one). And you there isn't any siblings in your example. The guide you have followed is very good, you can read it again, but more carefully.
Updated code snippet:
#bg_loader:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#bg_loader:after {
content: "Thank You for Waiting";
display: inline-block;
vertical-align: middle;
width: 100%;
padding-top: 270px; /*spacing*/
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}
Full working example:
jsfiddle
html{
height: 100%;
min-height: 100%;
overflow-y: scroll;
}
body{
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
background-color: #F1FAFC;
background-attachment: fixed;
font-size: 80%;
margin: 0;
}
#bg_loader {
width: 100%;
height: 100%;
z-index: 100000000;
background-image: url(../images/loading/myhhub_loading.gif);
background-repeat: no-repeat;
background-position: center;
}
#bg_loader:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#bg_loader:after {
content: "Thank You for Waiting";
display: inline-block;
vertical-align: middle;
width: 100%;
padding-top: 270px;
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}
<div id="bg_loader" style="background-image:url(http://www.myhhf.com/images/loading/myhhub_loading_4.gif);"></div>
using a relative and absolute relationship for parent and pseudo elements is known to give you more control over positioning. I added:
#bg_loader {
position: relative;
}
#bg_loader:before{
text-align: center;
position: absolute;
top: calc(50% + 120px);
}
using calc() is the best way to maintain pos. control in my experience,
and using text-align for simplicity sake. this will also 'flex' well in the mobile realm.
check the updated fiddle
and some lite reading
I have the following code for a bootstrap navbar:
.active:before {
position: absolute;
margin: auto;
z-index: 1;
content: "";
width: 75%;
height: 2px;
background: #e96656;
bottom: 0px;
left: 12.5%;
}
But when i put it on, it displays a line under my list element, but also on the bottom of the screen. How do i fix this?
Use .navbar-nav li.active:before { ... } instead.
So I've set up some div's on my page and while they look fine to me other people log on and the div will be improperly placed. I've looked and looked but can't find out why it's not loading the same for me, so if anyone can help in this it'd be appreciated. The div not showing correctly is
div.head-content
{
display: block;
position: absolute;
top: -64px;
left: 92.7%;
margin-left: -360px;
width: 131px;
height: 46px;
}
The reason for this is either browser comparability or some alignment mistake.
if you are using wrapper make
#wrapper
{
position:relative;
}
and it will do the job.
Unless you show us the entire code this is the most I can help.
#vivek is correct try this
#wrapper
{
position:relative;
width:100%;
height:100%;
}
.head-content
{
display: block;
position: absolute;
top: -64px;
left: 92.7%;
margin-left: -360px;
width: 131px;
height: 46px;
}