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%;
}
}
I have a website that is primarily html5 and css3, and the pages look good when I run them locally from my pc on chrome and internet explorer 11.0.47, but when I put it on the Linux server and run the page from there on my own pc, the page loses the css in IE but is fine in chrome.
I don't have a lot of experience with html5/css3. What's going on here? I tried googling it, but don't see any online help.
The web page is start of web site. As you can see, in IE, Map Home isn't shown as a button in nav to the left, and nav lost it's brown background. It also lost the header background. If you look at the link in chrome, it has those.
Any ideas? Could there be a directional issue with use of the media folder when IE pulls it from Linux but not chrome?
**Added:
I see this on the server log, but when I list the location on the server, the file exists there. The css file (catvStyles.css) referring to the globe file is in the same dir as index.html, and the media dir is in the dir of index.html.
File does not exist:
/opt/apps/html/catv/media/globe_transp_gradation.png), url(..,
referer: http://ltrkarkvm391.mgmt.windstream.net/catv/index.html
**
This looks similar to other web page if you can't reach the link. The problem is my linux hosted site isn't showing the brown nav to the left, it's not showing the metal header globe, and windmill pictures, and it's not showing Map Home in a button (it's as a link without the button), and it's not showing the picture in the right side to the right (it's in the body now).
This is the index.html page:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="FunStuff/catvStyles.css">
<title>CATV Monitoring</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Wi">
<meta name="keywords" content="catv, cmts, snmp, modem, dhcp, rf, status, map">
<meta name="author" content="Wi, Michele, Adam">
<style type="text/css">
</style>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header role="banner" class="bgFun">
<h1>Wi</h1>
<h2 id="headerH2Pos">CATV Monitoring System</h2>
</header>
<div id="page">
<nav role="navigation" id="navBakImg">
<ul>
<li>Map Home</li> <!--MapHome.html-->
</ul>
</nav>
<main role="main" id="middle">
<h2>Purpose</h2>
<p>To provide CATV Monitoring to our internal customers</p>
</p>
<h2>Mapping </h2>
<p>Click the "Map Home" link on the left to see how the network is doing </p>
<img class="imgFix" src="media/WIN_Vert_Green_Logo.png" height:"18" width:"15" alt="Logo" title="Wi" >
</p>
</main>
<aside role="complementary">
<img class="imgFix" src="media/WIN_Vert_Green_Logo.png" height:"18" width:"15" alt="Logo" title="Wi" >
<h2>How To Start</h2>
<p>See directions</p>
</aside>
</div> <!-- end of flex container -->
<footer role="contentinfo">
<img class="tree" src="media/Tree_Branches_And_Roots_clip_art_small.png" height="50" width="50" alt="Tree" title="Created by Michele " >
<br>Copyright © 2017
<script>
document.write('Last Modified: ' + document.lastModified);
</script>
<br>
</footer>
</div>
</body>
</html>
This is the css catvStyles.css:
body {font-family: Verdana, Arial, sans-serif;
background-color: #330000;
background-image: url(../media/green.gif);
}
#middle{}
header, h1, wrapper { margin-top: 0; }
#wrapper { background-color: #F4E8BC;
/*background-color: #00ffff;*/
width: 90%;
margin: auto;
color: #003300;/*color: #330000;*/
}
h1, h2 { color: #003300; }
header {
background-repeat: no-repeat;
background-color:transparent;
}
.bgFun{background-image: url(../media/globe_transp_gradation.png),
url(../media/windmill_transp_gradation.png),url(../media/MetalGalvanized0014_M.jpg);
background-position: left, right;
/*width: 80%;
height:80%;*/
background-size:45%,30%,cover;
background-repeat:no-repeat;
background-color:transparent;}
h1 { text-align: center;
font-size: 300%;
padding: 5% 0;
text-shadow: 3px 3px 3px #F4E8BC;
}
nav, main, aside { padding: 0 1em;
}
.imgFix { width: 25%;
height: auto;
}
nav ul { list-style-type: none;
font-size: 1.2em;
padding-left: 0;
}
/*nav a { text-decoration: none;}*/
nav a {
text-decoration: none;
background-color: #666666;
display:block;
text-align:center;
width:100%;
margin:1em auto;
border:solid .08em #339900
}
nav a:link { color: #330000; }
nav a:visited { color: #003300; }
nav a:hover { color: #996600;
background-color:#000000;}
footer { text-align: center;
font-size: 80%;
font-style: italic;
color: #003300;
padding: 2.5%;
}
#page{display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#navBakImg{border: .1em solid #000000;
padding-right:1em;
background-image: url(../media/CardboardPlain0016_2_M.jpg);
font-size:90%;}
nav{-webkit-flex: 1;
flex: 1;
}
main{-webkit-flex: 7;
flex:7;
}
aside{-webkit-flex: 2;
flex: 2;
}
.tree { width:3em;
height: auto;
float:right;}
#media only screen and (max-width: 1024px) {
body { margin: 0; padding: 0; }
#wrapper { width: auto; margin: 0; }
h1 { font-size: 200%; }
nav li { padding: 0 0.5em;
font-size: 1.2em;
}
#page{-webkit-flex-direction: column;
flex-direction: column;
}
nav ul{display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
webkit-justify-content: center;
justify-content: center;
}
.imgFix { width: 30%;
height: auto;}
}
#media only screen and (max-width: 768px) {
nav{-webkit-order: 1;
order: 1;
}
nav ul{-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
section{display:none;}
.imgFix { width: 35%;
height: auto;}
}
header, main, nav, footer, figure, figcaption { display: block; }
#headerH2Pos{position:relative;
left:26%;
}
EDIT: Looks like it's something else, as Michele says it works in Chrome but not IE when served from Linux.
Judging by your filenames, you may have just encountered a Windows => Linux gotcha:
The Linux filesystem is Case Sensitive, Windows is case insensitive.
You'll need to double check that you're using the right casing in your URLs, else the file won't be found when Linux goes to look for it.
I had to add this line and it was fixed:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
I need some help with some overflowing text on my webpage that I am designing for school. I'm two weeks into my HTML/CSS webdesign class, so I am unable to use some of the more advanced coding. I am just curious as to why the text on the right hand side of my website(I'll post a link to jsfiddle in the comments because I cannot figure out how to add it in this original post.) doesn't want to stay on its side of the screen. Any help?
here are my codes(both CCS and HMTL):
#charset "utf-8";
/* temporary background color for testing purposes */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
el,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* My Styles */
body {
font-family: Arial, Hevetical, sans-serif;
font-size: 100%;
background-color: blue;
width: 80% margin: 0 auto;
}
header {
padding: 3em;
height: 330px;
margin: 0;
background-color: lightblue;
position: relative;
}
nav {
position: absolute;
bottom: 0;
left: 0;
margin-bottom: 1em;
}
nav a {
padding: .25em 5em;
background-color: #235B8A;
}
section {
padding: 3em;
}
footer {
padding: 3em;
background-color: lightblue;
text-align: center;
}
aside {
padding: 3em;
background-color: lightgrey;
}
h1,
h2,
h3 {
padding-bottom: 1em;
}
h1 {
font-size: 250%;
}
h1 a {
text-decoration: none;
}
h2 {
font-size: 150%;
}
h3 {
font-size: 80%;
}
.container {
overflow: hidden;
}
.col-1-3 {
width: 32%;
float: left;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
.col-2-3 {
width: 65% float: left;
}
.cleafix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
clear: both;
}
<title>Crystal Coast Theater</title>
<link href="CSS/css.css" rel="stylesheet" type="text/css">
<link href="../CSS/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<header style="text-align:center">
<a href="http://pbernhardt.mydevryportfolio.com/wgd232/index.html"><h1> Crystal Coast Theater.
</h1></a>
<nav style="text-align:center">
Home
Events
Tickets
Contact us
</nav>
</header>
<div class="container cleatfix">
<aside class="col-1-3">
<h2>Upcoming events:</h2>
<p><span class="emphasis">May 22 – June 8:</span> Daring Last Days of Blackbeard</p>
<p><span class="emphasis">June 11 – June 29:</span> Ghost Stories of the Crystal Coast</p>
<p><span class="emphasis">July 3 – July 20:</span> Beach Rental</p>
<p><span class="emphasis">July 23 – August 10:</span> The Siege of Fort Macon</p>
</aside>
<section style="text-align:center" class="col-2-3">
<h2>Your Down East Playhouse</h2>
<p>The Crystal Coast Theater is located in downtown Moorehead City. It features local talent performing in both renowned plays and in works written by some of the Crystal Coast’s own talented playwrights.</p>
<br>
<p>The Crystal Coast Theater also offers educational performances that bring to life the history and culture of the 85 miles of coastline that are favorite destinations for tourists.</p>
<br>
<p>Check out our upcoming events and make plans to come and see one of our shows.</p>
</section>
</div>
<footer style="text-align:center">
<small>Copyright © 2015 Paul Bernhardt Enterprises</small>
</footer>
</body>
</html>
-dark_nemesis
This will fix it:
section {
overflow: hidden;
padding: 3em;
position: relative;
}
Greetz
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 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>