I'm very new to html and css and when trying to make a navbar, the colour doesn't cover the entire top of page. I've tried adjusting the height and width but to no luck. Here is what the webpage looks like at the moment. As you can see, the blue header doesn't quite touch the top and sides. Any help would be greatly appreciated. Here is the index.html file:
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Noe ice-cream for you</title>
</head>
<body style="background-color: gray;">
<header>
<div class="container">
<img src="assets/subzero.png" alt="logo" class="logo" height="70px">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Shop</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
And here is the style.css file:
h1{
font-family: 'Open Sans', sans-serif;
}
.paragraph{
font-size: medium;
line-height: 62px;
font-family: 'Open Sans', sans-serif;
}
.container{
font-family: 'Open Sans', sans-serif;
}
header{
background-color:aqua;
padding: 0;
margin: 0;
}
.logo{
float: left;
padding: 10px 0;
}
nav{
float: right;
}
header::after {
content: '';
display: table;
clear: both;
}
nav ul{
margin: 0;
padding: 0;
list-style:none;
}
nav li{
display: inline-block;
margin-left: 70px;
padding-top: 50px;
}
nav a{
text-decoration: none;
text-transform: uppercase;
color: #444;
}
nav a:hover{
color:black;
}
You can add below on your style.css
body {
margin:0;
padding:0;
}
or add
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css#5.0.1/reset.css"
on your head tag before including tag link style.css
try this in css :
*{
padding: 0;
margin: 0;
}
Always start by resetting your document and setting the box-sizing property. With box-sizing padding and border are added to the element's height and width. So you can do something like this
*, ::after, ::before {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
Related
Problem is shown in the link given below
** when i try to hover or press on the navlinks it's not selecting but showing text cursor but by moving a few inches it shows why this is happening is something wrong with the padding or its the chrome ? **
(https://www.youtube.com/watch?v=Vbt5geHBPz4)
my html code
{% load static %}
<!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">
<!-- icons -->
<link rel="stylesheet" href="https://unpkg.com/boxicons#latest/css/boxicons.min.css">
<!-- own css -->
<link rel="stylesheet" href="{% static '/css/home/style.css' %}">
<!-- google fonts -->
<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=Abyssinica+SIL&family=Montserrat:wght#500&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header>
TakeAway
<div class="bx bx-menu" id="menu-bar"></div>
<ul class="navbar">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</header>
</body>
mycss
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Abyssinica SIL', serif;
scroll-behavior: smooth;
list-style: none;
text-decoration: none;
}
:root{
--main-color:rgb(243, 176, 88);
--text-color:#fff;
--bg-color:#ff4b24;
--big-font:5rem;
--h2-font:2.25rem;
--p-font:0.9rem;
}
*::selection{
background:var(--main-color);
color: rgb(0, 0, 0);
}
body{
color: var(--text-color);
background: var(--bg-color);
}
header{
position: fixed;
top: 0;
right: 0;
width: 100%;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 150px;
background: var(--bg-color);
}
.logo{
color: var(--main-color);
font-weight: 600;
font-size: 2.4rem;
}
.navbar{
display: flex;
}
.navbar a{
color: var(--text-color);
font-size: 1.1rem;
padding: 10px 20px;
font-weight: 500;
}
.navbar a:hover{
color: var(--main-color);
transition: 0.4s;
}
You have a typo in your html, your link text should be inside the anchor <a> tag as follow:
<li>Home</li>
You need to made some changes on your li element.
How html element looks like :
<tagname>Content Here</tagname>
If you didn't add content inside the element. then your element is not showing impact of your content.
<ul class="navbar">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
how do I make my <a> tags in my Navbar take the full available height from it´s parent instead of just the space required by the content?
Currently, the hover effect only triggers when you mouseover the TEXT, because that's all the space that the content is taking. I want the entire available height to be clickable when hovered.
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--clr-800: #0d0d0d;
--clr-600: #122459;
--clr-400: #3565f2;
--clr-200: #3d79f2;
--clr-100: #f2f2f2;
--font-primary: "Montserrat", sans-serif;
--font-secondary: "Bebas Neue", cursive;
}
body {
font-family: var(--font-primary);
background: var(--clr-100);
color: var(--clr-800);
padding: 0;
margin: 0;
}
h1 {
font-family: var(--font-secondary);
}
header {
background-color: var(--clr-800);
color: var(--clr-100);
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0 0.5rem var(--clr-800);
height: 40vh;
}
header > h1 {
margin: 0 0 0 4rem;
}
nav > ul {
display: flex;
list-style-type: none;
margin: 0 4rem 0 0;
padding: 0;
}
nav > ul > li {
margin-left: 2rem;
}
nav > ul > li > a {
color: var(--clr-100);
text-decoration: none;
}
nav > ul > li > a:hover {
color: var(--clr-800);
background-color: red;
padding: 2rem 0;
}
<!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">
<title>Website</title>
<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=Bebas+Neue&family=Montserrat:wght#300;500;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<h1 class="logo">Logo</h1>
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
</body>
</html>
This structure should work nicely for you. I recommend getting good at using your browser dev tools. If you inspect your elements you will notice that nav and ul need to have height: 100%; to fill the available header height.
Then, you need to set min-height: 100%; on a and use flex with align-items: center; to center them once again. I adjusted the spacing by adding horizontal padding and margin on the a so it doesn't affect the clicking area.
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--clr-800: #0d0d0d;
--clr-600: #122459;
--clr-400: #3565f2;
--clr-200: #3d79f2;
--clr-100: #f2f2f2;
--font-primary: "Montserrat", sans-serif;
--font-secondary: "Bebas Neue", cursive;
}
body {
font-family: var(--font-primary);
background: var(--clr-100);
color: var(--clr-800);
padding: 0;
margin: 0;
}
h1 {
font-family: var(--font-secondary);
}
header {
background-color: var(--clr-800);
color: var(--clr-100);
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0 0.5rem var(--clr-800);
height: 40vh;
}
header>h1 {
margin: 0 0 0 4rem;
}
nav>ul {
display: flex;
list-style-type: none;
margin: 0;
padding-right: 3em;
}
nav>ul>li>a {
color: var(--clr-100);
text-decoration: none;
}
nav>ul>li>a:hover {
color: var(--clr-800);
background-color: red;
}
a {
padding: 0 .5em;
margin: 0 .5em;
}
nav,
ul {
height: 100%;
}
a {
min-height: 100%;
display: flex;
align-items: center;
}
<!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">
<title>Website</title>
<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=Bebas+Neue&family=Montserrat:wght#300;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<h1 class="logo">Logo</h1>
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
</body>
</html>
I reset the margins of all the elements, but there is a gap in between, which I don't know why.
I tried it in chrome and firefox browsers. Same result in both. I'm waiting for your help. This is really important
enter image description here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
#nav {
padding: 20px;
}
#menu{
list-style-type: none;
}
#menu li {
display: inline-block;
min-width: 140px;
padding: 15px;
text-align: center;
background-color: rgb(48, 48, 48);
}
#menu li a{
text-decoration: none;
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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
For the purpose of inline-block displayed elements, whitespace is treated as, well, whitespace. It's the spaces within your code. It would be easier if you were use #menu{ display: flex; } instead of making li into inline-blocks.
i will fix it for you
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
#nav {
padding: 20px;
}
#menu{
list-style-type: none;
}
ul {
font-size: 0;
}
#menu li {
font-size: 16px;
display: inline-block;
min-width: 140px;
padding: 15px;
text-align: center;
background-color: rgb(48, 48, 48);
}
#menu li a{
text-decoration: none;
color: white;
}
There are several ways you could get round this - probably the most inelegant would be to remove the newlines/spaces in your HTML list.
More practical probably is to have the ul display: flex. But you will have to consider what you want to happen responsive-wise. Do you ever need the elements to flow to the next line on a small device?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
#nav {
padding: 20px;
}
#menu{
list-style-type: none;
display: flex;
}
#menu li {
min-width: 140px;
padding: 15px;
text-align: center;
background-color: rgb(48, 48, 48);
}
#menu li a{
text-decoration: none;
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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
I'm learning CSS3 and I practicing creating a navbar, that I want to do is to expand the width of input text to 50% into a navbar, I try to apply a class:
.main-nav__searchbar{
width: 50%;
margin: 0;
padding: 0;
}
But it no works
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
margin:0px;
}
#product-overview {
background-color: #ff1b68;
width: 100%;
height: 528px;
padding: 10px;
}
.section-title{
color: #2ddf5c;
}
#product-overview h1{
color:white;
font-family: 'Anton', sans-serif;
}
.main-header{
width:100%;
background: #2ddf5c;
padding:8px 16px;
}
.main-header > div{
display: inline-block;
vertical-align: middle;
}
.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.main-nav__searchbar{
width: 50%;
margin: 0;
padding: 0;
}
.main-nav{
display: inline-block;
text-align: right;
width: calc(100% - 300px);
}
.main-nav__items{
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS course</title>
<link rel="shortcut icon" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a></div>
<div><input type="text" placeholder="search" class="main-nav__searchbar"></div><nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
Packages
</li>
<li class="main-nav__item">
Customers
</li>
<li class="main-nav__item">
Start Hosting
</li>
</ul>
</nav>
</header>
</body>
</html>
Why it does not work if my parent class has display:inline-block property as all my markups there? Regards
Basically, display: inline-block tries to fit all elements in one line. For that reason, your 50% seems very small. If you set it to 100% of the remaining space it is much bigger.
Nevertheless, I believe it is also a good idea to become familiar with flexbox. You can see I used flexbox to re-arrange your navbar.
Now, your elements are nicely spaced between each other. Each of them takes just enough space (you can still adjust the %). Additionally, you achieve a decent level of responsiveness out of the box with flexbox.
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
margin:0px;
}
#product-overview {
background-color: #ff1b68;
width: 100%;
height: 528px;
padding: 10px;
}
.section-title{
color: #2ddf5c;
}
#product-overview h1{
color:white;
font-family: 'Anton', sans-serif;
}
.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
background: #2ddf5c;
padding:8px 16px;
}
.main-header > div{
vertical-align: middle;
}
.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.main-nav__searchbar{
width: 100%;
margin: 0;
padding: 0;
}
.main-nav{
width: 50%;
text-align: right;
}
.main-nav__items{
display: flex;
justify-content: space-evenly;
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS course</title>
<link rel="shortcut icon" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a></div>
<div><input type="text" placeholder="search" class="main-nav__searchbar"></div><nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
Packages
</li>
<li class="main-nav__item">
Customers
</li>
<li class="main-nav__item">
Start Hosting
</li>
</ul>
</nav>
</header>
</body>
</html>
i'm trying to make a transparent header for my website, but for some reason the ul is going below the div. any help?
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aindev's Website</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght#0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<h1>aindev</h1>
<ul>
<li>Home</li>
<li>Downloads</li>
</ul>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
font-family: Rubik;
}
.header{
width: 100%;
height: 80px;
}
.header h1{
text-align: center;
}
.header ul li{
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
i tried many stackoverflow questions and other forums for coding, but all don't seem to help. i tried modifying the z-index, doing clear:both; and basically everything i could do.
Is this u want? If u want any other result, please comment as I couldn't get ur problem very well.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family: Rubik;
}
.header{
width: 100%;
height: 80px;
}
.header h1{
right: 50%;
position: fixed;
}
.header ul li{
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
.header ul {
z-index: 2;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aindev's Website</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght#0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<h1>aindev</h1>
<ul>
<li>Home</li>
<li>Downloads</li>
</ul>
</div>
</body>
</html>
well, You have to use z-index, but before using it you should change the position, so it will be like that:
ul {
position: relative;
z-index: 10
}
You can try following code.
<body>
<div class="header">
<ul>
<li>
Home
</li>
<li>
Downloads
</li>
</ul>
<h1>aindev</h1>
</div>
</body>
add style in css file:
.header ul {
float: right;
}