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
Related
I have a problem where the links are not shown in a row but instead some of them are stacked underneath eachother. Are there any step by step tips out here on how I can solve it and also an explanation to why my links in the navbar shows up messed up?? I only wanna use CSS and HTML, no JS.
Please take note: I have a picture of how i want the header to look and also a print screeen of how it looks in GChrome right now. However i am not familiar with posting questions here on StackOverflow so i dont know how to post 2 images in the same question. So please dont be too hardjudging since I am a beginner.
header {
border-bottom: 4px solid #000;
}
.logo img{
position: absolute;
margin-top: 15px;
margin-left: 10px;
}
.header ul {
padding: 0;
margin: 0 0 0 150px;
list-style: none;
float: right;
}
.header li {
float:left;
font-family: 'Brother 1816';
font-weight: bold;
font-size: 2rem;
color: #000;
}
nav {
width: 100%;
background: #FFFFFF;
overflow: auto;
}
nav a{
width: 400px;
display: block;
text-decoration: none;
color: #a71b1a;
}
<header class="header">
<div class="logo"> <img src="logo/logo_250x150.png" alt="Freyas logotype.">
</div>
<nav class="navigation">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>PORTFOLIO</li>
<li>SERVICES</li>
<li>CONTACT ME</li>
</ul>
</nav>
</header>
How it should look
How it looks
The width property associated with your links is causing them to take up 400px each which then wraps down the page
nav a{
width: 400px;
}
remove the width property and the links should sit on the same line.
Alternatively use flexbox https://www.w3schools.com/css/css3_flexbox.asp to space the links across the page as you desire.
Width and display: block in your a tag are causing the issue. Also add display: inline to your <li> properties to make elements render in the same row.
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 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!
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>
I'm very new to HTML and CSS. I'm trying to center two objects - my header image and my navigation
this is my header CSS
div #header-img {
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: -30px;
padding: 0 0 0 0;
}
this is my header html code
<div id="header-img">
<img src="http://metaphorcontrol.com/solewebsite/wp-content/uploads/2012/07/SoleHeaders1.jpg">
</div>
I was wondering how I could also align it with the following items from the html code below.
<div>
<nav><ul>
<li style="background-color: #99042A;">Fine Foods</li>
<li style="background-color: #585123;">Wine & Cellar</li>
<li style="background-color: #2E0219;">Kitchenware</li>
<li style="background-color: #211103;">Our Philosophy</li>
<li style="background-color: #DBCCC5;">Register|Log-In</li>
</ul></nav>
</div>
with the following CSS
nav ul {
list-style-type: none;
overflow: visible;
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: -4px;
}
nav li {
float: left;
width: 204px;
height: 80px;
overflow: hidden;
white-space: nowrap;
}
Where in the syntax did I go wrong and what should I keep in mind in the future to ensure all the behaviors I want are correct.
Thanks in advance!
Right now your nav has padding on it, and the image does not. It is pushing it over and causing it not to line up to the left like the image is.
nav ul {
padding:0;
list-style-type: none;
overflow: visible;
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: -4px;
}
Add the padding to the top part and they will line up. You can use the position: and create an outer div with a set width to contain the elements and with the margins set to auto they should center correctly within it as well.
try to add position:relative to both
div #header-img {
position:relative;
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: -30px;
padding: 0 0 0 0;
}
And to access the #header-img div "directly" I'm guessing your purpose is to do this?
div#header-img { /* CSS HERE */ }
...not
div #header-img { /* CSS HERE */ }
Probably works anyway since your site is probably surrounded by at least one div, though :) But the difference is :
div#header-img = a div with ID header-img
div #header-img = an element with ID header-img inside a div (which ever div, really)...
You make the choice, simply! :)
You may want to take a look at bootstrap... It seems it is fast becoming the standard for base design.
It comes with responsive and pre-styled classes.
The nav bar that is provided by bootstrap can very easily fit your need.
Here is a basic outline for what bootstrap is and the download.
Here is the full tutorial.
You have to specify a width in your header and your nav and regarding your header-img, display:block instead of inline-block
body{width:100%;}
#wrapper{width:1024px;
margin-left: auto;
margin-right: auto;}
nav ul {
list-style-type: none;
position:relative;
display: inline-block;
margin: 0!important;
padding:0!important;
}
nav li {
float:left;
text-align:center;
width: 204px;
height: 80px;
overflow: hidden;
white-space: nowrap;
}
#header-img {
display:block;
margin-top: -30px;
padding: 0 0 0 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="wrapper">
<div id="header-img">
<img src="http://metaphorcontrol.com/solewebsite/wp-content/uploads/2012/07/SoleHeaders1.jpg">
</div>
<div>
<nav><ul>
<li style="background-color: #99042A;">Fine Foods</li>
<li style="background-color: #585123;">Wine & Cellar</li>
<li style="background-color: #2E0219;">Kitchenware</li>
<li style="background-color: #211103;">Our Philosophy</li>
<li style="background-color: #DBCCC5;">Register|Log-In</li>
</ul></nav>
</div>
</div>
</body>
</html>