When I press the "push me" button, the green cover is down to the third item. However, there is still space after scrolling down. I need to cover the entire height of div (it is better to use the pseudo-element "after"). How I can do it?
.cover:after {
padding: 0;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
z-index: 99;
height: 100%;
width: 100%;
content: "Cover, cover, cover";
background: green url("src/img.svg") no-repeat 50% 33%;
font-weight: 600;
font-size: 18px;
text-align: center;
color: white;
}
Full code: https://codepen.io/Roman-H91/pen/eYroQPq
You can add the property overflow:clip to keep all the height
.cover {
overflow:clip;
}
Related
I want to set a position of my element to the right within a div element. float:right doesn't work, so I try margin-left:auto, but it looks beautiful if I have a single element only. How can I achieve that for multiple elements?
My CSS:
.toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
background-color: #1976d2;
color: white;
font-weight: 600;
}
.toolbar a {
/*float:right;*/
margin-left: auto;
}
You cannot use display:flex with float becuase it is against rules - by default floats are ignored in flex containers. You should either use floats or flex for your layout, and I hardly recommend flex.
I advice for further reading: flex guid
To adjust your code replace you styles with:
.toolbar {
position: absolute;
top: 100;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
justify-content: flex-end;
background-color: #1976d2;
color: white;
font-weight: 600;
}
Nevertheless if you want your code to work with floats you will have to remove align-items which is flex property and remove display:flex, that will make your code to work - items will float right.
I had a webpage that I split into sections, each section with it's own content. Unfortunately i needed it to be responsive, so i gave the body element a display: flex style. sect-1 and sect-2 were children of the body, so they are stacking, as expected. The issue is the content inside the flex items was being positioned absolutely, however now it is no longer being positioned from the sect-1 and sect-2, and now the whole page. Why does absolute positioning ignore flex item parents, and what can i do to position the children of the flex objects?
The HTML :
<body>
<div id="sect-1">
<h2 id="quote">I AM A WEB DESIGNER_</h2>
</div>
</body>
The container css :
body {
display: flex;
flex-direction: column;
overflow-x: hidden;
}
The first flex object :
#sect-1 {
background: none;
width: 100vw;
height: 100vh;
left: 0vw;
z-index: 98;
}
And the object I need positioning inside the flex object (not container) :
#quote {
align-content: left;
font-family: Courier New;
color: black;
font-size: 25px;
letter-spacing: 5px;
line-height: 0px;
width: 500px;
position: absolute;
top: calc(50vh - 12.5px);
left: calc(50vw - 190px);
}
For the quote to position itself inside the flex item sect-1, the sect-1 need to have a position other than static, normally relative is what one use.
body {
display: flex;
flex-direction: column;
overflow-x: hidden;
}
#sect-1 {
position: relative; /* added */
background: none;
width: 100vw;
height: 100vh;
left: 0vw;
z-index: 98;
}
#quote {
align-content: left;
font-family: Courier New;
color: black;
font-size: 25px;
letter-spacing: 5px;
line-height: 0px;
width: 500px;
position: absolute;
top: calc(50vh - 12.5px);
left: calc(50vw - 190px);
}
<body>
<div id="sect-1">
<h2 id="quote">I AM A WEB DESIGNER_</h2>
</div>
</body>
I've got a portfolio-like page, displaying images in a grid with a title on top of it. The title is set to inline-block and has a background color, width depends on the length on the title.
Whenever a title becomes too long to fit within the parent article it wraps to a second row; no problem.
But why does the auto width result in 100% now?
.content{
background: pink;
width: 33%;
float: left;
height: 200px;
overflow: hidden;
position: relative;
}
.title{
position: absolute;
bottom: 10%;
left: 0;
text-align: center;
}
h2{
display: inline-block;
font-family: Arial;
background: rgba(255,255,255,0.6);
}
Example:
https://jsfiddle.net/6qtw7duf/
Ok..let's explain this in simple term
Is it possible to align a rotated text to center?
For example here:
ill try using:
.accordion div.image .title {
bottom: -15px;
color: #fff;
display: block;
font-size: 16px;
max-height: 200px;
position: absolute;
transform: rotate(270deg);
transform-origin: 0 0 0;
white-space: normal;
left: 20px; // this is only the way to center it from left corner }
But when the text has a line break, i have no chance to align it to the center.
Any ideas?
Here is one approach (proof of concept) that involves using the translate function of the transform property and display: table-cell.
First, use display: inline-block on the parent container to get a shrink-to-fit to the image size (or else specify fixed dimensions if you can).
You then define an absolutely positioned container to contain the label. I fixed the width and height (this makes things easier) and then rotated and translated the box to center it within the parent.
Finally, I used vertical-align: middle in the nested table-cell container to allow multiple lines of text to remain centered.
If you are adding this to a pre-existing HTML/CSS structure (accordion?), you need to make the CSS very specific so that you don't break other CSS styling.
You may still need to make some adjustments depending on how you want the bottom of the label to be positioned and so on.
.image {
position: relative;
border: 1px dashed blue;
display: inline-block;
}
.image img {
display: block;
}
div.cell {
display: table-cell;
text-align: left;
vertical-align: middle;
}
div.image .title {
font-size: 16px;
white-space: normal;
color: #fff;
display: table;
border: 1px dotted blue;
position: absolute;
bottom: 0%;
left: 0%;
transform: rotate(270deg) translate(50%,50%);
transform-origin: 50% 50% 0;
width: 300px;
height: 100px;
margin-left: -50px;
}
<div class="image">
<img src="http://www.placehold.it/300x400">
<div class="title"><div class="cell">The title text
that can span two lines or more in a box<div></div>
</div>
I wish to center my font icon at the bottom of the div. I know that I could have it positioned absolute to the background and use bottom:0 but I can't get margin:auto to center it either side.
Here is my code:
<section>
<p><i class="fa fa fa-arrow-circle-o-down"></i></p>
</section>
section {
background: url("../img/background.jpg") no-repeat center center fixed;
background-size: 100%;
background-color: black;
height: 100%;
position: relative;
}
section p i {
position: absolute;
color: white;
font-size: 15em;
bottom:0
}
Your icon is a text, so you can use the property text-align: center;.
A jsfiddle sample. I made some modifications in the code.
html
<section>
<p><i>☺</i></p>
</section>
css
section {
background: black url("http://placehold.it/420x150") no-repeat center center; // you can put the background-color here by the way
background-size: 100%;
height: 150px;
width: 100%;
position: relative;
text-align: center; // magic stuff here !
}
section p i {
position: absolute;
color: red;
font-size: 2em;
bottom: 0; // you forget a ';' here
}
Is this what you are looking for ?