I am creating a basic webpage, where I want a header logo made of text to be linked. Under this, I would like to have a slogan that stays as regular, non linked text. This doesn't seem to be working as when I put a link on just the header (even inside of a span), as the slogan text just disappears. I tried making them different blocks of text, but doing so puts them on different lines, ruining the aesthetic I would like (Header text with slogan underneath)
:-moz-selection {
color: #ffffff;
background: #00ffaa;
}
::selection {
color: #ffffff;
background: #00ffaa;
}
a:link {
text-decoration: none;
color: #00ffaa;
}
a:visited {
text-decoration: none;
color: #00D486;
}
a:hover {
text-decoration: none;
color: #ADFFE2;
}
a:active {
text-decoration: none;
color: #00ffaa
}
.thing {
background: #141414;
position: fixed;
z-index: 100;
width: 100%;
}
a.Header {
color: #aaaaaa;
float:left;
display: inline-block;
vertical-align: middle;
font-size: 30px;
margin-right: 15px;
}
.Header:hover {
color: #dbdbdb;
transition: all 0.3s ease-in;
}
#bodycontainer {
position: relative;
background-color: #191919;
height: 200%;
width: 65%;
}
.navigation {
float: right;
display: inline-block;
vertical-align: middle;
}
.navigation li {
display: inline-block;
padding: 15px;
}
ul {
margin-bottom: 0;
}
.navigation li a {
color: #00ffaa;
}
.navigation li a:hover {
color: #adffe2;
transition: all 0.3s ease-in;
}
<body background="http://i.imgur.com/6PQ1Mtl.png">
<center>
<div id="bodycontainer">
</div>
</center>
<div class="thing"><font face="hamster">
<span><a class="Header" href="">Header</a></span><br><span class="slogan">tagline</span>
</font><font face="fenice">
<ul class="navigation">
<li>News</li>
<li>Art</li>
<li>Comics</li>
<li>About</li>
<li>Contact</li>
</ul>
</font>
</div>
</body>
Any help would be great, thanks!
Related
The errors didn't come up earlier... i just noticed it last night when i tried to save my file. what could be wrong? Cause i have had a look at the HTML code and nothing is seems off.
footer {
background-color: #023440;
padding: 30px;
margin-top: 800px;
bottom: 0px;
}
.logo-footer {
height: 70px;
width: auto;
float: left;
margin-top: 60px;
margin-left: -20px;
margin-bottom: 25px;
cursor: pointer;
}
.footer-nav {
list-style: none;
float: none;
margin-bottom: 20px;
}
.social-links {
list-style: none;
float: right;
margin-top: -40px;
padding-right: 5px;
}
.footer-nav li,
.social-links li {
display: inline-block;
margin-right: 20px;
font-size: 90%;
}
.footer-nav li:last-child,
.social-links li:last-child {
margin-right: 0;
}
.footer-nav li a:link,
.footer-nav li a:visited,
.social-links li a:link,
.social-links li a:visited {
text-decoration: none;
border: 0;
color: #a3a3a3;
font-weight: 400;
transition: color 0.3s;
}
.footer-nav li a:hover,
.footer-nav li a:active {
color: #fff;
font-weight: 400;
}
.social-links li a:link,
.social-links li a:visited {
font-size: 135%;
}
.footer-address p {
color: #fff;
font-size: 90%;
display: block;
float: left;
line-height: 1.5;
margin-bottom: 30px;
}
.copyright {
color: #fff;
text-align: center;
font-size: 80%;
display: block;
margin-left: 0px;
margin-top: 25px;
}
.copyright:before {
display: block;
height: 0.1px;
background-color: #045d71;
content: " ";
width: 100%;
margin: 0 auto;
margin-bottom: 25px;
}
.ion-social-linkedin,
.ion-social-instagram,
.ion-social-twitter {
transition: color 0.3s;
}
.ion-social-linkedin:hover {
color: #007bb5;
}
.ion-social-instagram:hover {
color: #e95950;
}
.ion-social-twitter:hover {
color: #55acee;
}
.email-footer {
text-decoration: none;
color: #fff;
transition: color 0.3s, border-bottom 0.3s;
}
.email-footer:hover {
color: #a3a3a3;
border-bottom: 0.5px solid #a3a3a3;
}
<footer>
<div class="row">
<div class="span-3-of-3">
<ul class="footer-nav">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Projects</li>
<li>Products</li>
<li>Blog</li>
</ul>
</div>
<div class="span-3-of-3">
<ul class="social-links">
<li><i class="ion-social-linkedin"></i></li>
<li><i class="ion-social-instagram"></i></li>
<li><i class="ion-social-twitter"></i></li>
</ul>
</div>
</div>
<div class="row">
<div class="span-3-of-3">
<img src="resources/img/euphoric%20Logo%20footer-01.png" alt="euphoric-logo-footer" class="logo-footer">
</div>
</div>
<div class="row">
<ul class="footer-address">
<p>40 Alison Road.<br>
<a class="email-footer" a href="#">info#euphoric.co</a></p>
</ul>
</div>
<div class="row">
<p class="copyright"> Copyright © 2020, Euphoric. All rights reserved.</p>
</div>
</footer>
The errors didn't come up earlier... i just noticed it last night when i tried to save my file. what could be wrong? Cause i have had a look at the HTML code and nothing is seems off.
If you open your code in any text/code editor, you can see that there's plenty of errors in there, for example:
.pos-info: before {
there shouldn't be a space between the : and the before
padding: 0 auto;
chrome marks this as invalid
.img_description:hover {
transform
}
property without a value
.pos-content: after {
again, there shouldn't be a space between : and after
edit: more errors found:
On line 921
.cloud-content {
doesn't have a closing tag, which breaks everything after it. This is probably the cause of most of your problems.
I am having trouble styling a basic nav.
I would like the nav menu colour to be grey and when it is hovered over turns to the green colour with a bottom border. It also jumps around on hover. I tried to add in border-bottom: transparent; but I think it is being overridden. I have played about moving the code and the a tag seems to be the culprit but I am not sure how to solve it. Hence all the styles.
HTML
<body>
<div class="header">
<img class="Logo" alt="Rigare logo" src="logoweb_1.1.png"/>
<div class="nav">
<ul>
<li>About</li>
<li>Technical Capabilities</li>
<li>Staff and Associates</li>
<li>Courses</li>
<li>Products and Hire</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS
.header {
padding-top: 16px;
}
.logo {
float: left;
}
.nav {
display: inline-block;
vertical-align:top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
background: #fff;
}
.nav li{
display: inline;
text-align: right;
color: #70B0A8;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
border-bottom: transparent;
}
.nav li:hover {
color: #97A6AA;
border-bottom: 1px solid #97A6AA;
cursor: pointer;
padding: 10px;
}
a {
text-decoration: none;
}
.nav a {
color: #70B0A8;
}
Here is a fiddle to see what I'm talking about.
You have define
.nav a {
color: #70B0A8;
}
at the end of your CSS which will surely override your :hover effect and also you've defined :hover color for .nav li:hover { instead of .nav li:hover a { viz not a right way to define hover effect for a tag inside li.
Further you should first define the border-bottom and padding for your li tag initially instead of :hover to prevent the jumping issue.
You have to change your CSS like the Snippet below.
Code Snippet
a {
text-decoration: none;
}
.header {
padding-top: 16px;
}
.logo {
float: left;
}
.nav {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
background: #fff;
}
.nav li {
display: inline;
text-align: right;
color: #70B0A8;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
padding: 10px;
border-bottom: 1px solid transparent;
}
.nav li a {
color: #70B0A8;
}
.nav li:hover {
border-bottom-color: #97A6AA;
cursor: pointer;
}
.nav li:hover a {
color: #97A6AA;
}
<body>
<div class="header">
<img class="Logo" alt="Rigare logo" src="logoweb_1.1.png" />
<div class="nav">
<ul>
<li>About</li>
<li>Technical Capabilities</li>
<li>Staff and Associates</li>
<li>Courses</li>
<li>Products and Hire</li>
<li>Contact</li>
</ul>
</div>
</div>
The padding on your hover style was causing it to jump around.
Replace your .nav li:hover with the below.
.nav li:hover a{
color: #97A6AA;
text-decoration: underline;
cursor: pointer;
}
https://jsfiddle.net/c1egheLy/
So you remove the padding on hover and simply change the CSS around to suit what you need such as below:
.header {
padding-top: 16px;
}
.logo {
float: left;
}
.nav {
display: inline-block;
vertical-align:top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
}
.nav li{
display: inline;
text-align: right;
color: grey;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
border-bottom: transparent;
}
.nav li a:hover {
color: #70B0A8;
border-bottom: 1px solid #97A6AA;
cursor: pointer;
}
.nav a {
color: grey;
text-decoration: none;
}
<div class="header">
<img class="Logo" alt="Rigare logo" src="logoweb_1.1.png"/>
<div class="nav">
<ul>
<li>About</li>
<li>Technical Capabilities</li>
<li>Staff and Associates</li>
<li>Courses</li>
<li>Products and Hire</li>
<li>Contact</li>
</ul>
</div>
</div>
Im slightly baffled as to why you don't have your logo beside the menu links too but thats simply moving the <img> into <class="nav"> but then within this instance you'd need to add width:100%; to .nav {} CSS
Replace this lines in your code
.nav li:hover {
color: #97A6AA;
border-bottom: 1px solid #18961d; //Green Color
cursor: pointer;
/* padding: 10px; */ //Remove this padding line
}
I hope this helps..
Been working on a navbar in html/css and the dropdown doesn't appear. I've been playing around with the code but nothing seems to work. Once I delete the display: none from the .dropdown-content class, it seems to appear...
Could anyone please take a look? I've been at it for hours and reading every thread on this issue, but cannot figure it out. Thx in advance!
Here are my css and html snippets:
body {
width: 100%;
background-image: url("https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=05e92845cd4b48607787e676d0d7d2e5");
background-size: cover;
}
#navdiv {
opacity: 0.70;
filter: (opacity=70;
)
}
#navdiv ul {
list-style-type: none;
width: 100%;
background: white;
line-height: 3rem;
float: right;
overflow: hidden;
}
#navdiv ul a {
text-decoration: none;
color: black;
padding: 2em;
}
#navdiv ul li {
float: right;
margin-right: 1em;
}
#logo {
float: left !important;
font-size: 2em;
margin-left: 1em;
}
#navdiv ul #logo:hover {
background: none;
}
#navdiv ul li a:hover,
dropdown:hover #dropbtn {
background: #B266FF;
transition: all 0.8s;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: inline-block;
}
<body>
<div id="maindiv">
<div id="navdiv">
<ul>
<li id="logo">Potayto-Potatoh</li>
<li class="dropdown">About</li>
<li>Portfolio
<div class="dropdown-content">
work 1
work 2
work 3
</div>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
You need to Add dropdown for portfolio li not for about as it doesnt have dropdown-content
Demo
HTML:
<li class="dropdown">Portfolio
The dropdown-content div is not under dropdown div, the parent <li> element lacks the dropdown class specification.
Add the trigger class to the li element. Your CSS was also incorrect for the trigger, you wre refering to .dropdown (which is actually a class on the li for "about"!)
See https://jsfiddle.net/qxjbtot1/ for a working example.
body {
width: 100%;
background-image: url("https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=05e92845cd4b48607787e676d0d7d2e5");
background-size: cover;
}
#navdiv {
opacity: 0.70;
filter: (opacity=70;
)
}
#navdiv ul {
list-style-type: none;
width: 100%;
background: white;
line-height: 3rem;
float: right;
}
#navdiv ul a {
text-decoration: none;
color: black;
padding: 2em;
}
#navdiv ul li {
float: right;
margin-right: 1em;
}
#logo {
float: left !important;
font-size: 2em;
margin-left: 1em;
}
#navdiv ul #logo:hover {
background: none;
}
#navdiv ul li a:hover,
dropdown:hover #dropbtn {
background: #B266FF;
transition: all 0.8s;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
li:hover div.dropdown-content {
display: block;
}
<body>
<div id="maindiv">
<div id="navdiv">
<ul>
<li id="logo">Potayto-Potatoh</li>
<li class="dropdown">About</li>
<li>Portfolio
<div class="dropdown-content">
work 1
work 2
work 3
</div>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
When I hover on "Newsletter" it takes large space, I tried to adjust margin but nothing happened, and I also tried margin-left and margin-right but the problem is the same. Below is the code:
hr {
margin: 0px;
}
body {
background: url(../images/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
word-wrap: break-word;
}
h1 {
font-family: "Sacramento";
color: #F0FFF0;
}
.title >h1 {
color: #222;
transition: color 2s;
}
.title:hover >h1 {
color: #6565f0;
}
.title {
line-height: 40px;
margin-top: 0px;
margin-bottom: -22px;
font-size: 19px;
transition: font-size 0.4s;
}
.title:hover {
font-size: 22px;
}
.nav ul {
background-color: transperent;
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
margin-top: 10px;
height: 40px;
border-bottom: 1px solid #888;
transition: font-size 0.4s;
}
.nav li:hover {
font-size: 1.6em;
}
.nav a {
text-decoration: none;
color: #222;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline*/
.nav li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
}
}
<font align=center>
<div class="title">
<h1>Welcome</h1>
</div>
</font>
<hr />
<div class="nav">
<ul>
<li class="home">Home
</li>
<li class="tutorials">Tutorials
</li>
<li class="about">About
</li>
<li class="news"><a href="fb.com" target=_blank>Newsletter</a>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
<hr style="margin-top:5px;" />
Update width of li to width:130px;
.nav li {
width:130px;
}
I'm triying to create a horizontal nav bar in my website. The problem is when I hover over one of the options. It gets highlighted but not as I want. This is the result:
As you can see there's some space which should be highlighted as well but it's not.
My Html and CSS:
.section ul {
list-style: none;
list-style-type: none;
padding: 0;
overflow: hidden;
text-align: center;
background-color: #5fb763;
}
.section ul li {
display: inline-block;
font-family: 'Oswald', sans-serif;
font-size: 0.8em;
width: 200px;
height: 100%;
}
.section ul li a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.section ul li a:hover {
background-color: #f0f0f0;
height: 100%;
}
.section ul li a.active {
background-color: rgba(198, 186, 186, 0.73);
color: #444;
}
<body>
<ul>
<li class="home">El local
</li>
<li class="tutorials">Como Llegar
</li>
<li class="about"><a class="active">Historia</a>
</li>
</ul>
<hr />
<hr />
</body>
Add line-height in li
line-height: 21px;
.section ul {
list-style: none;
list-style-type: none;
padding: 0;
overflow: hidden;
text-align: center;
background-color: #5fb763;
}
.section ul li {
display: inline-block;
font-family: 'Oswald', sans-serif;
font-size: 0.8em;
width: 200px;
height: 100%;
line-height: 21px;
}
.section ul li a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.section ul li a:hover {
background-color: #f0f0f0;
height: 100%;
}
.section ul li a.active {
background-color: rgba(198, 186, 186, 0.73);
color: #444;
}
<div class="section">
<ul>
<li class="home">El local
</li>
<li class="tutorials">Como Llegar
</li>
<li class="about"><a class="active">Historia</a>
</li>
</ul>
</div>
If you don't need to support IE8. I would look at maybe using the nav tag instead for your needs. Consider the following snippet;
nav {
text-align: center;
background-color: green;
}
nav a {
text-decoration: none;
color: #fff;
transition: .3s background-color;
}
nav a:hover {
background-color: #f0f0f0;
}
nav a.active {
background-color: rgba(198, 186, 186, 0.73);
color: #444;
}
<body>
<nav>
El local
Como Llegar
<a class="active">Historia</a>
</nav>
</body>
With your current solution you'll need to float the li elements in order to get the correct behaviour with specified widths I believe. You could also consider a flexbox solution.
There are some simple guidelines to creating CSS navigation bars here.
Hope that helps you out!