I am trying to have a navigation bar that doesn't have any extra space on the sides and on the top and bottom. However nothing seems to be. Is there a way I can fix this. An example of how I would like my navigation bar to look is dootrix.com
Here is an image to illustrate what the problem is: image
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
ABOUT
</li>
<li>
PRODUCTS
</li>
<li>
COUPONS
</li>
<li>
FEEDBACK
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>
You have to disable the margin (https://www.w3schools.com/css/css_margin.asp) of your body tag. You can do this in your css. Look at what I did at the top of this css file. That should work.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
ABOUT
</li>
<li>
PRODUCTS
</li>
<li>
COUPONS
</li>
<li>
FEEDBACK
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>
Related
I am creating a project in HTML,CSS & Flask. Whenever I check my nav bar in the live server 'justify content' is not working, I try to figure out via fixing the sizing of ul & li elements and I give main container 100% width but this way is also not working!
How can I solve and avoid these mistakes when we are using justify-content and also give some tips for using justify-content?
<!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>
<style>
.navbar {
display: flex;
align-items: center;
border-bottom: 2px solid lightgray;
width: 100%;
justify-content: space-between;
justify-items: flex-start;
}
.logo {
color: blueviolet;
font-size: 35px;
width: 110px;
}
.navitems ul {
display: flex;
align-items: center;
width: 350px;
}
li {
color: tomato;
font-weight: 500;
list-style: none;
text-decoration: none;
}
li a {
text-decoration: none;
color: tomato;
padding: 3px;
font-size: 19px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">
xMu5<span class="titel">ic</span>
</div>
<div class="navitems">
<ul>
<li>
<a href="">
Home
</a>
</li>
<li>
<a href="">
Blog
</a>
</li>
<li>
<a href="">
Services
</a>
</li>
<li>
<a href="">
Contact Us
</a>
</li>
<li>
<a href="">
About Us
</a>
</li>
</ul>
</div>
<hr>
</nav>
<br>
<h1>
hi
</h1>
</body>
</html>
Because you add <hr> tag inside <nav class="navbar">. so move it outside <nav class="navbar"> then it works.
You placed a extra hr inside .navbar. I removed it. You have a border-bottom for .navbar so you don't need to hr. Also, justify-items isn't a correct style.
<!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>
<style>
.navbar {
display: flex;
align-items: center;
border-bottom: 2px solid lightgray;
width: 100%;
justify-content: space-between;
/*justify-items: flex-start; (removed) */
}
.logo {
color: blueviolet;
font-size: 35px;
width: 110px;
}
.navitems ul {
display: flex;
align-items: center;
width: 350px;
}
li {
color: tomato;
font-weight: 500;
list-style: none;
text-decoration: none;
}
li a {
text-decoration: none;
color: tomato;
padding: 3px;
font-size: 19px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">
xMu5<span class="titel">ic</span>
</div>
<div class="navitems">
<ul>
<li>
<a href="">
Home
</a>
</li>
<li>
<a href="">
Blog
</a>
</li>
<li>
<a href="">
Services
</a>
</li>
<li>
<a href="">
Contact Us
</a>
</li>
<li>
<a href="">
About Us
</a>
</li>
</ul>
</div>
</nav>
<br>
<h1>
hi
</h1>
</body>
</html>
text-align: center;
Please use the text-align property to align the content to center
After I was done working on side bar I wanted to head to the content page to the right so I added a container div that I wanted to set to flex So that I make the two boxes to start styling, but right after adding it, the footer's position is ruined and the side bar isn't taking as much space as it should.
Here's a picture:
.side-bar {
font-family: 'Montserrat', sans-serif;
font-size: large;
font-weight: bold;
display: flex;
justify-content: left;
background-color: rgb(235, 235, 235);
width: 20%;
height: 80%;
flex-direction: column;
}
.side-bar ul {
display: flex;
flex-direction: column;
margin-left: 0%;
list-style: none;
margin-top: 5%;
}
.side-bar ul li {
margin-bottom: 10px;
display: inline;
cursor: pointer;
}
.togglable:hover {
border-radius: 7px;
background-color: rgb(216, 216, 216);
}
.togglable:active {
background-color: rgb(221, 221, 221);
}
.side-bar ul a {
color: black;
text-decoration: none;
}
.side-bar h2 {
font-family: 'Josefin Sans', sans-serif;
margin-bottom: 20px;
}
.container {
display: flex;
}
.task-container {
background-color: red;
}
<!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>ToDoList</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav-bar">
<img src="logo.png" alt="logo">
<nav>
<ul>
<li>Services</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
<a class="cta" href="#"><button>Contact</button></a>
</div>
<div class="container">
<div class="side-bar">
<ul>
<li class="togglable"><img src="gym.png" alt="gym" id="gym">Gym</li>
<li class="togglable"><img src="today.png" alt="calendar" id="today"> Today</li>
<li class="togglable"><img src="week.png" alt="calendar" id="week">This Week</li>
<li class="togglable"><img src="month.png" alt="calendar" id="month"> This Month</li>
<h2>Projects : </h2>
<li id="addPr" class="togglable"><span id="plus-sgn">+</span> Add Project</li>
<!-- <li class="togglable"><img src="checklist.png" alt="checlist" id="list"> Testing</li> -->
</ul>
</div>
<div class="task-container">
<p>Some Text To test the box</p>
</div>
</div>
<div class="footer">
<p id="copyright">Copyright © 2021 FaroukHamadi</p>
</div>
<script src="main.js"></script>
</body>
</html>
Add width attribute to task-contianer and add your fotter class attribute on your CSS file.
.task-container {
background-color: red;
width: 100%;
}
.footer{
position: absolute;
bottom: 0px;
width: auto;
}
I'm currently trying to do a navigation bar in HTML/CSS but I have a problem.
I would like to show the titles of the tabs at their right but they're bellow the 'nav' div box and I would like them to be above it.
Here are my html/css files :
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap');
* { font-family: 'Lato', sans-serif; }
.nav {
position: fixed;
top: 80px;
left: 20px;
bottom: 20px;
width: 75px;
height: 90%;
box-sizing: initial;
border-radius: 10px;
border-left: 5px solid #2e3137;
background: #2e3137;
overflow-x: hidden;
}
.nav ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-left: 5px;
padding-top: 20px;
}
.nav ul li {
position: relative;
list-style: none;
width: 100%;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.nav ul li .title {
position: absolute;
top: 15px;
left: 50px;
width: 60px;
height: 30px;
border-radius: 10px;
background-color: #000;
color: #fff;
}
.nav ul li .title strong {
position: absolute;
left: 10px;
top: 5px;
}
.nav ul li a {
position: relative;
display: block;
display: flex;
text-decoration: none;
color: #fff;
}
.nav ul li a .icon {
display: block;
min-width: 60px;
height: 60px;
line-height: 65px;
text-align: center;
}
.nav ul li a .icon ionicon { font-size: 1.5em; }
<!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">
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" href="s-sidebar.css">
<!-- Icons <ion-icon> -->
<script type="module" src="https://unpkg.com/ionicons#4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons#4.5.10-0/dist/ionicons/ionicons.js"></script>
<title>Saori - StackOverflow</title>
</head>
<body>
<div class="nav">
<ul>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="person"></ion-icon>
</span>
</a>
<div class="title">
<strong>Profile</strong>
</div>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="chatbubbles"></ion-icon>
</span>
</a>
<div class="title">
<strong>Messages</strong>
</div>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="settings"></ion-icon>
</span>
</a>
<div class="title">
<strong>Settings</strong>
</div>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="help"></ion-icon>
</span>
</a>
<div class="title">
<strong>About</strong>
</div>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="log-in"></ion-icon>
</span>
</a>
<div class="title">
<strong>Login</strong>
</div>
</li>
</ul>
</div>
</body>
</html>
I tried soimon's answer on CSS - Allow an div to stick out of its parent but it didn't work for me.
What I have :
https://i.stack.imgur.com/1pRQ7.png
What I would like to have (bad edit) :
https://i.stack.imgur.com/0IvdG.png
You will see it if you remove overflow-x: hidden; from .nav but I'm not sure what you are trying to achieve here. The "titles" not above or below "nav". It is wrapped within "nav" because it is a fixed element.
I am working on a project where we aren't allowed to touch the html, but instead, design a CSS page with flex box and whatnot to alter the design. The html code has links to other CSS page designs for this project with the design type, and the designer name. I want to put these two links in the same circle box. If you run the code, you'll see the design name and the designer name are in the same circle - how do I go about putting them in the same circle? I believe theres a way to without altering the html since the design is in "class="design-name" and the designer is in "class="designer-name". In the code, it looks like this:
body {
margin: 1%;
padding: 1%;
font-family: 'Playfair Display', serif;
font-family: 'Prata', serif;
}
header {
background-color: red;
font-family: 'Playfair Display', serif;
font-family: 'Prata', serif;
}
header h1 {
font-size: 72px;
}
.design-name {
color: black;
}
.designer-name {
color: black;
}
.designer-name li a {
background: green;
width: 120px;
height: 120px;
line-height: 115px;
border-radius: 50%;
display: block;
}
nav ul {
text-align: center;
}
nav ul li {
display: inline-flex;
}
li a {
background: red;
box-shadow: black;
width: 120px;
height: 120px;
line-height: 115px;
border-radius: 50%;
display: block;
}
li a:hover {
transition-duration: 300ms;
background: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Prata" rel="stylesheet">
<meta charset="utf-8">
<title>CSS Zen Garden: The Beauty of CSS Design</title>
<link href="zengarden.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Dave Shea">
<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design.">
<meta name="robots" content="all">
<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
</head>
<body id="css-zen-garden">
<div class="page-wrapper">
<aside class="sidebar" role="complementary">
<div class="wrapper">
<div class="design-selection" id="design-selection">
<h3 class="select">Select a Design:</h3>
<nav role="navigation">
<ul>
<li>
Mid Century Modern by Andrew Lohman
</li>
<li>
Garments by Dan Mall
</li>
<li>
Steel by Steffen Knoeller
</li>
<li>
Apothecary by Trent Walton
</li>
<li>
Screen Filler by Elliot Jay Stocks
</li>
<li>
Fountain Kiss by Jeremy Carlson
</li>
<li>
A Robot Named Jimmy by meltmedia
</li>
<li>
Verde Moderna by Dave Shea
</li>
</ul>
</nav>
</div>
</body>
</html>
Any guidance would be awesome!
Desired outcome, with both design name and designer being clickable links:
You can use the css of <a> to the <li>...
Also apply display:flex to the ul and li to adjust the alignment of inner items
Stack Snippet
body {
font: 13px Verdana;
}
nav ul {
text-align: center;
display: flex;
flex-wrap: wrap;
}
nav ul li {
background: red;
width: 120px;
height: 120px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 5px;
color: #fff;
}
nav ul li a {
color: #fff;
}
nav ul li:hover {
transition-duration: 300ms;
background: black;
color: #fff;
}
nav ul li:hover a {
color: #fff;
}
<body id="css-zen-garden">
<div class="page-wrapper">
<aside class="sidebar" role="complementary">
<div class="wrapper">
<div class="design-selection" id="design-selection">
<h3 class="select">Select a Design:</h3>
<nav role="navigation">
<ul>
<li>
Mid Century Modern by Andrew Lohman
</li>
<li>
Garments by Dan Mall
</li>
<li>
Steel by Steffen Knoeller
</li>
<li>
Apothecary by Trent Walton
</li>
<li>
Screen Filler by Elliot Jay Stocks
</li>
<li>
Fountain Kiss by Jeremy Carlson
</li>
<li>
A Robot Named Jimmy by meltmedia
</li>
<li>
Verde Moderna by Dave Shea
</li>
</ul>
</nav>
</div>
</div>
</aside>
</div>
</body>
How to remove extra margin from the div tag.
I have already added margin and padding to 0px. Does positioning also matters in margin? Even if I want to give margin in this div, so in which unit should I give like in vw or percentage? Please help to resolve this issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
</style>
</head>
<body>
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>
</body>
</html>
This is happening because of browser defaults. Add the following to your stylesheet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar a{
text-decoration:none;
color: white;
}
#menubar ol {
margin:0;
padding:0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
</style>
</head>
<body>
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>
</body>
</html>
You have to specify the margin and padding of the HTML doc, and * (everything). See snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js"></script>
<style type="text/css">
/* FROM HERE */
*,
html {
padding: 0;
margin: 0;
}
/* TO HERE */
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
</style>
</head>
<body>
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>
</body>
</html>
Hope this helps!
Try This:
ol {
margin: 0;
padding: 0;
}
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
ol {
margin: 0;
padding: 0;
}
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>