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>
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'm trying to make a navigation bar with a center-aligned menu, but the logo is stopping the menu from being in the center of the page and instead pushing the menu to the right. So the menu is offset from being horizontally centered by the width of the logo. I want it so that my menu is in the center of the page rather than pushed 150px to the right by the logo.
How can I make it so that my logo doesn't shift my menu to the right, stopping it from being center-aligned in the body?
body {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 16px;
margin: 0;
}
h1 {
font-size: 6rem;
font-weight: 400;
}
h2 {
font-size: 4.5rem;
font-weight: 400;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 5% 0;
}
header img {
width: 150px;
}
nav {
width: 100%;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
padding-right: 1rem;
text-transform: uppercase;
}
nav ul li a {
text-decoration: none;
color: black;
}
<header>
<img src="../Images/Logo/Black-Logo.png" alt="Logo" />
<nav>
<ul id="MenuItems" class="NavMenu">
<li>Home</li>
<li>About Us</li>
<li>Hours</li>
<li>Get in Touch</li>
</ul>
</nav>
</header>
You could erase the flex settings from the container, apply absolute position to the logo (and relative to the header), add text-align: center; to the header to center the nav and erase/reset most of the paddings and margins except those shown below (exact settings see snippet below).
body {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 16px;
margin: 0;
}
header {
width: 90%;
margin: 20px 5% 0;
text-align: center;
position: relative;
}
header img {
width: 50px;
position: absolute;
left: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
padding-right: 1rem;
text-transform: uppercase;
}
nav ul li:last-child {
padding-right: 0;
}
nav ul li a {
text-decoration: none;
color: black;
}
img {
}
<header>
<img src="../Images/Logo/Black-Logo.png" alt="Logo" />
<nav>
<ul id="MenuItems" class="NavMenu">
<li>Home</li>
<li>About Us</li>
<li>Hours</li>
<li>Get in Touch</li>
</ul>
</nav>
</header>
Use position: absolute for the logo and it will make it "not take up space" in the navbar:
#logo {
position: absolute;
top: 0 left: 0;
}
body {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 16px;
margin: 0;
}
h1 {
font-size: 6rem;
font-weight: 400;
}
h2 {
font-size: 4.5rem;
font-weight: 400;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 5% 0;
}
header img {
width: 150px;
}
nav {
width: 100%;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
padding-right: 1rem;
text-transform: uppercase;
}
nav ul li a {
text-decoration: none;
color: black;
}
<header>
<img id="logo" src="../Images/Logo/Black-Logo.png" alt="Logo" />
<nav>
<ul id="MenuItems" class="NavMenu">
<li>Home</li>
<li>About Us</li>
<li>Hours</li>
<li>Get in Touch</li>
</ul>
</nav>
</header>
I'd use a container (see div with class wrapper below) and make the logo position: absolute. This simplifies your CSS.
.logo {
position: absolute;
}
.wrapper {
margin: 0 auto;
}
<div class="logo"><img src="../Images/Logo/Black-Logo.png" alt="Logo" /></div>
<div class="wrapper">
<nav>
<ul id="MenuItems" class="NavMenu">
<li>Home</li>
<li>About Us</li>
<li>Hours</li>
<li>Get in Touch</li>
</ul>
</nav>
</div>
You can get rid of this CSS:
nav {
width: 100%;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
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.
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>
I'm completely new at coding so I apologize in advance for this question.
I'm trying to centrally align an image to the right of a fixed navigation menu.
Here's my code right now:
HTML:
ul {
list-style-type: none;
float: left;
position: relative;
margin: 0;
padding: 0;
}
li {
padding: 3px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
font-family: "Courier";
}
div.image{
display: block;
display: inline-block;
float: left;
}
<nav>
<ul>
<li>about</li>
<li>cv</li>
<li>adventures</li>
<li>books</li>
<li>blog</li>
<li>quotes</li>
<li>contact</li>
</ul>
</nav>
<div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div>
I want the navigation menu to be fixed to the left, and the image to be to the right of the navigation menu but at the CENTER of the page. here's an image of what I have right now: current homepage. How can I put the image at the center of the page?
Thanks!
If you are trying the centre the whole lot then your nav and div.image should be inline-block to display them side by side. You should then put the lot in a wrapper which you can centre:
section {text-align:center}
nav,
div.image {
display: inline-block;
vertical-align:middle;
}
ul {
list-style-type: none;
position: relative;
margin: 0;
padding: 0;
text-align:left;
}
li {
padding: 3px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
font-family: "Courier";
}
<section>
<nav>
<ul>
<li>about</li>
<li>cv</li>
<li>adventures</li>
<li>books</li>
<li>blog</li>
<li>quotes</li>
<li>contact</li>
</ul>
</nav>
<div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div>
<section>
Updated...
Now that I better understand what you are after (nav on left, image centered in remaining space on the right) it seems that flex-box is the simplest solution:
section {
display:flex;
justify-content: space-between;
align-items: flex-start;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align:left;
}
li {
padding: 3px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
font-family: "Courier";
}
<section>
<nav>
<ul>
<li>about</li>
<li>cv</li>
<li>adventures</li>
<li>books</li>
<li>blog</li>
<li>quotes</li>
<li>contact</li>
</ul>
</nav>
<div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div>
<section>
Attempt 3...
Based on your comments (fyi, you really should try harder to explain your requirements) it sounds like what you want is to centre the image regardless of the nav's position. In the following example I have used margin:auto to centre the .image and position:absolute to fix the nav in the top left. Now the image in centred but the nav may overlap it depending on the viewport width.
nav {display:block; position:absolute;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align:left;
}
li {
padding: 3px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
font-family: "Courier";
}
.image {display:block; width:450px; margin:auto;}
<nav>
<ul>
<li>about</li>
<li>cv</li>
<li>adventures</li>
<li>books</li>
<li>blog</li>
<li>quotes</li>
<li>contact</li>
</ul>
</nav>
<div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div>
you can use your div class if class is not work then use id for div like id="image"
#media All and (max-width: 641px) {
ul {
list-style-type: none;
float: left;
position: relative;
margin: 0;
padding: 0;
}
li {
padding: 3px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
font-family: "Courier";
}
div.image{
padding-top: 25%;
margin-left: 16%;
}
}
#media screen and (min-width: 641px) and (max-width: 800px) {
ul {
list-style-type: none;
float: left;
position: relative;
margin: 0;
padding: 0;
}
li {
padding: 3px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
font-family: "Courier";
}
div.image{
padding-top: 23%;
margin-left: 21%;
}
}
#media screen and (min-width: 801px) and (max-width: 1024px) {
ul {
list-style-type: none;
float: left;
position: relative;
margin: 0;
padding: 0;
}
li {
padding: 3px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
font-family: "Courier";
}
div.image{
padding-top: 18%;
margin-left: 24%;
}
}
#media screen and (min-width: 1025px){
ul {
list-style-type: none;
float: left;
position: relative;
margin: 0;
padding: 0;
}
li {
padding: 3px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
font-family: "Courier";
}
div.image{
padding-top: 13%;
margin-left: 30%;
}
}
}
<nav>
<ul>
<li>about</li>
<li>cv</li>
<li>adventures</li>
<li>books</li>
<li>blog</li>
<li>quotes</li>
<li>contact</li>
</ul>
</nav>
<div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div>
kindly check my codes i'll create for you
.image{
display: block;
text-align: center;
}
.image > img{
background-color: red;
}
You can also check this link for your exact code http://codepen.io/myco27/pen/dNxWWK
You can put the img element into nav and style nav with display:flex, justify-content: space-between See the code snippet
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
padding: 3px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
font-family: "Courier";
}
nav {
display: flex;
justify-content: space-between;
}
<nav>
<ul>
<li>about</li>
<li>cv</li>
<li>adventures</li>
<li>books</li>
<li>blog</li>
<li>quotes</li>
<li>contact</li>
</ul>
<div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div>
</nav>