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.
Related
I am aware that there are plenty of question identical to mine, but it seems that I have a problem with my code. I'm trying to make a website, and for now the layout I'm looking for is a logo at the very top followed by the name of the brand and then under it a navigation bar. I did the nav bar first, but when trying to put the image in, I couldn't resize it, let alone center it with text. Can somebody help me achieve what I'm trying to do, or at least explain what I'm doing wrong? Thanks
P.S. Here is my code.
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo img{
float: center;
width: 80;
height: 80;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
P.S.S. If it helps, when I inspect the image on the page, I get this thing here.
There is no float: center. Instead, you can use text-align: center; on .logo (the container of the image). And you need to use the px unit on width and height of the image.
BTW: Since you wrote about centering image and text, I added an h1 in my snippet which is also centered via text-align: center. (You could also add settings for margin-top and margin-bottom if you want to change the default distance to the elements above and below)
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li {
float: left;
}
h1 {
text-align: center;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
text-align: center;
}
.logo img {
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<h1>Header Text</h1>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
Use display: flex is much easier to use and flexible
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
display: flex;
justify-content: center;
}
.logo img{
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
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>
Before anything heres the html and css
HTML:
<!DOCTYPE html>
<!-- Language And Resource Imports -->
<html lang="en">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Doppio+One|Rajdhani|Quicksand|Raleway&effect=shadow-mutliple|outline">
<link rel="stylesheet" href="resources/css/style.css">
<script src="resources/js/script.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JF Web | Page 1</title>
</head>
<header>
<div id="titlebar">
<div id="logotext">
<h1>JF Web ©</h1>
</div>
<nav>
<ul id="navbar" class="cf">
<li> Page 1 </li>
<li> Page 2 </li>
<li> Page 3 </li>
</ul>
</nav>
</div>
</header>
<body onload="mainClock()">
<span id="clock"></span>
</body>
</html>
CSS:
#logotext {
font-family: 'Doppio one';
font-size: 25px;
margin-left: 20px;
float: left;
width: 45%;
position: relative;
top: 25.5px;
}
.cf {
clear: both;
}
#navbar {
list-style-type: none;
float: right;
}
#navbar a {
text-decoration: none;
color: white;
}
#navbar a:hover {
color: rgb(204, 153, 0);
text-decoration: underline;
}
#navbar li {
display: inline;
}
#clock {
font-family: Rajdhani;
font-size: 30px;
position: absolute;
top: 0;
right: 0;
margin-top: 5px;
margin-right: 10px;
}
#titlebar {
width: 80%;
margin: 0;
padding: 0;
background-color: #414a4c;
overflow: hidden;
}
SO as u can see the navigation bar uses an inline unordered list and so to put a space inbetween the anchor texts ive used two nbsp entities on either side of the anchor text but when the hover state is active and the underline is applied it underlines the nbsp as well
NBSP Underline
Any help would be much appreciated thank you
You can remove the , and replace with CSS padding on the <a> tags:
#navbar a {
padding: 0 .5em;
}
#logotext {
font-family: 'Doppio one';
font-size: 25px;
margin-left: 20px;
float: left;
width: 45%;
position: relative;
top: 25.5px;
}
.cf {
clear: both;
}
#navbar {
list-style-type: none;
float: right;
}
#navbar a {
text-decoration: none;
color: white;
padding: 0 .5em; /* Padding can replace spaces*/
}
#navbar a:hover {
color: rgb(204, 153, 0);
text-decoration: underline;
}
#navbar li {
display: inline;
}
#clock {
font-family: Rajdhani;
font-size: 30px;
position: absolute;
top: 0;
right: 0;
margin-top: 5px;
margin-right: 10px;
}
#titlebar {
width: 80%;
margin: 0;
padding: 0;
background-color: #414a4c;
overflow: hidden;
}
<!DOCTYPE html>
<!-- Language And Resource Imports -->
<html lang="en">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Doppio+One|Rajdhani|Quicksand|Raleway&effect=shadow-mutliple|outline">
<link rel="stylesheet" href="resources/css/style.css">
<script src="resources/js/script.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JF Web | Page 1</title>
</head>
<header>
<div id="titlebar">
<div id="logotext">
<h1>JF Web ©</h1>
</div>
<nav>
<ul id="navbar" class="cf">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</div>
</header>
<body onload="mainClock()">
<span id="clock"></span>
</body>
</html>
Remove "nbsp" and add a margin,
See below example
#logotext {
font-family: 'Doppio one';
font-size: 25px;
margin-left: 20px;
float: left;
width: 45%;
position: relative;
top: 25.5px;
}
.cf {
clear: both;
}
#navbar {
list-style-type: none;
float: right;
}
#navbar a {
text-decoration: none;
color: white;
}
#navbar a:hover {
color: rgb(204, 153, 0);
text-decoration: underline;
}
#navbar li {
display: inline;
}
#clock {
font-family: Rajdhani;
font-size: 30px;
position: absolute;
}
/*MARGIN ADDED HERE*/
.cf li {
margin-left: 3px;
margin-right: 3px;
}
<!DOCTYPE html>
<!-- Language And Resource Imports -->
<html lang="en">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Doppio+One|Rajdhani|Quicksand|Raleway&effect=shadow-mutliple|outline">
<link rel="stylesheet" href="resources/css/style.css">
<script src="resources/js/script.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JF Web | Page 1</title>
</head>
<header>
<div id="titlebar">
<div id="logotext">
<h1>JF Web ©</h1>
</div>
<nav>
<ul id="navbar" class="cf">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</div>
</header>
<body onload="mainClock()">
<span id="clock"></span>
</body>
</html>
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>
How do I move the little arrow image which is inside <li>?
Here is the code:
body {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #f1f1f1;
padding: 5px;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav ul li a img {
max-width: 20px;
height: auto;
margin-left: 4px;
}
nav ul li a {
color: #636363;
padding: 10px;
text-decoration: none;
}
nav ul li a:hover {
color: #333;
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Haircut</title>
</head>
<body>
<header>
<nav>
<ul>
<li>News
</li>
<li>Delivery
</li>
<li>Destinations<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png">
</li>
<li>Guaranties
</li>
<li>Contacts
</li>
</ul>
</nav>
</header>
</body>
</html>
If I just add margin-top to the img element it moves all the ul down. That's not what I want. I want to move it a little bit down to align with the li items
vertical-align: middle; Might be what you need.
body {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #f1f1f1;
padding: 5px;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav ul li a img {
max-width: 20px;
height: auto;
margin-left: 4px;
vertical-align: middle;
}
nav ul li a {
color: #636363;
padding: 10px;
text-decoration: none;
}
nav ul li a:hover {
color: #333;
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Haircut</title>
</head>
<body>
<header>
<nav>
<ul>
<li>News
</li>
<li>Delivery
</li>
<li>Destinations<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png">
</li>
<li>Guaranties
</li>
<li>Contacts
</li>
</ul>
</nav>
</header>
</body>
</html>
You can set the image as position absolute.
nav ul li a img {
position:absolute;
max-width: 20px;
height: auto;
margin-left: 4px;
}
Then you can position it using the top property, not beautiful but works
http://jsbin.com/goyozo/edit?html,css