I have this navbar in html:
<div class="navbar">
<p class ="logo">Vris</p>
<ul class="navitems">
<li>Home</li>
<li>About me</li>
<li>My work</li>
<li>Contact</li>
</ul>
</div>
</header>
And the following css to go along with it:
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
}
.navbar {
background: #181818;
height: 3.5em;
line-height: 1em;
}
.navitems {
float: right;
margin-right: 3em;
}
.logo {
float: left;
font-size: 1.3em;
color: white;
}
li {
font-family: 'Montserrat';
font-size: 1.3em;
text-decoration: none;
list-style-type: none;
padding-right: 2em;
float: left;
}
.navbar a {
text-decoration: none;
color: white;
}
But the UL and elements in the navbar won't take on the same line-height. Why? I set the line-height in the parent navbar class, so the and children should inherit it, right?
If you want to center vertically you need to use the same line-height as it is in height.
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
}
.navbar {
background: #181818;
height: 3.5em;
line-height: 3.5em;
}
.navitems {
float: right;
margin-right: 3em;
}
.logo {
float: left;
font-size: 1.3em;
color: white;
}
li {
font-family: 'Montserrat';
font-size: 1.3em;
text-decoration: none;
list-style-type: none;
padding-right: 2em;
float: left;
}
.navbar a {
text-decoration: none;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="navbar">
<p class ="logo">Vris</p>
<ul class="navitems">
<li>Home</li>
<li>About me</li>
<li>My work</li>
<li>Contact</li>
</ul>
</div>
</header>
</body>
</html>
line-height is one of those weird things that doesn't nest... put the line-height on the li.
Here's a codepen: https://codepen.io/justicart/pen/goJdBx
Related
I currently have a heading 1 and logo on the same line of the header, and now I want to have a background colour for the header. I would ideally want this to come down below the nav bar as well.
The issue I'm having is that the colour doesnt fill the top part of the page as I thought it would. It only covers the heading and it also covers the logo on the same line.
How would I stop the colour from going over the image and how would I make the colour spread from the top of the page to below the nav bar.
HTML:
.header img {
float: left;
background: #555;
}
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
position: relative;
top: 18px;
left: 10px;
padding-left: 40%;
background-color:#D3D3D3;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<header>
<div class="header">
<img src="images/pizzalogo.jpg" alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<br><br>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</header>
<body>
</body>
</html>
EDIT: This is what I mean about the background colour covering the logo:
I swapped the HTML header tag to be within the body. Your body tag is where it will house all your html minus the head tag that has your title. Not a big deal since it renders fine, just a best practice. I also changed the css for your header img to have a z-index which places the image on top of the h1 tag and your h1 tag to have a z-index of -100 to always fall to the back.
Hope this helps.
.header img {
float: left;
background: #555;
z-index: 100; /* added */
width: 100px; /* added */
}
.header h1 {
z-index: -1; /* added */
font-family: "Lucida Sans Typewriter",Georgia,Arial;
position: relative;
top: 18px;
left: 10px;
padding-left: 40%;
background-color:#D3D3D3;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<body>
<header>
<div class="header">
<img src="https://images.template.net/wp-content/uploads/2014/10/28083349/Pick-a-Pizza-Logo-of-your-Own.jpg"
alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<br><br>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</header>
</body>
</html>
.header img {
float: left;
background: #555;
}
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
position: relative;
top: 18px;
left: 10px;
padding-left: 40%;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<header style=" background-color:#D3D3D3;">
<div class="header" >
<img src="images/pizzalogo.jpg" alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<br><br>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</header>
<body>
</body>
</html>
Is this what you are expecting ?
you are seeing gap between header and navbar -- this is beacause the h1 inside the header had default margin, remove that, give padding instead. Also remover brs after header.
Change your .header h1 css to
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
padding: 20px 0 20px 40%;
background-color:#D3D3D3;
margin: 0;
}
What do you mean by stop the colour from going over the image ?
.header img {
float: left;
background: #555;
}
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
padding: 20px 0 20px 40%;
background-color:#D3D3D3;
margin: 0;
}
.headerContainer {
background-color:#D3D3D3;
padding-bottom: 10px;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<header>
<div class="headerContainer">
<div class="header">
<img src="images/pizzalogo.jpg" alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</div>
</header>
<body>
</body>
</html>
Super new to Front-End development, but doing my best to get better at it by recreating websites that I like from scratch. So far, so good, but for some reason Nav bars are the bane of my existence.
Right now, the Nav links (li's inside of a div) are stacking due to what I can only imagine is a width issue. When I set a certain width, they don't stack anymore, but setting that width restricts me from aligning them to the right with my buttons.
So, what I want to do is have the "logo" div aligned to the left & the "nav_content" div aligned to the right. And when I hit a tablet breakpoint, the "nav_content" div will collapse to a hamburger menu. Hopefully this question makes sense.
Here is my code:
HTML & CSS
body {
font-family: "Open-Sans", Helvetica, sans-serif;
background-color: #ED4C21;
}
.wrapper {
width: 1100px;
max-width: 100%;
margin: 0 auto;
}
nav {
background-color: #ffffff;
border-top: 5px solid #122333;
height: 100px;
margin: 0 auto;
width: 100%;
}
.logo {
font-family: "Khand", Helvetica, sans-serif;
color: #122333;
font-size: 24px;
font-weight: 600;
float: left;
line-height: 0;
padding-top: 17px;
margin-left: 2%;
}
.nav_content {
float: right;
margin: 0 auto;
width: auto;
width: 75%;
}
.nav_links {
margin-left: .5rem;
float: left;
list-style-type: none;
padding-top: 22px;
}
.nav_links li {
display: inline;
margin-left: 4%;
}
.nav_links a {
color: #122333;
text-decoration: none;
font-family: Helvetica, sans-serif;
font-size: 16px;
font-weight: 600;
}
.nav_links a:hover {
color: #ED4C21;
}
.nav_buttons {
float: left;
padding-top: 37px;
}
.button {
font-family: "Khand", Helvetica, sans-serif;
outline: none;
padding: 1rem 1.5rem;
text-decoration: none;
text-align: center;
cursor: pointer;
overflow: hidden;
display: inline;
font-weight: 600;
font-size: 17px;
color: #ffffff;
letter-spacing: 2px;
text-transform: uppercase;
}
.button1 {
background-color: #ED4C21;
}
.button2 {
margin-left: -2px;
background-color: #122333;
}
.button2:hover {
background-color: #ED4C21;
}
<!DOCTYPE html>
<html>
<head>
<title>Fast Gear</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Khand:400,500,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="wrapper">
<div class="logo">
<h1>Fast Gear</h1>
</div>
<div class="nav_content">
<div class="nav_links">
<ul>
<li>Home</li>
<li>Features</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="nav_buttons">
<div class="button button1">123-456-7890</div>
<div class="button button2">Order Online</div>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>
i think you need to set inline links and button so set style='clear:both' for set in same line
Add padding-left: 0; in your ul to get rid of the width problem in this scenario. I would suggest to use bootstrap to have a super responsive web design. If you still want to use your own responsive design use width (in %) in all the siblings which need to be in same line. For example width should be mentioned in % in both div.logo and div.nav_content.
body {
font-family: "Open-Sans", Helvetica, sans-serif;
background-color: #ED4C21;
}
.wrapper {
width: 1100px;
max-width: 100%;
margin: 0 auto;
}
nav {
background-color: #ffffff;
border-top: 5px solid #122333;
height: 100px;
margin: 0 auto;
width: 100%;
}
.logo {
font-family: "Khand", Helvetica, sans-serif;
color: #122333;
font-size: 24px;
font-weight: 600;
float: left;
line-height: 0;
padding-top: 17px;
margin-left: 2%;
}
.nav_content {
float: right;
margin: 0 auto;
width: auto;
width: 75%;
}
.nav_links {
margin-left: .5rem;
float: left;
list-style-type: none;
padding-top: 22px;
}
.nav_links ul {
padding-left: 0;
}
.nav_links li {
display: inline;
margin-left: 4%;
}
.nav_links a {
color: #122333;
text-decoration: none;
font-family: Helvetica, sans-serif;
font-size: 16px;
font-weight: 600;
}
.nav_links a:hover {
color: #ED4C21;
}
.nav_buttons {
float: left;
padding-top: 37px;
}
.button {
font-family: "Khand", Helvetica, sans-serif;
outline: none;
padding: 1rem 1.5rem;
text-decoration: none;
text-align: center;
cursor: pointer;
overflow: hidden;
display: inline;
font-weight: 600;
font-size: 17px;
color: #ffffff;
letter-spacing: 2px;
text-transform: uppercase;
}
.button1 {
background-color: #ED4C21;
}
.button2 {
margin-left: -2px;
background-color: #122333;
}
.button2:hover {
background-color: #ED4C21;
}
<!DOCTYPE html>
<html>
<head>
<title>Fast Gear</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Khand:400,500,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="wrapper">
<div class="logo">
<h1>Fast Gear</h1>
</div>
<div class="nav_content">
<div class="nav_links">
<ul>
<li>Home</li>
<li>Features</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="nav_buttons">
<div class="button button1">123-456-7890</div>
<div class="button button2">Order Online</div>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>
I am a new learner of CSS.
There's something I'm doing wrong, regarding the pseudo classes because my code doesn't work.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul.navigationbar {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}
li.navigationbar {
float: left;
padding: 10px;
}
a.navigationbar:link, a.navigationbar:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a.navigationbar:hover, a.navigationbar:active {
background-color: #7A991A;
}</style>
</head>
<body>
<ul class="navigationbar">
<li class="navigationbar" role="presentation">Inicio</li>
<li class="navigationbar" role="presentation">Proveedores</li>
<li class="navigationbar" role="presentation">ArtÃculos</li>
<li class="navigationbar" role="presentation">Contacto</li>
</ul>
</body>
</html>
Anyone that can tell me what am I doing wrong?
Thank you.
It should be
.navigationbar a:link {
/*some styles*/
}
and
.navigationbar a:visited {
/*some styles*/
}
because the a is a child element of .navigationbar
This a.navigationbar:link, a.navigationbar:visited is not working beacause
the class navigationbar is assigned to the list elementli in your markup not to the anchor a element.
<li class="navigationbar" role="presentation">Inicio</li>
to solve this change it to
[role=presentation] a:link, [role=presentation] a:visited
or to
li.navigationbar a:link, li.navigationbar a:visited
Here is the final demo
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul.navigationbar {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}
li.navigationbar {
float: left;
padding: 10px;
}
li.navigationbar a:link, li.navigationbar a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a.navigationbar:hover, a.navigationbar:active {
background-color: #7A991A;
}</style>
</head>
<body>
<ul class="navigationbar">
<li class="navigationbar" role="presentation">Inicio</li>
<li class="navigationbar" role="presentation">Proveedores</li>
<li class="navigationbar" role="presentation">ArtÃculos</li>
<li class="navigationbar" role="presentation">Contacto</li>
</ul>
</body>
</html>
How do I get the nav in the container (on top of a background photo) on the right spot? It's now outside on the left bottom corner...
I positioned the nav on the right place but it will not work along with the image in the container.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>goodidea</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<style type="text/css">
img.c1 {width:1024px;height:1500px}
</style>
</head>
<body>
<div id="container"><img src="images/photo-1.jpg" class="c1"/></div>
<ul id="nav">
<li>photo-2</li>
<li>photo-3</li>
<li><a href="#">photo-4<3/a></li>
<li>photo-5</li>
</ul>
</body>
</html>
* {
padding: 0;
margin:0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 130%;
}
#container {
width: 1080px;
height: 2000px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
}
#nav {
list-style-type: none;
padding-top: 170px!important;
padding-bottom: 13px;
}
#nav a:link, #nav a:visited {
color: #000000;
padding-top: 13px;
padding-bottom: 13px;
text-decoration: none;
}
#nav a:hover, #nav a:active {
padding-top: 10px;
padding-bottom: 10px;
color: #d2d2d2;
text-decoration: none;
}
THNX for your Tip/Help
Hope this is what you are expecting. But as #MelanciaUK commented, ou should not use links out of the container class.
http://plnkr.co/edit/XSDrVmNmwsM2novVgm4T?p=preview
<div class='imagediv'>
<img src="http://dummyimage.com/500x800/f5f0f5/d6d7e8.jpg" class="c1"/>
</div>
<ul id="nav" class='navlinks'>
<li>photo-2</li>
<li>photo-3</li>
<li><a href="#">photo-4<3/a></li>
<li>photo-5</li>
</ul>
I've been following this tutorial: http://ruby.railstutorial.org/chapters/filling-in-the-layout#top and for some reason when I first run the app locally the div with the "home" "help" and "sign up" links appears further down on the page from where it should. However, when I refresh the page, the div returns back to the correct spot. How can I fix this?
UPDATE:
It seems that the problem is only with Chrome. Here's the URL: http://justinsapp.heroku.com/
Test it out.
Here's the html:
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Sample App | Home</title>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="Uo4YKU6Vu+F9vdWzOFBS0YcDbiVoXf/xmiZpThwhwh4="/>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="/stylesheets/blueprint/screen.css?1298679396" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/blueprint/print.css?1298679396" media="print" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]><link href="/stylesheets/blueprint/ie.css?1298679396" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
<link href="/stylesheets/custom.css?1298689435" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<header>
<img alt="Sample App" class="round" src="/images/logo.png?1298689435" />
<nav class="round">
<ul>
<li>Home</li>
<li>Help</li>
<li>Sign in</li>
</ul>
</nav>
</header>
<section class="round">
<h1>Sample App</h1>
<p>
This is the home page for the
Ruby on Rails Tutorial
sample application.
</p>
Sign up now!
</section>
<footer>
<nav class="round">
<ul>
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Rails Tutorial</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
Here's the CSS:
.container {
width: 710px;
}
body {
background: #cff;
}
header {
padding-top: 20px;
}
header img {
padding: 1em;
background: #fff;
}
section {
margin-top: 1em;
font-size: 120%;
padding: 20px;
background: #fff;
}
section h1 {
font-size: 200%;
}
/* Links */
a {
color: #09c;
text-decoration: none;
}
a:hover {
color: #069;
text-decoration: underline;
}
a:visited {
color: #069;
}
/* Navigation */
nav {
float: right;
}
nav {
background-color: white;
padding: 0 0.7em;
white-space: nowrap;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 0.2em 0;
}
nav ul li a {
padding: 0 5px;
font-weight: bold;
}
nav ul li a:visited {
color: #09c;
}
nav ul li a:hover {
text-decoration: underline;
}
a.signup_button {
margin-left: auto;
margin-right: auto;
display: block;
text-align: center;
width: 190px;
color: #fff;
background: #006400;
font-size: 150%;
font-weight: bold;
padding: 20px;
}
.round {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
footer {
text-align: center;
margin-top: 10px;
width: 710px;
margin-left: auto;
margin-right: auto;
}
footer nav {
float: none;
}