I want to create a menu bar with a list, but it's all in one place!
If I play with the position of the menu (absolute, fixed, ...), it's good, but I want that the menu will be fixed.
CSS:
img.logo {
max-height: 90px;
width: auto;
position: fixed;
clip: rect(5px, 95px, 90px, 5px);
}
a,
li {
color: inherit;
list-style: none;
text-align: center;
display: inline-block;
padding-right: 10%px;
padding-left: 5%;
padding-bottom: 10px;
font-size: 40px;
font-family: Odin rounded;
vertical-align: text-top;
position: fixed;
text-decoration: none;
}
li {
border: 1px solid black;
}
***HTML:***
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<ul class="barre">
<li>
<img class="logo" src="img/logo.png" alt="problem">
</li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
Run it and you will see what I see...
What is wrong?
PS: Can you say how can I make it all in one line, like a real menu bar
I've made a few changes by simplifying your css content.
You just need to use display: block and float:left to arrange your menu items properly. I've added a few more tweaks to it to suit what you wanted to achieve.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
border: 1px solid #000;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
<style>
img.logo {
max-height:90px;
width:auto;
position:fixed;
clip: rect(5px,95px,90px,5px);
}
a, li {
list-style: none;
color: inherit;
list-style: none;
text-align: center;
display: inline-block;
padding-right: 10%px;
padding-left: 5%;
padding-bottom: 10px;
font-size: 40px;
font-family: Odin rounded;
vertical-align: text-top;
position: relative;
text-decoration: none;
display: inline;
}
li {
border:1px solid black;
}
***HTML:***
</style>
</head>
<body>
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
Just changing display:inline-block to inline worked for me. Preview this on full page as this is not responsive example.
Hope This could help. :)
You should remove position:fixed from img-logo, a, li and add position:fixed or position:sticky to their parent container
.navbar{
float: right;
position: sticky /* use can use position:fixed */
}
img.logo{
max-height:90px;
width:auto;
clip: rect(5px,95px,90px,5px);
}
a, li{
color:inherit;
list-style:none;
text-align:center;
padding-right:10px;
padding-left:5px;
padding-bottom:10px;
font-size:16px;
font-family:Odin rounded;
vertical-align:text-top;
text-decoration:none;
display: inline-block;
}
li {
border:1px solid black;
}
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<div class="navbar">
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</div>
</body>
</html>
Related
I am trying to use a single div to make a navbar with image and ul. There is a condition that I can't use flexbox or grid display. I am trying to make it from the basics that I learned till now.
Issues I am getting:
Image is getting aligned to the top. Why it is not coming on the base of its div?
Without making two divs, Can I align ul and image vertically at the center in a single div?
I know there will be much better ways to do this, but I want to get a basic understanding that what is actually happening.
Here is HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="left">
<img
src="https://www.qousqazah.com/blog/wp-content/uploads/2018/01/features-of-a-business-logo.png"
alt=""
id="logo"
/>
<ul>
<li>HOME</li>
<li>BLOG</li>
<li>CONTACT US</li>
</ul>
</div>
<div class="right">This is right</div>
</header>
</body>
</html>
Here is the CSS Code:
* {
font-family: 'Montserrat', sans-serif;
}
.left {
display: inline-block;
border: 2px solid red;
position: absolute;
left: 10px;
}
.left img {
display: inline-block;
vertical-align: baseline;
border:2px solid pink;
width: 200px;
}
.left ul {
border:2px solid blue;
display: inline-block;
text-align: center;
}
.left ul li {
display: inline;
text-decoration: none;
margin: 2px;
font-weight: bold;
}
.left ul li a{
white-space: nowrap;
text-decoration: none;
color:black;
}
.right {
position: absolute;
display: inline-block;
border: 2px solid green;
top: 8px;
right: 10px;
}
And Here is JSFiddle
Change
.left img {
display: inline-block;
vertical-align: bottom; << instead of baseline
border:2px solid pink;
width: 200px;
}
.left ul {
border:2px solid blue;
display: inline-block;
text-align: center;
margin: 0; << added
}
and it works: fiddle
Note that with inline-block also spaces will be displayed. SO
<img
src="https://cdn.magenest.com/wp-content/uploads/2018/12/Magento-Logo-768x327.jpg"
alt=""
id="logo"
/>
<<< this will create unwanted whitespace between the elements
<ul>
<li>HOME</li>
The image is aligned to the baseline. But the gap is due to the bottom margin of ul. So, remove the culprit from your code.
ul {
margin-bottom: 0;
}
you can do like this make image block and margin auto
* {
font-family: 'Montserrat', sans-serif;
}
.left {
display: inline-block;
border: 2px solid red;
position: absolute;
left: 10px;
}
.left img {
display: block;
vertical-align: baseline;
border:2px solid pink;
width: 200px;
margin: auto;
}
.left ul {
border:2px solid blue;
display: inline-block;
text-align: center;
}
.left ul li {
display: inline;
text-decoration: none;
margin: 2px;
font-weight: bold;
}
.left ul li a{
white-space: nowrap;
text-decoration: none;
color:black;
}
.right {
position: absolute;
display: inline-block;
border: 2px solid green;
top: 8px;
right: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="left">
<img
src="https://cdn.magenest.com/wp-content/uploads/2018/12/Magento-Logo-768x327.jpg"
alt=""
id="logo"
/>
<ul>
<li>HOME</li>
<li>BLOG</li>
<li>CONTACT US</li>
</ul>
</div>
<div class="right">This is right</div>
</header>
</body>
</html>
What I want to do
I would like to display the navigation bar inline with the header for the site I am creating.
HTML and CSS
header {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
background: blue;
}
#logo, nav {
float: left;
}
#logo {
width: 40%;
background: red;
color: white;
text-align: center;
height: 100px;
line-height: 100px;
font-size: 24px;
}
nav {
width: 60%;
background: #333;
height: 100px;
position: relative;
}
#top-nav {
position: absolute;
bottom: 0;
}
#top-nav li {
float: left;
background: #333;
}
#top-nav li a {
display: block;
color: white;
text-decoration: none;
padding: 14px 16px;
}
#top-nav li:hover > a {
background: #111;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content li {
float: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header>
<div id="logo">
<span>My Site</span>
</div>
<div style="clear:both;"></div>
<nav>
<ul id="top-nav">
<li>Item</li>
<li class="dropdown">
Item
<ul class="dropdown-content">
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
<li>Item</li>
<li>Item
<li>
</ul>
</nav>
<div style="clear:both;"></div>
</header>
</body>
</html>
What broke the code
Adding padding: 10px; to header seems to have broken the code, as it was working fine previously, as in the nav bar was displaying properly inline with the header. I cannot seem to get my head around the issue, I really do not see what causes it.
Also, I understand that this is not Code Review, but any remarks as to what can be improved upon/formatted differently in the code will be appreciated.
You should remove the <div style="clear:both;"></div> div to display the nav bar inline with the logo.
Also add this to your css to eliminate list styling:
ul {
list-style-type: none;
}
Adding 10px of padding to your header makes it wider than 1000px, it will be 1020px wide. To prevent this, you should use box-sizing: border-box.
More information: https://www.w3schools.com/css/css_boxmodel.asp
EDIT:
That's not the problem here, I misread your question. The div's were not inline, because of the div with inline styling clear: both, since it clears the floating within the parent div.
If you remove it, the #logo and nav will be floating next to each other:
header {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
background: blue;
}
#logo, nav {
float: left;
}
#logo {
width: 40%;
background: red;
color: white;
text-align: center;
height: 100px;
line-height: 100px;
font-size: 24px;
}
nav {
width: 60%;
background: #333;
height: 100px;
position: relative;
}
#top-nav {
position: absolute;
bottom: 0;
}
#top-nav li {
float: left;
background: #333;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header>
<div id="logo">
<span>My Site</span>
</div>
<nav>
<ul id="top-nav">
<li>Item</li>
<li class="dropdown">Item
<ul class="dropdown-content">
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
<li>Item</li>
<li>Item<li>
</ul>
</nav>
<div style="clear:both;"></div>
</header>
</body>
</html>
You have unwanted <div style="clear:both"></div> the one under logo immediately, remove it and your issue will be fixed, check the snippet below:
header {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
background: blue;
}
#logo, nav {
float: left;
}
#logo {
width: 40%;
background: red;
color: white;
text-align: center;
height: 100px;
line-height: 100px;
font-size: 24px;
}
nav {
width: 60%;
background: #333;
height: 100px;
position: relative;
}
#top-nav {
position: absolute;
bottom: 0;
}
#top-nav li {
float: left;
background: #333;
}
#top-nav li a {
display: block;
color: white;
text-decoration: none;
padding: 14px 16px;
}
#top-nav li:hover > a {
background: #111;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content li {
float: none;
}
ul {
list-style-type: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header>
<div id="logo">
<span>My Site</span>
</div>
<!-- This clear div is making your nav below the logo-->
<!--<div style="clear:both;"></div>-->
<nav>
<ul id="top-nav">
<li>Item</li>
<li class="dropdown">
Item
<ul class="dropdown-content">
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
<li>Item</li>
<li>Item
<li>
</ul>
</nav>
<div style="clear:both;"></div>
</header>
</body>
</html>
Update
As #A. Ahmed mentioned, you could also insert this rule:
ul {
list-style-type: none;
}
To beautify the design.
I am currently creating a website for my friend, but I ran into an issue. A very irritating one. I have a header (a div with the id of header) and an ul inside of it. I added my <img src="filename.extension" id="logo"> into my header div, but it appears underneath the actual header. I did float: right; thinking it would appear inside the header but it doesn't. And I added a border of 1px around the ul to see if it took up to much space, but there were enough space left for the logo to fit.
Here's my code:
(HTML)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="headercon">
<ul>
<li>Home</li>
<li>About</li>
<li>Vote</li>
<li>Rules</li>
<li>Discord</li>
<li>Status</li>
</ul>
</div>
<img id="logo" src="vglogo.png">
</div>
</body>
</html>
(CSS):
#header {
width: 100%;
height: 60px;
position: absolute;
top: 0;
background-color: #ededed;
border-bottom: 5px solid #dddddd;
}
body {
margin: 0;
padding: 0;
}
#header>#headercon>ul {
display: flex;
line-height: 10px;
font-size: 25px;
}
#headercon {
display: block;
width: 60%;
height: auto;
margin-right: 500px;
margin-left: 100px;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
padding: 0 10px;
}
#logo {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"> </head>
<body>
<div id="header">
<div id="headercon">
<ul>
<li>Home</li>
<li>About</li>
<li>Vote</li>
<li>Rules</li>
<li>Discord</li>
<li>Status</li>
</ul>
</div> <img id="logo" src="vglogo.png"> </div>
</body>
</html>
You may expected it like this?
body {
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 60px;
position: fixed;
top: 0;
left:0;
background-color: #ededed;
border-bottom: 5px solid #dddddd;
}
#header>ul>li {
float:left;
list-style-type: none;
}
#header>ul>li>a {
font-size: 25px;
text-decoration: none;
color: black;
padding: 0 10px;
}
.logo {
float: right!important;
right:40px;
position: relative;
top: -10px;
}
.logo img{
height:50px
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<ul>
<li>Home</li>
<li>About</li>
<li>Vote</li>
<li>Rules</li>
<li>Discord</li>
<li>Status</li>
<li class="logo"><img id="logo" src="https://static1.squarespace.com/static/579d30036a49638cd66ee855/57a69cadb3db2b8908f27da1/57a69d90e6f2e1f140d7bcfa/1470542795812/Intel_logo.png"></li>
</ul>
</div>
</body>
</html>
I was creating this header menu using <ul> and I wanted to stretch it to all top of the page. I first used width:100% but it didn't work.Then I saw a similar example somewhere , it had used overflow:hidden so when I used that it streched the list to the end.I wanted to know what does overflow do in here and why width:100% can not do the similar action?
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
background-color: black;
}
li {
background-color: black;
color: red;
float: left;
}
li a{
display: inline-block;
color: white;
text-decoration:none;
padding: 20px;
text-align: center;
}
li a:hover{
background-color:red;
}
<!DOCTYPE html>
<html lang="fa">
<head>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<ul>
<li><a target="_blank" href="http://www.google.com">Google</a></li>
<li><a target="_blank" href="http://www.yahoo.com">Yahoo!</a></li>
<li><a target="_blank" href="http://www.Amazon.com">Amazon</a></li>
</ul>
</body>
</html>
using overflow makes element stretch to match its children when they have set float property - it's basically one of ways to implement clearfix
Float property in li affect the parent ul width 100%. so It not worked.
Try this below code.
ul {
list-style-type: none;
padding: 0;
background-color: black;
width:100%;
text-align:center;
}
li {
background-color: black;
color: red;
width:33.3333%;
float: left;
}
li a{
display: inline-block;
color: white;
text-decoration:none;
padding: 20px;
}
li:hover{
background-color:red;
}
<!DOCTYPE html>
<html lang="fa">
<head>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<ul>
<li><a target="_blank" href="http://www.google.com">Google</a></li>
<li><a target="_blank" href="http://www.yahoo.com">Yahoo!</a></li>
<li><a target="_blank" href="http://www.Amazon.com">Amazon</a></li>
</ul>
</body>
</html>
I have this basic navigation bar, and I want to make the menu buttons centered, and also I want a separating line between them. Also I think my code may have some unnecessary parts.
Here is an image of what I am trying to create:
Here is my source code:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>NOT!fy</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="nav" align="center">
<span>
<ul>
<li><img src="img/notify_icon.png" alt="notify_icon" width="30px" /></li>
<li>HOME</li>
<li>FEATURE SET</li>
<li>WHO ARE WE</li>
<li>INDIEGOGO</li>
<li>CONTACT US</li>
</ul>
</span>
</div>
</body>
</html>
And here is my CSS file:
#charset "utf-8";
/* CSS Document */
#nav {
font-family: Century Gothic, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #fff;
margin-left:auto;
margin-right:auto;
background-color: #353539;
height: 50px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
}
#nav ul {
padding: 7px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#nav ul li {
list-style-type: none;
text-align: center;
float: left;
margin: 0px;
padding-left:50px;
}
#nav ul li a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: block;
padding: 10px;
margin: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
body
{
background-color:#c5c5c5;
}
DEMO
This should do what you like.
margin:0 auto centers elements on the page, so you simply had to set the li parent to an auto width with this css attatched.