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>
Related
hi i changed my code to style.css but the change site was not it confused me maybe i am doing something wrong look at my code below and draw your own conclusion, I hope for a good answer
Console Log:
PS C:\Users\kostia_admin\PycharmProjects\pythonProject32\mysite> python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
System check identified some issues:
WARNINGS:
?: (staticfiles.W004) The directory 'C:\Users\kostia_admin\PycharmProjects\pythonProject32\mysite\static' in the STATICFILES_DIRS setting does not exist.
System check identified 1 issue (0 silenced).
June 17, 2022 - 17:16:44
Django version 4.0.4, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
[17/Jun/2022 17:16:46] "GET / HTTP/1.1" 200 3536
Not Found: /polls/static/polls/images/style.css
[17/Jun/2022 17:16:46] "GET /polls/static/polls/images/style.css HTTP/1.1" 404 2895
Not Found: /polls/style.css
[17/Jun/2022 17:16:46] "GET /polls/style.css HTTP/1.1" 404 2835
index.html(I think there's a mistake here. ):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/polls/style.css"/>
<link rel="stylesheet" href="/polls/style.css" type="text/css" />
<title>Shop</title>
</head>
<body>
<header class="header">
<div class="header-content">
<div class="header-logo">
<h1 class="logo">SunRise Donate shop</h1>
</div>
<nav class="header-navigation">
About
Diferent<i class="material-icons-outlined"></i>
</nav>
</div>
</header>
<main>
<div class="responsive-container">
<div class="grid">
<div class="grid-column">
<a class="product" href="#">
<div class="product-image">
<img src="https://reallyworld.ru/images/privileges/hero.webp" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">HERO</h2>
<p class="product-price">$ 5</p>
</div>
</div>
</a>
<a class="product" href="#">
<div class="product-image">
<img src="https://reallyworld.ru/images/privileges/ghelper.webp" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">GOD</h2>
<p class="product-price">$ 9</p>
</div>
</div>
</a>
<a class="product" href="#">
<div class="product-image">
<img src="https://sunmc.ru/source/img/wither.png" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">WITHER</h2>
<p class="product-price">$ 9</p>
</div>
</div>
</a>
</div>
<div class="grid-column">
<a class="product" href="#">
<div class="product-image">
<img src="https://sunmc.ru/source/img/phoenix.png" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">PHOENIX</h2>
<p class="product-price">$ 9</p>
</div>
</div>
</a>
<a class="product" href="#">
<div class="product-image">
<img src="https://sunmc.ru/source/img/avenger.png" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">AVENGER</h2>
<p class="product-price">$ 12</p>
</div>
</div>
</a>
<a class="product" href="#">
<div class="product-image">
<img src="https://sunmc.ru/source/img/legend.png" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">LEGEND</h2>
<p class="product-price">$ 5</p>
</div>
</div>
</a>
</div>
<div class="grid-column">
<a class="product" href="#">
<div class="product-image">
<img src="https://sunmc.ru/source/img/phantom.png" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">PHANTOM</h2>
<p class="product-price">$ 15</p>
</div>
</div>
</a>
<a class="product" href="#">
<div class="product-image">
<img src="https://sunmc.ru/source/img/supreme.png" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">SUPREME</h2>
<p class="product-price">$ 5</p>
</div>
</div>
</a>
</div>
</div>
</div>
</main>
</body>
</html>
style.css:
#import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght#400;700&display=swap');
*, *:before, *:after {
box-sizing: border-box;
}
body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
margin: 0;
}
body {
scroll-behavior: smooth;
line-height: 1.5;
background-color: #FFF;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
font-weight: bold;
}
input, button, textarea, select {
font: inherit;
}
button {
border: 1px solid;
background-color: transparent;
}
body {
font-family: "DM Sans", sans-serif;
}
.responsive-container {
max-width: 1080px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.header {
border-bottom: 1px solid #d0d0d0;
min-height: 60px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
display: flex;
justify-content: center;
}
.header-content {
display: flex;
width: 100%;
max-width: 2000px;
padding-left: 1.25rem;
padding-right: 1.25rem;
align-items: center;
justify-content: space-between;
}
.header-navigation {
display: flex;
align-items: center;
}
.header-navigation a {
margin-left: 1.5rem;
text-decoration: none;
font-size: 1rem;
}
.link-button {
display: flex;
align-items: center;
background-color: #fa3450;
border-radius: 0.375rem;
padding: 0.5em 1.25em;
color: #fff;
}
.link-button i {
font-size: 1.25rem;
margin-left: 0.5rem;
}
.logo {
font-size: 1.25rem;
font-weight: 700;
}
main {
padding-top: 2rem;
padding-bottom: 6rem;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.grid-column {
display: flex;
flex-direction: column;
}
.grid-column > * + * {
margin-top: 2rem;
}
.product {
border-radius: 0.25rem;
text-decoration: none;
font-weight: 400;
transition: 0.15s ease;
overflow: hidden;
}
.product:hover, .product:focus {
outline: none;
box-shadow: 0 0 0 0.21rem Green;
}
.product:hover .product-content, .product:focus .product-content {
border-color: transparent;
}
.product-image {
border-radius: 0.25rem 0.25rem 0 0;
overflow: hidden;
}
.product-content {
padding: 1rem;
border-left: 1px solid #dedede;
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
border-radius: 0 0 0.25rem 0.25rem;
display: flex;
align-items: center;
justify-content: space-between;
transition: 0.15s ease;
background-color: #F43FF;
}
.product-action {
color: #043242300;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.25rem;
font-size: 1.25rem;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.15s ease;
}
.product-action:hover {
background-color: #e5ffeb;
}
.product-info {
display: flex;
flex-direction: column;
}
.product-title {
font-size: 1.125rem;
line-height: 1.25;
}
.product-price {
margin-top: 0.25rem;
}
.credits {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin-top: 10rem;
color: #7577;
font-size: 0.875rem;
}
.credits a {
display: block;
}
#media (max-width: 600px) {
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1.5rem;
}
.grid-column > * + * {
margin-top: 1.5rem;
}
}
Could you reformat my code to correct the errors?
I think I made a mistake somewhere very simple (I'm new to django so don't judge)
screen shot of navigation menu:
I created two grids as shown below, the first to layout the page and second to layout the menu items. I want the header to remain in place at the top. The links no longer work.
.wrapper {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr;
background-color: #F2E1D4;
}
main {
overflow: auto;
}
.nav-container {
display: grid;
grid-template-columns: 1fr 120px 80px 180px 150px 140px 160px 40px 40px 5px 1fr;
grid-gap: 10px;
.nav-text {
text-transform: uppercase;
font-size: 1rem;
letter-spacing: .08rem;
color: #4f271b;
font-weight: 700;
margin-top: 10vh;
}
.nav-image {
width: 150px;
height: auto;
}
-------------------
<div class="wrapper">
<nav class="nav-container">
<div id="margin"></div>
<div class="nav-text">OUR STORY</div>
<div class="nav-text" >FARM</div>
<div class="nav-text">FARMERS MARKET</div>
<div class ="nav-image"> <img src = "resources/images/MSW_Logo/MSW_LOGO_B_RGB.png" width=150px height=auto alt="Morningstar logo" > </div>
<div class="nav-text">WOOL/TEXTILE</div>
<div class="nav-text">CONNECT</div>
<div class="nav-text"> <img src = "resources/images/MSW_SOCIAL_Logos/Intsa_BROWN.png" width=20px, height=auto> </div>
<div class="nav-text"> <img src = "resources/images/MSW_SOCIAL_Logos/Pinterest_p_BROWN.png" width=25px, height=auto> </div>
<div class="nav-text"> <img src = "resources/images/MSW_SOCIAL_Logos/newsletter_icon_BROWN.png" width=25px, height=auto> </div>
</nav>
<main>
I think your links do not work because you put their text outside of the <a></a> tags. You have to put it between the tags like this:
FARM
Here is your code with the links working as expected:
.wrapper {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr;
background-color: #F2E1D4;
}
main {
overflow: auto;
}
.nav-container {
display: grid;
grid-template-columns: 1fr 120px 80px 180px 150px 140px 160px 40px 40px 5px 1fr;
grid-gap: 10px;
}
.nav-text {
text-transform: uppercase;
font-size: 1rem;
letter-spacing: .08rem;
color: #4f271b;
font-weight: 700;
margin-top: 10vh;
}
.nav-image {
width: 150px;
height: auto;
}
<div class="wrapper">
<nav class="nav-container">
<div id="margin"></div>
<div class="nav-text">OUR STORY</div>
<div class="nav-text">FARM</div>
<div class="nav-text">FARMERS MARKET</div>
<div class ="nav-image"><img src = "resources/images/MSW_Logo/MSW_LOGO_B_RGB.png" width=150px height=auto alt="Morningstar logo" > </div>
<div class="nav-text">WOOL/TEXTILE</div>
<div class="nav-text">CONNECT</div>
<div class="nav-text"><img src = "resources/images/MSW_SOCIAL_Logos/Intsa_BROWN.png" width=20px, height=auto> </div>
<div class="nav-text"><img src = "resources/images/MSW_SOCIAL_Logos/Pinterest_p_BROWN.png" width=25px, height=auto> </div>
<div class="nav-text"><img src = "resources/images/MSW_SOCIAL_Logos/newsletter_icon_BROWN.png" width=25px, height=auto> </div>
</nav>
</div>
I have a list of draggable items, for a responsive design :
https://codepen.io/daedrias/pen/KyPZYG
header,
footer {
background-color: #5fba7d;
padding: 1rem;
}
.container {
display: flex;
min-height: 800px;
}
.menu {
width: 15em;
background-color: #FFF8DC;
}
.content {
background-color: #fff;
border-left: 1px solid #958C4D;
flex: 1;
padding: 5px 10px;
}
.sortable-list {
width: 18.75em;
}
.row {
display: flex;
margin-bottom: 15px;
box-sizing: border-box;
}
.row>* {
display: inline-block;
border-radius: 4px;
box-sizing: border-box;
}
.left {
height: 2em;
display: flex;
cursor: move;
}
.handle {
width: 1.5em;
height: 2em;
line-height: 2em;
text-align: center;
margin-right: 0.125em;
border-radius: 4px;
}
.icon {
width: 2em;
height: 2em;
border-radius: 4px;
background-color: #c97777;
margin: 0 0.125em;
}
.stretch {
flex: 1;
border: 1px solid black;
padding: 6px 12px;
margin: 0 0.1em;
}
.trash {
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin-left: 0.125em;
}
.bouton-ajout {
flex: 1;
border: 1px solid black;
border-radius: 4px;
padding: 6px 12px;
margin: 0 2.2em 0 1.75em;
}
/* mobile layout */
#media (max-width: 768px) {
.sortable-list {
width: 100%;
}
.menu {
display: none;
}
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>Header</header>
<div class="container">
<div class="menu">
</div>
<div class="content">
<p>asdasd</p>
<div class="sortable-list">
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
banana
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
pineapple
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
orange
</div>
<div class="trash">X</div>
</div>
<div class="bouton-ajout">
+ Add a row V
</div>
</div>
</div>
<div>
</body>
<html>
Everything is pretty much as I want it to be (as in : the positioning, not the colors of this example), but I'm not happy about the 'add' button.
I would like to know if there is a better way to handle the width of the 'Add' button,so it is the same size as the icon + label combined. For now I use margins.
Is the flex display a good solution in this case? Should I use something else like display : table?
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!