I'm having another issue. I can't figure where the issue is. I had added a border around my menu items. Everything was working fine until I added a logo. I believe the issue is with my .Main-Nav li a:hover. in my CSS. I'll post everything and see if you guys can figure it out. I would also like to know if I need to make a different file for every page on my website
* {
margin: 0PX;
padding: 0PX;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://static.pexels.com/photos/371794/pexels-photo-371794.jpeg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 200px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.hello {
position: absolute;
width: 1200px;
margin-left: 0px;
margin-top: 0px;
}
h1 {
color: white;
text-text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button {
margin-top: 30px;
margin-left: 440px;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
}
.btn-one {
background-color: darkorange;
font-family: "roboto", sans-serif;
}
.btn-two {
font-family: "roboto", sans-serif;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
<HTML>
<Head>
<title> Drew's Blog</title>
<link href="style.css" rel="stylesheet" type "text/css" </head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Oh-deer.png">
</div>
<ul class="main-nav">
<li class="active"> HOME </li>
<li> ABOUT </li>
<li> GALLERY </li>
<li> NEWS </li>
<li> CONTACT </li>
<li> LESSONS </li>
</ul>
</div>
<div class="Hello">
<h1> Lets Get Started</h1>
<div class="button">
Get to Know Me
Check out my lessons
</div>
</header>
</body>
</html>
`
In
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "roboto", sans-serif;
font-size: 15px;
}
Add a:
border: 2px solid white;
This will put a border around your menu items that are put in the <li> tag
Look in the active class for the border:
.main-nav li.active a {
border: 2px solid white;
}
That's for the HOME button, because it's class is active (class="active">) and it already had a border
I changed the pixels so I can see the results, but the problem is exactly that: The pixels. If your hover pixels and li pixels are the same, you won't see any change
This should add a border to your menu items and change when you hover over them with the mouse.
Also, the
.main-nav li a:hover
does the exact opposite. When you define a border here and you HOVER OVER A MENU ITEM, a border will APPEAR, so basically try to balance the pixels out.
And I'm trying to figure out what exactly you want. Do you want borders to always be there and when you hover over them you want them to disappear or do you want borders to appear when you hover over them.
Related
Just so you know, I'm still learning HTML, and I'm not very knowledgeable.
So I'm trying to figure out how to add multiple styles to one of my buttons on my navbar
<div id="navbar">
Home
Skills
Interests
<a style="float:right" href="#about">About</a>
</div>
On the bottom line I want to include: (You will need to use the style sheet below for the HTML to format correctly its just above the last sentence.)
style="background-color: #04AA6D"
Into the the code so that the background is turned green
I have this working on the other buttons that aren't floating right
here's my main pages one, the button named "home" is green on the back and that's how I want the About pages one to be.
<div id="navbar">
<a style="background-color: #04AA6D" href="#home">Home</a>
Skills
Interests
<a style="float:right" href="#about">About</a>
</div>
I'm using this style sheet (Needed for the page to format correctly.)
<style>
body {
margin: 0;
background-color: #f1f1f1;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display: block;
transition: top 0.3s;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
li a:hover:not(.active) {
background-color: #111;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
</style>
I hope you understand what I mean, I'm horrible at explaining things 😂. Any Questions you need me to answer so that you can help please let me know
I tried connecting the two together like this
<a style="float:right" style="background-color: #04AA6D" href="#contact">Interests</a>
But that didn't work
body {
margin: 0;
background-color: #f1f1f1;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display: block;
transition: top 0.3s;
}
.style1{
float:right !important;
}
.style2{
background: #04AA6D;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
li a:hover:not(.active) {
background-color: #111;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<div id="navbar">
<a style="background-color: #04AA6D" href="#home">Home</a>
Skills
Interests
<a class="style1 style2" href="#about">About</a>
</div>
You can implement the following approach:
Create classes for different CSS:
.style1{
float:right !important;
//i used '!important' because you are overriding other class
}
.style2{
background-color: #04AA6D
}
.style3{
//your 3rd extra css here
}
Then you can implement multiple css in following way:
<a class="style1 style2 style3">Example</a>
Here's the problem: the navbar looks like it's floating down the page.
Why does the nav-bar look like this? I'm still new to css and I've tried everything but nothing works. I've re-written the code again but the issue wasn't resolved. Here's what the nav should look like.
this tutorial is from this udemy course
https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/#%2F
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;%);
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/*-------------------------------------------------*/
/*reusable componment*/
/*-------------------------------------------------*/%);
.row {
max-width: 1140px;
margin: 0 auto;
}
/*-----------*/
/*headings*/
/*-----------*/
h1 {
margin: 0;
margin-bottom: 20px;
margin-top: 0;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
/*-----------*/
/*buttons*/
/*-----------*/
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s,border 0.2s ,color 0.2s;
}
.btn-1:link,
.btn-1:visited {
background-color: #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-2:link,
.btn-2:visited {
border: 1px solid #e67e22;
color: #e67e22
}
.btn-1:hover,
.btn-1:active {
background-color: #b05d14;
}
.btn-2:hover,
.btn-2:active {
background-color: #b05d14;
color: #fff;
}
/*-------------------------------------------------*/
/*HEADER*/
/*-------------------------------------------------*/
.hero-text-box{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
header {
background-image: -webkit%);-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(assets/images/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
.logo{
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 55px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
-webkit-transition: border-bottom 0.3s, color 0.3s;
transition: border-bottom 0.3s, color 0.3s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #BF55EC;
<!DOCTYPE html>
<html>
<head>
<title>omni food</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="grid.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div class="row">
<img src="assets/images/logo-white.png" alt="omni-food" class="logo">
</div>
<div class="main-nav">
<ul>
<li> Food delivery </li>
<li> How it works </li>
<li> Our cities </li>
<li> Sign up </li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>hello super healthy meals</h1>
<a class="btn btn-1" href="#">I'm hungry</a>
<a class="btn btn-2" href="#">show me more</a>
</div>
</header>
</body>
</html>
please help me
The is defined so that it takes up the entire row on screen. This forces onto a new row making it appear lower. If you still want the functionality of the row class, it should enclose both the img & UL. You can get rid of that div entirely and apply the class row to the Nav element.
<nav class="row">
<img src="assets/images/logo-white.png" alt="omni-food" class="logo">
<div class="main-nav">
<ul>
<li> Food delivery </li>
<li> How it works </li>
<li> Our cities </li>
<li> Sign up </li>
</ul>
</div>
</nav>
Don't use entire row for only logo . you have used
.row{ max.width: 1180px; }
put this .row class in nav element or
remove row class from div for logo .
<nav class("row")>
I have made a list of links in html for a prototype of a website:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stuffy_stylesheets.css">
<title> INF </title>
</head>
<body>
<div id= "content">
<p>More Stuff</p>
<p>Even More Stuff</p>
</div>
<div id= "list">
<ul id = "menu">
<li> wad</li>
<li> wad</li>
<li> wad</li>
<li> wad</li>
</ul>
</div>
</body>
</html>
These pages so far mean absolutely nothing, however,I wanted to style and format the links so that they are towards the top left of the web page and inline with each other, to do this, I have experimented with display: inline-block, however, for some odd reason that doesn't seem to work. So I was wondering what code I would need to add to format it this way. My CSS is below:
body{
font-family: "Times New Roman", Times, serif;
margin: 0px;
padding: 0px;
background: #434447;
}
#content
{
color: #eaeaea;
text-align: center;
}
#list{
display:flex;
}
#menu
{
padding: 10px;
float:left;
margin: 0px;
width: 15%;
}
#menu li
{
list-style: none;
width:10em;
display: block;
border-width:1px;
border-style:outset;
border colour: black;
padding: 3px 2px 3px 2px;
color: #545456;
background: #babbc1;
text-decoration: none;
text-align: center;
}
#menu a
{
color:#545456;
background: #babbc1;
text-decoration: none;
text-align:center;
display:block;
cursor:pointer;
}
#menu li:hover
{
border-style:inset;
}
The only thing you seem to be doing wrong here is the width: 15% that you've applied on the #menu.
Skipping that property and adding display: inline-block on your li elements should solve this.
Here's a fiddle for the same.
P.S. - While you're at it, change border colour to border-color.
Change your css code to something like this.
body {
font-family: "Times New Roman", Times, serif;
margin: 0px;
padding: 0px;
background: #434447;
}
#content {
color: #eaeaea;
text-align: center;
}
#list {
display: flex;
}
#menu {
padding: 10px;
margin: 0px;
}
#menu li {
list-style: none;
width: 10em;
display: inline-block;
border-width: 1px;
border-style: outset;
border colour: black;
padding: 3px 2px 3px 2px;
color: #545456;
background: #babbc1;
text-decoration: none;
text-align: center;
}
#menu a {
color: #545456;
background: #babbc1;
text-decoration: none;
text-align: center;
display: block;
cursor: pointer;
}
#menu li:hover {
border-style: inset;
}
I was just continuing with making this website and all of a sudden some of my navbar padding goes 'missing' and I can't seem to pinpoint the mistake. I've already played the detective game and commented out some of the stuff I thought was interfering. Luckily I have an original picture before the screw-up and one after. Some of the 'paragraph text' will be 'placeheld' for personal reasons and I think it's irrelevant, unless it's needed in order to fix the problem.
-Thanks.
Before and after picture: http://imgur.com/a/ts1FS
Code:
CSS:
body {
background-color: #1a1a1a;
color: #ccad00;
line-height: 1.9;
font-size: 19px;
}
p.desc{
text-indent: 50px;
}
h1 {
font-family: courier;
color: #ccad00;
}
h2 {
font-family: courier;
color: #ccad00;
text-align: center;
}
#divtitle {
width: 50%;
margin:auto;
padding-top: 50px;
text-align: center;
}
h2
{
font-family:courier;
color: #99cc00;
}
p {
line-height: 1.9
text-size: 19px;
}
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #ccad00;
height:40px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #f2f2f2;
background-color: #ccad00;
float: left
}
#nav li a:hover {
color: #0d0d0d;
background-color: #35af3b;
}
.button {
background-color: #ffa600;
border: none;
color: #998200;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 40px;
font-family: courier;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: white;
color: #998200;
}
div#containerbttn {
width: 800px;
height: 100px;
margin: auto;
background-color: green;
}
ul.square{
list-style-type: square;
}
.center {
text-align: center;
}
html:
<div id="nav">
<ul>
<li>Home
</li>
<li>Center
</li>
<li>Rules
</li>
<li>References
</li>
<li>Rankings
</ul>
</div>
<div>
<div id="divtitle" >
<h1> text </h1>
</div> -->
<div id="containerbttn">
<button class="button">GET STARTED!</button>
<button class="button">FAQ</button>
<button class="button">RANKINGS</button>
</div>
<h2> Synopsis: </h2>
<div class="center">
<p class="desc"> Welcome to ***!. This is a free...
<ul class="square">
<li> some text </li>
<li> some text </li>
</ul>
<p class="desc" > text </p>
</div>
</html>
Your problem exists because you have set the height of the #nav element to 40 px. When you add the padding to your a element, you make it larger than the ul element. This can be solved easily by updating two lines of code.
First, remove from css:
#nav{ height:40px; }
Then, add to html after ul but before closing the nav div:
<div style="clear:both;"></div>
Here is a jsfiddle of your working page: https://jsfiddle.net/8o279n5r/
And here is a great answer on what the clear property does: What does the CSS rule clear: both do?
I want to center (automatically) the navbar on this site. Also, I need to have a 1px border-top and 1px border-bottom that extends roughly 70% of the nav area.
It should look like this mockup once it's done:
Remove the floats on your li tags, and on your #navigation, add text-align: center;. Your floats are making your parent have a height of 0, which will in turn not allow you to have your borders. This fixes both those issues. From there, just add border-top: 1px solid white; border-bottom: 1px solid white; to your ul to get your lines.
Take a look at this fiddle http://jsfiddle.net/qZTAt/
The key there is this piece of code:
nav {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
margin: 0 15%;
text-align: center;
}
Try using margin:0 auto; padding:0;
Right I'm going to come in late to this party (with an already answered question!) just to add what I would have done. It's based on this technique here
http://jsfiddle.net/rabmcnab/GSSQx/
<body>
<header>
<h1 class="font"> Heading</h1>
<nav>
<ul>
<style> body {
font-family: 'Poiret One', cursive;
font-weight: bold;
font-size: 20px;
}
.font {
font-family: 'Poiret One', cursive;
}
header {
background-color: aqua;
padding: 40px 0px;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
padding: 0 40px;
margin: 0 auto;
text-align: center;
}
nav {
border-top: thin solid white;
border-bottom: thin solid white;
width: 50%;
margin: 0 auto;
}
h1 {
text-align: center;
margin-top: -10px;
color: white;
font: 40px/0 arial;
padding: 40px 0;
}
li:hover {
color: #fff;
cursor: pointer;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<body>
<header>
<h1 class="font"> Heading</h1>
<nav>
<ul>
<li>Wedding</li>
<li>Engagement</li>
<li>Services</li>
</ul>
</nav>
</header>
</body>
</html>
<li>Wedding</li>
<li>Engagement</li>
<li>Services</li>
</ul>
</nav>