So I have a code for a website that uses HTML and CSS but I have a problem with CSS.
HTML:
<html>
<head>
<title>Test</title>
</head>
<body>
<h2>TEST</h2>
<div class="navbar">
<div class="navbar-inner">
<img src="todo.png">
<img src="home.png">
<img src="info.png">
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #222222;
width: 100%;
}
img {
width: 50px;
height: 50px;
}
a {
cursor: pointer;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.navbar a {
color: #f2f2f2;
text-align: center;
display: inline-block;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0px auto;
}
.navbar a:hover {
background: #222222;
color: black;
}
This is my result:
Result Image
It works and all, but if you look at the bottom left (at the menu), it isn't fully covered. I have tried many ways to cover it, but I can't seem to get it right.
Any ideas? Appreciated if you explain it to me as well.
Most major browsers apply a margin on the body, thus causing the footer not expanding to the viewport's full width.
To get rid of the margin, applying margin: 0 to body:
body {
background-color: #222222;
width: 100%;
margin:0;
}
img {
width: 50px;
height: 50px;
}
a {
cursor: pointer;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.navbar a {
color: #f2f2f2;
text-align: center;
display: inline-block;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0px auto;
}
.navbar a:hover {
background: #222222;
color: black;
}
<html>
<head>
<title>Test</title>
</head>
<body>
<h2>TEST</h2>
<div class="navbar">
<div class="navbar-inner">
<img src="todo.png">
<img src="home.png">
<img src="info.png">
</div>
</div>
</body>
</html>
Just add left : 0;
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
You can also reduce that type of error by just adding this code at the top.
*{
margin:0;
padding:0;
box-sizing:border-box;
}
Related
I have a navbar inside a header tag. the header tag is flex. the navbar too. in the navbar i have three a tags with the display value inline-block; and a padding in the height and width. So far so good. When i hover the links the hover effect is shown over the whole height.
The problem: If I add an image to the first link, I can't make the image higher than 10 px because the padding affects the entire navbar height. What I do not want.
Question: How can I add the image to the link without it affecting the height of the navbar?
My code
body {
margin: 0;
padding: 0;
}
header {
display:flex;
justify-content: space-between;
align-items: center;
background: green;
position: fixed;
top: 0;
overflow: hidden;
width:100%;
}
.logo {
background: yellow;
display: flex;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
align-items: center;
}
.navbar a:not(:first-child) {
display: inline-block;
}
.navbar a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.flex {
gap:10px;
display: flex;
align-items: center;
font-size: 12px;
}
.main {
margin-top: 180px;
color: color;
height:50vh;
background: black;
}
<div>
<header>
<div class="logo">
<img src="https://via.placeholder.com/40">Logo
</div>
<nav class="navbar">
<a href="#home">
<div class="flex">
<div>
<img src="https://via.placeholder.com/30">
</div>
<div>10000</div>
</div>
</a>
News
Contact
</nav>
</header>
<main class="main">
text
</main>
</div>
expected
body {
margin: 0;
pading: 0;
}
header {
display:flex;
justify-content: space-between;
align-items: center;
background: green;
position: fixed;
top: 0;
overflow: hidden;
width:100%;
}
.logo {
background: yellow;
display: flex;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
align-items: center;
}
.navbar a:not(:first-child) {
display: inline-block;
}
.navbar a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.flex {
gap:10px;
display: flex;
align-items: center;
font-size: 12px;
}
.main {
margin-top: 180px; /* Add a top margin to avoid content overlay */
color: color;
height:50vh;
background: black;
}
<div>
<header>
<div class="logo">
<img src="https://via.placeholder.com/40">Logo
</div>
<nav class="navbar">
<a href="#home">
10000
</a>
News
Contact
</nav>
</header>
<main class="main">
xca
</main>
</div>
Use flex behavior to align and stretch instead of additional markups
In the code snippet below, I removed the extra markup in the first a element that contains the img. Instead, I made all a tags display: inline-flex and removed vertical padding in the first one. Then, using the parent nav element's align-items property, I ensured each a tag has the same full height for consistent hover effect.
body {
margin: 0;
padding: 0;
}
header {
display:flex;
justify-content: space-between;
align-items: center;
background: green;
position: fixed;
top: 0;
overflow: hidden;
width:100%;
}
.logo {
background: yellow;
display: flex;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
align-items: stretch;
}
.navbar a {
display: inline-flex;
}
.navbar a {
color: #f2f2f2;
justify-content: center;
align-items: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.navbar a:first-of-type {
padding-top:0;
padding-bottom:0;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.flex {
gap:10px;
display: flex;
align-items: center;
font-size: 12px;
}
.main {
margin-top: 180px;
color: color;
height:50vh;
background: black;
}
<div>
<header>
<div class="logo">
<img src="https://via.placeholder.com/40">Logo
</div>
<nav class="navbar">
<a href="#home">
<img src="https://via.placeholder.com/30">
10000
</a>
News
Contact
</nav>
</header>
<main class="main">
text
</main>
</div>
I've literally tried everything at this point, but something in my code is making my website act funny. I've set it up to accept a picture with a very tall resolution to fill the center column of my CSS grid with the other two acting as margins. When I do this with my current code, the picture overflows the grid and when I scroll the margins just stop half way down the page. The container grows to size with the height of the photo but my margins don't.
Here's a picture of my website scrolled down half way, the cream colored part is the container and the black part is where the margins stop.
Picture of website:
Thanks for any advice if someone has some!
body {
margin: 0;
width: 100vw;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
}
.content {
width: 70vw;
height: 100vh;
background-color: #252525;
}
.margin {
width: 15vw;
height: 100vh;
background-color: #000000;
}
table{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
tr {
vertical-align: top;
}
p {
color: #45d163;
font-size: 2.5vh;
}
.fixed {
position: fixed;
}
.grid-container {
display: grid;
grid-template-columns: 15% 70% 15%;
background-color: #fceee3;
width: 100vw;
height: 100vh;
min-width: 0;
min-height: 100vh;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
min-height: 100vh;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
color: blue;
font-size: 30vh;
text-align: left;
min-height: 100vh;
margin-top: 0%;
}
<!DOCTYPE html>
<html lang="en" >
<!-- partial:index.partial.html -->
<head>
<meta charset="UTF-8">
<title>Keyboard Mechanic</title>
<link rel="stylesheet" href="style.css"> </link>
<style>
.header {
overflow: hidden;
background-color: #171615;
padding: 1% 1%;
width: 100%;
position: fixed;
}
.header a {
float: left;
color: #f1f1f1;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
width: 8vw;
margin-right: 10px;
}
.header a.active {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a.logo {
all: unset;
}
.login {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header-right {
float: right;
}
#media screen and (max-width: 100%) {
.header a {
float: none;
display: block;
text-align: left;
}
}
</style>
<style>
.wrapper {
display: grid;
grid-template-columns: auto fit-content(70%) auto;
background-color: #fceee3;
width: 100vw;
height: 100%;
overflow: scroll;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
height: auto;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
height: auto;
margin-top: 0%;
}
</style>
</head>
<body>
<div class="header">
<img src="images/cornerlogo.png" height="50px">
<div class="header-right">
<a class="active" href="newLook.html">Home</a>
<a class="active" href="games.html">Games</a>
<a class="active" href="webprojects.html">Web Projects</a>
<a class="login" href="login.html">Login</a>
Contact
About
</div>
</div>
<div class="wrapper">
<div class="grid-item"></div>
<div class="grid-center">
<img src="images/homepageFour.png" width="100%"> </img>
</div>
<div class="grid-item"></div>
</div>
</body>
</html>
<!-- partial -->
The second selector is valid because the specificity value of the selector named ".header a" is lower than the specificity value of the selector named ".header a.active".
If you want to almost maximize the specificity value, you have to: use !important.
.header a {
width: max-content !important;
}
So I am trying to create a logo and a menu icon in the header but for some reason, they are always overflowing the height of the header which I have strictly specified! Why is that ?
And I know I can hide out the overflowing items by using overflow:hidden; property but it is not always a good case.
For example, I tried to create a hamburger icon but I could not because of this overflow issue. The menu lines were working as if the entire element is shown but I had to hide it out so that it could fit into the header.
Here is the code -
<header>
<div class="logo">
Elvis
</div>
<div class="menu">
Hamburger Menu
</div>
</header>
In CSS -
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
border: 2px solid red;
}
.logo {
font-size: 33px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
color: white;
}
.menu {
height: 100px;
width: 100px;
background-color: #bd4439;
}
Here is the codepen link -
https://codepen.io/raghav-sharma333/pen/eYeZYGO
Here is the image of the issue -
Overflowing content
So I just want to know :
Why is it happening?
&
How can it be prevented?
Basically you are forcing your elements to be higher than the header itself by giving them static heights (height 100px on the menu and padding-top/bottom 30px on the logo)
I updated your pen: https://codepen.io/penmasterx/pen/wvPGaGz
Using height 100%, so the elements adapt to the header.
Let me know if this solves your problem. If not, let me know in more detail what you're trying to accomplish.
What I added to the pen:
.logo {
height: 100%;
display: flex;
align-items: center;
/* removed padding top/bottom */
}
.menu {
height: 100%;
}
In such cases, it is better to use the position to manage the inheritance of the elements
I modified your code:
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
align-items: center;
border: 2px solid red;
position: relative;
}
.wrapper{
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
position: absolute;
}
.logo {
font-size: 30px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
max-height: 100%;
color: white;
}
.menu {
height: 100%;
width: 100px;
background-color: #bd4439;
}
<header>
<div class="wrapper">
<div class="logo">Elvis</div>
<div class="menu">Hamburger Menu</div>
</div>
</header>
First: the reason you use a 33px font which adds padding, then you use a height:100px on the menu while on your header you put a height:60px
you also need to add align-self: center on your flex-box
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
align-self: center;
border: 2px solid red;
}
.logo {
font-size: 17px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
color: white;
}
.menu {
height: 60px;
width: 100px;
background-color: #bd4439;
}
I did it like 'Ali Memar' answer but the difference is the position of the texts. they are now in the middle of the div.
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
align-items: center;
border: 2px solid red;
position: relative;
}
.wrapper{
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
position: absolute;
}
.logo {
font-size: 30px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
max-height: 100%;
color: white;
text-align: center;
display: flex;
align-items: center
}
.menu {
height: 100%;
width: 100px;
background-color: #bd4439;
text-align: center;
display: flex;
align-items: center
}
<header>
<div class="wrapper">
<div class="logo">Elvis</div>
<div class="menu">Hamburger Menu</div>
</div>
</header>
I can't seem to find a way to center the images inside the div.. any tips ? Pretty basic stuff I know, just recently got into it again. I hope anybody gets what I'm trying to do here ?
I can't seem to find a way to center the images inside the div.. any tips ? Pretty basic stuff I know, just recently got into it again. I hope anybody gets what I'm trying to do here ?
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
border: 0;
background-color: grey;
background-attachment: fixed;
background-size: 100% auto;
}
ul#horizontal-list {
list-style: none;
}
ul#horizontal-list li {
display: inline;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.navbar {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background-color: black;
color: white;
text-align: center;
left: 0;
right: 0;
z-index: 1;
}
.navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin-top: 0px;
}
.header {
width: 100%;
height: 100%;
background-image: url("img/bg/background1.png");
background-color: grey;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.body {
/*height: 100%;*/
width: 100%;
background-color: white;
color: black;
padding-left: 5%;
padding-right: 5%;
overflow: hidden;
}
.content {
margin: auto;
width: 100%;
background-color: white;
color: black;
border-right: double;
border-left: double;
text-align: justify;
font-size: 20px;
font-family: arial;
padding-top: 10%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
}
.social {
margin: auto;
position: absolute;
}
.social a {
}
.footer {
height: 50px;
width: 100%;
background-color: black;
color: white;
margin: auto;
vertical-align: middle;
}
#copyright {
display: table;
}
#cpy{
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
<meta name="description" content="My Personal Portfolio">
<title>John's Work</title>
</head>
<body>
<div class="navbar">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="header">
</div>
<div class="body">
<div class="content">
<div class="social">
<a href="https://www.facebook.com/" style="color:black; text-decoration:none">
<img src="img/fb.png" alt="Facebook">
</a>
<a href="http://www.instagram.com/" style="color:black; text-decoration:none" >
<img src="img/ig.png" alt="Instagram">
</a>
<a href="http://www.snapchat.com/" style="color:black; text-decoration:none" >
<img src="img/snapchat.png" alt="Snapchat">
</a>
</div>
</div>
</div>
<div class="footer" id="copyright" style="text-align:center">
<div id="cpy">©)</div>
</div>
</body>
</html>
As I understand the main trouble is an absolute position of .social block. If this position is really necessary use:
left: 50%;
transform: translateX(-50%);
In other case you can remove position: absolute; and add
display: flex;
justify-content: center;
I’m trying to practice my HTML5 and CSS3 skills by making a navbar for my page, but I’m having a lot of trouble. I'm trying to use HTML5 semantic tags to make it, but none of them are looking how I want them to and it is a huge positioning mess. Could someone please tell me how I could make a functional navbar?
Here’s my HTML code for the whole navbar and header:
body {
margin:0;
}
#nav-plus-head-wrapper {
background: blue;
height: 100px;
position: absolute;
top: 0px;
left:0px;
right:0px;
}
#topheader {
}
#topnav {
background: yellow;
position: relative;
top: 0px;
right: 0px;
}
.navli {
display: inline;
}
a:link {
text-decoration: none;
color: red;
}
a:hover {
text-decoration: none;
color: orange;
}
a:visited {
text-decoration: none;
color: white;
}
<section id="nav-plus-head-wrapper">
<!--CODE FOR WEBSITE NAME-->
<header id="topheader">
<h1>Site</h1>
</header>
<!--CODE FOR TOP NAVBAR-->
<nav id="topnav">
<ul id="topnav-ul">
<li class="navli">Home</li>
<li class="navli">About</li>
<li class="navli">Services</li>
<li class="navli">Contact</li>
</ul>
</nav>
</section>
There is more than one way to make a functional nav bar. you can buttons, divs, links, lists, or even a mix of them. I usually go with the simplest way.
here is a simple way with simple code that you can check and read to learn from it.
I hope this will help.
* {
scroll-behavior: smooth;
margin: 0;
padding: 0;
text-decoration-line: none;
scroll-padding-top: 100px;
}
.header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
background: #666699;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
}
.navbar {
width: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
}
.navBtn {
width: 80px;
height: 40px;
margin: 0 10px;
font-size: 20px;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.navBtn a {
color: #000;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.section {
width: 100%;
height: 90vh;
z-index: -1;
display: flex;
color: white;
font-size: 40px;
justify-content: center;
align-items: center;
align-content: center;
}
.homeSect {
background: #0066ff;
margin-top: 100px;
height: 100vh;
}
.workSect {
background: #33cc33;
}
.aboutSect {
background: #ffcc00;
}
</head>
<header class="header" id="header">
<nav class="navbar">
<button class="navBtn homeBtn" id="homeBtn">
Home
</button>
<button class="navBtn workBtn" id="workBtn">
Work
</button>
<button class="navBtn aboutBtn" id="aboutBtn">
About
</button>
</nav>
</header>
<body class="body">
<div class="onscrolldiv" id="onscrolldiv"></div>
<section class="homeSect section" id="homeSect">Home section</section>
<section class="workSect section" id="workSect">Work section</section>
<section class="aboutSect section" id="aboutSect">About section</section>
first you need to reset all your html like this:
*, *:after, *:before {
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
then you float your <header id="topheader"> left maybe it s a logo
#topheader {
float:left;
color:white;
}
and you <nav id="topnav"> right the main nav
#topnav {
position: relative;
top: 20px;
float:right;
}
now you can set you items like this
.navli {
float:left;
list-style:none;
width:24%;
height:100%;
padding:20px;
margin:0 0 0 1%;
background-color:#ccc;
}
demo: http://jsfiddle.net/AvHKT/1/