I have this HTML using the new flexbox:
<html>
<head>
<style>
body {
margin: 0
}
div#outer-container {
height: 100%;
}
div#inner-container {
display: flex;
height: 100%;
flex-direction: row;
}
div #left {flex: 1; background-color: yellow;}
div #center {flex: 5; background-color: #fdd;}
div #right {flex: 1; background-color: pink;}
</style>
</head>
<body>
<div id="outer-container">
<div>HEADER</div>
<div id="inner-container">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
<div>FOOTER</div>
</div>
</body>
</html>
It expands horizontally fine, but vertically it goes over 100% height because of the header/footer DIVs. How would you get that not to happen?
As it turns out - set the height to 80% and make the header/footer height 5%.
Or you could set the outer-container to display: flex, and get a vertical flexbox container with a horizontal flex box container inside. Then your footer and header can grow and shrink more dynamically than with a fixed height.
Tested in Chrome.
<head>
<style>
body {
margin: 0
}
div#outer-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: ;
}
div#inner-container {
display: flex;
flex-direction: row;
flex-grow: 2;
}
div #left {flex: 1; background-color: yellow;}
div #center {flex: 5; background-color: #fdd;}
div #right {flex: 1; background-color: pink;}
</style>
</head>
<body>
<div id="outer-container">
<div>HEADER</div>
<div id="inner-container">
<div id="left">tet</div>
<div id="center">tet</div>
<div id="right">test</div>
</div>
<div>FOOTEfeawR</div>
</div>
</body>
</html>
Related
I am using node.js and its framework express to create a movie image gallery. A foreach loop is used to display data onto the page. The image gallery should display 4 images across in each row. For some apparent reason, the layout grid is broken and images are being duplicated when displayed on page. How can I create a grid layout for my image gallery with no duplicated data?
index.ejs
<!-- Photo Grid -->
<div class="row-image">
<% movies.forEach(function(movies) { %>
<div class="column">
<img src="<%= movies.image %>" style="width:100%">
<div class="desc">
<%= movies.name %>
</div>
</div>
<div class="column">
<img src="<%= movies.image %>" style="width:100%">
<div class="desc"><%= movies.name %></div>
</div>
</div>
<% } ); %>
main.css
* {
box-sizing: border-box;
}
.row-image {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 14px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px 20px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
border-radius: 9px;
}
.desc a:hover {
text-decoration: none;
color: #b3b3b3;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 50%;
}
}
it has been some time since I made my last webpage and it seems that I have forgot much. I cant resolve why the last item from the #menu ul goes to the next line while the #menu div is wide enough to contain all the list elements plus the logo div, it has margin and padding set to 0.
I used to do menus in such way before but have probably forgot something.
I searched for the solution however I cant make the things working right.
The question is..why arent the li items in one line? Whats causing the 850 px overlap when they all together should be 802px wide?
html, body {margin:0; padding:0}
body {background-image: url("./gfx/background.png"); background-position: 50%; background-repeat: no-repeat;text-align:center; background-color:#fff; font-family:Arial, Helvetica;width:100%}
.main-wrap {width:1000px; margin:0 auto}
#header {height:150px;width:1000px}
#logo {
display: block;
width: 150px;
height: 150px;
overflow: hidden;
color: #424242;
float:left;
margin: 0;
padding:0;
}
#logo span {
background: url("./gfx/logo-small.png");
z-index: 5;
display: block;
width: 150px;
height: 150px;
}
.wrap::before {
content: " ";
display: table;
}
.wrap::after{
clear: both;
content: " ";
display: table;
}
/*menu*/
#menu {width:849px;margin:0 0 0 0; padding:0px 150px 0 0}
#menu ul li {list-style: none;}
#menu ul li a {
z-index: 5;
position: relative;
float:left;
display: inline;
height: 31px;
overflow: hidden;
text-decoration: none;
color:#336699;
font-size: 20px;
margin: 0;
padding:0
}
#menu li a:hover,
#menu li a:focus {
height: 31px;
margin-top: 0;
color:#fff;
}
#menu li a span {
position: absolute;
top: 0;
left: 0;
display: block;
z-index: -1;
height: 31px;
cursor: pointer;
}
#menu li a:hover span,
#menu li a:focus span {
background: url("./gfx/menu-a.png");
background-repeat: no-repeat;
color:#fff;
}
#menu-1,
#menu-1 span {
background-position: 0 0;
width:119px;
}
#menu-1:hover span,
#menu-1:focus span {
background-position: 0px 0px;
}
#menu-2,
#menu-2 span {
width: 112px;
}
#menu li a#menu-2:hover span,
#menu li a#menu-2:focus span {
background-position: -119px 0px;
}
#menu-3,
#menu-3 span {
width: 128px;
}
#menu li a#menu-3:hover span,
#menu li a#menu-3:focus span {
background-position: -231px 0px;
}
#menu-4,
#menu-4 span {
width: 184px;
}
#menu li a#menu-4:hover span,
#menu li a#menu-4:focus span {
background-position: -359px 0px;
}
#menu-5,
#menu-5 span {
width: 149px;
}
#menu li a#menu-5:hover span,
#menu li a#menu-5:focus span {
background-position: -543px 0px;
}
#menu-6,
#menu-6 span {
width: 110px;
}
#menu li a#menu-6:hover span,
#menu li a#menu-6:focus span {
background-position: -692px 0px;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New web</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="main-wrap"> <!-- hlavni -->
<div class="wrap">
<div id="header">
<div id = "logo"><a href = "new_web/">
<span> </span>
</a></div>
<div id="menu">
<ul>
<li><a id="menu-1" href="new_web/about-us.html">About Us<span></span></a></li>
<li><a id="menu-2" href="new_web/services.html">Services<span></span></a></li>
<li><a id="menu-3" href="new_web/insurance.html">Insurance<span></span></a></li>
<li><a id="menu-4" href="new_web/meet-our-team.html">Meet Our Team<span></span></a></li>
<li><a id="menu-5" href="new_web/latest-news.html">Latest News<span></span></a></li>
<li><a id="menu-6" href="new_web/contact.html">Contact<span></span></a></li>
</ul>
</div>
</div>
</div>
<div id = "slider">
</div>
<div id = "main">
<!-- first page only -->
<div class="wrapper">
<div id="smart-boxes">
<div id="smart-box-1">
<p>"Change your thoughts and you chagne your world." <span>Norman Vincent Peale</span>
</p>
</div>
<div id="smart-box-2">
<p>High quality psychological services <a>read more...</a>
</p>
</div>
<div id="smart-box-3">
<p>We are a multidisciplinary treatment center <a>read more...</a>
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="wrapper">
<div id="footer-address">
<p>
</p>
</div>
<div id = "footer-links-1">
<p>
Contact Us<br />
FAQ <br />
</p>
</div>
<div id = "footer-links-2">
<p>
Terms of use<br />
Insurance<br />
Our Team<br />
</p>
<p class="ext-links">
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Thank you for your advices.
Allright, basic mistake: when positioning two elements using float property just beside each other one must have float:left (#logo) and the other muset go to right simple adding float:right to #menu did the thing (also removed the 150px padding-right).
I have a simple column of icons using flexbox in bootstrap v4. It comes up fine, but if you then click on an icon, the position changes slightly. Seems to happen only in chrome. Here is a fiddle:
https://jsfiddle.net/lenb/shr8bk89/10/
`
HTML:
<body>
<div id='no'>
<div id='minus' class="icon" title="Not special.">
<a href="#" id="nHeart">
<img class="img icon" src="http://gps-photo.org/images/Not.svg" />
</a>
</div>
<div id='plus' class="icon" title="Loving it!">
<a href="#" id="heart1">
<img class="img" src="http://gps-photo.org/images/red-304570-1.svg" />
</a>
</div>
<div id='comment-button-div' class="icon" title="Click for comments">
<a class="comment-page" data-toggle="modal">
<img class="img" id='comment-button' src="http://gps-photo.org/images/comments-97860-3.svg" />
</a>
</div>
<div id='info-div1' class="icon" title='Information'>
<a class="info-page" data-toggle="modal">
<img id="info1" class="img" src="http://gps-photo.org/images/information-39064-2.svg" />
</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
CSS:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
#removal {
border-color: black;
border-top: 10rem;
}
html,
body {
width: 100%;
height: 100%;
}
#no {
padding: 1rem;
display: flex;
display: -webkit-flex;
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
justify-content: space-between;
-webkit-justify-content: space-between;
align-items: center;
-webkit-align-items: center;
align-content: space-between;
-webkit-align-content: space-between;
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
}
.icon {
margin: auto;
flex-grow: 1;
flex-basis: auto;
}
/* // next is for images */
.img {
width: 8vmin;
}
/* // stuff living in #no */
#info-div1 {
order: 3;
-webkit-order: 3;
}
#minus {
order: 0;
-webkit-order: 0;
}
#plus {
order: 1;
-webkit-order: 1;
}
#comment-button-div {
order: 2;
-webkit-order: 2;
}
#no {
flex-direction: column;
-webkit-flex-direction: column;
height: 100%;
max-width: 10rem;
order: 0;
-webkit-order: 0;
}
I see no reason why the positioning should change.
Can someone tell me what is wrong.
Using normalize.css as the 1st to load helps to normalize vertical alignment for Chrome
I have been struggling with the flexbox column layout. I am trying to create a 3 column layout that stretch vertically all the way to the end of the page (height:100%;). However, 2 of the columns must have specific widths that still scale down on different size screens, is this possible?
CSS:
.container {
display: -webkit-flex;
display: flex;
height: 100%;
}
.initial {
-webkit-flex: initial;
flex: 1;
width: 510px;
min-width: 100px;
}
.flex1 {
-webkit-flex-basis: 28px; /* Safari 6.1+ */
flex-basis: 28px;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
HTML
<div class="container">
<section class="elem initial">
<div id="Left">
<h1>Heading</h1>
<p>Lorem Ipsum...</p>
</div>
</section>
<section class="elem flex1">
<div class="col"><img src="img/stripe"/></div>
</section>
<section class="elem flex2">
<div id="Right">
<h2>Header</h2>
<ul>
<li>List item.</li>
</ul>
</div>
</section>
</div>
Here's a working example of what you might be looking for, if I've understood the question correct.
I've commented the important stuff in the code. Take a look at the code, and compare it with your own. You've been using some unnecessary flexbox elements such as flex-basis: 28px; which should just be width: 28px;
HTML
<div class="container">
<section class="elem initial">
<div id="Left">
<h1>Heading</h1>
<p>Lorem Ipsum...</p>
</div>
</section>
<section class="elem flex1">
<div class="col"><img src="img/stripe"/></div>
</section>
<section class="elem flex2">
<div id="Right">
<h2>Header</h2>
<ul>
<li>List item.</li>
</ul>
</div>
</section>
</div>
CSS
html, body {
height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
display: flex; /* Adds flex functionality */
height: 100%;
}
.initial {
width: 510px;
min-width: 100px;
background-color: orange;
}
.flex1 {
width: 28px;
background-color: red;
}
.flex2 {
flex: 1; /* Fills the rest of the available space */
background-color: green;
}
UPDATE
I forked the pen in order to create a new working example based on the comments from the author of this question. He wanted the columns to wrap and the gutter to disappear at a certain size - I've used media queries to accomplish this.
Link to the new forked CodePen
HTML is the same.
CSS
html, body {
height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
display: flex; /* Adds flex functionality */
flex-direction: column;
height: 100%;
}
#media all and (min-width: 768px) {
.container {
flex-direction: row;
}
}
.initial {
width: 510px;
min-width: 100px;
background-color: orange;
}
.flex1 {
display: none;
}
#media all and (min-width: 768px) {
.flex1 {
display: flex;
width: 28px;
background-color: red;
}
}
.flex2 {
flex: 1; /* Fills the rest of the available space */
background-color: green;
}
Remember your vendor-prefixes.
I have a horizontal scrolling website with a fixed sidebar and footer. I am trying to get my content to 100% height to sit on the footer. Although my sidebar is at 100% height even though there is hardly any content in it I cannot get my contents divs to go to 100% and sit on the footer. Here is my HTML structure:
<html class="multiplebgs" xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class="wrapper">
<div class="sidebar">
<div class="hlogo">Lorem Ipsum</div>
<div class="navigation demi f11">
<ul>
<li>ABOUT US</li>
<li>WHAT WE DO</li>
<li>OUR THEORY</li>
<li>PORTFOLIO</li>
<li>CLIENTS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
<section class="habout step">
<div class="content" id="content1">
</div>
</section>
</div>
<div class="footer fcolor">
</div>
</body>
</html>
And my CSS:
html {
background: url(../img/bg.png) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg.png', sizingMethod='scale')";
height:100%;
}
body {
margin:0;
height: 100%;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
color:black;
font-size:12px;
width: 12660px;
}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -45px;
}
.content{
float:left;
width:1000px;
margin: 0px;
height: 100%;
padding: 0 360px;
}
#content1 { background:url(../img/bgaboutus.png) no-repeat bottom center;}
.sidebar {
float:left;
width:350px;
position: fixed;
background: url(../img/bg.png) no-repeat fixed;
-webkit-background-size: cover;
background-size:cover;
height: 100%;
z-index: 1;
}
.step {
float: left;
margin: 0px;
position:relative;
height: 100%;
min-width: 1000px;
padding: 0px;
overflow:auto;
}
.no-multiplebgs .habout {}
.multiplebgs .habout {background: url(../img/naboutus.png) top right no-repeat fixed;}
Even if I apply the CSS of the sidebar class which is 100% height the section and content divs wont stretch to 100% height.
Any suggestions are welcome.
Thanks
The problem was in class .wrap{ height: auto !important;} . Once I removed the height auto the content div expanded to 100% .
Thanks