I'm working on this page but am having trouble figuring a few things out. First question is how do I keep the navigation links from moving on a hover? Second is how do I get the navigation links closer together? I've been trying to figure this out and seem to be missing something. Thanks!!
header{
height: 80px;
color: #ffffff;
border: 3px solid #000000;
background-color: white;
background-repeat: no-repeat
}
header img {
float: left;
width: auto;
height: 230%;
}
nav ul{
list-style: none;
}
nav li {
display: inline;
padding: 5px;
}
nav a{
margin-left: 150px;
}
nav li a{
color: #92d050;
text-decoration: none;
padding: 5px;
}
nav a:hover {
font-weight: bold;
color: black;
}
nav a.current{
color: black;
}
#about{
float: left;
padding-top: 75px;
padding-left: .25em;
width: 300px;
}
the HTML5 sheet is this:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Hair by Sasha </title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="main_print.css" media="print">
</head>
<body>
<header>Hair by Sasha
<img src="images/logo.jpg" alt="Hair by Sasha">
<nav>
<ul>
<li>Home</li>
<li><a href="services.html" >Services</a></li>
<li><a href="about.html" >About Us</a></li>
<li><a href="contact.html" >Contact Us</a></li>
</ul>
</nav>
</header>
Remove
nav a:hover {
font-weight: bold; /* this moving links remove it */
}
And to bring them closer give float to li.
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>
How do I vertically align the element in this picture?
<html lang="en-us">
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
* {
text-decoration: none;
padding: 0px; margin: 0px;
list-style: none;
}
#headercontainer {
background-color:gray;
}
#headercontainer ul li {
display: inline-block;
}
nav {
margin: 0px 10%;
padding: 10px 0px;
}
#floatedright {
float: right;
}
#floatedright a {
color: darkgreen;
font-size: 20px;
margin: 10px;
}
#floatedright > li {
float: left;
}
#piercarla {
font-size: 48px;
color: white;
font-family: cursive;
}
</style>
<body>
<section id="headercontainer">
<nav>
<ul>
<li>Piercarla</li>
<section id="floatedright">
<li>Home</li>
<li>Events</li>
<li>Contact</li>
</section>
</ul>
</nav>
</section>
you can resolve your problem using this.
I think vertical-align: middle; is suitable for your question.
Just give some class to the three list items Home,Events,Contact class="m", and then style them to give margin-left margin-right to vertically align them accordingly.
I'm having trouble getting the a:hover element to work. I am an amateur, so please be easy... I've tried using the #menubar:hover as well but that doesn't seem to work either.
This code is going into the header of another program. The only reason I got into this was to make the header of this program look identical to the website. Below is my code for the header.
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
Please Help!
check this
#menubar li a:hover {
color: yellow;
}
full code :
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
#menubar li a:hover{
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow !important;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
Here the style of a tag is overriding the hover. So if you place it as !important, that style will be given priority than other styles and it will override all other styles. Just place !important at color:yellow and it works.
I wanted to see if I could get this working without an !importance. The issue is that the CSS selector which sets the text to white is using a greater specificity than the hover style. The best way to do this is to set a better level of specificity to the hover which will allow it to work. Use this in the hover.
#menubar li a:hover {
color: yellow;
}
It is because #menubar>li>a{background-color: #303432;} will overlap your css. a:hover{color:yellow;} So, make it important on hover like in answer.
a:hover {color: yellow !important;}
Or
#menubar>li>a:hover{color: yellow;}
Will solve your issue.
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow !important;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
Hope it helps.
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;
}