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>
Related
Hello I am attempting to create a Portfolio using HTML, CSS, and Javascript. My only previous experience is making a basic website with standard text and a light\dark theme button. I am trying to get my Title the be on the left of my navigation bar, and my directories to be on the left side of the navigation bar. Could Someone explain how i would do this.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
position: fixed;
width: 100%;
background: crimson;
font-family: 'Ubuntu', sans-serif;
}
.navbar .maxwidth{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href='#'>Portfo<span>lio.</span></a></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
You were doing it pretty much correctly. Your css had a typo. I changed maxwidth to max-width.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
position: fixed;
width: 100%;
background: crimson;
font-family: 'Ubuntu', sans-serif;
}
.navbar .max-width{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href='#'>Portfo<span>lio.</span></a></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
Here I am trying to keep the navigation buttons in the center of the navbar using flexbox. But whenever I try to center using the justify-content property using flexbox the logo text also moves along the navigation buttons. I want the logo text on the left corner and buttons on the center. Any fix for this using flexbox?
/* -----------
1. global-setup
----------- */
* {
margin: 0;
padding: 0;
}
/* -----------
2. navigation-container
----------- */
.nav {
background-color: #BA8C63;
width: 100%;
height: 60px;
display: flex;
justify-content: center;
}
.nav .logo {
display: flex;
align-self: flex-start;
}
.nav .logo p {
font-size: 30px;
color: white;
padding: 10px;
font-family: 'Oleo Script', cursive;
padding-left: 40px;
}
div.li ul {
display: flex;
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
color: #e6cbb3;
font-size: 15px;
text-transform: uppercase;
padding: 20px;
}
a:hover {
background-color: #e6cbb3;
color: #BA8C63;
transition: .5s;
}
<!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>Flexbox Practice</title>
<link rel="stylesheet" href="flexbox.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=Oleo+Script&display=swap" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="logo">
<p>Woody</p>
</div>
<div class="li">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
/* -----------
1. global-setup
----------- */
* {
margin: 0;
padding: 0;
}
/* -----------
2. navigation-container
----------- */
.nav {
background-color: #BA8C63;
width: 100%;
height: 60px;
display: flex;
}
.nav .logo {
display: flex;
align-self: flex-start;
}
.li{
display: flex;
justify-content: center;/*same code but aplys for only li class not whole nav*/
width: 100%;/*fill available space*/
}
.nav .logo p {
font-size: 30px;
color: white;
padding: 10px;
font-family: 'Oleo Script', cursive;
padding-left: 40px;
}
div.li ul {
display: flex;
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
color: #e6cbb3;
font-size: 15px;
text-transform: uppercase;
padding: 20px;
}
a:hover {
background-color: #e6cbb3;
color: #BA8C63;
transition: .5s;
}
<!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>Flexbox Practice</title>
<link rel="stylesheet" href="flexbox.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=Oleo+Script&display=swap" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="logo">
<p>Woody</p>
</div>
<div class="li">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
here we apply center only for .li class (not for whole nav) and make the .li to fit the remaining space other than logo
/* -----------
1. global-setup
----------- */
* {
margin: 0;
padding: 0;
}
/* -----------
2. navigation-container
----------- */
.nav {
background-color: #BA8C63;
width: 100%;
height: 60px;
display: flex;
justify-content: center;
}
.nav::after {
content: "";
flex: auto;
}
.nav .logo {
flex: 1;
display: flex;
align-content: flex-start;
}
.nav .logo p {
font-size: 30px;
color: white;
padding: 10px;
font-family: 'Oleo Script', cursive;
padding-left: 40px;
}
div.li ul {
align-self: center;
display: flex;
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
color: #e6cbb3;
font-size: 15px;
text-transform: uppercase;
padding: 20px;
}
a:hover {
background-color: #e6cbb3;
color: #BA8C63;
transition: .5s;
}
<!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>Flexbox Practice</title>
<link rel="stylesheet" href="flexbox.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=Oleo+Script&display=swap" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="logo">
<p>Woody</p>
</div>
<div class="li">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
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;
}
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 1 year ago.
so, i've tried using "text-align: center" property but nothing seemed to help, image is slightly off(actually a lot) the center, and its png file so i'm not sure what could be the issue. I've had this problem when I was working on different projects as well and I really couldnt find the solution. I may be making a huge major mistake in my code so if you notice let me know. Make sure to run it in full page so you see the issue!
Heres the HTML and CSS:
body {
background-color: #161616;
}
header {
height: 3.375rem;
}
.ul1 {
list-style: none;
float: right;
}
li {
display:inline;
color: white;
margin: 0.625rem;
position: relative;
right: 0.625rem;
}
a {
text-decoration: none;
color:white;
font-size: 1.063rem;
font-family: 'Prompt', sans-serif;
}
.img-1 {
display: block;
text-align: center;
padding: 0px;
}
<!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 rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght#200&display=swap" rel="stylesheet">
<title>project1</title>
</head>
<body>
<header>
<nav>
<ul class="ul1">
<li>About</li>
<li>Work</li>
<li>Contact us</li>
</ul>
</nav>
</header>
<section class="pre-midpage">
<div class="img-1"><img src="https://i.imgur.com/7bjqURH.png" alt="img-1"></div>
</section>
</body>
</html>
Your div.img-1 is not taking 100% of possible width. In fact it takes 50%. It's happening because you didn't clear float: left from .ul1, you can add clearfix as it's explained in duplicated post or use display: flex and justify-content: flex-end; instead:
body {
background-color: #161616;
}
header {
height: 3.375rem;
}
.ul1 {
list-style: none;
display: flex;
justify-content: flex-end;
}
li {
display:inline;
color: white;
margin: 0.625rem;
position: relative;
right: 0.625rem;
}
a {
text-decoration: none;
color:white;
font-size: 1.063rem;
font-family: 'Prompt', sans-serif;
}
.img-1 {
text-align: center;
padding: 0px;
}
.img-1 > img {
margin: auto;
}
<!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 rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght#200&display=swap" rel="stylesheet">
<title>project1</title>
</head>
<body>
<header>
<nav>
<ul class="ul1">
<li>About</li>
<li>Work</li>
<li>Contact us</li>
</ul>
</nav>
</header>
<section class="pre-midpage">
<div class="img-1"><img src="https://i.imgur.com/7bjqURH.png" alt="img-1"></div>
</section>
</body>
</html>
I want to make a website menu and I made the following code with HTML and CSS. The problem is that there is a whitespace between the home and the Home and the Contact. Any ideas to solve this problem?
li {
text-decoration: none;
display: inline;
}
a {
text-decoration: none;
color: white;
padding: 3vh;
font-family: 'Oswald', sans-serif;
background-color: #595959;
}
#about, #gallery, #contact {
float: right;
}
#home {
float: left;
}
a:hover {
background-color: #969696;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NavBar Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</nav>
</header>
</body>
</html>
The solution is pretty straightforward.
In your CSS, you have said that the about, gallery, and contact have a float right.
So that will bring these 3 element to the right while you said that the home element has to be floated to the left.
So it will align it to the left thus creating the white space in between them. If you want to remove the white space and align all these 4 elements together like this: https://imgur.com/a/e4ayr6b
Then the code is simple:
#about,
#gallery,
#contact {
float: left;
}
Now this float left will align the other 3 elements with the home button.
And then the home will still have the float: left.
If you don't want that, then your question doesn't say that should the elements be aligned to the left or what. You just said the white space should be removed. So the above solution will do it.
Hope it helps
I think you might actually be looking for something like this. I've changed your items to classes vs IDs because this is better practice.
I'd also not set the padding on the a element because you may need to use this elsewhere. Below is a starting point to show you the desired effect but you should start over with the same code but modify your CSS classes so that you have specific classes for your header vs affecting that property for the whole site straight away as it will cause issues later on.
li {
text-decoration: none;
display: inline;
}
a {
text-decoration: none;
color: white;
padding: 3vh;
font-family: 'Oswald', sans-serif;
background-color: #595959;
}
.right-item {
float: right;
}
.left-item {
float: left;
}
a:hover {
background-color: #969696;
}
.nav-wrap {
background-color: #595959;
height: 60px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NavBar Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div class="nav-wrap">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</div>
</nav>
</header>
</body>
</html>
li {
text-decoration: none;
display: inline;
}
a {
text-decoration: none;
color: white;
padding: 3vh;
font-family: 'Oswald', sans-serif;
background-color: #595959;
}
a:hover {
background-color: #969696;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NavBar Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</nav>
</header>
</body>
</html>
You are applying float property to your menu items, which is not neeeded.
li {
text-decoration: none;
display: inline;
}
a {
text-decoration: none;
color: white;
padding: 3vh;
font-family: 'Oswald', sans-serif;
background-color: #595959;
}
a:hover {
background-color: #969696;
}
nav{
text-align:right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NavBar Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</nav>
</header>
</body>
</html>
Though this is not ideal for a real-world website. I hope it will help