Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
My websites sidebar doesn't work on mobile. If you wanna see what i mean, go to Zinexium. I don't know what to do, im new to html. The code.
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sidebar.css" type="text/css" />
<link rel="stylesheet" href="sidebarStyle.css" type="text/css" />
<meta name="description" content="Developers of Zinexium." />
<title>Zinexium</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
/>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<aside class="sidebar">
<nav>
<ul class="sidebar__nav">
<li>
<a href="index.html" class="sidebar__nav__link">
<i class="mdi mdi-home"></i>
<span class="sidebar__nav__text">Home</span>
</a>
</li>
<li>
<a href="developers.html" class="sidebar__nav__link">
<i class="mdi mdi-account-multiple"></i>
<span class="sidebar__nav__text">Developers</span>
</a>
</li>
<li>
<a href="download.html" class="sidebar__nav__link">
<i class="mdi mdi-download"></i>
<span class="sidebar__nav__text">Download</span>
</a>
</li>
<li>
<a href="contact.html" class="sidebar__nav__link">
<i class="mdi mdi-phone"></i>
<span class="sidebar__nav__text">Contact</span>
</a>
</li>
<li>
<a href="about.html" class="sidebar__nav__link">
<i class="mdi mdi-tooltip-text"></i>
<span class="sidebar__nav__text">About</span>
</a>
</li>
<li>
<a href="logs.html" class="sidebar__nav__link">
<i class="mdi mdi-message-alert"></i>
<span class="sidebar__nav__text">Logs</span>
</a>
</li>
<li>
<a href="https://discord.gg/QTkncurCkm" target="_blank" class="sidebar__nav__link">
<i class="mdi mdi-discord"></i>
<span class="sidebar__nav__text">Discord</span>
</a>
</li>
</ul>
</nav>
</aside>
<div class="about-section">
<h1>Developers</h1>
</div>
<div class="wrapper">
<div class="main">
<h2 style="text-align: center">Our Team</h2>
<div class="row">
<div class="column">
<div class="card">
<img src="Morgan.jpeg" alt="Morgan" style="width: 100%" />
<div class="container">
<h2>MorganInnit</h2>
<p class="title">Founder & Main Dev</p>
<p>i wanna die.</p>
<p>
morgan#0887<br />
UserID:780879021935689799
</p>
<p>
<a href="http://dsc.bio/morganoutit" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="thonk.jpeg" alt="ThonkPT" style="width: 100%" />
<div class="container">
<h2>ThonkPT</h2>
<p class="title">Co Dev</p>
<p>kewl gamer.</p>
<p>
ThonkPT#3766<br />
UserID:710220284531310734
</p>
<p>
<a href="http://dsc.bio/thonkpt2" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
</div>
<!--end of row-->
</div>
<!--end of main-->
</div>
<!--end of wrapper-->
</body>
</html>
:root {
--sidebar-width: 4.5em;
}
.sidebar {
background-color: #333;
position: fixed;
transition: width 0.2s ease;
}
.sidebar nav {
height: 100%;
}
.sidebar .sidebar__nav {
display: flex;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar .sidebar__nav .sidebar__nav__link {
align-items: center;
color: #bbb;
display: flex;
padding-left: 20px;
text-decoration: none;
transition: color 0.2s ease, background-color 0.2s ease;
}
.sidebar .sidebar__nav .sidebar__nav__link:hover {
background-color: rgba(0, 0, 0, 0.15);
color: #80f;
}
.sidebar .sidebar__nav .sidebar__nav__text {
display: none;
margin-left: 10px;
margin-right: auto;
white-space: nowrap;
}
.sidebar .sidebar__nav i {
align-items: center;
display: flex;
justify-content: center;
}
#media (max-width: 572px) {
.sidebar {
bottom: 0;
width: 100%;
}
.sidebar .sidebar__nav {
justify-content: center;
}
.sidebar .sidebar__nav .sidebar__nav__link {
height: 100%;
padding: 0.75em;
}
.sidebar .sidebar__nav i {
font-size: 2rem;
}
}
#media (min-width: 572px) {
.sidebar {
height: 100vh;
left: 0;
width: var(--sidebar-width);
}
.sidebar:hover {
width: 14rem;
}
.sidebar .sidebar__nav {
flex-direction: column;
}
.sidebar .sidebar__nav .sidebar__nav__link {
padding: 1em;
}
.sidebar:hover .sidebar__nav .sidebar__nav__text {
display: inline;
}
.sidebar .sidebar__nav i {
font-size: 2.5rem;
}
}
#media (max-height: 434px) {
.sidebar {
overflow-y: scroll;
}
}
:root {
--sidebar-width: 4.5em;
}
body {
margin: 0;
padding: 0;
font-family: 'Roboto';
}
* {
outline: none;
box-sizing: border-box;
}
.main {
margin-left: auto;
margin-right: auto;
max-width: 992px;
padding: 2em 1.5em;
}
.main h2 {
font-size: 2em;
margin-top: 0px;
}
.main p {
color: #444;
font-size: 1.25em;
line-height: 2;
text-align: justify;
}
#media (min-width: 572px) {
.main {
margin-left: var(--sidebar-width);
}
}
#media (min-width: 992px) {
.main {
padding: 2.5em;
}
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
p {
font-size: 34px;
}
.wrapper {
position: relative;
/* height: 200px; */
width: 80%;
margin: auto;
overflow: auto;
}
.main {
margin: auto;
}
.column {
float: left;
width: 33.3%;
margin: 4em;
margin-bottom: 16px;
padding: 0 8px;
}
.card {
width: 400px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.card p {
font-size: 150%; /* changes font size inside of cards*/
}
.about-section {
padding: 50px;
text-align: center;
background-color: #474e5d;
color: white;
}
.container {
padding: 0 16px;
}
.container::after,
.row::after {
content: '';
clear: both;
display: table;
}
.title {
color: grey;
}
.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: #555;
}
#media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
.rainbow {
text-align: center;
text-decoration: underline;
font-size: 32px;
font-family: monospace;
letter-spacing: 5px;
}
.rainbow_text_animated {
background: linear-gradient(
to right,
#6666ff,
#0099ff,
#00ff00,
#ff3399,
#6666ff
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbow_animation 6s ease-in-out infinite;
background-size: 400% 100%;
}
#keyframes rainbow_animation {
0%,
100% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
}
#rcorners1 {
border-radius: 25px;
background: #d3d3d3;
padding: 20px;
width: 300px;
height: 345px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sidebar.css" type="text/css" />
<link rel="stylesheet" href="sidebarStyle.css" type="text/css" />
<meta name="description" content="Developers of Zinexium." />
<title>Zinexium</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
/>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<aside class="sidebar">
<nav>
<ul class="sidebar__nav">
<li>
<a href="index.html" class="sidebar__nav__link">
<i class="mdi mdi-home"></i>
<span class="sidebar__nav__text">Home</span>
</a>
</li>
<li>
<a href="developers.html" class="sidebar__nav__link">
<i class="mdi mdi-account-multiple"></i>
<span class="sidebar__nav__text">Developers</span>
</a>
</li>
<li>
<a href="download.html" class="sidebar__nav__link">
<i class="mdi mdi-download"></i>
<span class="sidebar__nav__text">Download</span>
</a>
</li>
<li>
<a href="contact.html" class="sidebar__nav__link">
<i class="mdi mdi-phone"></i>
<span class="sidebar__nav__text">Contact</span>
</a>
</li>
<li>
<a href="about.html" class="sidebar__nav__link">
<i class="mdi mdi-tooltip-text"></i>
<span class="sidebar__nav__text">About</span>
</a>
</li>
<li>
<a href="logs.html" class="sidebar__nav__link">
<i class="mdi mdi-message-alert"></i>
<span class="sidebar__nav__text">Logs</span>
</a>
</li>
<li>
<a href="https://discord.gg/QTkncurCkm" target="_blank" class="sidebar__nav__link">
<i class="mdi mdi-discord"></i>
<span class="sidebar__nav__text">Discord</span>
</a>
</li>
</ul>
</nav>
</aside>
<div class="about-section">
<h1>Developers</h1>
</div>
<div class="wrapper">
<div class="main">
<h2 style="text-align: center">Our Team</h2>
<div class="row">
<div class="column">
<div class="card">
<img src="Morgan.jpeg" alt="Morgan" style="width: 100%" />
<div class="container">
<h2>MorganInnit</h2>
<p class="title">Founder & Main Dev</p>
<p>i wanna die.</p>
<p>
morgan#0887<br />
UserID:780879021935689799
</p>
<p>
<a href="http://dsc.bio/morganoutit" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="thonk.jpeg" alt="ThonkPT" style="width: 100%" />
<div class="container">
<h2>ThonkPT</h2>
<p class="title">Co Dev</p>
<p>kewl gamer.</p>
<p>
ThonkPT#3766<br />
UserID:710220284531310734
</p>
<p>
<a href="http://dsc.bio/thonkpt2" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
</div>
<!--end of row-->
</div>
<!--end of main-->
</div>
<!--end of wrapper-->
</body>
</html>
The snippet isn't the exact website, only the developers page. If you wanna see the actual page, go to "The code" i linked.
Thanks.
P.S. The snippet is missing some things, so go to the actual developers page if you wanna see it ig.
If by "doesn't work" you meant "is hiding under the content" ...the solution is to give it the z-index: 1 in your CSS:
.sidebar {
z-index: 1;
}
it will do the job.
Related
Before Bootstrap library:
After Bootstrap library:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
body: body {
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
}
sidebar: .sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 240px;
background: #11101d;
padding: 6px 14px;
transition: all 0.5s ease;
}
sidebar-active: .sidebar .active {
width: 240px;
}
sidebar ul li: .sidebar ul li {
position: relative;
height: 50px;
width: 100%;
margin: 0 5px;
list-style: none;
line-height: 50px;
}
input: .sidebar ul li input {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
border-radius: 12px;
outline: none;
border: none;
background: #1d1b31;
padding-left: 50px;
font-size: 18px;
color: #fff;
}
search icon: .sidebar ul li .bx-search {
position: absolute;
z-index: 99;
color: #fff;
font-size: 22px;
}
ul li a: .sidebar ul li a {
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
}
ul li a hover: .sidebar ul li a:hover {
color: #11101d;
background: #fff;
}
}
ul li i: .sidebar ul li i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
<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" />
<title>Sinema Yönetim | Personel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
<!-- <link rel="stylesheet" href="dashboardstyle.css"> -->
<!-- ADDED BY COMMUNITY -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<div class="sidebar">
<div class="logo-content">
<div class="logo">
<i class="fa-solid fa-film"></i>
<div class="logo-name">Sinema</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<ul class="nav-list">
<li>
<i class='bx bx-search'></i>
<input type="text" placeholder="Arama yap..">
</li>
<li>
<a href="index.html">
<i class='bx bxs-grid'></i>
<span class="links_name">Anasayfa</span>
</a>
</li>
<li>
<a href="İzleyici.html">
<i class="fa-regular fa-user"></i>
<span class="links_name">İzleyici</span>
</a>
</li>
<li>
<a href="analiz.html">
<i class='bx bxs-bar-chart-alt-2'></i>
<span class="links_name">Analiz</span>
</a>
</li>
<li>
<a href="filmler.html">
<i class='bx bxs-film'></i>
<span class="links_name">Filmler</span>
</a>
</li>
<li>
<a href="bilet.html">
<i class="fa-solid fa-ticket"></i>
<span class="links_name">Bilet</span>
</a>
</li>
<li>
<a href="salon.html">
<i class='bx bx-chair'></i>
<span class="links_name">Salon</span>
</a>
</li>
</ul>
<div class="profile-content">
<div class="profile">
<div class="profile-details">
<img src="images/proflile.jpg" alt="">
<div class="name-job">
<div class="name">Aykuthan Kırcalı</div>
<div class="job">Personel şefi</div>
</div>
</div>
<i class='bx bx-log-in' id="log-out"></i>
</div>
</div>
</div>
<div class="home-content">
<div class="text">Sinema Salonu | Personel</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
When I add the bootstrap library to the html codes, the sidebar shifts to the right, how can I fix it?
body{
font-size: 16px;
color: #fff;
background-color: lightskyblue;
font-family: 'Nunito', sans-serif;
}
#header-nav{
background-color: white;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/logotild1.png') no-repeat;
width: 170px;
height: 100px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding-top: 25px;
margin-top: 25px;
}
.navbar-image, .navbar-brand{
float: left;
}
.navbar-brand h1 { /* Restaurant name */
font-family: 'Nunito', sans-serif;
color: lightskyblue;
font-size: 1.5em;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus {
text-decoration: none;
}
#nav-list {
margin-top: 10px;
}
#nav-list a {
color: black;
text-align: center;
}
#nav-list a:hover {
background: #E7E7E7;
}
#nav-list a span {
font-size: 1.8em;
}
#navBarlist{
font-size: 1.2em;
}
#smallpic{
margin-top: 30px;
}
.navbar-header button.navbar-toggler, .navbar-header .navbar-toggler-icon {
border: 1px solid lightgrey;
}
.navbar-header button.navbar-toggler{
clear: both;
}
.panel-footer{
position: absolute;
margin-top: 30px;
padding-top: 35px;
padding-bottom: 30px;
background-color: #222;
border-top: 0;
width: 100%;
}
.panel-footer div.row{
margin-bottom: 35px;
}
#om{
line-height: 2;
}
/* HOME PAGE */
.container .jumbotron {
box-shadow: 0 0 50px white;
border: 2px solid white;
}
#tøj-tile, #face-tile, #andet-tile{
height: 250px;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
position: relative;
border: 2px solid whitesmoke;
overflow: hidden;
}
#tøj-tile:hover, #andet-tile:hover, #face-tile:hover{
box-shadow: 0 1px 5px 1px black;
}
#tøj-tile{
background: url('../images/tøjtile.png') no-repeat;
background-position: center;
}
#andet-tile{
background: url('../images/andettile.png') no-repeat;
background-position: center;
}
#face-tile{
background: url('../images/facetile.png') no-repeat;
background-position: center;
}
#tøj-tile span, #andet-tile span, #face-tile span{
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
text-transform: uppercase;
background-color: #000;
color: #fff;
opacity: .8;
}
/********** Large devices only **********/
#media (min-width: 1200px) {
.container .jumbotron {
background: url('../images/storbilledweb.jpg') no-repeat;
height: 675px;
}
#tøj-tile, #andet-tile, #face-tile{
width: 360px;
margin: 0 auto 15px;
}
}
/********** Medium devices only **********/
#media (min-width: 992px) and (max-width: 1199px) {
/* Header */
/* End Header */
.container .jumbotron {
background: url('../images/mediumbillede.jpg') no-repeat;
height: 558px;
}
}
/********** Small devices only **********/
#media (min-width: 768px) and (max-width: 991px) {
.container .jumbotron {
background: url('../images/lillebillede.jpg') no-repeat;
height: 432px;
}
}
/********** Extra small devices only **********/
#media (max-width: 767px) {
.navbar-brand{
padding-top: 10px;
height: 80px;
}
.navbar-brand h1{
padding-top: 10px;
font-size: 5vw;
}
#tøj-tile, #andet-tile, #face-tile{
width: 360px;
margin: 0 auto 15px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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">
<title>Tilde & brdr</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-expand-lg navbar-light-bg-light">
<div class="container">
<div class="navbar-header">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navBarlist"
aria-controls="navBarlist"
aria-expanded="false"
aria-label="Toggle navigation">
<span
class="navbar-toggler-icon">
</span>
</button>
<a
href="index.html"
class ="navbar-image float-left d-none d-sm-block"
>
<div
id = "logo-img"
alt="Logo image"
>
</div>
</a>
<div
class="navbar-brand">
<a
href="index.html">
<h1>Tilde & Brdr.</h1>
</a>
</div>
</div>
</div>
<div
class="collapse navbar-collapse"
id="navBarlist"
>
<ul
id = "nav-list"
class="navbar-nav ml-auto">
<li
class="nav-item">
<a
class="nav-link"
href="#">
Home
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Tøj
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Udsalg
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Kontakt
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Facebook
</a>
</li>
</ul>
</div>
</nav>
</header>
<div id="main-content" class="container">
<div class="jumbotron" id="smallpic">
<img src="images/lillebillede.jpg" alt="Picture of clothing"
class="img-fluid d-block d-sm-none">
</div>
<div id="home-tiles" class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="tøj-categories.html">
<div id="tøj-tile">
<span>tøj</span>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="andet-category.html">
<div id="andet-tile">
<span>andet</span>
</div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="face-category.html">
<div id="face-tile">
<span>facebook</span>
</div>
</a>
</div>
</div><!-- End of #home-tiles -->
<footer class="panel-footer">
<div id="footi"class="container">
<div class="row">
<section id="kontakt" class="col-sm-4">
<span>Kontakt:</span><br>
Email: blablabla#bla.dk<br>
Facebook<br>
Tlf: 09010222<br>
</section>
<section id="om" class="col-sm-4">
Alt er hjemmesyet/hjemmelavet af mig.<br>
Dette er min hobby, derfor kan der være længere leveringstid på nogen ordre, men kontakt mig, så vi kan finde ud af noget nærmere. Jeg håber I synes noget af det jeg laver vækker en interesse.
</section>
<section id="bla" class="col-sm-4">
blablabla blablabla ballbsldablal alablslbalslbalslasal alablsblasalalsa
</section>
</footer>
</div>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-3.6.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I've encountered a problem where I get some space between the browser-edge and the footer. I can tell that the size of the footer isnt big enough. The width I've set to 100% but obviously that isn't the problem. Can any1 explain to me what I'm missing?
It started out by having the same space on both left and right, but putting position:absolute somehow solved the right side. No idea what to do with the left side.
You need to override default body margin and set it to 0
body {
font-size: 16px;
color: #fff;
background-color: lightskyblue;
font-family: 'Nunito', sans-serif;
margin: 0;
}
I want to make a simple gallery.
I set up the width and height of li and the img size, but it doesn't fit.
I want to make unified image sizes.
What's wrong with my code?
body
{
margin: 0;
padding: 0;
background-color: #fff;
color: black;
font-family: sans-serif, Arial;
font-size: 15px;
line-height: 1.5;
}
.container
{
max-width: 1200px;
margin: auto;
}
.container a
{
background: #ccc;
color: #666;
text-decoration: none;
padding: 10px;
border-radius: 20px;
padding-left: 20px;
padding-right: 20px;
display: inline-block;
transition: background 0.5s, color 0,5s;
}
.container a:hover
{
background: #aaa;
color: #fff;
}
main
{
background: #111;
padding: 25px;
width: 100%;
float: left;
box-sizing: border-box;
}
/*Gallery*/
.gallery
{
background: #999;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 25px;
display: block;
width: 100%;
}
.gallery li
{
background: red;
width: 31%;
float: left;
margin-left: 1%;
margin-right: 1%;
height: 175px;
}
.gallery img
{
background: blue;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.container .gallery a
{
background: transparent;
padding: 0;
display: block;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta lang="hu">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="res/teszt.css">
<title>test</title>
</head>
<body>
<!-- FEJLÉC -->
<div class="container">
<main>
<ul class="gallery">
<li>
<a href="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" target="_blank">
<img src="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" target="_blank">
<img src="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpaperaccess.com/full/255959.jpg" target="_blank">
<img src="https://wallpaperaccess.com/full/255959.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpapercave.com/wp/wp4013939.jpg" target="_blank">
<img src="https://wallpapercave.com/wp/wp4013939.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" target="_blank">
<img src="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
</ul>
</main>
</div>
</body>
</html>
Just define some height and width to image it will start working.
body
{
margin: 0;
padding: 0;
background-color: #fff;
color: black;
font-family: sans-serif, Arial;
font-size: 15px;
line-height: 1.5;
}
.container
{
max-width: 1200px;
margin: auto;
}
.container a
{
background: #ccc;
color: #666;
text-decoration: none;
padding: 10px;
border-radius: 20px;
padding-left: 20px;
padding-right: 20px;
display: inline-block;
transition: background 0.5s, color 0,5s;
}
.container a:hover
{
background: #aaa;
color: #fff;
}
main
{
background: #111;
padding: 25px;
width: 100%;
float: left;
box-sizing: border-box;
}
/*Gallery*/
.gallery
{
background: #999;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 25px;
display: block;
width: 100%;
}
.gallery li
{
background: red;
width: 31%;
float: left;
margin-left: 1%;
margin-right: 1%;
height: 175px;
}
.gallery img
{
background: blue;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.container .gallery a
{
background: transparent;
padding: 0;
display: block;
height: 200px;
width: 100%;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta lang="hu">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="res/teszt.css">
<title>test</title>
</head>
<body>
<!-- FEJLÉC -->
<div class="container">
<main>
<ul class="gallery">
<li>
<a href="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" target="_blank">
<img src="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" target="_blank">
<img src="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpaperaccess.com/full/255959.jpg" target="_blank">
<img src="https://wallpaperaccess.com/full/255959.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpapercave.com/wp/wp4013939.jpg" target="_blank">
<img src="https://wallpapercave.com/wp/wp4013939.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" target="_blank">
<img src="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
</ul>
</main>
</div>
</body>
</html>
I want my sidemenu to be fixed. But whenever I do it the content page crashes.
It's this class menu_left . When I remove position: fixed then all works fine. But i want it to be fixed. I just want the menu to stay in position so I can scroll down my content only.
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
nav {
padding: 10px 40px;
background: white;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
#app {
display: flex;
}
.topbar-user {
display: flex;
}
.menu_left {
background: #333c4e;
width: 200px;
height: 100vh;
position: fixed;
}
.menu_left-icon {
padding: 20px;
}
.menu_left-item {
display: flex;
align-items: center;
color: white;
text-decoration: none;
}
.menu_left-item:hover {
background: #293141;
transition: 0.5s;
}
.topbar-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.main__content {
width: 100%;
overflow: scroll;
}
.main__content-container {
padding: 34px 34px;
}
.imgs {
width: 34px;
padding: 20px;
}
.white-card {
background-color: #fff;
width: 100%;
display: flex;
margin-top: 34px;
height: auto;
align-items: center;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
.card1 {
flex: 1;
}
.card2 {
padding: 20px;
}
#media (max-width: 600px) {
.menu_left {
display: none;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
<nav>
<div class="topbar-items">
<H1>Logo</H1>
<div class="topbar-user">
<i class="fas fa-bell"></i>
<p>Jan Kowalski</p>
<i class="fas fa-angle-down"></i>
</div>
</div>
</nav>
<div id="app">
<div class="menu_left">
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
</div>
<div class="main__content">
<div class="main__content-container">
<h2>Main Page</h2>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I undesrtand you meant to say the content "collapses" to the left (not crashes).
You could use a pusher placeholder element like so:
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
nav {
padding: 10px 40px;
background: white;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
position: fixed;
width: 100%;
box-sizing: border-box;
}
#app {
display: flex;
padding-top: 47px;
}
.topbar-user {
display: flex;
}
.menu_left {
background: #333c4e;
width: 200px;
height: 100vh;
position: fixed;
}
.menu_left-pusher {
flex: 0 0 200px;
}
.menu_left-icon {
padding: 20px;
}
.menu_left-item {
display: flex;
align-items: center;
color: white;
text-decoration: none;
}
.menu_left-item:hover {
background: #293141;
transition: 0.5s;
}
.topbar-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.main__content {
width: 100%;
}
.main__content-container {
padding: 34px 34px;
}
.imgs {
width: 34px;
padding: 20px;
}
.white-card {
background-color: #fff;
width: 100%;
display: flex;
margin-top: 34px;
height: auto;
align-items: center;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
.card1 {
flex: 1;
}
.card2 {
padding: 20px;
}
#media (max-width: 600px) {
.menu_left {
display: none;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
<nav>
<div class="topbar-items">
<H1>Logo</H1>
<div class="topbar-user">
<i class="fas fa-bell"></i>
<p>Jan Kowalski</p>
<i class="fas fa-angle-down"></i>
</div>
</div>
</nav>
<div id="app">
<div class="menu_left-pusher">...</div>
<div class="menu_left">
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
</div>
<div class="main__content">
<div class="main__content-container">
<h2>Main Page</h2>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I would like to center the text on my homepage vertical in the middel of the page. Right now i tried to do this with a percentage, but this isn't the right way because when i open the webpage on my phone or an ipad the text doesn't center. Does anyone know how i can center it the right way?
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html, body{
width: 100%;
margin: 0;
padding: 0;
height:100%;
}
/* wrapper */
#wrapper {
min-height: 100%;
position: relative;
}
/* menu */
#header {
height: 80px;
width: 100%;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover{
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
padding-bottom:80px;
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
margin-top: 15%;
}
/* footer */
#footer {
background: #000000;
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
display offers you 2 options : the table layout or the flex model ( both will push footer down if content grows)
test snippets in full page mode and resize window
1) display:table/table-row/table-cell (should include IE8 and older browsers CSS 2.1)
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html,
body,
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
/* wrapper */
#wrapper {
display: table;
position: relative;
}
/* menu */
#header {
height: 80px;
display: table-row;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover {
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
vertical-align: middle;
display: table-cell;
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
}
/* footer */
#footer {
background: #000000;
width: 100%;
height: 80px;
display: table-row;
text-align: center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
2) the flex model (latest browsers)
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html,
body,
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
/* wrapper */
#wrapper, #content {
display: flex;/* triiger flex model prefixed might be needed for not so old browsers */
flex-direction:column /* here we need to stack elements */
}
/* menu */
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover {
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
flex:1;/* take as much space avalaible */
justify-content:center;/* because it is display:flex too, you can horizontally center its contents */
align-items:center;/* because it is display:flex too, you can vertically center its contents */
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
}
/* footer */
#footer {
background: #000000;
height: 80px;
text-align:center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
add overflow:auto to #content and it will show a scrollbar if needed , so footer is not pushed down.
Try adding this CSS to the text you want centered:
.your_centered_element {
position: absolute;
top:50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
This will keep the element centered.
Read about the transform: translateX(-50%) translateY(-50%); in the MDN docs
Hope this helps!
One solution here is to use viewport-width and viewport-height units:
.anouk {
position: absolute;
top: 0;
left: 0;
width: 100vw;
line-height: 100vh;
margin: 0;
padding: 0;
text-align: center;
}
for centering the text you have to use **margin auto**
css file--
* {
border: 1px dashed black;
}
div >p {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
background-color: #FFD700;
margin: auto;
}
html code
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet3.css"/>
<title>Result</title>
</head>
<body>
<div><p >
Anouk Den Haag
</p></div>
</body>
</html>
SEE THE SNAPSHOT