I want to exactly add image under title as linked image below using pure css. Similar image where can I find it?
and also how to position border ?
There is space between border and it is moved little down.
used css for img tag for second image:
img.profile {
display: flex;
margin: 0 auto;
justify-content: center;
width: 8rem;
height: 8rem;
border-width: 4px;
border-radius: .75rem;
border-color: rgba(156,163,175,var(--tw-border-opacity));
background-color: rgba(229,231,235,var(--tw-bg-opacity));
}
With pure HTML / CSS, i'll do it like so.
For the image, use flex to get the alignement you want. For the border, use box-shadow without any blur to control the offset of the border and border-radius to get the round corners.
HTML
<div class="container">
<h1>About us</h1>
<img src="https://cdn.pixabay.com/photo/2020/06/19/17/41/divider-5318234_1280.png">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sem ut orci varius rhoncus. Sed eu pulvinar enim. Vivamus egestas ac nisi quis semper. Nam pulvinar erat in rutrum scelerisque. Maecenas ac lectus ultricies, pretium mi in, bibendum urna. Aenean tempus aliquam leo ac dignissim. Maecenas sed porta velit. Cras ut nunc sit amet erat sagittis convallis vitae quis ante.
</p>
</div>
CSS
.container {
/* Flex properties */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* Border properties */
box-shadow: -5px 5px 0px black; /* x-offset | y-offset | blur to 0 | color */
border-radius: 10px; /* border-radius to get a curvy border */
width: 500px;
padding: 10px;
}
.container > h1 {
margin-bottom: 0px; /* Remove the space between title and img */
}
.container > img {
max-width: 70%;
height: 50px;
}
And the working fiddle
Related
I created my custom timeline using flexbox, but I have problem with smaller screens. When you start stretching the window, flex items starts overlap. Could you please help me add some space but dont break the border (which is creating the timeline)?
:root{
--image-url: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80";
}
*,
*::before,
*::after{
margin : 0;
padding: 0;
box-sizing: inherit;
}
body{
box-sizing: content-box;
font-size: 62.5%;
font-family: 'Zen Kaku Gothic Antique', sans-serif;
font-family: 'Zen Kaku Gothic New', sans-serif;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height : 100vh;
background-image:
linear-gradient(
to right top,
rgba(13, 13, 13, .75),
rgba(13, 13, 13, 1)
),
url("https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.timeline-row{
font-size: 1.2rem;
display: flex;
min-width: 25%;
min-height: 5rem;
color: #fff;
}
.timeline-item{
flex:1;
display: flex;
align-items: center;
&--date{
border-right: 1px solid currentColor;
justify-content: flex-end;
}
&--content{
border-left: 1px solid currentColor;
position: relative;
justify-content: center;
&::before{
content: "";
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color:currentColor;
position: absolute;
top: 50%;
left: -.55rem;
transform: translateY(-50%);
}
}
}
.row-content{
margin: .5rem 2rem;
padding: .75rem;
background-color: rgba(67, 85, 115, .35);
border-radius: 15px;
}
<link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght#300&family=Zen+Kaku+Gothic+New:wght#300;400;500&display=swap" rel="stylesheet">
<div class="container">
<div class="timeline-row">
<div class="timeline-item timeline-item--date">
<div class="row-content">2019</div>
</div>
<div class="timeline-item timeline-item--content">
<div class="row-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel posuere magna. Morbi molestie odio eget quam rutrum, non volutpat dolor pharetra. Aliquam pretium condimentum est eu fermentum. Nulla dapibus tellus in leo aliquet aliquet. Vestibulum tempor est in.</div>
</div>
</div>
<div class="timeline-row">
<div class="timeline-item timeline-item--date">
<div class="row-content">2020</div>
</div>
<div class="timeline-item timeline-item--content">
<div class="row-content">Quisque ut justo est. Donec pulvinar viverra neque a cursus. Etiam a nunc sed dui posuere facilisis. Phasellus ut est rutrum, dignissim lorem ac, maximus mauris. Phasellus consequat lorem non urna luctus, in efficitur justo sagittis. Fusce iaculis congue rutrum. Sed vehicula.</div>
</div>
</div>
<div class="timeline-row">
<div class="timeline-item timeline-item--date">
<div class="row-content">2021</div>
</div>
<div class="timeline-item timeline-item--content">
<div class="row-content">Nunc et volutpat felis, ac rutrum turpis. Nullam id sollicitudin eros. Mauris dictum nibh in lorem pharetra, id feugiat tortor tempus. Integer gravida erat nec odio lobortis fringilla. Duis at auctor tortor, eget consectetur risus. Vivamus sit amet hendrerit metus, at rutrum magna.</div>
</div>
</div>
</div>
You have set the height of your flex container to 100vh.
flexbox just does what you ask, squashing everything to fit in one window.
Just remove height: 100vh; from .container
I'm in a situation where a certain element can have very short or very long content without me having any way to know which is going to be the case.
The way I would like to handle this is that if the element is shorter than its parent, I'd like the element to be centered horizontally and vertically within the parent; if the element is longer, I'd like it to be naturally positioned within the parent and to be able to scroll the parent (not the element itself) to see the content out of view. Here's a quick image I made to illustrate the case:
Is there anyway that I can do this with CSS only? I'll take any solution that is compatible with IE11.
What I tried
So far I tried centering the element within the parent with flexbox and adding overflow: scroll to the parent, but when the content is longer than the parent it still gets centered and gets cut both on top and at the bottom...
#parent {
display: flex;
align-items: center;
justify-content: center;
overflow: scroll;
}
I think this is what you are looking for:
* { box-sizing: border-box; } body { margin: 0; background: #ddd; }
.parent {
display: flex;
flex-wrap:wrap;
height: 80vh;
max-height: 100vh;
width: 40%;
margin: 5%;
background: white;
float: left;
padding: 15px;
overflow: auto;
align-items:center;
justify-content: center; /*Horizontally centers child in this case*/
}
.child {
background: #eee;
padding: 15px;
max-height: 100%;
overflow: auto;
/* width: 100%; you could give full width as well */
}
<div class="parent">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
</div>
</div>
<div class="parent">
<div class="child">
<p>Dummy text</p>
</div>
</div>
Update
What you needed to solve?
Ans: You needed was to give your child maximum height limit, max-height:100%, so that it won't get cut out at top and bottom.
Also you need to give the child overflow: auto no need for parent. Not overflow: scroll, as we don't need scroll tracks for child that doesn't need scrolls.
Codepen link to play around
Hope this helped you!
Feel free to ask, if any queries. :)
I seem to have found a solution myself inspired by this article:
#parent {
overflow-y: auto;
text-align: center;
white-space: nowrap;
// Any padding-bottom here won't work in IE11
}
#parent:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
#child {
text-align: left;
white-space: normal;
display: inline-block;
vertical-align: middle;
// Any padding-bottom here WILL work, even in IE11
}
This works just like intended, centering the child element within the parent when it's shorter, and causing the parent element to scroll if the child is longer. This is a plus, since if the child is narrower than the parent the scrollbar will still appear on the side of the parent.
Haven't tested it yet in all browsers, but I don't see why it wouldn't work since the 2011 article I linked above mentions the technique is supported by all browsers, including IE8+. I will test it though and update the answer in case I discover it's incompatible with any.
+++ UPDATE +++
I've tested this technique in Chrome, Firefox, Safari, IE11 and Ms Edge. It works everywhere. Like it was pointed out in the comments below, if you add any padding-bottom on the parent in IE11 it won't be rendered, but that can easily be fixed by transfering it to the child element if you can do that. Thankfully, I could!
i know this is a late reply but IMHO inline-block solution is a bit dirty
so here is my solution using flex box + extra div wrapper
https://jsfiddle.net/good/gyst4ufm
*{
box-sizing: border-box;
font-family: sans-serif;
font-size: 18px;
line-height: 1.4em;
color: #333;
}
.box{
resize: both; /* make boxes resizable */
overflow: hidden;
border-radius: 4px;
}
.container{
width: 500px;
height: 500px;
background: #333;
border: solid #333 1px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.wrapper{
width: 100%;
max-height: 100%;
overflow-y: auto;
}
.content{
width: 400px;
height: 400px;
padding: 20px;
background: #fff;
overflow: hidden;
margin: 0 auto;
max-width: 90%;
}
<div class="box container">
<div class="wrapper">
<div class="box content">
<p> to test layout you can resize both
content box (white area) and its container (black area)</p>
<p>- maximum content width is 90% of container</p>
<p>- if the content is smaller than conainert, it is centered horizontally and verticaly</p>
<p>- if the content is higher than container, use vertical scroll on container</p>
</div>
</div>
</div>
I'm having a problem with a flexbox layout inside an iframe. The layout works fine in a normal view, but once placed inside an iframe (like here in this snippet or codepen etc.), the flex children of the second flex column doesn't have equal heights anymore.
I can't really show you the difference, because all snippets are automatically placed in iframes...
*,
*::before,
*::after {
box-sizing: border-box;
}
.b-block {
margin: 0 auto;
max-width: 1000px;
padding: 10px;
}
.b-block__wrap {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 -10px;
}
.b-block__item,
.b-block__item--large {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
display: flex;
flex-direction: column;
padding: 0 10px;
margin-bottom: 10px;
justify-content: space-between;
}
#media (min-width: 992px) {
.b-block__item,
.b-block__item--large {
flex: 0 0 50%;
max-width: 50%;
margin-bottom: 0;
}
}
.b-article,
.b-article--large {
display: flex;
flex: 1; /* works in a div but not in an iframe */
/* flex: 0 1 auto; // works but without equal heights */
padding: 10px;
font-size: 16px;
background: #eee;
}
.b-article:not(:last-child) {
margin-bottom: 10px;
}
.b-article--large {
min-height: 300px;
}
<section class="b-block">
<div class="b-block__wrap">
<div class="b-block__item--large">
<article class="b-article--large">Vivamus erat sit habitasse nisi quam penatibus proin nascetur hac volutpat porttitor ad condimentum mauris aenean fames lectus tincidunt inceptos
</article>
</div>
<div class="b-block__item">
<article class="b-article">Convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna.
</article>
<article class="b-article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
</article>
<article class="b-article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.
</article>
</div>
</div>
</section>
Is there any workaround for this?
I already tried:
• Wrapping the b-article in the second b-block__item in an extra div
• Setting the flex property of the b-article in the second b-block__item to flex: 0 1 33%;
but no luck yet.
Is this even possible in an iframe?
Thanks!
I want to be able to center most anything vertically on a screen:
For example
Forms
Buttons
Is this possible to do with some custom css class?
Right now I am using the code below. It works but is not very good as I choose at which percentage the content will start. So I need one of these for every page and if content becomes longer I have to modify the percentage.
.loginForm .scroll {
height: 100%;
}
.loginForm .loginForm-wrapper {
position: absolute;
top: 30%;
left: 0;
right: 0;
}
There are different ways to center content vertically. I'm often using the way to transform them. Let's say you got a container in which another element should be centered.
.container {
position: relative; /* required */
height: 150px;
width: 100px;
background: #efefef;
text-align: center;
border-radius: 4px;
}
.center-me {
display: block;
font-family: Consolas;
font-size: 12px;
padding: 5px 10px;
background: #000;
color: #fff;
border-radius: 4px;
position: absolute; /* required */
top: 50%; /* required */
left: 50%;
transform:
translateY(-50%) /* required */
translateX(-50%);
}
<div class="container">
<div class="center-me">
center
</div>
</div>
You could do something with a little bit of JS, though I think #Jan Unld's answer is sufficient.
calcMiddle = function () {
var middleObject = document.querySelector('#middle'),
middleHeight = middleObject.clientHeight / 2,
middleWindow = window.innerHeight / 2,
middleMargin = middleWindow - middleHeight;
middleObject.style.marginTop = middleMargin + "px";
};
calcMiddle();
body {
margin: 0;
}
#middle {
padding: 10px;
background: #abcabc;
}
<body onresize="calcMiddle();">
<div id="middle">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a arcu sed neque volutpat lacinia mattis vitae nulla. Mauris in rutrum dui. Nullam nec dui rhoncus diam aliquam molestie. Nullam volutpat odio dignissim lorem ornare luctus. Aenean iaculis lectus venenatis aliquam porttitor. Etiam facilisis libero nec risus blandit aliquam. Donec sed ipsum nibh. Vestibulum sit amet accumsan ipsum. Maecenas viverra auctor orci, et scelerisque enim congue et.</p>
</div>
</body>
Example:
http://jsfiddle.net/link2twenty/y7h60kr7/
I have this HTML code:
<span class="left">
<img class="avatar" src="image.jpg" />
</span>
<span class="right">
Lorem ipsum dolor sit amet, nunc euismod nisl nam euismod, quis maecenas blandit ac, neque sed ut pulvinar, lectus sagittis sapien mauris per risus vel. Ligula sapien sed morbi cras tellus commodo. Rutrum mattis accumsan, hac sed praesent, neque tortor neque, commodo mauris sagittis turpis, faucibus sed ultrices tempor interdum. Lobortis assumenda nisl, posuere cras sit risus egestas bibendum nec, magna in, sed mattis pharetra felis nulla vitae aptent, in semper et...
</span>
I would that the two blocks are positioned on the same line. I use this CSS:
.right {
width: 250px;
background-color: orange;
float: left;
}
.left {
width: 100px;
background-color: orange;
float: left;
}
It's good, but I want that the right side (the text) is not large 250px, but 100%. If I put width:100%, the block is not on the same line.
How can I do this?
Here is my solution to your problem - you set the width on the left item, and the margin on the right item. The left item is floated, the right item isn't. I have also made the display of the right item "block".
.right {
display: block;
margin-left: 100px;
width: auto;
background-color: orange;
}
.left {
width: 100px;
background-color: orange;
float: left;
}
For floated elements, if you want to use percentage widths, you should calculate the width of each:
.right {
width: 50%; /*or 45%*/
background-color: orange;
float: left;
}
.left {
width: 50%; /*or 55%*/
background-color: orange;
float: left;
}
Then they will display on the same line.
Also, if there are margins or paddings, you should take this into consideration when calculating the widths as if you set both to 50% but there is a margin of 10px, it will still force the next element onto a new line.
To make the .right element calculate the width, you need to set its width to width: auto; and counter-margin the .left element: margin-left; 100px; (where 100px is equal to the .left elemtents width).
Example for you here.
delete the width for the right class and the float. This will make the right class to get the remaining width of the parent element.
.right {
background-color: orange;
}
.left {
width:250px;
background-color: orange;
float:left;
}
example http://jsbin.com/ayaha3