I am trying to prevent the header element from scrolling, so I gave it position: fixed but that changes it size as per the second image below.
I am after a css to maintain the look of the first image and prevent the header from scrolling. Thanks
html, body {
height: 100%;
padding: 0;
margin: 0;
}
button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
background-color: yellow;
position: fixed;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label>Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
</body>
</html>
Just give width:100% to header.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
background-color: yellow;
position: fixed;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label>Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
</body>
</html>
Simply add width:100%; to the header, like the following solution:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
background-color: yellow;
position: fixed;
width:100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label>Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
</body>
</html>
Add width:100%; in the .header .You can see working demo in JSFIDDLE
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
background-color: yellow;
position: fixed;
width: 100%;
}
<header>
<button class="menuLeft" type="button">☰</button>
<label>Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
Related
I've created a grid, and it's just supposed to be 4 rows at the moment, so to see the rows I added a border to them, however I'm only seeing a line, not borders of different divs in my grid.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,html{
overflow-x: hidden;
font-family: "Poppins", sans-serif;
}
html{
background-color: black;
}
.webgl{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
nav{
color: white;
z-index: 2;
position: relative;
padding: 4rem 4rem;
display: flex;
justify-content: space-between;
}
nav a{
text-decoration: none;
color: white;
font-weight: bold;
}
nav ul{
list-style: none;
display: flex;
gap: 2rem;
}
main {
flex-grow: 1;
}
main > article {
display: grid;
height: 100%;
}
main > article > .article-section{
height: 100%;
border: 0.1px solid white;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Appearances</title>
</head>
<body>
<div class="header">
<nav>
B-1 Series Battle Droid - Appearances
<ul>
<li>Creation</li>
<li>Appearances</li>
</ul>
</nav>
</div>
<main>
<article>
<div class="article-section" id="section1"></div>
<div class="article-section" id="section2"></div>
<div class="article-section" id="section3"></div>
<div class="article-section" id="section4"></div>
<div class="article-section" id="section5"></div>
<div class="article-section" id="section6"></div>
</article>
</main>
</body>
</html>
When you run the code, you can see a white line at the top but that's it. I'm not sure why this is happening, but it's possible it has something to do with the article? I'm fairly new to HTML and CSS so I'm not sure.
Any ideas?
The problem you described is caused by your main not having a set height. Give it a height: 100vh to fix this.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,html{
overflow-x: hidden;
font-family: "Poppins", sans-serif;
}
html{
background-color: black;
}
.webgl{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
nav{
color: white;
z-index: 2;
position: relative;
padding: 4rem 4rem;
display: flex;
justify-content: space-between;
}
nav a{
text-decoration: none;
color: white;
font-weight: bold;
}
nav ul{
list-style: none;
display: flex;
gap: 2rem;
}
main {
flex-grow: 1;
height: 100vh;
}
main > article {
display: grid;
height: 100%;
}
main > article > .article-section{
height: 100%;
border: 0.1px solid white;
background-color: white;
}
main > article> .article-section:nth-child(odd) {
background-color: grey;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Appearances</title>
</head>
<body>
<div class="header">
<nav>
B-1 Series Battle Droid - Appearances
<ul>
<li>Creation</li>
<li>Appearances</li>
</ul>
</nav>
</div>
<main>
<article>
<div class="article-section" id="section1"></div>
<div class="article-section" id="section2"></div>
<div class="article-section" id="section3"></div>
<div class="article-section" id="section4"></div>
<div class="article-section" id="section5"></div>
<div class="article-section" id="section6"></div>
</article>
</main>
</body>
</html>
Because the row blocks are empty, and at the same time do not have a given min-height. Shows only the borders, and the height of the content is 0. Accordingly, they are superimposed on each other, and it looks like a white line.
a week ago I started to learn html and css and to practice I decided to emulate an old web page with what I learned so far. The page is the following: http://in3.org/info/reading.htm
I am having difficulty making the blue vertical line appear that is on the right side of the page.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<header>
<img src="assets/ga.gif" alt="" />
<br>
<img src="assets/eptype2.gif" alt="" />
</header>
<aside class="aside1">
<img src="/assets/epnav5.gif" alt="" />
</aside>
<h2>Reading Notes</h3>
<aside class="aside2"></aside>
</main>
</body>
</html>
head,
body {
background-color: lightcyan;
margin: auto;
}
header {
width: 100%;
padding-left: 4.85%;
margin: auto;
}
.aside1 {
position: absolute;
width: 4.85%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
.aside2 {
position: absolute;
width: 4.85%;
padding-right: 30%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
img {
padding: 10px;
}
h2 {
color: red;
padding-left: 5.5%;
}
To make that blue vertical line I thought of using an empty aside tag with a width of 4.85% with a padding-right of 30%, but instead of having a distance of 30% to the right and occupying a 4.85% width, the aside is placed to the left of the page occupying 30% of the page.
I'd just give the wrapper/body-element your desired background-color, make a new container inside of that wrapper-element, give that your other desired background-color, and then center it. This way you don't have to make 2 new elements.
* {
margin: 0;
padding: 0;
}
body {
background-color: lightcyan;
}
.wrapper {
background-color: rgb(35, 168, 221);
height: 100vh;
max-width: 75%;
}
.container {
background-color: lightcyan;
max-width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<div class="wrapper">
<div class="container">
<h2>Reading Notes</h3>
</div>
</div>
</main>
</body>
</html>
I am working on a little project. Until now everything went well, but for one reason or another, when I am making my second page, it will only load a part of the CSS (everything until calendar). I tried to put it in another CSS file and link the two files to the HTML file, and that works, but I would like to have all my CSS in just one file.
Can you help me?
Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="headerWrapper">
<h1>Volg ons leven op deze website!</h1>
</div>
</div>
<div class="timeline" id="timeline">
<div class="timelineWrapper">
<h3>Tijdlijn</h3>
<div class="timelinegrid">
<img src="./assets/pictures/family_pic.jpg">
<p>Zeeland - 2018</p>
<p>Welkom Tuur in de familie - 11/01/2018</p>
<img src="./assets/pictures/tuur.jpg">
<img src="./assets/pictures/verjaardag-marie-2017.jpg">
<p>Verjaardag Marie - 2017</p>
<p>Verjaardag Eline - 2016</p>
<img src="./assets/pictures/verjaardag-eline-2016.jpg">
</div>
</div>
</div>
</body>
</html>
calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="calendar">
<div class="calendarWrapper">
<h3>Kalender</h3>
<div class="cal">
<!-- CalendarLink -->
</div>
</div>
</div>
style.css
#import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
html {
font-family: 'Oswald', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
/* Header */
.header {
background-image: url(assets/pictures/hero_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
max-width: 100%;
}
.nav {
width: 100%;
height: 100px;
}
.navWrapper {
width: 85%;
margin: auto;
}
.navWrapper img {
height: 35px;
padding-top: 32.5px;
}
.right {
padding-top: 32.5px;
float: right;
}
#homepage, #calendar, #photoalbum, #lists, #recipes {
color: #000;
font-weight: bold;
font-size: 16px;
margin-right: 35px;
letter-spacing: 0.6px;
}
.headerWrapper {
padding-top: 235px;
}
.headerWrapper h1 {
font-size: 8vw;
font-weight: bold;
color: #4A4A4A;
text-align: center;
letter-spacing: 3.33px;
}
/* Timeline */
.timeline {
width: 100%;
}
.timelineWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.timelineWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
.timelinegrid {
margin-top: 40px;
display: grid;
grid-template-columns: 500px 500px;
grid-auto-rows: auto auto;
grid-gap: 2%;
align-items: end;
justify-content: center;
}
.timelinegrid img {
width: 100%;
}
.timelinegrid p {
font-size: 30px;
color: #4A4A4A;
}
/* Calendar */
.calendar {
width: 100%;
}
.calendarWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.calendarWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
Your css has an error. In .timelinegrid(line 98), you have align-items set to end.
If you fix this, the css should fully load.
https://www.w3schools.com/cssref/css3_pr_align-items.asp
Im working on a code and I would like to make the space between "Szafranowka" and "Apartaments & Restaurant" smaller. Here's how it looks like now: https://gyazo.com/d6843d8857e954acbae5c1da748c044b
I really cannot find the answer that would perfectly fit my expectations. Please, could any1 help me? :)
Also, I would like to make a small square around "Wejscie/Entrance", but when im trying to do it with the border, it looks like this: https://gyazo.com/f84fedc7a78854773b287e01ebd3a21f
Here's a part of code that im using to make a border:
<h5 style="border:3px; border-style:solid; border-color:#000000; padding: 1em;">Wejscie/Entrance</h5>
and here's my code:
HTML:
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance">Wejscie/Entrance</h5>
</div>
</div>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
to your #entrance, try this :
#entrance {
width: 8rem; //or another size
margin auto; // to center
border: 2px solid;
}
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <span id="entrance">Wejscie/Entrance</span>
</div>
CSS:
h2{
margin:5px;
line-height:15px
}
#entrance{
border:1px solid;
}
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<style>
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
#header h2
{
margin-bottom: -30px;
}
#entrance span
{
border: 1px solid;
padding: 15px;
}
</style>
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance"><span>Wejscie/Entrance</span></h5>
</div>
</div>
</body>
</html>
I am trying to have the three images centered and at the bottom of the page. I'm stuck with the images to the left instead of the center. I've tried many different ways to get it to work, but none have worked. If anyone could please help me it would be greatly appreciated
.banner {
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-color: #595959;
color: #fff;
text-align: center;
line-height: 180px;
font-family: 'Lato', sans-serif;
font-size: 25px;
}
body {
padding: 0;
margin: 0;
}
#imagesMain {
position: fixed;
bottom: 0;
padding: 0;
margin: 20px 10px;
text-align: center;
}
img {
margin-right: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>A-level Revision Website</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>A-Level Revision Website</h1>
</div>
</div>
<div id="imagesMain">
<a href="Maths.html">
<img src="images/Maths.jpg" alt="Maths" style="width:450px;height:270px;border:0;">
</a>
<a href="ComputerScience.html">
<img src="images/Computer_Science.jpg" alt="ComputerScience" style="width:450px;height:270px;border:0;">
</a>
<a href="Physics.html">
<img src="images/Physics.jpg" alt="Physics" style="width:450px;height:270px;border:0;">
</a>
</div>
</html>
Just add width:100% on #imagesMain. Your images are centered but the #imagesMain itself isn't wide enough to show it. width:100% makes it as wide as the viewport.
.banner{
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-color: #595959;
color: #fff;
text-align: center;
line-height: 180px;
font-family: 'Lato', sans-serif;
font-size: 25px;
}
body{
padding: 0;
margin: 0;
}
#imagesMain{
position: fixed;
bottom: 0;
padding: 0;
margin: 20px 10px;
text-align: center;
width:100%
}
img{
margin-right: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>A-level Revision Website</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>A-Level Revision Website</h1>
</div>
</div>
<div id="imagesMain">
<a href="Maths.html">
<img src="images/Maths.jpg" alt="Maths" style="width:450px;height:270px;border:0;">
</a>
<a href="ComputerScience.html">
<img src="images/Computer_Science.jpg" alt="ComputerScience" style="width:450px;height:270px;border:0;">
</a>
<a href="Physics.html">
<img src="images/Physics.jpg" alt="Physics" style="width:450px;height:270px;border:0;">
</a>
</div>
</html>
Just modify your css of "#imagesMain":
#imagesMain {
bottom: 0;
left: 0;
margin: 20px 10px;
padding: 0;
position: fixed;
right: 0;
text-align: center;
}