I am currently creating a company website, and I have the logo, but I am wanting to put it inside the Navigation Bar, align it so it is at the far right, but halfway down through the height of the navigation bar. I am wanting to do this using CSS.
Here is my index.html.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img src="images/logo.png" alt="Logo" id="logo" onclick="location.replace('index.html', '_top')">
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
Home
Business
Services
Learn More
<span id="freetrial">Free Trial</span>
</div>
</div>
</body>
</html>
And here is my main.css
html, body {
width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", sans-serif;
}
/* Navigation Bar */
#logo {
text-align: right;
float: right;
}
.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: grey;
margin: 0 10px;
line-height: 70px;
}
#freetrial {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26 px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked + .menu {
display: block;
background-color: white;
}
}
If you require any more explaining or anything at all in aiding you to answer my question, I will be more than happy to help you, providing it is something that I can actually answer haha.
If I was coding this, I would first put the logo inside the nav div with its own div around it. Then I would use flexbox (it is supported everywhere but IE, btw).
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Make sure to apply "display: flex;" to the parent div (the nav div, presumably). Then I would apply "align-items: center;" to the nav div. This will align all of the menu items to the middle vertically as well (not sure if you want that).
I would then use "justify-content" to the nav items. Depending on what you want done with the other items in the nav bar, you might use "flex-end" or "space-between".
If you do not want to use flexbox, you should refer to this stack overflow question after moving your image to inside the nav div: How to vertically align an image inside a div?
Then you would set "right: 0;" on the image or image div.
Also, I think you may be using floats incorrectly...
https://css-tricks.com/all-about-floats/
You seem to be using them the way it "seems" like they should work, but they can be confusing... I would get rid of your floats, it might be messing things up. Sorry, I can take a harder look if you want at a later time. Feel free to ask any questions you have!
Related
So, my knowledge with regards to HTML5 coding and CSS is quite limited. I am trying to develop a website for my Occupational Health and Safety Consulting company.
I have started with the Navbar, logo and navigation buttons. However, I can't seem to have the text centred in the middle of the navbar vertically and have them blocked right horizontally. Also, I have noticed that as I increase and decrease the browser size, the text actually goes outside of the navigation bar.
I can't seem to post my code here. Here is a link to the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/stylesheet.css"/>
<title>CMK Safety Solutions - Home</title>
</head>
<body>
<div class="navigation-bar">
<div id="navigation-container">
<img src="images/logopng.png" height="120px"/>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Our Services</li>
<li>Current Clients/Projects</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
Here is the CSS
body {
margin: 0;
padding: 0;
}
.logo {
float: right;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
margin: 0 auto;
height: 120px;
}
.navigation-bar {
background-color: #000000;
height: 120px;
width: 100%;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: right;
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-block;
text-align: right;
}
.navigation-bar li a {
color: #808080;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 1;
text-align: right;
}
How about something like this: https://jsfiddle.net/mulperi/189so4Ln/
Use snippet below on the container to make it push navigation buttons to right and logo to left. Also everything middle vertically:
#navigation-container {
display: flex;
justify-content: space-between;
align-items: center;
}
Also what I did was remove the static height from the container so now the buttons won't be pushed outside the container when the screen is smaller.
And that is actually something to think about. You can use media query to check if the screen is smaller or larger than a specified min-width or max-width and apply different set of styles for that scenario. Like a column navigation for example like in my fiddle.
Try shrinking the screen to see how the navigation links change orientation when the screen is smaller than 400px.
#media screen and (min-width: 400px) {
.navigation-bar li {
display: inline-block;
}
}
As a side note, try to use HTML5 semantic elements like <nav> for the navigation :)
I hope this helps!
I'm currently working on a class project where we need to create a website from a psd file. I'm at the nav bar so far, but I'm having problems because the last 2 links in the nav bar are going below the first 2 elements, instead of being displayed in a line. The whole top part going from the logo to the last of the links is wrapped in a container with a 940px width. The letters in the links must be in 20px. This is how the website is supposed to look Pic from the finished site
And this is how it's looking for me so far
Test pic
Here's my HTML
<html>
<head>
<meta charset="utf-8">
<title>NeoDance Studio</title>
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<header class="Top">
<div class="wrapperHeader">
<img src="img/logo.png" alt="NeoDance Logo" width="356" height="48" class="logo">
<nav class="NavBar">
<ul class="links">
<li class="links">Home</li>
<li class="links">About</li>
<li class="links">Class schedules</li>
<li class="links">Performances</li>
<li class="links">Blog</li>
<li class="links">Contact</li>
</ul>
</nav>
<div class="ClearFix"></div>
</div>
</header>
and my css
header.Top{
margin: auto;
background-color: #303030;
overflow: hidden;
}
div.wrapperHeader{
width: 940px;
}
}
div.wrapper{
width: 940px;
margin: auto;
background-color: #f6f6f6;
overflow: hidden;
}
img.logo{
margin: auto;
margin-top: 35px;
margin-bottom: 35px;
margin-left: 10px;
background-color: #303030;
}
nav.NavBar{
float: right;
width: 480px;
background-color: #303030;
list-style: none;
margin: auto;
font-size: 20px;
margin-top: 50px;
margin-bottom: 30px
}
ul.links {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li.links{
display: inline;
}
a.links{
font-size: 20px;
font-family: 'Muli', sans-serif;
color: #8c8c8c;
margin-right: 18px;
text-decoration: none;
}
a:hover {
background-color: #555;
color: white;
}
I also have a general question about something that's been confusing me about Nav Bars. Which elements should I style to set each property? As you can see for example I have the font family and font size specified on the Anchor elements, while I have the container size on the Nav element and the display: inline in the list element. This is very confusing for me and I'm certainly sure it will be the source of some error. My professor insists on me using All those elements for a nav bar btw (The nav, with an UL nested inside, with anchors nested inside the lists)
So I removed width from nav.NavBar and div.wrapperHeader so that there wouldn't be an issue when putting nav.NavBar on the same row as the logo by inserting .wrapperHeader > * { display: inline-block; }. This insertion code basically applies display: inline-block to all .wrapperHeader's child elements.
I've cleaned up your css code a little bit, please see below:
codepen link
I am coding a practice site using Microsoft Expression Web 4 but I am having a lot of difficulty getting past the landing page. I have all code copied below the questions. The first problem is that I have a hover effect on the links in the nav menu that overlaps the nav bar and I want the text centered within the nav bar vertically. I have tried several how-tos on css-tricks.com and the browser display doesn't seem to respond to the edits I make I tried from there. navbar issue and overflowing image I can manually adjust it so that if fits by figuring out pixels by trial and error but this seems clunky and non-responsive. Is there a better way?
The second question is the image I have for the header section is not fitting the screen properly. It overflows on the right side. It didn't do this before, but now it is and I haven't changed any of the code in the #header img {} section, so I am not sure what happened. I'm pretty much a beginner at this so thanks for any help.
HTML
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen"/>
<div id="header">
<div class="nav">
<div id="menu">
Home
Travel
Safari
Live
Search
</div>
</div>
<img alt="drakensburg" src="images/drakensburg.jpg" />
<h1>Visit Africa</h1>
</div>
</head>
CSS
#header {
position:relative;
width: 100vw;
height: 600px;
overflow:hidden;
right: .5em;
bottom: 1em;
}
#header .nav {
display:inline-block;
height:40px;
width:100%;
background-color:#a41d0e;
overflow:visible;
z-index: 10;
}
.nav #menu a{
display: inline;
float:left;
position: relative;
vertical-align:middle;
padding: 1em 1em 1em 1em;
text-decoration: none;
color: white;
}
.nav #menu a:hover {
background-color:#7f170b;
}
Use CSS properties display: flex and align-items: center to center vetically items in a row.
body {
margin: 0;
}
nav {
display: flex;
background-color: #a41d0e;
}
nav a {
display: flex;
align-items: center;
height: 40px;
padding: 1em;
text-decoration: none;
color: white;
}
nav a:hover {
background-color: #7f170b;
}
<html>
<body>
<header>
<nav id="menu">
Home
Travel
Safari
Live
Search
</nav>
<img alt="drakensburg" src="images/drakensburg.jpg" />
<h1>Visit Africa</h1>
</header>
<body>
<html>
Nothing except the link tag should be between <head></head> in the exmple you gave! I assume that's a mistake.
#header {
width: 100vw;
height: 600px;
overflow:hidden;
}
technically you don't need any styles for your header. See css for img below. If you want to your header to be 600px, and have your image fill it, you should set your image as a background image in css
background-image: url('path/to/img.jpg');
Alternatively, you could :
/*style your image like so. It won't ever be wider than its immediate parent container*/
img{
max-width: 100%;
height auto;
}
Here is the rest of your css, commented.
#header .nav {
/* no need for any display property here as it is block by default and takes up 100% of the width you probably don't need it to be inline-block either if it'll take up 100% of the width */
height:40px;
background-color:#a41d0e;
/*z-index is only useful for positioned elements (relative, absolute or fixed) so either give position: something to your navbar or ditch the z-index !*/
}
As far as the links go you don't need to give them a top and bottom padding, just give them a line-height that is equal to the height of the container, that is 40px. That way the links will be vertically centered, with the same height as their container, and you will still be able to give them the width of your choice with left and right padding.
.nav #menu a{
/*don't need display: inline as it is negated by the float anyway.
position relative alone like this doesn't serve any purpose. vertical-align middle only works for display: inline-block or table/(s)*/
float:left;
line-height: 40px;
padding: 0 1em 0 1em;
text-decoration: none;
color: white;
}
Very useful link where you'll find a whole lot of very useful explanations on all things CSS : http://tympanus.net/codrops/css_reference/
Hope any of this helps!
you can use this code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
body {
margin: 0;
}
nav {
display: flex;
background-color: #a41d0e;
}
nav a {
display: flex;
align-items: center;
padding: 15px 35px;
text-decoration: none;
color: white;
}
nav a:hover {
background-color: #7f170b;
}
.outer {
width: 100%;
overflow: hidden;
}
.inner {
display: inline-block;
position: relative;
right: 0;
left: 0;
width: 100%;
}
img {
position: relative;
left: 0;
right: 0;
width: 100%;
}
h1 {
text-align: center;
position: absolute;
left: 0;
top:0;
right: 0
}
</style>
</head>
<body>
<header>
<nav id="menu">
Home
Travel
Safari
Live
Search
</nav>
<div class="outer">
<div class="inner">
<img src="https://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
<h1>Visit Africa</h1>
</div>
</div>
</header>
</body>
</html>
Alright, so I've tried a lot of different things here but I just can't seem to get my menu bar to stretch all the way across the page. There's a small gap on the left side. Am I just missing something here?
Also so far this is the only way I've been able to get my footer somewhat centered at the bottom of the page. Every time I set the left and right margins to auto it puts the footer in line with the menu bar. Is there a better way to do this as well?
Thank You.
<!DOCTYPE html>
<html>
<head>
<title>Connor Lepert: Homepage</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link rel="icon" href="logo.png">
<style>
#font-face {
font-family: Vanadine;
src: url(vanadine.ttf);
}
body {
background-image: url(bckgrnd.jpg);
background-size: 100%;
background-repeat: no-repeat;
font-family: sans-serif;
color: white;
}
a {
color: white;
font-family: Vanadine;
text-decoration: none;
}
a:hover {
color: yellow;
}
p {
color: white;
font-family: Vanadine;
}
footer {
position: fixed;
display: block;
margin-left: 45%;
margin-right: 45%;
text-align: center;
margin-top: 320px;
}
#siteid {
margin-left: auto;
margin-top: auto
}
#menubar {
background-color: #ABADB0;
width: 100%;
height: 20px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
text-align: center;
word-spacing: 20px;
position: fixed;
}
#header {
display: block;
margin-left:auto;
margin-right: auto;
text-align: center;
margin-top: 330px;
}
</style>
</head>
<body>
<div id="siteid"><img src="logowhite.png" width="50px" alt="Personal logo"/></div>
<div id="header"><img src="header.png" width="400" alt="Lepert"/></div>
<div id="menubar">
Home
About
<a href=mailto:clepert13#gmail.com>Contact</a>
Portfolio
ScrapYard
</div>
<footer>©<a href=> 2015 by Connor Lepert </a> <br> <p></p> </footer>
</body>
</html>
You must just add a margin:0 to your body
I create a wrapper class and wrap the code that needs to be centered within it. Here's an example:
.wrapper {
margin: 0 auto;
width: 960px;
}
<html>
<div class="navbar">
<div class="wrapper">
<p>Content goes here</p>
</div><!--wrapper-->
</div><!--navbar-->
</html>
You just need to make sure that you place the wrapper class before the content, but after the background that needs to repeat. That is shown in my example. Otherwise, you'll have everything centered like it needs to be, but your background will cut off because it's being contained in a 960px area.
Like Artefact already said, adding margin:0 to your body will remove the gap beneath your menubar.
Just a little explaining:
This gap is caused by your browser, in fact every browser has some presets for some elements (i.e. the size of a h1 and how links are displayed) and those presets differ from browser to browser.
For this reason most people will use css resets to have a clean starting point for their own css.
There are several resources for resets out there like the one from meyerweb that you can use or you can simply write your own.
Hi I am trying to create a complex header for my website. Right now this header is composed for two section.
Logo - Using a div for this. 15% of header. display: inline-block
Navigation - Using nav for this. 85% of header. display: inline-block
But in browser I am seeing logo on top of nav as kept in stack.
How to get rid of this issue.
Following is my code.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<!-- main css-->
<link rel="stylesheet" type="text/css" href="./css/main.css"/>
</head>
<body>
<header>
<div id='logo'>
<p>LOGO</p>
</div>
<nav>
klkdfglkdfjklg
</nav>
</header>
<footer></footer>
</body>
</html>
**CSS**
body {
padding: 0;
margin: 0;
border: 0;
background-color: #ccc;
}
header {
background-color: #444;
padding: 0;
margin: 0;
text-align: center;
}
#logo {
display: inline-block;
background-color: yellow;
padding: 0;
margin: 0;
border: 0;
width: 15%;
}
nav {
display: inline-block;
padding: 0;
margin: 0;
border: 0;
width: 85%;
background-color: red;
}
In your case nav and div are inside your header element and the div is on the top of nav. You can try
CSS
nav {
float:left;
}
#logo {
float:left;
}
According to what I understand it looks like you want the logo and nav side by side.
In your code you have written only display:inline-block, with this you also need to add vertical-align:top/bottom/middle.
Apart from this, a simple solution is using float left/right according to requirement
<div id='logo'><p>LOGO</p></div><nav>klkdfglkdfjklg</nav>
remove the newline space between div and nav tags
you can read on this article
How do I remove extra margin space generated by inline blocks?
i recommend also using reset css
http://meyerweb.com/eric/tools/css/reset/