What am I doing wrong? In Chrome, Firefox, Opera it is cool but not in Safari/Explorer.
Parent is in the bottom right corner, child1 over parent (vertical centered with parent). Parent may have a different size and the child must be still over it.
.cotainer{
position: fixed;
bottom: 0px;
right: 0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
margin: 10px;
}
.parent {
width: 80px;
height:80px;
min-width: 80px;
min-height:80px;
background-color:#8BBF46;
border-radius:50%;
bottom: 0px;
right: 0px;
position: relative;
text-align: center;
cursor: pointer;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
margin: 15px;
order: 1;
order: -webkit-1;
order: -moz-1;
order: -ms-1;
order: -webkit-1;
}
.child1{
position: absolute;
bottom: 100%;
}
.child2{
font-size: 16px;
color: #222;
padding: 0.4em;
display: block;
}
.child2:hover{
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="stylesheets/style-okrojone.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="cotainer">
<div class="parent">
<div class="child1"><img src="https://i.stack.imgur.com/tbnsI.jpg" alt="grafika-dodatkowa"></div>
<i class="child2">parent</i>
</div>
</div>
</body>
</html>
The problem is, that your parent container is a flexbox, but your child1 uses position: absolute. You should not use absolute positioning for elements in a flexbox, as this is not offically supported.
So it looks like chrome is able to render it the "correct" way, but some other browser may not be. The best would be to change your layout, so that you don't use a flexbox and an absolute position anymore.
give your img these additional styles
margin-left: -306px; /* has to be half of the image width */
position: absolute;
bottom: 0;
and your .child1 these additional styles
width: 100%;
left: 0;
hope this works for you...
Related
Image of my current layout
I'm learning flexbox, and I am trying to create a common layout that is found with dashboard kind of templates. These kinds of templates contain a main navigation menu on the left (the sidebar), a top navigation menu for things like user notifications or site themes, and a main content area below the top navigation menu.
The problem that I am facing is that one of my nav list items "B" (it has a white border around it for visibility) is for some unknown reason not being pushed to the bottom of the "purple" div.
I set the height to both the nav and the ul elements to have a height of 100% so that they take up as much vertical space as the body does. So from my understanding adding a margin-top: auto should in fact push B all the way to the bottom.
Is there a fundamental issue with my understanding? And am I on the right track to implementing this kind of theme correctly?
Thank you for your time and for sharing your knowledge!
* {
margin: 0;
padding: 0;
/* box-sizing: border-box; */
/* border: 1px solid black; */
}
body {
display: flex;
height: 100vh;
}
#left {
background-color: aqua;
width: 5rem;
}
.column {
display: flex;
flex-direction: column;
}
.top-left,
.top-right {
padding: 1rem;
background-color: aliceblue;
}
nav {
background-color: red;
height: 100%;
}
ul {
background-color: blueviolet;
height: 100%;
}
nav ul li:last-child {
margin-top: auto;
border: 1px solid white;
}
#right {
background-color: orange;
flex-grow: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./project.css" rel="stylesheet">
</head>
<body>
<div id="left" class="column">
<div class="top-left">
Logo
</div>
<nav>
<ul>
<li>A</li>
<li>B</li>
</ul>
</nav>
</div>
<div id="right" class="column">
<div class="top-right">
Top right
</div>
<div>
Content
</div>
</div>
</body>
</html>
If you want use margin-top:auto try the following:
ul {
background-color: blueviolet;
height: 100%;
display: flex;
flex-direction: column;
}
You can also try in other ways like :
ul {
display: flex;
}
nav ul li:last-child {
align-self: flex-end;
}
And by grid :
ul {
display: grid;
}
nav ul li:last-child {
align-self: flex-end;
}
Your CSS code is correct but you are applying it to wrong element. The ul should get the flex box property so that all li items are displayed as columns. Apply flex property to ul.
* {
margin: 0;
padding: 0;
/* box-sizing: border-box; */
/* border: 1px solid black; */
}
body {
display: flex;
height: 100vh;
}
#left {
background-color: aqua;
width: 5rem;
}
.column {
display: flex;
flex-direction: column;
}
.top-left,
.top-right {
padding: 1rem;
background-color: aliceblue;
}
nav {
background-color: red;
height: 100%;
}
ul {
display: flex;
flex-direction: column;
background-color: blueviolet;
height: 100%;
}
nav ul li:last-child {
margin-top: auto;
border: 1px solid white;
}
#right {
background-color: orange;
flex-grow: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./project.css" rel="stylesheet">
</head>
<body>
<div id="left" class="column">
<div class="top-left">
Logo
</div>
<nav>
<ul>
<li>A</li>
<li>B</li>
</ul>
</nav>
</div>
<div id="right" class="column">
<div class="top-right">
Top right
</div>
<div>
Content
</div>
</div>
</body>
</html>
I managed to get B pushed to the bottom by adding the following CSS properties to the ul element:
display: flex;
flex-direction: column;
I am still not sure why this was needed.
I nearly spend 4 hours trying to make this layout. I tried absolute positioning but obviously, It's not responsive.
Image is 660px and Right container is 860px.
<div className="container">
<div className="image-container">
<img src={image} />
</div>
<div className="right-container">
<div className="insde-some-text">
</div></div>
As far as my knowledge goes, you can only do this by position absolute and then changing the widths at certain breakpoints using media queries.
To add to what Khubaib said, you would want to use position: absolute in your .css file. Also, using scalable quantities for the boxes will help you for the certain screen sizes that you want your site displayed on.
Also, you can use position: relative on blue block and make the attribute top: -100px or so. This blue-block will always be relative to its normal position.
.red-block
{
width: 20rem;
height: 20rem;
background-color: red;
position: absolute;
}
.blue-block
{
width: 20rem;
height: 20rem;
background-color: blue;
position: absolute;
top: 50%;
left: 25%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css">
<title>Document</title>
</head>
<body>
<div class = "red-block">
</div>
<div class = "blue-block">
</div>
</body>
</html>
You could use this for reference. Simple demonstration using flex and margin.
.wrapper {
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 5%;
width: 100%;
}
.right-container {
border: solid red 1px;
border-radius: 5px;
width: 860px;
height: 860px;
background-color: #e1e1e1;
text-align: center;
}
textarea {
height: 80%;
width: -webkit-fill-available;
text-align: center;
background-color: lightblue;
}
.img {
margin-right: -3em;
position: relative;
}
img {
max-width: 100%;
}
<div class="wrapper">
<div class="container">
<div class="img">
<img src="https://dummyimage.com/660x400/000/fff" alt="">
</div>
<div class="right-container">
<textarea placeholder="hello world"></textarea>
<p>foooooooooooooooooooooo</p>
</div>
</div>
</div>
I'm trying to achieve this exact design but don't know how to approach it, whether to use grid or even flex. the content will also be dynamically rendered to I'm avoiding hard coding it
In the code below I posted html and css that you can use for styling similar to the image:
body {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.parentAll {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 80%;
margin: 0 auto;
/* width: 1000px;*/
}
.parentAll:nth-child(2) {
width: 100%;
}
.parentAll div {
width: 220px;
text-align: center;
line-height: 100px;
height: 220px;
font-size: 2rem;
background-color: #135d21;
color: white;
border-radius: 50%;
}
.parentAll div.active {
color: #101000;
background-color: #d79d25;
}
#media only screen and (max-width: 1200px) {
.parentAll div {
width: 170px;
height: 170px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circles</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="parentAll">
<div>div1</div>
<div class="active">div2</div>
<div>div3</div>
<div>div4</div>
</section>
<section class="parentAll">
<div>div5</div>
<div>div6</div>
<div>div7</div>
<div>div8</div>
<div>div9</div>
</section>
<section class="parentAll">
<div>div10</div>
<div>div11</div>
<div>div12</div>
<div>div13</div>
</section>
</body>
</html>
you could play with the "width" and "height" of ".parentAll div" to achieve the size that is suitable for you and in different screen sizes.
for rendering the content dynamically you can use javascript or vue or other options and that is not related to the style of circles.
I know that we can create a responsive horizontal image easily, like that.
.img-horiz-resp {
max-width:100%;
height:auto;
}
But, in my case I need :
a header on top
a content (for now it can be a simple image)
a footer
Then, when resizing the browser vertically, I wish that the 'content' adapt its size.
I have try here : https://codepen.io/cdemez/pen/qBbKVYp
But without success.
By using VH for the height you can get you image responsive (there are other ways too, but this is simple).
VH is used for how much of the available height that should be used, like percent (%). 100VH is the whole screen from top to bottom, regardless of your screen size.
Now I put the image in the css-file (and used it ONLY as background, not background-image), but if you want to use it in your html-file, remember to set your with to 100%.
https://jsfiddle.net/battleaxe/u07cfbog/#&togetherjs=lbxrukCzHi
HTML:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100%;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
header {
height: 6vh;
width: 100%;
background-color: #2e4b49;
display: flex;
justify-content: center;
align-items: center;
}
ul {
width: 60%;
display: flex;
justify-content: space-between;
list-style: none;
color: #fff;
text-transform: uppercase;
}
.content {
height: 84vh;
width: 100%;
background: url("https://cdn.socloze.com/cdn/e_663aa122-718e-a8d3-301d-39f64b8523b0/ebdc5bef01506acc759b39f64b9cc917.jpg")
no-repeat center center;
background-size: contain;
/* You can use background-size: cover; if you want the image to cover your whole free space. */
}
footer {
height: 10vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #2e4b49;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<ul>
<li>This</li>
<li>Is</li>
<li>a</li>
<li>Header</li>
</ul>
</header>
<div class="content"></div>
<footer>
<p>This is a footer</p>
</footer>
</body>
</html>
Things you can look up are VH and VW, how the work and how they can be used. Also, try different background-sizes (cover, contain, and so on).
Good Luck!
Over the years I've tried lot of different techniques, but I still can't find a way, where I could create a footer, that is dynamically changes height, depending on the content and if the site have less content, the footer goes down to the bottom of the page.
I've tried to play with the ::after pseudo element:
footer::after {
content: '';
position: absolute;
background: red; //just test
width: 100%;
height: 99px;
}
And I found a way, where you can do this to look nice, but you need to set the height of the footer. But if you want a real responsive UI, you can not set the height of the footer :)
I hope anyone knows the secret, how to create a dynamic footer.
What you want is sticky footer with fluid height.
In older browsers you'll need some JavaScript.
In modern browser you can use css table display types:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
</style>
</head>
<body class="Frame">
<header class="Row"><h1>Catchy header</h1></header>
<section class="Row Expand"><h2>Awesome content</h2></section>
<footer class="Row"><h3>Sticky footer</h3></footer>
</body>
</html>
I took this example from:
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
EDIT: Now I see you want to expand the footer, not the content. I'm leaving the original for bypassers with sticky footer question as it is more common version.
Try this version instead:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
</style>
</head>
<body class="Frame">
<header class="Row"><h1>Catchy header</h1></header>
<!-- these two line differ from the previous example -->
<section class="Row"><h2>Awesome content</h2></section>
<footer class="Row Expand"><h3>Sticky footer</h3></footer>
</body>
</html>
This can easily be done with CSS2.1 (but not in IE7-). The main trick is the following:
.container {
display: table;
height: 100%;
width: 100% /* mimics `display: block` */
}
.footer {
display: table-footer-group;
}
/* to add padding use the below or wrapper/inner wrapping element combo. */
.footer:before, .footer:after {
padding: 1em;
content: '';
}
In modern browsers, it can also be done with FlexBox, which is probably more appropriate theoretically, but less supported yet.
It is sticky footer, please try this:
HTML
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left Sidebar</div>
<div id="content">Main content</div>
<div id="right">Right sidebar</div>
</div>
<div id="footer">Footer Section</div>
</div>
CSS
/*sticky footer style*/
html,body {
margin: 0;
padding:0;
height: 100%;
}
#container {
min-height:100%;
height: auto !important;
height: 100%; /*for ie6*/
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/* equal to the footer's height*/
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;/*The footer' height*/
background: #6cf;
clear:both;
}
/*=======主体内容部分=======*/
#left {
width: 220px;
float: left;
margin-right: 20px;
background: lime;
}
#content {
background: orange;
float: left;
width: 480px;
margin-right: 20px;
}
#right{
background: green;
float: right;
width: 220px;
}
Pleas view the demo. Other methods, you can click here.
And you can use the CSS3 flexbox Module, Like this:
HTML
<header class="Row"><h1>Catchy header</h1></header>
<section class="Row Expand"><h2>Awesome content</h2></section>
<footer class="Row"><h3>Sticky footer</h3></footer>
CSS
header,section,footer {
display: block;
}
html,body{
margin: 0;
padding: 0;
height: 100%;
}
body {
width: 100%;
display: -moz-box;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-moz-box-direction: normal;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
section {
-moz-box-flex:1;
-webkit-box-flex:1;
-ms-flex:1;
-webkit-flex:1;
flex:1;
background: hsla(250,20%,30%,0.9);
}
header {
background: orange;
}
footer {
background: green;
}
Please view the demo. About the css3 flexbox module.