I know there are a lot of other answers out there, but I don't know if Im just doing something wrong, but they aren't working.
Basically, I have a "logo" (it's just my name) in a div("name") on the left hand side of a container div("header"). I also have my navbar links on the right of the name div, which are in the "nav" div.
The issue is that the nav div is actually floating to the top of the header div, while the name div is perfectly centered. A picture:
This is my HTML file:
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Toby Caulk</title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
</head>
<body>
<div id="header">
<header>
<div id="name">
<h1>Toby Caulk</h1>
</div>
<div id="nav">
<nav>
<ul>
<li>Home</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</div>
</body>
</html>
And the CSS:
*{
font-family: monospace;
}
#header {
position: fixed;
left: 0;
right: 0;
top: 0;
background-color: rgb(245, 245, 245);
box-shadow: 0px 10px 5px #888888;
}
#name {
float: left;
font-size: 20px;
margin-left: 20px;
}
#nav {
float: left;
}
nav ul li {
display: inline-block;
}
nav ul {
padding: 0;
list-style-type: none;
}
nav li {
font-weight: 150;
font-size: 24px;
}
What I want is for the nav div to be centered vertically inside of the header div, just like the name div is doing. How do I do this?
See comments and the properties I added to #name
*{
font-family: monospace;
}
#header {
position: fixed;
left: 0;
right: 0;
top: 0;
background-color: rgb(245, 245, 245);
box-shadow: 0px 10px 5px #888888;
}
#name {
font-size: 20px;
margin-left: 20px;
display: inline-block; /* Ensures that #name and #name aligns side by side */
line-height: 100%; /* Makes to ensure vertical centering */
vertical-align: middle; /* Makes sure it's centered vertically */
}
#nav {
display: inline-block;
}
nav li {
font-weight: 150;
font-size: 24px;
display: inline-block; /* You can align them without using float */
}
<div id="header">
<header>
<div id="name">
<h1>Toby Caulk</h1>
</div>
<div id="nav">
<nav>
<ul>
<li>Home</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</div>
Related
I have this problem when i want to put some text in my body or place something like a div or a section there , the text goes above the navbar which is in header.I tried to put a margin top to the body but it only made a bigger gap between the top.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.logo {
float: left;
height: auto;
width: auto;
}
body{
background-color: #444064;
margin-top:10ex;
}
nav {
float: right;
margin-bottom: 50px;
}
nav ul {
margin: 0,auto;
padding: 0,auto;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 2ex;
padding: 5ex;
}
nav a {
color: #ffffff;
font-weight: 600;
font-size: 4ex;
text-decoration: none;
}
nav a:hover {
color: #a34963;
}
section{
text-align: center;
margin-top: 5ex;
}
h1{
font-size: xx-large;
}
<html>
<div id="wrapper">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="testsite.css">
</head>
<header>
<div id="menu">
<img src="Logo.png" alt="logo" class="logo">
<home>
<nav class="menu">
<ol>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Contact</li>
</ol>
</nav>
</home>
</div>
</header>
<body>
Hello world
</body>
</div>
</html>
Please help me
You have many issues with your code as you have an invalid HTML structure. however the issue you have is: nav { float: right; } that causes you navbar to float and as such the content can flow around the nav element and be displayed above. If you remove the line it not happen anymore.
However, I strongly recommend to get back to some decent tutorials and start at the basics. Like I said your HTML structure is an invalid mess. Some css declarations are incorrect/unnecessary as well (e.g. webkit prefix for box-sizing). Also don't use float as styling technique. Use a modern solution like flexbox or css-grid.
Last but not least, this is how the html structure should look like.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logo {
float: left;
height: auto;
width: auto;
}
body {
background-color: #444064;
margin-top: 10ex;
}
nav {
margin-bottom: 50px;
}
nav ul {
margin: 0 auto;
padding: 0 auto;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 2ex;
padding: 5ex;
}
nav a {
color: #ffffff;
font-weight: 600;
font-size: 4ex;
text-decoration: none;
}
nav a:hover {
color: #a34963;
}
section {
text-align: center;
margin-top: 5ex;
}
h1 {
font-size: xx-large;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="testsite.css">
</head>
<body>
<header>
<div id="menu">
<img src="Logo.png" alt="logo" class="logo">
<home>
<nav class="menu">
<ol>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Contact</li>
</ol>
</nav>
</home>
</div>
</header>
<div id="wrapper">
Hello world
</div>
</body>
</html>
I don't know how to align it with the logo. I'm trying to use padding but it won't work and even float maybe I would change the container size for it to work. Btw you won't be able to see the image and the li option due to overflow not allowing links so I have attached an image for more convenience
if possible maybe even tell some tips to be better in HTML
enter image description here
header {
height: 600px;
background-image:urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo{
height: 150px;
width: 450px;
}
img.logo{
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
}
nav ul {
margin: 0;
padding:0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
color: #111111;
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
If you want to make logo and menu in a line, you should add "float: left" style to your div. So your style will be this:
.header-logo {
height: 150px;
width: 450px;
float: left;
}
Then if you want change your menu vertical align you can add "margin-top: px" to your ul like this:
nav ul {
margin: 0;
padding: 0;
margin-top: 50px;
}
As logo div and ul are children of same parent,
you can make their parent i.e <nav> as display: flex to align it's children in a flex-row
Learn More on FlexBox
nav {
display: flex;
}
header {
height: 600px;
background-image: urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo {
height: 150px;
width: 450px;
}
img.logo {
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
/* color: #ffffff; */
color: #000; /* changing this so that you can see color */
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have changed the font color, so that you can see it working.
I have this black bar at the top with my navigation menus in it. But if i add "text-align: center" instead of "float: right" then the menus/links go to the center but not in the black bar at the top. Does anyone knows how to fix this?
<html>
<head>
<style>
*
{
margin: 0;
padding: 0;
}
header {
background-color: black;
height: 85px;
line-height: 85px;
}
ul {
list-style: none;
}
ul li {
position: relative;
display: inline-block;
font-size: 17px;
}
header nav {
position: relative;
float: right;
}
header nav ul li a {
padding-right: 20px;
font-weight: bold;
text-decoration: none;
color: #DCDCDC;
}
header nav ul li a:hover {
color: white;
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="mylogo.png">
<nav>
<ul>
<li>home</li>
<li>home1</li>
<li>home2</li>
<li>home3</li>
<li>home4</li>
<li>home5</li>
<li>home6</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
Add display: flex and justify-content:center to the .row class. Add css values for the logo. I added position: absolute and left: 0 to the logo. If you want to have your logo also aligned horizontally to the center, then remove the css that I added for .logo.
Here's a working snippet:
<html>
<head>
<style>
*
{
margin: 0;
padding: 0;
}
.row {
display: flex;
justify-content: center;
}
header {
background-color: black;
height: 85px;
line-height: 85px;
}
.logo {
position: absolute;
left: 0;
}
ul {
list-style: none;
}
ul li {
position: relative;
display: inline-block;
font-size: 17px;
}
header nav {
position: relative;
float: right;
}
header nav ul li a {
padding-right: 20px;
font-weight: bold;
text-decoration: none;
color: #DCDCDC;
}
header nav ul li a:hover {
color: white;
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="mylogo.png">
<nav>
<ul>
<li>home</li>
<li>home1</li>
<li>home2</li>
<li>home3</li>
<li>home4</li>
<li>home5</li>
<li>home6</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
To align Element in Center use CSS flexbox, It is the Easiest way to align items
To center them horizontally use justify-content: center;
Just change the display of your div to flex and its inner content will be centered horizontally
.flexbox{
display:flex;
justify-content:center;
}
<div class="flexbox">
<!----Your data you want in Center-->
</div>
The float: right applies to the element it is attached to, but text-align: center acts on the contents of the element. So you need to move the text-align to the header:
<html>
<head>
<style>
*
{
margin: 0;
padding: 0;
}
header {
background-color: black;
height: 85px;
line-height: 85px;
text-align: center
}
ul {
list-style: none;
}
ul li {
position: relative;
display: inline-block;
font-size: 17px;
}
header nav {
position: relative;
}
header nav ul li a {
padding-right: 20px;
font-weight: bold;
text-decoration: none;
color: #DCDCDC;
}
header nav ul li a:hover {
color: white;
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="mylogo.png">
<nav>
<ul>
<li>home</li>
<li>home1</li>
<li>home2</li>
<li>home3</li>
<li>home4</li>
<li>home5</li>
<li>home6</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
Hey there I wanted to create a white background for my menu on the right and title on left just like on this website http://weblendit.co.uk/, that also stays at the top when you scroll down (doesn't necessarily have to change its size like this one)
My header also consists of a big picture after the nav and h1, when I set a background color it will only be behind the text, but I want it to be fullsize.
I also tried setting a width and height for .fixed but then the nav floats to the left and the h1 disappears?
.fixed{
position: fixed;
top: 0;
background-color: white;
}
h1{
padding: 1% 0 0 4%;
text-transform: uppercase;
float: left;
left: 0;
}
nav{
float: right;
padding-right: 12%;
padding-top: 3%;
width: auto;
right: 0;
}
#menu ul{
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
#menu li{
margin: 0 5%;
float: left;
}
#menu li a {
text-decoration: none;
color: #666666;
font-size: 25px;
font-weight: bold;
display: block;
float: left;
}
<header class="header">
<h1 class="fixed">My page</h1>
<nav class="fixed" id="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
....
It is better to fix the container surrounding the header elements, rather that every element in it. Then you don't need the fixed class anymore.
<header class="header">
<h1>My page</h1>
<nav id="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS
.header {
position: fixed;
background-color: red;
top: 0px;
left: 0px;
width: 100%;
}
I'm new to HTML/CSS. I'm practicing by creating a mock portfolio website.
I'm creating a nav bar with the logo in the middle. I want to "vertically center" the logo, if that makes sense. I added a class to that li to try to add margin or padding to the top but it's not working.
I'm working on it on CodePen: http://codepen.io/levane/pen/KdxgmR?editors=110
This is my HTML so far:
<body>
<section id=top>
<img src="http://creatifydesign.com/wp-content/uploads/2015/11/photo-1429051883746-afd9d56fbdaf.jpeg" class="bckg-image"/>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li class="logo"><img src="http://creatifydesign.com/wp-content/uploads/2015/09/icon57.png"/></li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
</section>
</body>
This is my CSS:
body {
margin: -1em 0;
position: relative;
}
#top {
background-color: black;
height: 53.125em;
}
.bckg-image {
position: absolute;
height: 53.125em;
opacity: 0.5;
}
nav {
height: 6.5em;
border-bottom: 1px solid rgba(255,255,255, 0.4);
position: relative;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav li {
display: inline;
margin: 0em 1.5em;
color: white;
text-transform: uppercase;
font-family: Lato, Arial;
letter-spacing: 0.1em;
}
Please let me know if you can spot what I'm doing wrong and feel free to critique anything else.
Thanks!
Apply this CSS
.logo{
vertical-align: middle;
display: inline-block;
margin-top: .5em
}
CODEPEN DEMO