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.
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'm doing a work for school and I'm trying to align on center and middle both image and a menu. Here is my code on jsfiddle: LINK I'll post the code here too
HTML
<header>
<img id="logo" src="https://i.vimeocdn.com/portrait/58832_300x300.jpg">
<ul id="menutop1">
<li>Loja</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
CSS
body{
margin: 0;
}
header{
background-color: #171A21;
width: 100%;
height: 200px;
text-align: center;
}
#logo{
width: 250px;
height: 172px;
}
#menutop1 {
list-style-type: none;
overflow: hidden;
}
#menutop1 li {
float: left;
}
#menutop1 li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#menutop1 li a:hover:not(.active) {
background-color: #ddd;
}
The problem is the menu that does under the image and stays on left of the page.
I already tried everything I know and I didn't find a solution, please someone can help me? I realy can't find anything.
Thanks for the help and sorry for my english.
UPDATE
Thanks to the Kamila O the menu is next to the image and now I want center on middle, I added this code:
vertical-align: middle; height: 100%;
on the menu but don't think it is the best soluction becouse when I set a background color on the menu just to test I see this:
LINK
the menu get out of the div. Someone know a better soluction?
If you want to center your menu, you can change #menutop1 li to
#menutop1 li {
position: relative;
display: inline-table;
}
This is because you have added a float: left on the individual list items in the menu.
If you remove that float, make the list items inline-block and add a center text-align to #menutop1, it will align properly.
#menutop1 {
list-style-type: none;
overflow: hidden;
text-align: center;
}
#menutop1 li {
display: inline-block;
}
Updated jsfidle: https://jsfiddle.net/mebxcjwx/4/
I wrote quickly something along the lines of this. I just created containers for your logo + navigation, as this allows for you to control elements a bit better. As well as adding tha tag around your ul element.
<header>
<div class="logo">
<img src="https://i.vimeocdn.com/portrait/58832_300x300.jpg">
</div>
<nav class="main_nav">
<ul>
<li>Home </li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
https://jsfiddle.net/mebxcjwx/9/
Because they take up the full width of the header by default (If you want you can set this as display: block or width 100%) they will stack under each other, and since they are text elements all that was needed was a simple text align center to get the desired effect.
Im not sure if you wanted the navigation in the black space, if not you could simple remove the padding on the header, and give that navigation a white background or something along those lines to get the effect you desired!
I am by no means an expert in HTML or CSS. I am fairly new, and have little experience. I have come across and issue and I am not sure how to fix it. As you can see from the JSFiddle (linked below) there is a white gab between the image and the navigation bar. The image is a background-image created in CSS. I would like to remove the gap so that the image is flush with the navigation bar.
I have tried changed the values for the margin and padding of the #headerimage div as well as the #nav div. I know if I make the margin-top a negative value, it can fix the problem, but that is a very clunky solution because I would constantly have to change that value if I increase font size or anything like that. I have also search stackoverflow for similar problems, but none of them fixed my problem.
I also realize that I probably could have done many things differently in terms of how I coded some things, again I am new. The following code is the HTML code, the next block is the CSS code. Sorry if I did not explain something well, if you require more information, I will try my best to elaborate further on the issue. Thank you guys so much for taking the time to look at my issue. All the best. If you notice anything else, whether it a possible error, or just not a good solution for something, I would love to here about it.
<html>
<head>
<link rel="stylesheet" type="text/css" href="about.css">
<title>Sean Anderson</title>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>About</li>
<li>Achievements</li>
<li>Academics</li>
<li>Contact</li>
</ul>
</div>
<div id="headerimage">
<h1>SEAN ANDERSON</h1>
</div>
<div id="whoami">
<h2>WHO AM I?</h2>
<ul>
<li>I am a student at SFS High School</li>
<li>I am an aspiring programmer</li>
<li>Comics, books, programming, casual gaming</li>
<li>4.0 GPA</li>
<li>Star Wars is my life</li>
</ul>
<img src="testbackground.jpg">
</div>
<div id="skills">
<h2>SKILLS</h2>
<ul>
<li>Familiar with Java, HTML, and CSS</li>
<li>Skilled with Microsoft Office Suite 2013</li>
<li>Skilled in math, science, and English</li>
<li>Awesome</li>
</ul>
</div>
<div id="footer">
<p>Copyright © 2015 Sean Anderson</p>
</div>
</div>
</body>
</html>
body {
font-family: Helvetica, sans-serif;
width: 100%;
background-color: white;
margin-left: 0px;
margin-top: 0px;
}
#container {
width: 100%;
background-color: white;
margin-top: 0px;
}
#nav {
background-color: black;
margin-bottom: 0px;
}
#nav ul {
list-style-type: none;
padding: 30px 0px 30px 0px;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
min-width: 1920px;
}
#nav li {
display: inline;
text-align: center;
}
#nav a {
text-decoration: none;
text-align: center;
color: white;
font-size: 30px;
padding: 30px 50px 30px 50px;
}
#nav a:hover {
background-color: white;
color: black;
}
#headerimage {
background-image: url("testbackground.jpg");
background-repeat: repeat;
height: 1000px;
width: 100%;
margin-top: 0px auto;
display: block;
clear: both;
}
#headerimage h1 {
text-align: center;
vertical-align: middle;
padding-top: 150px;
}
Here is the JSFiddle: http://jsfiddle.net/Seanathon98/3nw5wj1d/
(The image takes up the whole width on my monitor, not sure why is doesn't appear that way, as I did use width: 100%.
Set the margin and padding of the H1 element to 0.
h1 {
margin: 0;
padding: 0;
}
You can center the h1 element by setting its position to be absolute and use padding & margin to position it correctly;
#headerimage h1 {
position: absolute;
margin: -20px 0 0 0;
padding: 50% 0 0 0;
}
I'm having weird problems centering a div within another div. I was trying to make a nav bar, here is the html:
<body>
<div class="nav">
<div class="navbar">
<ul>
<li>Home</li>
<li>Our Story</li>
<li>Gallery</li>
<li>Our Future</li>
<li>Join us</li>
<li>Contact</li>
</ul>
</div>
</div>
And the corresponding css:
.nav{
width:100%;
}
.navbar {
width:75%;
height:50px;
margin: 0 auto;
background-color:#E64888;
position:fixed;
}
so this didn't work in any of my browsers-chrome,firefox,ie...The bar is just sitting on the very left side. I have also tried the "margin-left:auto;margin-right:auto" method, but still didn't work. This is really annoying, cuz I cant figure what went wrong. Thanks in advance.
If you want the primary nav ul to be centered, you need to set it's parent (in this case html and body) to have width. Otherwise, you have to handle the dimensions and the layout (display) type on the lis and the list-style-type on the ul li elements (so you don't see the dots).
There's also a padding on the ul (which is what spaces the lis to the right when it's a normal list) that you have to deal with, or it will appear to far to the right (and "uncentered").
body, html {
width: 100%;
margin: 0;
padding: 0;
}
.nav {
width: 100%;
}
.navbar ul {
width: 75%;
height: 50px;
margin: 0 auto;
padding: 0;
background-color: #E64888;
list-style-type: none;
text-align: center;
}
.navbar ul li {
display: inline;
padding: 0;
margin: 0;
}
http://jsfiddle.net/97B52/
Try: (As far as I understood your question):
.nav li {list-style: none; display: inline-block; }
Working Fiddle