I have a nav bar which i cannot centre horizontally. I have a nav tag with a ul tag inside and li tags inside that then some of the li tags have ul's and li's to create dropdown lists.
I cannot get the nav to be centered in the page??
/* Main Header Menu */
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
overflow: hidden;
}
.headermenu>ul>li>a {
display: inline-block;
text-align: center;
}
.headermenu>ul {
padding-left: 0;
}
.headermenu>ul>li {
float: left;
position: relative;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en-gb">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Complete Suites</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>Baths</li>
</ul>
</nav>
</div>
</body>
</html>
Please point out anything that might help with my problem, and an explanation would be awesome to as i am trying to learn the reason why as well as just moving/centering the element.
thanks
James
edit:
Changed code to only display the issue i am asking about.
Remove float: left;
.headermenu>ul>li {
position: relative;
display: inline-block;
}
Since you are already using display: inline-block, it is not needed and leads to your problem. For a detailed explantion on both display: inline-block and float and the difference between them, see this answer for reference: Advantages of using display:inline-block vs float:left in CSS
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
overflow: hidden;
}
.headermenu>ul>li>a {
display: inline-block;
text-align: center;
}
.headermenu>ul {
padding-left: 0;
}
.headermenu>ul>li {
position: relative;
display: inline-block;
}
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>Baths</li>
</ul>
</nav>
</div>
Try this
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
overflow: hidden;
}
.headermenu>ul>li>a {
padding: 0 10px;
}
.headermenu>ul>li {
position: relative;
display: inline-block;
}
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Complete Suites</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>Baths</li>
</ul>
</nav>
</div>
</body>
Your nav is already centered. But if you want to center your middle ul element you should set every ul's width to 33% and set middle ul text align to center.
Related
How Do I get an image in line with the Navigation bar on the left side and the menu items listed on the right side? I keep getting my image to go on top of the navigation bar instead of being inline/on the navigation bar.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TLC Music Group</title>
<link rel="stylesheet" href="css/style.css">
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
</head>
<body>
<nav>
<ul class="navigationbar">
<li><img src="imgs/tlclogo.png" id=logo alt="TLC Logo" /> </li>
<li>Home</li>
<li>Music</li>
<li>News</li>
</ul>
</nav>
</body>
</html>
.navigationbar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
text-align: center;
float: left;
vertical-align:top;
top: 0;
width: 100%;
overflow: hidden;
background-color: #333
}
#logo {
float: left;
}
li {
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
Try using display:flex; this will make your life a lot easier. Also put img tag outside un-ordered list for HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TLC Music Group</title>
<link rel="stylesheet" href="css/style.css" />
<meta name="description" content="Our first page" />
<meta name="keywords" content="html tutorial template" />
</head>
<body>
<nav>
<img src="imgs/tlclogo.png" id=logo alt="TLC Logo" />
<ul class="navigationbar">
<li>Home</li>
<li>Music</li>
<li>News</li>
</ul>
</nav>
</body>
</html>
and for CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
ul li {
position: relative;
margin: 0 20px;
list-style: none;
display: inline-block;
cursor: pointer;
}
I hope this will resolve your issue.
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>
Ive been trying to learn CSS and HTML and am struggling with a few things. i can seem to get my head around how to position elements on the page with CSS? i need to vertically align the elements inside the top nav bar but can't seem to figure it out for the life of me. Im not just looking for a simple answer i would like a explanation of what i have done incorrectly that prevents me from being able to move elements to where i need them to be :)
Any help would be greatly appreciated.
here is the code and js fiddle link
https://jsfiddle.net/9trux138/2/
body {
margin: 0;
}
.topbar {
background-color: #17D8C7;
height: 35px;
overflow: hidden;
align-items: center;
padding: 0 2% 0 2%;
}
.topbar {
display: flex;
justify-content: space-between;
}
.topbar ul {
margin: 0;
padding-left: 0;
list-style: none;
position: relative;
display: inline-block;
}
.topbar ul li {
display: inline-block;
vertical-align: middle;
}
.topbar ul li a {
display: inline-block;
text-align: center;
vertical-align: middle;
text-decoration: none;
}
.topbar ul li img {
height: 24px;
padding: 5px 5px 0px 0px;
}
.topright li {
vertical-align: middle;
}
<!DOCTYPE html>
<html lang="en-gb">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Complete Suites</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="topbar">
<ul class="topleft">
<li>
<a href="#"><img src="https://s8.postimg.cc/6t7njymhx/location-pin.png
" alt="Location Pin"></a>
</li>
<li>
<img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Contact Email">
</li>
<li>
<a href="#"><img src="https://s8.postimg.cc/fbh3oalat/open-time.png
" alt="Opening Times"></a>
</li>
</ul>
<ul class="topmiddle">
<li>
<img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Email Promotions Sign Up"><span>Email Promotions</span>
</li>
</ul>
<ul class="topright">
<li>Blog</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</header>
</body>
</html>
James
Remove padding-top from the img tags it will prevent the default centering when we use vertical-align: middle;.
Also you need to add vertical-align: middle on the span and img tags inside the anchor, instead of the anchor.
.topbar ul li a span {
vertical-align: middle;
}
.topbar ul li img {
height: 24px;
padding: 0 5px 0px 0px;
vertical-align: middle;
}
body {
margin: 0;
}
.topbar {
background-color: #17D8C7;
height: 35px;
overflow: hidden;
align-items: center;
padding: 0 2% 0 2%;
}
.topbar {
display: flex;
justify-content: space-between;
}
.topbar ul {
margin: 0;
padding-left: 0;
list-style: none;
position: relative;
display: inline-block;
}
.topbar ul li {
display: inline-block;
vertical-align: middle;
}
.topbar ul li a {
display: inline-block;
text-align: center;
text-decoration: none;
}
.topbar ul li a span {
vertical-align: middle;
}
.topbar ul li img {
height: 24px;
padding: 0 5px 0px 0px;
vertical-align: middle;
}
<!DOCTYPE html>
<html lang="en-gb">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Complete Suites</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="topbar">
<ul class="topleft">
<li><a href="#"><img src="https://s8.postimg.cc/6t7njymhx/location-pin.png
" alt="Location Pin"></a></li>
<li><img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Contact Email"></li>
<li><a href="#"><img src="https://s8.postimg.cc/fbh3oalat/open-time.png
" alt="Opening Times"></a></li>
</ul>
<ul class="topmiddle">
<li><img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Email Promotions Sign Up"><span>Email Promotions</span></li>
</ul>
<ul class="topright">
<li>Blog</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</header>
</body>
</html>
The other text links - Blog, About Us, and Contact - appear to be vertically centered.
Your issue with Email Promotions is the way you're embedding a span tag within the same li tag that also contains an img tag.
As another poster answered, you can additional css to explicitly align this span vertically, if you so choose.
However, why not make it two li tags - one for the image and one for the text?
ie.
<li><img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Email Promotions Sign Up"></li>
<li>Email Promotions</li>
Let me know if you're looking for more guidance.
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 building my own portfolio/company site and my code is below I try to make it full width but it does not go full width. I am writing the code in html5 and css3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TECH-EXPERTS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Our Work</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
nav{
background-color: black;
border-radius: 5px;
display: block;
overflow: hidden;
width: 90%;
}
nav ul {
margin: 0;
padding: 0;
float: right;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: red;
display: block;
line-height: 56px;
padding: 0 24px;
text-decoration: none;
}
nav a:hover{
color: blue;
}
First off, assuming that you want the navbar to span the entire width of the window, you need make sure that you're removing the default margin that is placed on the body element (if you are not using a css reset of some kind that already takes care of that).
Try:
body {
margin: 0;
}
Now remove the width: 90%; that's on your navbar. That should get you pointed in the right direction.
Here's a Codepen of that in action.