The<nav> element is not rendered inside the <header> element even though it is nested inside.
I tried adding the over-flow:hidden property to the <header> element, using the index-head class. I also tried adding both position:relative and position:absolute.
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.index-head{
height: 90px;
width: 100%;
background-color: #000;
overflow: hidden;
}
.logo{
width: 50px;
float: left;
margin: 20px;
margin-right: 0;
}
.brand-name{
color: #ffc107;
line-height: 90px;
font-family: 'Catamaran', sans-serif;
}
.index-head nav{
float: right;
margin-top: 0;
width: 50%;
}
.index-head nav ul li{
list-style: none;
display: inline-block;
font-size: 25px;
padding-left: 50px;
}
<body>
<header class="index-head">
<img class="logo" src="images/logo.png">
<h1 class="brand-name">Eeat</h1>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Signup</li>
<li>Login</li>
</ul>
</nav>
</header>
</body>
Because you added a "h1" tag inside the header, which by default has
display: block
property that stretches the element to the entire width of the "header" element.
to solve this problem, you must add a css rule to the "h1" element
display: inline-block;
JSFiddle link: https://jsfiddle.net/nzf1egcr/1/
The simplest way to get the <nav> inside the <header> is to set the <h1.brand-name> element to display:inline-block. By default browser agents set <hX> tags to display:block, which spans those elements 100% of the available space and in this case is was pushing your <nav> down below it. Since the <header> has a fixed height this forced the <nav> outside.
I also added...
display: flex;
align-items: center;
justify-content: space-between;
To <header.index-head> to space the child elements evenly vertically and horizontally.
I then added flex-grow: 1; to the <nav> element, which makes sure it takes 'priority' when flex-box determines its width relative to its siblings.
Learn more about Flex Box
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.index-head{
height: 90px;
width: 100%;
background-color: #000;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
width: 50px;
float: left;
margin: 20px;
margin-right: 0;
}
.brand-name{
color: #ffc107;
line-height: 90px;
font-family: 'Catamaran', sans-serif;
display: inline-block;
}
.index-head nav{
float: right;
margin-top: 0;
width: 50%;
flex-grow: 1;
}
.index-head nav ul li{
list-style: none;
display: inline-block;
font-size: 25px;
padding-left: 50px;
}
<body>
<header class="index-head">
<img class="logo" src="images/logo.png">
<h1 class="brand-name">Eeat</h1>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Signup</li>
<li>Login</li>
</ul>
</nav>
</header>
</body>
Related
I have this HTML code:
<body>
<header id="masthead">
<div id="container">
<!-- logo -->
<img src="logo.png" alt="" width="200px" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>About Developers</li>
<li>History</li>
<li>Economy</li>
<li>Why Study in Dublin?</li>
<li>People and Culture</li>
</ul>
</nav>
</div>
</header>
And this CSS code:
.container {
width: 80%;
margin: 0 auto;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
header::after {
content : '';
display: table;
clear: both;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 2px;
position: relative;
padding-right: 0.1rem;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
However I want to make my nav bar to the left from the logo, but not down below. How can I do it using the given initial code that i hav pointed ? As you can see, align: right and align: left has been used, but had not helped me
Like on photo (Used arrows to point it )
Create two columns. In one column, place your logo, and in the second column, place your navigation bar.
<div class="row">
<div class="column" style="background-color:#aaa; width:20%;">
<!--pLACE Logo here--->
</div>
<div class="column" style="background-color:#bbb; width:80%">
<!--Place Navbar code here-->
</div>
</div>
Remember Adjust your css accordingly
Give your div with id container a display property of flex, direction property of row and then align or justify items as per your liking
#container{
display:flex;
flex-direction:row;
justify-content:space-between;
}
Also in your HTML code you've given tags ids but you're using class selectors in your CSS
Some resources that'll help you:
A Complete Guide to Flexbox
Basic Concepts of Flexbox
Flexbox Cheatsheet
You will have to change your CSS as shown below:
/*add this line to adjust paddings on the columns and remove default margin padding for all the html elements*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*change class to # it's ID and not class*/
#container {
width: 80%;
margin: 0 auto;
}
/*recommended to add width in percentage in css and remove fix width from <img width='200px' /> tag*/
.logo {
float: left;
width:20%;
padding: 10px 0;
}
/*add width 80% for <nav> tag*/
nav {
float: right;
width: 80%;
margin-top: 10%;
}
nav li {
display: inline-block;
/* margin-left: 70px; */ /*remove*/
/* padding-top: 2px; */ /*remove*/
position: relative;
/* padding-right: 0.1rem; */ /*remove*/
padding: 0 5px; /*instead add this for space between li content*/
}
I would recommend you to use CSS FLEXBOX.
I used flexbox to do this. your id="container" was not the same as the CSS so I changed it to class="container"
I added some simple 1px borders just to illustrate what is where on the page.
This is likely not a finished solution and only a starting point.
.container {
width: 90%;
margin: 0 auto;
display: flex;
flex-direction: row;
flex: space-between font-size: 16px;
justify-content: center;
align-items: center;
}
.logo {
padding: 10px 0;
height: 3em;
border: 1px solid lime;
}
header::after {
content: '';
display: table;
clear: both;
}
nav {
border: 1px solid cyan;
justify-content: center;
align-items: center;
}
nav ul li::before {
content: "\200B";
}
nav ul {
display: flex;
flex-direction: row;
border: 1px solid blue;
list-style-type: none;
justify-content: center;
list-style-position: inside;
margin-left: 0;
padding-left: 0;
}
nav ul li {
padding-top: 0.2em;
padding-right: 0.1rem;
border: 1px solid pink;
margin-left: 0;
padding-left: 0;
}
nav li a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 0.875em;
margin-left: 1em;
margin-right: 1em;
}
<header id="masthead">
<div class="container">
<img src="logo.png" alt="logo png" width="200px" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>About Developers</li>
<li>History</li>
<li>Economy</li>
<li>Why Study in Dublin?</li>
<li>People and Culture</li>
</ul>
</nav>
</div>
</header>
I am having troubles making my list go to the left of my nav element. I have tried to make the nav element relative and list absolute, but that just makes the words overlap each other.
nav {
height: 50px;
width: 400px;
background-color: red;
}
li {
display: inline;
justify-content: space-evenly;
margin: 10px;
font-size: 20px;
}
<nav>
<ul style="list-style: none">
<li>#stayhome</li>
<li>anime</li>
<li>queue</li>
<li>discord</li>
</ul>
</nav>
You can achieve the same result by setting display property of ul to flex
nav {
height: 50px;
width: 400px;
background-color: red;
line-height: 48px;
}
ul{
margin: 0;
padding: 0;
display:flex;
justify-content: space-around;
}
<nav>
<ul style="list-style: none">
<li>#stayhome</li>
<li>anime</li>
<li>queue</li>
<li>discord</li>
</ul>
</nav>
The justify-content property is irrelevant here - it only applies to elements in a Flex or Grid layout.
The issue here is the default margin/padding on the <ul> and <li> elements.
You might also want to set the line-height on the <nav> so that the list items are more centred.
nav {
height: 50px;
width: 400px;
background-color: red;
line-height: 48px;
}
nav > ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin: 10px;
font-size: 20px;
}
<nav>
<ul style="list-style: none">
<li>#stayhome</li>
<li>anime</li>
<li>queue</li>
<li>discord</li>
</ul>
</nav>
I have a HTML5 header setup. It uses <ul> and <li> elements for the links.
This is the HTML:
<header>
<nav>
<ul>
<li id="logoli"><img src="/assets/logo.png" id="logo"></li>
<li>Home</li>
<li class="5px">Roulette</li>
<li>Free Stuff</li>
</ul>
</nav>
</header>
And the CSS:
header {
height: 100%;
width: 100%;
}
nav {
width: 100%;
height: 65px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
padding-left: 10px;
background-color: rgba(0, 0, 0);
color: #0077C5;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
li {
width: 100px;
line-height: 65px;
vertical-align: middle;
text-align: center;
margin: 0;
text-align: center;
display: inline;
list-style: none;
float: left;
}
#logo {
height: 50px;
}
#logoli {
padding-top: 7px;
width: 250px;
}
For some reason this happens: https://image.prntscr.com/image/w0LAMn5qRMq0OqIAfDTsHw.png
If you look at the nav bar you can easily see that the first two elements have a normal amount of spacing in-between. But the seccond and third have weirdly small spacing. I used inspect element on the <li>'s but they are all the same height. Can someone help me?
You need some HTML and CSS Fixes, Wrap the anchors in li elements and the issue was you have mentioned a width to the li, which causes this wierd spacing.
HTML
<header>
<nav>
<ul>
<li id="logoli">
<img src="/assets/logo.png" id="logo"></li>
<li>Home</li>
<li class="5px">Roulette</li>
<li>Free Stuff</li>
</ul>
</nav>
</header>
CSS
header {
height: 100%;
width: 100%;
}
nav {
width: 100%;
height: 65px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
padding-left: 10px;
background-color: rgba(0, 0, 0);
color: #0077C5;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
li {
line-height: 65px;
vertical-align: middle;
text-align: center;
margin:0px 10px;
text-align: center;
display: inline;
list-style: none;
float: left;
}
#logo {
height: 50px;
}
#logoli {
padding-top: 7px;
width: 250px;
}
You should put the <a href>'s inside the <li> tags like this:
<header>
<nav>
<ul>
<li id="logoli"><img src="/assets/logo.png" id="logo"></li>
<li>Home</li>
<li>Roulette</li>
<li>Free Stuff</li>
</ul>
</nav>
</header>
Also - you have a class="5px" on one of the <li>'s, but that class isn't in your CSS. You should make your <li>'s a fixed width and center the text, or use a standard padding on the left and right of the <li> text to maintain a uniform spacing rather than injecting classes to push single elements around.
This is happening because you're explicitly defining a width on your list items. Remove the width and separate the list items with padding instead. Optionally, remove any padding on the last list item, since you won't need it.
li {
/* width: 100px; */
padding-right: 1em;
line-height: 65px;
vertical-align: middle;
text-align: center;
margin: 0;
text-align: center;
display: inline;
list-style: none;
float: left;
}
li:last-child {
padding-right: 0;
}
https://jsfiddle.net/eulloa/yx7vkt79/
Also, restructure your list items so that they are the parent element of your anchors, not the other way around.
<li>Home</li> <!-- structure your list items this way -->
<li>Home</li>
I want to center <h1> or <div class="heading"> on the page. The only solution I have found is
body { text-align: center; }
but I can't figure it out why this code doesn't work. Display: inline-block is used because I want the border to wrap around my .
body {
margin: 0;
}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
border: 2px solid black;
display: inline-block;
text-align: center;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<h1>heading</h1>
</div>
</header>
Add this:
.heading {
text-align: center;
}
...and delete display: inline-block from .heading. Instead, add this
.heading h1 {
display: inline-block;
}
.heading is the container of your h1. Both are by default 100% wide. This centers the inline-block h1 inside the full-width .heading
The secret you are looking for is to use a block-level element, and also set a margin: 0 auto. This tells the block to centralise, much like a standard text-align: center.
.header {
display: block;
margin: 0 auto;
}
By default, block-level elements occupy 100% of the width of their container, so you might also want to specify a width for the header. Alternatively, you can have the header automatically adjust to the size of the text by adding a container div that is set as in inline-block, and moving the border to there:
body {
margin: 0;
}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
display: block;
margin: 0 auto;
text-align: center;
}
.heading-wrapper {
display: inline-block;
border: 2px solid black;
padding: 0 10px;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<div class="heading-wrapper">
<h1>heading</h1>
</div>
</div>
</header>
This way, the header will stay centralised, and have the border automatically expand correctly to accommodate the header, no matter how much text there is.
Hope this helps! :)
You can center it by using display: flex; justify-content; on the parent element. Here is a great resource on centering things https://www.w3.org/Style/Examples/007/center.en.html
body {
margin: 0;
}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
display: flex;
justify-content: center;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<h1>heading</h1>
</div>
</header>
a div displays block by default, so it's definitely important to declare if you want to display it otherwise.
However, again, as in another post i saw earlier, you have no css for the containing parent, the header, which would greatly assist you. You should apply any margin to be inherited to this, and there should be no need to apply a small width to your div.
body {
margin: 0;
}
header{margin: 0 auto;}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
border: 2px solid black;
/*display: block; - even if you leave this out, it will display as block*/
text-align: center;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<h1>heading</h1>
</div>
</header>
I can't figure out how to put them on the same line.
http://codepen.io/anon/pen/dovZdQ
<body>
<div class="navigation-bar">
<div id="navigation-container">
<img src="logo.png">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Get in Touch</li>
</ul>
</div>
</div>
</body>
The <ul> is by default a block element, make it inline-block instead:
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display:inline-block;
vertical-align:top;
}
CodePen Demo
Firstly, let's use some semantic HTML.
<nav class="navigation-bar">
<img class="logo" src="logo.png">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Get in Touch</li>
</ul>
</nav>
In fact, you can even get away with the more minimalist:
<nav class="navigation-bar">
<img class="logo" src="logo.png">
Home
Projects
About
Services
Get in Touch
</nav>
Then add some CSS:
.navigation-bar {
width: 100%; /* i'm assuming full width */
height: 80px; /* change it to desired width */
background-color: red; /* change to desired color */
}
.logo {
display: inline-block;
vertical-align: top;
width: 50px;
height: 50px;
margin-right: 20px;
margin-top: 15px; /* if you want it vertically middle of the navbar. */
}
.navigation-bar > a {
display: inline-block;
vertical-align: top;
margin-right: 20px;
height: 80px; /* if you want it to take the full height of the bar */
line-height: 80px; /* if you want it vertically middle of the navbar */
}
Obviously, the actual margins, heights and line-heights etc. depend on your design.
Other options are to use tables or floats for layout, but these are generally frowned upon.
Last but not least, I hope you get cured of div-itis.
You need to apply the logo class to the image...then float the ul
Codepen Demo
HTML
<img class="logo" src="http://i.imgur.com/hCrQkJi.png">
CSS
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
float: left;
background: white;
}
I'll advise you use CSS Flex.
body {
margin: 0;
padding: 0;
}
#navigation-container {
position: relative;
background-color: #352d2f;
display: flex;
flex-direction: row;
justify-content: space-between;
}
ul {
display: flex;
flex-direction: row;
list-style-type: none;
}
a {
text-decoration: none;
color: black;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 5px 15px;
opacity: 0.7;
}
li {
display: flex;
flex-direction: row;
align-items: center;
}
<head>
<link href="./answer.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navigation-bar">
<div id="navigation-container">
<img src="https://i.imgur.com/hCrQkJi.png">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Get in Touch</li>
</ul>
</div>
</body>
Try this CSS:
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: #352d2f;
height: 70px;
width: 100%;
}
#navigation-container img {
float: left;
}
#navigation-container ul {
padding: 0px;
margin: 0px;
text-align: center;
display:inline-block;
}
#navigation-container li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
}
#navigation-container li a {
color: white;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
#menu {
float: right;
}
1) you can float the image to the left:
<img style="float:left" src="http://i.imgur.com/hCrQkJi.png">
2)You can use an HTML table to place elements on one line.
Code below
<div class="navigation-bar">
<div id="navigation-container">
<table>
<tr>
<td><img src="http://i.imgur.com/hCrQkJi.png"></td>
<td><ul>
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Get in Touch</li>
</ul>
</td></tr></table>
</div>