I have a complex layout to replicate with css grid. If you see it in full screen the "Top Banners" div is set to be max-width of 1200px and margin left and right to auto to be aligned center.
In the grid i have set 5 fractions. the last column fraction has to be 330px. The main_container has to be with max-width of 1200px and also aligned center. The rest of the column fractions should take the rest of the space. The sidebar fraction should be always stacked to the right.
The problem is that the top banners and the main content are not equal aligned center. I belive the Top Banners has the correct alignment. Here is what i did. Can anyone guide me how to achive the correct layout? Thanks.
Here is how it looks
Image
And here is what i did. Can anyone guide me how to achieve the correct layout? Thanks.
html,
body,
.grid-container {
height: 100%;
margin: 0;
}
html {
font-size: 62.5%;
font-family: "Roboto", sans-serif;
}
body {
font-size: 1.6rem;
}
/* **GRID LAYOUT** */
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr) 330px;
grid-template-rows: repeat(6, max-content);
grid-auto-rows: max-content;
background-color: #f3f3f3;
}
header.top_banners {
grid-column: 1/-1;
background-color: beige;
}
header.top_menu {
grid-column: 1/-1;
background-color: blueviolet;
}
.skin_left {
grid-column: 1/2;
background-color: chocolate;
}
main.main_container {
grid-column: 2/5;
max-width: 1200px;
}
section.section_main_top_articles {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, auto);
column-gap: 1.8rem;
}
.top_articles_image {
grid-row: 1/-1;
grid-column: 1/3;
background-color: darkcyan;
}
.top_articles_articles {
grid-row: 1/-1;
grid-column: 3/4;
background-color: darkgrey;
}
aside.sidebar {
grid-column: 5/-1;
background-color: darkkhaki;
}
footer {
grid-column: 1/-1;
background-color: darkorange;
}
/* **TOP BANNERS** */
.top_banners_container {
max-width: 1200px;
margin: 0 auto;
background-color: darkred;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sigmalive - Home</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,400;0,900;1,400;1,900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="grid-container">
<header class="top_banners">
<div class="top_banners_container">Top Banners</div>
</header>
<header class="top_menu">Top Menu</header>
<div class="skin_left">Skin Left</div>
<main class="main_container">
<section class="section_main_top_articles">
<div class="top_articles_image">Main Top Articles Image</div>
<div class="top_articles_articles">Main Top Articles Articles</div>
</section>
</main>
<aside class="sidebar">Sidebar</aside>
<footer>
Footer
</footer>
</div>
</body>
</html>
Related
Can anyone pls explain to me why the third-row "content" is not displaying fully? I am new to using the grid template areas and couldn't figure out why the content row is not set to the maximum width and fully display on the screen like other rows.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Exercise 1</title>
<meta content="width=device-width", initial-scale=1, maximum-scale=1
name="viewport"/>
<style>
body{
background-color: #444;
}
.container {
display: grid;
width: 90%;
grid-template-columns: 300px 300px 300px;
grid-template-rows: 100px 350px 100px 50px;
grid-template-areas:
"hd hd hd hd"
"feat feat feat feat"
"con con con con"
"ft ft ft ft";
border: solid 2px rgb(247,182, 97);
}
.box {
border: solid 1px red;
background: #f8fa90;
}
.header{grid-area: hd;}
.feature{grid-area: feat;}
.content{grid-area: con; width: 100%;}
.footer{grid-area: ft;}
</style>
</head>
<body>
<div class="container">
<div class="header box">Header</div>
<div class="feature box">Feature Content</div>
<div class="Content box">Content</div>
<div class="footer box">footer</div>
</div>
</body>
</html>
https://jsfiddle.net/2bw7Luzg/
Beginner here.
I'm trying to figure out how to put 5 elements on my nav bar.
First element is heading and the other for are li's.
Hopefully someone can help!
I want to get the following result:
each element fills up 20% of the width
But what I get is this.
Not equally distributed space
Below the snippet.
body {
width: 960px;
margin: auto;
background-color: slateblue;
}
#navigation {
background-color: white;
width: 960px;
}
#navigation h2 {
display: inline;
width: 20%;
background-color: #555;
margin: 0;
font-size: 18px;
color: #ffa0a0;
margin: 0;
}
#navigation ul {
list-style-type: none;
display: inline;
font-size: 0px;
margin: 0;
}
#navigation ul a {
display: inline-block;
width: 20%;
background-color: #555;
font-size: 18px;
color: #ffa0a0;
text-align: center;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Pagename</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="navigation">
<h2>Pagename</h2>
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Services</li>
</a>
<a href="#">
<li>Portfolio</li>
</a>
<a href="#">
<li>Contacts</li>
</a>
</ul>
</div>
</body>
</html>
You can achieve this easily by using flexbox feature.
I slightly edited your code to
replace ul by a div element (since you don't use li items)
replaced body width by 100% to make it working with the snippet display (this one is just for a good-looking display in the answer, you can replace it by your pixel value. Also div width style is by default set to 100% (it's a block displayed item), you don't need to set it for the div#navigation element.
Update. I added the Pagename heading to the equally distributed items to fit the design you want (according to the screenshot).
body {
width: 100%;
margin: auto;
background-color: slateblue;
}
#navigation {
background-color: white;
}
#navigation #nav-items {
list-style-type: none;
justify-content:space-between;
display: flex;
font-size: 0px;
margin: 0;
}
#navigation h2 {
background-color: #555;
margin: 0;
font-size: 18px;
color: #ffa0a0;
margin: 0;
}
#navigation #nav-items a {
background-color: #555;
font-size: 18px;
color: #ffa0a0;
text-align: center;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Pagename</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="navigation">
<div id="nav-items">
<h2>Pagename</h2>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Services</li>
</a>
<a href="#">
<li>Portfolio</li>
</a>
<a href="#">
<li>Contacts</li>
</a>
</div>
</div>
</body>
</html>
I am loading an external CSS file using JS. For my radio buttons, I am running a transition animation, but its loading is delayed on page load, and I can't figure out why.
Note: since this issue only occurs on page load, the most effective way to reproduce might be to copy the html & css files, and run locally. Simply running the code snippet won't show the issue. You should notice that the male and female divs animate into shape, rather than just appear immediately when the page loads.
To see desired behavior, import the css directly into the head of the html file (rather than import using JS). You'll notice that the gender divs appear instantly, without animation.
Here's a gif of what it's currently doing that I don't want: https://media.giphy.com/media/8BksF1okeQfNyv7ZCh/giphy.gif
const genderCss = document.createElement('link')
genderCss.rel = "stylesheet"
genderCss.href = "demo.css"
genderCss.type = "text/css"
document.head.appendChild(genderCss)
*,
*:before,
*:after {
box-sizing: border-box;
}
.col-half {
padding-right: 0;
float: left;
width: 100%;
}
.col-half:last-of-type {
padding-right: 0;
}
.registrationContainer {
justify-content: center;
align-items: center;
margin: 10rem auto;
background: white;
padding: 20px 25px;
border: 5px solid #337ab7;
border-radius: 6px;
width: 550px;
height: auto;
box-sizing: border-box;
}
.gender-input-group {
margin-bottom: 1em;
padding: 0;
zoom: 1;
width: 100%;
}
.gender-input-group:before,
.gender-input-group:after {
content: "";
display: table;
}
.gender-input-group:after {
clear: both;
}
input[type="radio"] + label,
select option,
select {
width: 30%;
text-align: center;
padding: 1em;
line-height: 1.4;
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* The problem seems to be here */
-webkit-transition: 0.35s ease-in-out;
-moz-transition: 0.35s ease-in-out;
-o-transition: 0.35s ease-in-out;
transition: 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
input[type="radio"]:checked + label,
input:checked + label:before,
select:focus,
select:active {
background-color: #7ed321;
color: #fff;
border-color: #64ac15;
}
select {
display: inline-block;
width: 50%;
text-align: center;
float: left;
border-radius: 0;
}
input[type="radio"] + label:first-of-type {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
input[type="radio"] {
display: none;
box-sizing: border-box;
padding: 0;
}
input[type="checkbox"] + label:before {
position: absolute;
top: 0.2em;
left: 0;
display: block;
width: 1em;
height: 1em;
padding: 0;
content: "";
}
input[type="checkbox"] + label:after {
position: absolute;
top: 0.45em;
left: 0.2em;
font-size: 0.8em;
color: #fff;
opacity: 0;
font-family: FontAwesome;
content: "\f00c";
}
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous">
</script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous">
</script>
<script type="text/javascript">
const css = document.createElement('link')
css.rel = "stylesheet"
css.href = "demo.css"
css.type = "text/css"
document.head.appendChild(css)
</script>
</head>
<body>
<div class="col-half">
<h5>Gender</h5>
<div class="gender-input-group">
<input
id="male"
type="radio"
name="gender"
value="male"
>
<label for="male">Male</label>
<input
id="female"
type="radio"
name="gender"
value="female"
>
<label for="female">Female</label>
</div>
</div>
</body>
</html>
I am new to web development and I've hit a road block here with swipe-pages from https://github.com/TheSeamau5/swipe-pages
Basically, I want to make a "swipe-images" out of the "swipe-pages" by putting a template inside the contents of the swipe-pages. In other words, I want to pass to the polymer-element an array of strings (location of image) as attributes and the swipe-pages in the element should auto-generate swipe-pages with images inside it.
I am trying to avoid java script as much as I can and take advantage of polymer binding. I have even extended the template as a swipe-page.
here is the code so far and it does not work as expected. Is this approach correct or should I reinvent the swipe-pages uniquely for swipe-images. But nevertheless, the template binding should work!
<link rel="import" href="../swipe-pages-master/swipe-pages.html">
<link rel="import" href="../swipe-pages-master/swipe-page.html">
<polymer-element name="lesson-card-mini" attributes="items">
<template>
<style>
:host {
display: block;
position: relative;
padding: 0px;
width: 100%;
}
.content2 {
padding: 2px;
border: 1px solid #dedede;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: black;
}
</style>
<div class="content2" style="width: auto; height: auto;">
<swipe-pages id="pgs" style="color: white;">
<template extends="swipe-page" repeat="{{item in items}}">
<img src="{{item}}" style="width: 20px; height 20px"/>
</template>
</swipe-pages>
</div>
</template>
<script>
Polymer('lesson-card-mini',
{
created: function() {
},
ready: function() {
},
toggle: function() {
}
});
</script>
</polymer-element>
<polymer-element name="select-main">
<template>
<style>
</style>
<div vertical layout center center-justified>
<lesson-card-mini style="width: 100%; height: 500px;"
items="['../images/01.png',
'../images/02.png',
'../images/03.png']"></lesson-card-mini>
</div>
</template>
<script>
Polymer('select-main',
{
});
</script>
</polymer-element>
Does anyone have a sample code on something like this?
I made the change as mentioned and I got the code working. Turns out I did not initialise the array (attribute) in the polymer-element constructor and that was really important.
The below code works,.......... and now I have an "image swipe".
<link rel="import" href="../swipe-pages-master/swipe-pages.html">
<link rel="import" href="../swipe-pages-master/swipe-page.html">
<polymer-element name="lesson-card-mini" attributes="imglinks">
<template>
<style>
:host {
display: block;
position: relative;
padding: 0px;
width: 100%;
}
.content2 {
padding: 2px;
border: 1px solid #dedede;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: black;
}
</style>
<div class="content2" style="width: auto; height: auto;">
<swipe-pages id="pgs" style="color: white;">
<template repeat="{{imglink in imglinks}}">
<swipe-page>
<img src="{{imglink}}" style="width: 20px; height: 20px"/>
</swipe-page>
</template>
</swipe-pages>
</div>
</template>
<script>
Polymer('lesson-card-mini',
{
created: function() {
this.imglinks = []; // This line is important
},
ready: function() {
},
toggle: function() {
}
});
</script>
</polymer-element>
<polymer-element name="select-main">
<template>
<style>
</style>
<div vertical layout center center-justified>
<lesson-card-mini style="width: 100%; height: 500px;"
imglinks="['../images/01.png',
'../images/02.png',
'../images/03.png']"></lesson-card-mini>
</div>
</template>
<script>
Polymer('select-main',
{
});
</script>
</polymer-element>
With this, I could just have the pages up with an array of strings. Perhaps an improvement would be to have the page decipher the link to show image, videos, PDF files, text files etc by having a template selector. And if backed by auto-animation, can become an image carousel and slider too.
Thanks and hope this helps!
Cannot functionally animate height of header (weird delay in execution of the animate method) when scrolling past and before the point of 244pixels from top of window . First animate method of the functioon works when the else flow is excluded.
else {
$('.header').animate({height:"151px"});
$('.nav').animate({top:"151px",height:"93px"});
}
I would like to know whats the simplest way to have the header and nav classes animate back to original size and distance from top specified in the else flow without a delay.
Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
body {
margin: 0;
background: green;
}
.wrapper {
margin: 0px auto;
width: 960px;
}
.header {
top: 0;
height: 151px;
width: 100%;
background: black;
color: white;
position:fixed;
z-index: 1;
}
.nav {
top: 151px;
height: 93px;
width: 960px;
background: red;
position: fixed;
z-index: 1;
}
.content {
background: blue;
height: 2000px;
top: 244px;
position: relative;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
<div class="header">
</div>
<div class="wrapper">
<div class="nav">
</div>
<div class="content">
</div>
</div>
<script>
onscroll = function (){
if ($(window).scrollTop() > 244) {
$('.header').animate({height:"93px"});
$('.nav').animate({top:"93px",height:"58px"});
}
else {
$('.header').animate({height:"151px"});
$('.nav').animate({top:"151px",height:"93px"});
}
}
</script>
</body>
</html>