Have tried this for half an hour now and I still don't get why such a simple snippet won't have background-color:
#section3 {
z-index: 5;
overflow: hidden;
width: 100%;
height: auto;
background-color: rgba(0, 0, 0, 1);
}
h3 {
position: relative;
text-align: center;
margin-top: 10vh;
font-size: 2em;
}
<span id="section3">
<h3>Unser Anspruch</h3>
</span>
JSFiddle
span is an inline-block element, hence it cannot be given height
Inorder to give it height, u will have to convert it into display:block or display:inline block
But as #LGSon said, h3 must never be put inside a span element
Instead of using span, use a div as div is display:block
by default
#section3 {
z-index: 5;
overflow: hidden;
width: 100%;
height: auto;
background-color: rgba(250,0,0,1);
}
h3{
position: relative;
text-align: center;
margin-top:10vh;
font-size: 2em;
}
<div id="section3">
<h3>Unser Anspruch</h3>
</div>
Related
So I have a div that displays a big title with two lines on its sides that fill the rest of the width.
However now I need to have some text drawn behind this, and because I am drawing the title's bars with background-color they are drawn behind the text.
How can I draw it in such a way that the displayed components from back to front are [bg background-color]->[bg:before]->[title:before/after background-color]->[title]?
Here is the code I have:
#bg
{
width: 100%;
height: 100%;
background-color: silver;
z-index: -1;
}
#bg:before
{
content: 'Background';
position: absolute;
font-size: 3em;
color: white;
user-select: none;
}
#bg *
{
z-index: 0;
}
.title
{
display: flex;
flex-direction: row;
align-items: center;
}
.title:after, .title:before
{
content: '';
width: 50%;
background-color: black;
height: 0.2em;
margin-left: 20px;
margin-right: 20px;
}
.section_titre h1
{
font-size: 1em;
margin: 0px;
}
<div id="bg">
<div class="title">
<h1>Example</h1>
</div>
</div>
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
We use z-index
The of Back to front
[bg background-color] -> [bg:before] -> [title:before/after background-color] -> [title]
So,
Firstly add z-index(1) to bg background-color
#bg{
z-index: 1;
position:relative;// z-index work with other than static position
}
Here,I used position:relative;. Why? Using positioning in z-index?
z-index has no effect on this element since it’s not a positioned element. Try setting its position property to something other than static.
Then add z-index(2) to bg:before
#bg:before {z-index:2;}
Then add z-index(3) to title:before/after background-color
.title:after, .title:before {z-index:3;}
Finally z-index(4) to title
.title{z-index:4;position:relative;}
Working Demo
#bg{
width: 100%;
height: 100%;
background-color: silver;
z-index: 1;
position:relative;
}
#bg:before{
content: 'Background';
position: absolute;
font-size: 3em;
color: white;
user-select: none;
z-index:2;
}
.title{
display: flex;
flex-direction: row;
align-items: center;
z-index:4;
position:relative;
}
.title:after, .title:before{
content: '';
width: 50%;
background-color: black;
height: 0.2em;
margin-left: 20px;
margin-right: 20px;
z-index:3;
}
.section_titre h1{
font-size: 1em;
margin: 0px;
}
<div id="bg">
<div class="title">
<h1>Example</h1>
</div>
</div>
I want to center the text "name" horizontally and vertically inside the div "firstquad". I want the div to have 100% width and 25% height. But the div has much more than 100% width. For the text, I have set the top and left as 50%. The text should be centered and the div should fit the page horizontally but its like this. Any help?
body {
padding: 0%;
margin: 0%;
height: 300%;
width: 100%;
background-color: cornsilk;
}
#firstquad {
position: relative;
width: 100%;
height: 25%;
top: 0%;
text-align: center;
background-color: blue;
}
#name {
position: relative;
top: 50%;
left: 50%;
color: white;
}
<div id="firstquad">
<h1 id="name">ASEF DIAN</h1>
</div>
Both div and h1 are block level elements by themselves.
Block level elements behave in such a way that
they create a line break before and after themselves
they grab as much horizontal space as they can get
Which means that with <div><h1></h1></div> you have a div that grabs as much horizontal space as available (full page width). Inside it, the h1 behaves the same, consuming all horizontal space that the surrounding div allows.
Now with position: relative; left: 50%; you do not change the width of the h1 - you simply change the position, where its rendering starts. Obviously, this leads to the h1 moving partly outside the div. Add borders so you understand:
body { margin: 30px; }
div { border: 2px dotted grey; }
h1 { border: 2px dashed blue; }
<div><h1>Test</h1></div>
Now move the h1 (only slightly, so the effect is visible better):
body { margin: 30px; }
div { border: 2px dotted grey; }
h1 { border: 2px dashed blue; position: relative; left: 20px; }
<div><h1>Test</h1></div>
css:
body {
padding: 0%;
margin: 0%;
height: 300%;
width: 100%;
background-color: cornsilk;
}
#firstquad {
position: relative;
width: 100%;
height: 25%;
top: 0%;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
#name {
color: white;
}
body {
margin: 0%;
height: 100%;
background-color: cornsilk;
}
#firstquad {
height: 25%;
background-color: blue;
text-align: center;
}
#name {
color: white;
margin: 0;
}
<div id="firstquad">
<h1 id="name">ASEF DIAN</h1>
</div>
Is this what you are looking for?
Just change #name to #name {
color: white;
}
body {
padding: 0%;
margin: 0%;
height: 300%;
width: 100%;
background-color: cornsilk;
}
#firstquad {
position: relative;
width: 100%;
height: 50%;
text-align: center;
background-color: blue !important;
}
#name {
color: white;
}
<div id="firstquad">
<h1 id="name">ASEF DIAN</h1>
</div>
What is the best way to have an image on top of a card with content underneath it?
I have tried negative margins but I have had no luck on with this approach.
I attached an image of what the look and feel I am going for:
Here is my attempt on code
.card {
text-decoration: none;
margin-right: 20px;
text-align: center;
}
.card__section {
overflow: hidden;
padding-bottom: 50px;
display: block;
position: relative;
}
.card__inner {
background: black;
padding: calc(35px + 30%) 35px 35px;
color: white;
width: 100%;
display: block;
position: relative;
}
.card__image {
width: 80%;
height: auto;
margin: 0 auto -30%;
position: relative;
z-index: 1;
}
<a href="#" class="card">
<section class="card__section">
<img
class="card__image"
src="http://via.placeholder.com/340x220"
alt=""
/>
<div class="card__inner">
<h1>
This is a static template, there is no bundler or bundling
involved!
</h1>
</div>
</section>
</a>
you need to add below css
.card__section {
overflow: visible;
}
.card__image {
margin-bottom: 20px;
margin-top: -100px;
}
section.card__section {
margin-top: 60px;
}
and put your image in card__inner div
see https://codesandbox.io/s/card-hover-5n0yf?file=/index.html:450-461
hope this helps
You're almost there! There are two things that need to be updated:
1. Remove extra % in .card__image
.card__image {
width: 80%;
height: auto;
margin: 0 auto -30%%; // <-- Remove extra % at the end.
position: relative;
z-index: 1;
}
2. Adjust padding in .card__inner due to negative margin on previous element.
.card__inner {
background: black;
// Update padding to below. Negative margin on previous element needs to be added to the top padding.
padding: calc(35px + 30%) 35px 35px;
color: white;
width: 100%;
display: block;
position: relative;
}
Sandbox: https://codesandbox.io/s/card-hover-wiilf
div.st-header-image {
width: 100%;
background-color: #a7b885;
margin: 0px;
text-align: center;
overflow: hidden;
}
div.st-header-image p.st-description {
margin: 0px;
color: red;
font-size: 40px;
line-height: 40px;
vertical-align: middle;
}
div.st-header-image ::before {
content: " ";
padding-top: 40%;
display: inline-block;
}
<body>
<div class="st-header-image">
<p class="st-description">Header Image</p>
</div>
</body>
I am trying to make a paragraph that needs to be inside div that have ::before style as well so it changes size when I increase or decrease the resolution.
I try using different overflows, different display... Also tried to fix it using calc((100% - 40px) / 2) for positioning top/bottom but it doesn't seem to work either.
div.st-header-image
{
width:100%;
background-color: rgb(167, 184, 133);
margin:0px;
text-align: center;
overflow: hidden;
p.st-description
{
margin:0px;
color:red;
font-size:40px;
line-height: 40px;
vertical-align: middle;
}
::before
{
content: " ";
padding-top: 40%;
display: inline-block;
}
}
p element is inside of div with class st-header-image
Div is responsive but paragraph keeps showing under the div instead in center of it...
What you want to accomplish is to have the div with a responsive space on top and also the paragraph sticking to the middle during it's responsiveness.
I fixed you code without the ::before pseudo element.
This same feature can be attained using a padding for the div and a little positioning.
I shared the code on repl.it here
Here is the CSS you need:
div.st-header-image {
width: 100%;
background-color: #a7b885;
margin: 0px;
text-align: center;
overflow: hidden;
padding-top: 40%;
position: relative;
}
p.st-description {
margin: 0px;
color: red;
font-size: 40px;
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
padding-top: 15%;
}
Looking at your code, i assume you are using CSS Preprocessor SASS. With that you need to append "p" element before "::before" selector
**p::before** {
content: " ";
padding-top: 40%;
display: inline-block;
}
or you can include it using ampersand like this
p.st-description
{
margin:0px;
color:red;
font-size:40px;
line-height: 40px;
vertical-align: middle;
&::before
{
content: " ";
padding-top: 40%;
display: inline-block;
}
}
You should use display flex . its allows always center position.
use this code.
HTML
<body>
<div class="st-header-image">
<p class="st-description">Header Image</p>
</div>
</body>
css
div.st-header-image {
width: 100%;
background-color: #a7b885;
margin: 0px;
text-align: center;
overflow: hidden;
}
div.st-header-image p.st-description {
margin: 0px;
color: red;
font-size: 40px;
line-height: 40px;
display:flex;
display:-webkit-flex;
align-items:center;
-webkit-align-items:center;
justify-content: center;
-webkit-justify-content: center;
}
div.st-header-image ::before {
content: " ";
padding-top: 40%;
display: inline-block;
}
I'm trying to show off the best hairstyles that I've done on a web site.
When you hover over the images, it gives a little information about each of the styles. The hover works fine and shows up, but even though I have the height set as 100% on the information div, it only takes up enough space needed for the text. I'm using display: table to get the text centered vertically "on the image". When I change it to display block, it works fine, but the vertical centering is a must. This is extremely annoying & after 2 hours of fiddling with it I simply cannot get it to work. Please help! http://jarahairandmakeup.tumblr.com/
div.post {
width: 50%;
height: auto;
position: relative;
float: left;
}
div.information {
display: table;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.65);
text-align: center;
z-index: 2;
opacity: 0;
}
div.post:hover .information { opacity: 1 !important; }
div.info {
color: #fff;
display: table-cell;
vertical-align: middle;
font: 11px/1.4 'Gudea';
letter-spacing: .3em;
text-transform: uppercase;
padding: 0 5%;
}
div.info h3 {
font: 100 20px/1 'Gudea';
margin: 0; padding: 0;
letter-spacing: 6px;
}
div.info hr { color: #fff; background: #fff; margin: 20px auto;}
div.image {
float: left;
position: relative;
z-index: 1;
}
div.image img.hairstyle {
width: 100%;
height: 100%;
display: block;
}
<div class="post">
<a href="/ciara">
<div class="information">
<div class="info">
<h3>CURLED UPDO</h3>
<hr />
A romantic style updo with braided accents for prom
</div>
</div>
<div class="image">
<img src="http://static.tumblr.com/ww0u3rz/BRjn5dotq/img_0919.jpg" class="hairstyle">
</div>
</a>
</div>
I'd like to make it so the black background of the information div takes up the entire length of the photo.
use display:block instead of table.
Edit:
Just wrap the info div with a wrapper and have the following css:
display: table;
position: absolute;
height: 100%;
width: 100%;
it works fine: http://cloud.kerim.me/image/2p3W1x011m0I