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/
Related
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>
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>
Im trying to set a background color in pdf generated with pisa. I have seen this post related question and try to implement them, but the background only display in a part of the pdf. This is my code:
{% load app_filters %}
<html>
<head>
<meta charset="UTF-8">
<title>Ficha Técnica</title>
<style type="text/css">
#page {
size: {{ pagesize|default:"A4" }};
margin-left: 2.5cm;
margin-right: 2.5cm;
margin-top: 2cm;
margin-bottom: 2cm;
background-image: url('{{ STATIC_URL }}pdf/fondo.png');
#frame header {
-pdf-frame-content: page-header;
margin-top: 0.7cm;
margin-right: 2mm;
margin-bottom: 0cm;
margin-left: 1.2cm;
}
#frame footer {
-pdf-frame-content: page-footer;
bottom: 0cm;
margin-left: 1cm;
margin-right: 1cm;
height: 1cm;
}
}
#font-face {
font-family: "light";
src: url('{{ STATIC_URL }}fonts/yanonekaffeesatz-light-webfont.ttf');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "bold";
src: url('{{ STATIC_URL }}fonts/yanonekaffeesatz-bold-webfont.ttf');
font-weight: normal;
font-style: normal;
}
.logo{
margin-bottom: 50px;
}
.general img{
width: 400px;
margin-bottom: 50px;
}
.titulo{
font-family: "bold";
font-size: 22px;
text-transform: uppercase;
color:#808080;
margin-bottom: 15px;
letter-spacing: "1";
}
.general p{
font-family: "light";
font-size: 13px;
color:#808080;
}
.line{
width:200pt;
border-top: 2px solid #808080;
color:white;
font-size: 1px;
}
.bases
{
font-family: "bold";
font-size: 12px;
color:#808080;
}
.bases table {-pdf-keep-in-frame-mode: shrink;}
.bases img{
width:85px;
}
table{text-align: center;}
</style>
</head>
<body>
<div class="content">
<div class="logo">
<center><img src='{{ STATIC_URL }}pdf/logo_pdf.png'></center>
</div>
<div class="general">
<center><img src="{{MEDIA_URL}}{{Proto.image}}" alt=""></center>
<h1 class='titulo'>{{Proto.name|upper}}</h1>
<p>{{Proto.description}}</p>
</div>
<div class='line'>.</div>
<div class="bases">
<h1 class='titulo'>BASES SELECCIONADAS</h1>
<center>
<table>
<tr>
{%for detalle in ProtoDetalle%}
<td>
<center><img src="{{MEDIA_URL}}{{detalle.base.especificImage}}" alt=""></center>
<br>
<h2>{{detalle.base.name|upper}}</h2>
<h2>{{detalle.tela.name|upper}}</h2>
<table>
<tr>
<td style='width:100px;'></td>
<td><h2>{{detalle.color.name|split_by:"-"}}</h2></td>
<td style='background-color:{{detalle.color.color}}; color:{{detalle.color.color}}; width:50px; font-size: 5px; border: 1px solid black;'>.</td>
<td style='width:100px;'></td>
</tr>
</table>
</td>
{%endfor%}
</tr>
</table>
</center>
</div>
</div>
</body>
</html>
The background image is just a color square 36px by 36px.
I tried to set background-color to body,html,div but only divs with content take the color. so i dont understand why the background-image property only sets in a porcent of the pdf displayed.
Any idea what is my mistake?
this is the current result:
I solved making a background image with the same size of A4 page (297 x 210 mm). Now the background cover all the pdf.
It seems to be working with pdf background, which I would suggest.
Note that the (lightweight) documentation mentions only pdf background.
https://xhtml2pdf-base.googlecode.com/hg/doc/xhtml2pdf-en.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>