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;
}
Related
I am trying to create a footer at the end of this website but for some reason it appears above the products :
And when I change the browser size :
But I want a footer like this :
Here is my code :
HTML :
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'main.css' %}">
</head>
<body style="background-color: #36454F;">
{% for i in p%}
<div class='card'>
<div class="number">{{i.Number}}</div>
<img src="{{i.image}}"></img>
<p id="id">{{i.description}}</p>
<a href="{{i.buy}}" target='_blank' rel='noopener noreferrer'>
<button><span class="price"> ${{i.price}}</span> buy</button>
</a>
</div>
{%endfor%}
<div class="footer">
<h3>hello</h3>
</div>
</body>
</html>
CSS :
.card {
max-width: 400px;
margin: 0auto;
text-align: center;
font-family: arial;
border-style: solid;
border-width: 6px;
position: relative;
top: 611px;
margin-bottom: 33px;
margin-right: 33px;
justify-content: center;
float: left;
}
.footer {
position: relative;
height: 130px;
clear: both;
background-color: red;
}
.card img {
height: 400px;
width: 400px;
vertical-align: middle;
}
.price {
background-color: #f44336;
font-size:22px;
border-radius: 3px;
position: absolute;
bottom: 0px;
right: 0px;
padding: 3px;
}
.card button {
border: none;
color: white;
background-color: #000;
position: relative ;
cursor: pointer;
width: 100%;
height: 100px;
font-size: 44px;
align-items: center;
}
.card button:hover {
opacity: .5;
background-color: #330;
}
#id {
background-color: palevioletred;
color: white;
margin: 0;
font-size: 17px;
}
.number {
width: 50px;
height: 50px;
background-color: #330;
color: yellow;
border-radius: 50%;
position: absolute;
top: -22px;
right: -22px;
justify-content: center;
align-items: center;
display: flex;
font-size: 22px;
}
#media (max-width: 1864px) {
.card {
max-width: 300px;
}
.price {
font-size:20px;
}
.card img {
height: 300px;
width: 300px;
}
}
I tried to set a negative bottom property to push it to the end :
.footer {
position: relative;
bottom: -674px;
height: 130px;
clear: both;
background-color: red;
}
But it didn't help. How can i solve the problem?
To set the footer to the bottom of the page, you need to use this CSS:
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf; /* Set your own background */
}
If you want it to stay at the bottom of the page and stretch along the bottom, I'd do something like this with the CSS
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: (whatever you want);
color: (color of the text, whatever you want);
text-align: center; /*unless you want the text aligned differently*/
}
Also look up how to use the grid-container if you want the items of the footer in rows like the example you gave.
You need the footer tag to do its job!
Read more about the footer tag here:
https://www.geeksforgeeks.org/html5-footer-tag/
Reference: https://code-boxx.com/keep-html-footers-at-bottom/
The easy ways to keep a footer at the bottom with modern CSS are:
Use footer { position: fixed} or footer { position: sticky } to
keep the at the bottom.
Use a flexbox layout that "stretches" the body section, keep the
footer at the bottom.
body{ display: flex; flex-direction: column; }
main{ flex-grow: 1; }
Lastly, use a grid layout to achieve the same "stretch body
section".
<header>HEAD</header> <main>MAIN</main> <footer>FOOT</footer>
html, body { height: 100%;}
body { disply: grid; grid-template-rows: auto 1fr auto; }
I just dont get it why margin-bottom in main h2 element doesnt have impact on its "::after" element, because these are defined as block elements and one margin should be enough in order to have distance between them. Even though "h2::after" element has 0 margin of top and bottom, I think because of bottom margin of h2 it should provide 40px of distance but I dont know why they just stick
<html lang='en>'>
<body>
<h2>Main h2 heading</h2>
<style>
h2 {
content: "main h2";
font-size: 180%;
margin-bottom: 40px;
word-spacing: 2px;
text-align: center;
color: #000;
}
h2::after {
display: block;
background-color: #4cd137;
height: 5px;
width: 250px;
content: " ";
margin: 0 auto;
}
</style>
</body>
It considers h2 and h2::after as a single element. So adding margin-bottom to h2 won't make any difference. Instead, you can add margin-top to the after element to get some spacing between it.
h2 {
content: "main h2";
font-size: 180%;
margin-bottom: 40px;
word-spacing: 2px;
text-align: center;
color: #000;
}
h2::after {
display: block;
background-color: #4cd137;
height: 5px;
width: 250px;
content: " ";
margin: 0 auto;
margin-top:40px;
}
<h2>Main h2 heading</h2>
Margin properties are used to create space around elements, outside of any defined borders not for inner elements... check below 2 methods for you solutions
h2, h3 {
content: "main h2";
font-size: 180%;
padding-bottom: 40px;
word-spacing: 2px;
text-align: center;
color: #000;
position: relative;
display: table;
margin:auto;
}
h2::after {
display: block;
background-color: #4cd137;
height: 5px;
width: 100%;
content: " ";
margin: 0 auto;
position: absolute;
bottom: 0;
}
h3::after {
display: block;
background-color: #4cd137;
height: 5px;
width: 100%;
content: " ";
margin: 40px auto 0;
}
p{text-align: center;}
<p>Done with Position</p>
<h2>Main h2 heading</h2>
<br><br><br><br>
<p>Done with Margin</p>
<h3>Main h3 heading</h3>
Hope it works :)
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>
This is my HTML code:
<img class="centeredimage" src="BLACK.jpg"><br><br>
<p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br>
<span class = "a2017">Welcome to 2017</span><br><br>
<span class="coming_soon">Coming Soon</span></p><br><br>
This is my CSS code:
.centeredimage {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
}
.new{
color:#FFFFFF;
}
.main_text{
font-size:20px;
letter-spacing: 8px;
}
.a2017{
font-size:15px ;
letter-spacing:2px ;
}
.coming_soon{
letter-spacing: 1px;
}
The image is aligned at center of the screen but the text instead of getting displayed after the image is displayed coinciding with the image.How do I make it come after the image so that both are aligned at middle of the screen at center?
Try this
.centeredimage {
display : block;
width: 200px;
margin: auto;
...
I use this code to center things in the middle of the screen, for example, a loader. It can have multiple parts, it doesn't matter. You just put all the parts into one div. I used to use the "margin" trick, and still do here and there, but these days I'm using the table/tablecell thing to get the job done. It works everywhere, phones etc. (note I don't deal with 10-year-old browsers). Below is some code straight from an instructional sample:
<style>
.app_style {
width: 100%;
height: 100%;
display: table;
}
.loader_style {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.loader_icon_style {
border: 2px solid lightgray;
border-radius: 5px 5px 5px 5px;
}
.loader_bar_padding {
padding-top: 10px;
}
.loader_blurb {
width: inherit;
text-align: center;
font-size: 14px;
font-weight: bold;
color: yellow;
font-style: italic;
}
</style>
</head>
<body>
<sample-app class="app_style">
<div class="loader_style">
<img class="loader_icon_style" src="assets/images/r2-d2.jpg" />
<div class="loader_blurb loader_bar_padding">
May the force be with you...
</div>
<img class="loader_bar_padding" src="assets/images/loader-bar.gif" />
</div>
</sample-app>
</body>
If you want center the image and the text, not align only the image otherwise the text follow an other logic on the DOM, mostly if you use the absolute position for the image and not for the text.
You can use a wrapper div aligned to the center and put all content in it.
body {
background-color:#ff00ff;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -100px;
width: 200px;
height: 300px;
}
.your_image {
width: 200px;
height: 200px;
}
.new {
color: #FFFFFF;
}
.main_text {
font-size: 20px;
letter-spacing: 8px;
}
.a2017 {
font-size: 15px;
letter-spacing: 2px;
}
.coming_soon {
letter-spacing: 1px;
}
<div class="wrapper">
<img class="your_image" src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png"><br><br>
<p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br>
<span class="a2017">Welcome to 2017</span><br><br>
<span class="coming_soon">Coming Soon</span></p><br><br>
</div>
I prefer to use Flexbox. It simplifies a lot of the coding you need to do.
In your situation, just wrap your HTMl code in a div and make this your CSS:
div{
display: flex;
flex-direction: column;
justify-content: center;
}
.centeredimage {
display: block;
margin: 0 auto;
width: 200px;
height: 200px;
}
I am currently working on a project in which I am using some divs, and the :after pseudo-element. I would like to be able to center the :after text inside the div. Can anybody help me out here?
Example of problem: http://jsfiddle.net/JohnFish/7ra5t/
Another way to do it:
.example { ... position: relative; }
.example:after { ...
position: absolute;
top: 50%; margin-top: -{50% of the element's height};
left: 50%; margin-left: -{50% of the element's width};
}
I think you just have to add a text-align: center in your CSS:
.example {
background: black;
height: 250px;
width: 500px;
text-align: center
}
.example:after {
content: "+";
color: white;
font-size: 100px;
}
If you also want vertical alignment:
.example {
background: black;
height: 250px;
width: 500px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.example:after {
content: "+";
color: white;
font-size: 100px;
}
You can also try with flex
.example {
display: flex;
justify-content: center;
}