This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 1 year ago.
I'm having difficulty aligning things correctly on the nav-bar. I want the words (home, players, about, contact) to be vertically aligned to the middle of the heart logo.
This is what it looks like now:
I want it to look like this (did it on Photoshop)
The code I have right now is:
body {
padding: 0;
margin: 0;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
background-color: whitesmoke;
}
.container {
width: 80%;
margin: auto;
}
/* Header */
header {
background: black;
color: whitesmoke;
padding-top: 30px;
min-height: 50px;
border-bottom: #fe1d61 4px solid;
}
header a {
color: whitesmoke;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}
header ul {
margin: 0;
padding: 0 0 20px 0;
list-style-type: none;
text-align: center;
}
header li {
display: inline;
padding: 0 100px 0 100px;
height: 30px;
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<body>
<header>
<div class="container">
<nav>
<ul>
<li>HOME</li>
<li>PLAYERS</li>
<li>
<img src="img/00nation_logo.png" width="60px">
</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
</body>
Sorry if there has already been a question made about this same thing, but I tried looking it up and couldn't find anything.
Try this & change your li CSS:
header ul li{
display: inline-block;
}
You can apply vertical-align property on your image to move it to the middle of others.
Try this:
style="vertical-align: middle;"
For that you need to add some more CSS like
header li{
display: inline;
padding: 0 100px 0 100px;
height: 30px;
vertical-align: middle; // add this line
line-height: normal; // add this line
}
Check on Full Screen
Here you can check full Example
body{
padding: 0;
margin: 0;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
background-color: whitesmoke;
}
.container{
width: 80%;
margin: auto;
}
/* Header */
header{
background: black;
color: whitesmoke;
padding-top: 30px;
min-height: 50px;
border-bottom: #fe1d61 4px solid;
}
header a{
color: whitesmoke;
text-decoration: none;
font-size: 14px;
font-weight: bold;
}
header ul{
margin: 0;
padding: 0 0 20px 0;
list-style-type: none;
text-align: center;
}
header li{
display: inline;
padding: 0 100px 0 100px;
height: 30px;
vertical-align: middle;
line-height: normal;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Norwegian-based esports organization with teams in CS:GO, Rocket League, and many other games.">
<meta name="author" content="#__jmarcelo__">
<link rel="stylesheet" href="./css/style.css">
<title>00 Nation DNB | Home</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>HOME</li>
<li>PLAYERS</li>
<li><img src="https://pbs.twimg.com/media/E-YiHwfXsAEAuiZ.jpg" width="60px"></li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Related
I am currently making my first mockup website, fiddled around with making a navbar and having a logo on it. I've managed to do it, but now when I try to add the 'name' onto the navbar it won't show up.
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: #333;
height: 70px;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
float: right;
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!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="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
I've tried moving the text around to different places, but it ends up moving the navbar to be under the text.
You have set .navigation-bar ul to be float: right. float removes items from the normal flow of the page, which is why it is leaving your navbar.
You can fix this using flexbox, by adding the following rules to .navigation-bar ul:
.navigation-bar ul{
...
display: flex;
justify-content: right;
}
Here are some extra observations on your code, that are unrelated to the main problem
There are several places where you have hardcoded the height of the navbar - this could instead be replaced with a CSS variable - i.e.
:root{
--navbar-height: 70px;
}
.logo {
height: calc(var(--navbar-height) - 10px);
}
#navigation-container {
height: var(--navbar-height);
}
.navigation-bar {
height: var(--navbar-height);
}
/* etc */
You should try to avoid pixel units where possible as these are not responsive - instead, the preferred unit is rems.
However, in this case I don't actually think you need to set the height - the content inside (i.e. the header, logo and navbar) should instead make the header resize. This is particularly important for responsive pages.
Adapted code:
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
}
.navigation-bar {
background-color: #333;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
display: flex;
justify-content: right;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!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="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
I have the following code, just a header with a menu, a logo in the middle and social media image on the right, or at least that is my idea.
I want to be able to hover the first four buttons and see the red color, and I got it, however, I wanna be able to click the logo in the middle but not do any hover color effect, as well as the image for social media in the right.
What do I have to do in order to accomplish this? All of the items are listed and considered unordered lists. I figure I need to put the logo and the other image in a different css class. How do I accomplish that? Here's the code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 20px;
font-weight: bold;
border-style: dashed;
border-color: black;
border-radius: 20px;
height: 80px;
width: 1900px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 12px;
text-decoration: none;
border-style: none;
margin-left: 24px;
margin-top: 11px;
}
li a:hover {
background-color: #9E1B2F;
}
.logo {
display: flex;
padding: 6px;
border: 0;
margin-left: 350px;
margin-bottom: 0px;
justify-content: center;
}
.bbicons {
padding: 6px;
border: 0;
margin-left: 1650px;
margin-bottom: 5px;
margin-top: -60px;
}
<!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="shortcut icon" href="./img/favicon.png">
<link rel="stylesheet" href="./css/style.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Green Day</title>
</head>
<style></style>
<body>
<div class="navigation active">
<ul>
<li>Tours</li>
<li>Listen to Music</li>
<li>Contact</li>
<li>About</li>
<li>
<a class="logo"><img src="./img/logo.jpg"></a>
</li>
<li>
<a class="bbicons"><img src="./img/bbicons.jpg"></a>
</li>
</ul>
</div>
</body>
</html>
I want to make the navbar centered like the 'my content'
please help me to get deal with this. I wanna make the navbar in the center. like the 'my content' used to. But in fact, it literally not center.
Plus correct my design. Like at padding, margin, border, etc
body {
margin: 0;
padding: 0;
}
.logo {
width: auto;
height: 100px;
}
.container {
width: 720px;
height: auto;
margin: auto;
}
.navbar ul {
padding: 0;
text-align: center;
}
.navbar ul li {
padding: 20px;
display: inline-block;
width: auto;
}
.navbar ul li a {
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
padding: 10px 20px;
width: auto;
border: 1px solid black;
border-radius: 25px;
}
.navbar ul li a:hover {
border: 1px dashed #2a19c0;
border-radius: 25px;
background-color: rgb(68, 99, 236);
color: white;
}
.content {
height: 700px;
background-color: #9360b6;
}
.content h4 {
text-align: center;
width: auto;
padding: 12px;
text-transform: uppercase;
text-decoration: underline;
}
.footer {
background-color: #9360b6;
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<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>Latihan Layout intermediate</title>
<link rel="stylesheet" href = "Coffee.css">
</head>
<body>
<div class="container">
<img src="../image/logo.png" class="logo" alt="logo">
<div class="navbar">
<ul>
<li><a>home</a></li>
<li><a>price list</a></li>
<li><a>about us</a></li>
</ul>
</div>
<div class="content">
<h4>My content</h4>
</div>
<div class="footer">
<p>Copyright 2020 Alan's web</p>
</div>
</div>
</body>
You Can wrap your logo with a container then center your logo using the display: flex; & justify-content: center;
HTML:
<div class="logo-container">
<img src="../image/logo.png" class="logo" alt="logo">
</div>
CSS:
.logo-container{
display: flex;
justify-content: center;
}
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 3 years ago.
I've just learning HTML/CSS for a few days and I'm having trouble with this:
Why there is a blank line at the top of the page? Can someone tell me what was wrong or missing from my code? How can I fix it?
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
background-color: lightgray;
}
header h1 {
font-size: 70px;
}
ul {
background-color: gray;
padding: 10px;
}
li {
display: inline;
margin: 0 5px 0 5px;
}
a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
}
</style>
</head>
<body>
<header>
<h1>My Website</h1>
<p>A sample website</p>
<ul>
<li>HOMEPAGE</li>
<li>ABOUT ME</li>
<li>CONTACT</li>
</ul>
</header>
</body>
</html>
Thanks in advance!
This occurs because of parent and first child margin collapsing between the h1 and the margin of its parent element(s)
One solution would be to add border: 1px solid lightgray or add padding, or you can reset the margin itself to zero - see demo below:
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
background-color: lightgray;
border: 1px solid lightgray;
}
header h1 {
font-size: 70px;
}
ul {
background-color: gray;
padding: 10px;
}
li {
display: inline;
margin: 0 5px 0 5px;
}
a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
}
<header>
<h1>My Website</h1>
<p>A sample website</p>
<ul>
<li>HOMEPAGE</li>
<li>ABOUT ME</li>
<li>CONTACT</li>
</ul>
</header>
It's because your h1 has margins. To solve the issue, you need to reset h1's margin-top like this:
h1 {
margin-top: 0;
}
And here is the working snippet:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0;
}
header{
text-align: center;
background-color: lightgray;
}
header h1{
font-size: 70px;
margin-top: 0;
}
ul{
background-color: gray;
padding: 10px;
}
li{
display: inline;
margin: 0 5px 0 5px;
}
a{
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
}
</style>
<body>
<header>
<h1>My Website</h1>
<p>A sample website</p>
<ul>
<li>HOMEPAGE</li>
<li>ABOUT ME</li>
<li>CONTACT</li>
</ul>
</header>
</body>
The above blank line is caused by the browsers default css style.
Use normalize.css to reset the CSS applied by all the browser to a common one. So that you have level playgroud to apply styles.
https://github.com/necolas/normalize.css/
To solve this issue you can add margin-top:-45px; in header class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
margin-top:-45px;
background-color: lightgray;
}
header h1 {
font-size: 70px;
}
ul {
background-color: gray;
padding: 10px;
}
li {
display: inline;
margin: 0 5px 0 5px;
}
a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
}
</style>
</head>
<body>
<header>
<h1>My Website</h1>
<p>A sample website</p>
<ul>
<li>HOMEPAGE</li>
<li>ABOUT ME</li>
<li>CONTACT</li>
</ul>
</header>
</body>
</html>
It is margin of tag h1 make it zero in css.
header h1{
margin: 0px;
}
I'm new to HTML and CSS and am trying to make a menu bar. I placed a navigation bar inside a div assuming that it would kind of be in the center. Instead, it appears to sit on the bottom. Also, how could I position the navigation bar so it's not just floating to the left or the right.
Side question, how can I have it so the menu bar completely extends to the edge of the screen. Like the one at the top of this site.
Here's the code:
body {
font-family: "Open Sans", sans-serif;
}
#nav {
background-color: white;
height: 300px;
width: auto;
height: 55px;
box-shadow: 1px 3px 2px #888888;
}
h1 {
color: #35e3c1;
display: inline;
font-size: 36px;
font-weight: 900;
margin-left: 15px;
}
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
display: inline-block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: #1fe0ba;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
color: #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soycial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h1>Soycial</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Is this what you want?
I have added margin:0; to the ul.
body {
font-family: "Open Sans", sans-serif;
}
#nav {
background-color: white;
height: 300px;
width: auto;
height: 55px;
box-shadow: 1px 3px 2px #888888;
}
h1 {
color: #35e3c1;
display: inline;
font-size: 36px;
font-weight: 900;
margin-left: 15px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
display: inline-block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: #1fe0ba;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
color: #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soycial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h1>Soycial</h1>
<ul>
<li>Home
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</body>
</html>
Other ways this could have been done would have by messing with top and bottom margins(depending on what specific ratios you want). Using this way will get you specifically what alignment you want vertically.