I am recreating the Google homepage for an assignment on TheOdinProject. I am almost finished, but the problem I am having is that I can't seem to get the hyperlink to be visible within the footer container. I tried changing the text color, and I checked the properties within the list item selector and I should be able to see the hyperlink "About Google" but I can't. What am I doing wrong?
body {
font-family: Arial;
}
#logo {
display: block;
width: 350px;
margin : 0 auto;
margin-top: 100px;
position: relative;
text-align: center;
}
input {
margin-top: -50;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
position: relative;
line-height: 2;
display: block;
width: 500px;
}
#logo img {
max-width: 100%;
}
.search_button {
margin-left: 800px;
margin-top: 5px;
display: inline;
float: left;
}
.feeling_lucky_button {
margin-right: 800px;
margin-top: 5px;
float: right;
display: inline;
}
#navbar {
background-color: #2d2d2d;
width: 100%;
height: 30px;
position: fixed;
left: 0;
top: 0;
}
#navbar ul {
margin-top: 5px;
padding-left: 8px;
}
li {
font-size: 13px;
padding: 5px 8px 5px 8px;
display: inline;
list-style-type: none;
}
#navbar ul li a {
font-weight: bold;
color: #BBBBBB;
text-decoration: none;
}
#navbar ul li a:hover {
color: white;
text-decoration: none;
}
#footer {
width: 100%;
height: 30px;
position: fixed;
border-top: 1px solid rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
}
#footer li {
margin-bottom: 5px;
padding-left: 8px;
}
#footer ul li a {
font-weight: bold;
color: red;
text-decoration: none;
}
#footer ul li a:hover {
color: red;
font-weight: bold;
text-decoration: none;
}
#footer ul li a:link {
color: red;
}
#footer ul li a:visited{
color: red;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Google Homepage Project</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="navbar">
<ul>
<li>Home</li>
</div>
<div id="logo">
<img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
</div>
<div id="searchbar">
<form action="#" method="POST">
<input type="text" name="searchbar">
</div>
<button class="search_button">Google Search</button>
<button class="feeling_lucky_button">I'm feeling lucky</button>
<div id="footer">
<ul>
<li><a href="http://www.google.com>About Google</a></li>
</ul>
</div>
</body>
</html>
Try this in footer. You missed double quote.
<li>About Google</li>
Fiddle:https://jsfiddle.net/ywu325mw/1/
In your footer:
<a href="http://www.google.com>About Google</a>
should be:
About Google
You forgot to close " the href attr
Related
Here is my code below. I'm having trouble displaying the logo at the top left hand corner of the screen.
My main problem is that the image is not showing up anywhere on the screen, although I inputted the correct file name into the image section.
If anyone would be able to help me, I'd really appreciate it! Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
width: 100%;
}
li {
float: right;
}
#logo {
float: left;
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
width: 33px;
height: 67px;
border-radius: 5px;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<ul>
<li><img src="imageO.jpg" id="logo" class="logo"/> </li>
<li>About</li>
<li>Features</li>
<li>Download</li>
</ul>
</div>
</body>
</html>
Is your logo really 7x5 px? I just move the first li item to the left side and if imageO.jpg is in the same path of your Html, this works fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
width: 100%;
}
li {
float: right;
}
#logo {
float: left;
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
width: 70px;
height: 50px;
border-radius: 5px;
border: 1px black;
}
li:first-child {
float: left;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<ul>
<li><img src="imageO.jpg" alt="not found" id="logo" class="logo"/> </li>
<li>About</li>
<li>Features</li>
<li>Download</li>
</ul>
</div>
</body>
</html>
Here, I've done this in another way:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
width: 100%;
display:flex;
justify-content:flex-end;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
width: 50px;
height: 50px;
border-radius: 5px;
position:fixed;
left:20px;;
}
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<ul>
<li><img src="https://www.ikea.com/at/de/images/products/klappa-soft-toy-ball-multicolour__0606619_PE682422_S5.JPG?f=s" id="logo" class="logo"/> </li>
<li>About</li>
<li>Features</li>
<li>Download</li>
</ul>
</div>
Hi hope this pen would help with the position of the logo, also notice you have a closing div tag that does not open, as the previous answer i took out the logo from the Ul because since you are floating all the ul content it takes the logo too.
https://codepen.io/MoneWebGuru/pen/WNQwVGX`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
left:0px;
width: 100%;
}
li {
float: right;
list-style-type: none;
}
#logo {
float: left;
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
border-radius: 5px;
height: 50px;
padding-top:10px;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<div style="width:100%">
<img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg" id="logo" class="logo"/> <ul>
<li>About</li>
<li>Features </li>
<li>Download</li>
</ul>
</div>
</body>
</html>
`
I try to put 2 divs next to eachother but somehow it places them under eachother.
I have looked it up on this forum and copied the css code for it but it still wont work, i think it has something to do with my php code i use in it.
<html>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<p><img src="img/handboeklogo.png"></p>
<ul>
<li>Home</li>
<li>Checklist
<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Monitoren</li>
</ul>
</li>
<li>Handboek
<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Monitoren</li>
<li>Printers</li>
<li>Mobiele Telefoons</li>
</ul>
</li>
<li>Classificatielijst<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Monitoren</li>
<li>Printers</li>
<li>Mobiele Telefoons</li>
</ul>
</li>
<form class='logout' method='POST' action=''>
<button type='submit' name='logoutSubmit'>Logout</button>
</form>
</nav>
</header>
<br><br>
<div id='maindiv'><div id='first'>
<form method='POST' action=''>
<input type='hidden' name='uid' value='1'>
<input type='hidden' name='date' value='2019-07-02'>
<textarea name='message'></textarea><br>
<button type='submit' name='commentSubmit'> Comment </button>
</form></div>
<div id='second'>
<form method='POST' action=''>
<input type='hidden' name='uid' value='1'>
<input type='hidden' name='date' value='2019-07-02'>
<textarea name='message'></textarea><br>
<button type='submit' name='Generalcommentsubmit'> Comment </button>
</form></div></div>
</body>
</html>
CSS code:
body {
background-color: #edf0f2;
}
textarea {
display: inline-block;
width: 630px;
height: 120px;
background-color: #fff;
border-color: #5bb112;
margin-top: 10px;
margin-left: 15px;
position: relative;
resize: none;
}
.Changelog {
margin-left: 15px;
width: 800px;
}
.logout {
display: inline-block;
float: right;
position: absolute;
margin-top: 27px;
margin-right: 20px;
margin-left: 680px;
}
.login {
display: inline-block;
float: right;
position: absolute;
margin-top: 27px;
margin-right: 20px;
margin-left: 330px;
}
/*
button {
width: 100px;
height: 30px;
background-color: #5bb112;
border: none;
color: #e2e2e2;
font-family: arial;
font-weight: 400;
cursor: pointer;
margin-bottom: 19px;
margin-left: 15px;
margin-top: 3px;
}
.comment-box {
width: 630px;
padding-top: 5px;
margin-bottom: 4px;
background-color: #fff;
border-radius: 1px;
position: absolute;
border: 1px solid #5bb112;
margin-top: 8px;
align-content: left;
}
.comment-box p {
font-family: arial;
font-size: 14px;
line-height: 16px;
color: #282828;
font-weight: 100;
margin-bottom: 10px;
margin-left: 5px;
}
.edit-form {
position: absolute;
top: 3px;
right: 3px;
}
.edit-form button {
width: 40px;
height: 20px;
color: #282828;
background-color: #fff;
opacity: 0.7;
}
.edit-form button:hover {
opacity: 1;
}
.delete-form {
position: absolute;
top: 3px;
right: 58px;
}
.delete-form button {
width: 40px;
height: 20px;
color: #282828;
background-color: #fff;
opacity: 0.7;
}
.delete-form button:hover {
opacity: 1;
}*/
* {
margin: 0;
padding: 0;
}
header nav {
width: 100%;
height: 80px;
background-color: #343131;
}
header nav p {
font-family: arial;
color: #b3b3b3;
font-size: 24px;
line-height: 55px;
float: left;
padding: 10px 20px;
}
header nav ul {
float: left;
z-index: 2;
}
header nav ul li {
float: left;
list-style: none;
position: relative;
margin-top: 15px;
margin-right: auto;
margin-left: 30px;
}
header nav ul li a {
display: block;
font-family: arial;
color: #b3b3b3;
font-size: 20px;
padding: 21px 14px;
text-decoration: none;
}
header nav ul li ul {
display: none;
position: absolute;
background-color: #343131;
border-radius: 0px 0px 4px 4px;
padding: 8px;
}
header nav ul li:hover ul {
display: block;
}
header nav ul li ul li {
width: 180px;
border-radius: 4px;
}
header nav ul li ul li a {
padding: 9px 14px;
}
header nav ul li ul li a:hover {
background-color: #343131;
}
header nav p img {
width: 210px;
height: 55px;
margin-top: 5px;
margin-bottom: 5px;
}
header nav ul li a:hover {opacity: 1}
header nav ul li a {
background-color: #343131;
border: none;
color: white;
opacity: 0.6;
transition: 0.3s;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
i {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-left: 10px;
margin-bottom: 3px;
}
/*-------Changelog---------*/
#maindiv {
display: flex;
width: auto;
border: 1px solid black;
overflow: hidden;
}
#first {
width: auto;
float:left;
}
#second {
float: left;
}
I would like to place the divs next to eachother so i get 2 comment sections next to eachother.
To place 2 divs near eachother wrap them in another div and set display to 'flex'
<div id="maindiv'>
<div id='first'>
//content here
</div>
<div id='second'>
//content here
</div>
</div>
in css
#maindiv {
display: flex;
width: 500px;
border: 1px solid black;
overflow: hidden;
}
#first {
width: 300px;
}
#second {
}
From your current code I could just guess that problem is with display, try this
#maindiv {
display: inline-block;
width: 500px;
border: 1px solid black;
overflow: hidden;
}
You can use display:inline-block as div element display is set to block by default
.parent {
background: red;
height: 50px;
width: 50px;
margin: 10px;
display: inline-block
}
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
#first, #second, #maindiv{
display: inline-block;
}
#maindiv {
width: 500px;
}
#first {
width: 300px;
}
<div id='maindiv'>
<div id='first'>first</div>
<div id='second'>second</div>
</div>
I'm attempting to create a navbar with two dropdown menus and after lots of fiddling with the dropdown menu I've got it sorta working. But it's made the rest of the items out of order.
https://jsfiddle.net/o5pcs1y7/
body {
font-family: Arial;
background-color: #FAFAFA;
}
.container {
width: 960px;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: #FAFAFA;
padding: 10px 10px 10px;
}
.header h1 {
border-bottom: solid 2px #2c3840;
text-transform: uppercase;
color: #2c3840;
}
.header img {
float: right;
position: relative;
width: 90px;
margin-top: -60px;
}
.nav {
background-color: #2c3840;
position: relative;
width: 100%;
float: left;
height: 41px;
margin-top: -22px;
}
.nav a {
font-family: Arial;
float: left;
display: inline-block;
color: #FAFAFA;
text-align: center;
padding: 10px 14px;
text-decoration: none;
font-size: 18px;
}
.nav a:hover {
background-color: #6d4b4f;
}
.projects {
position: relative;
display: inline-block;
}
.projects-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 10px 14px;
z-index: 1;
text-decoration: none;
}
.projects:hover .projects-content {
display: block;
}
.services {
position: relative;
display: inline-block;
}
.services-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
text-decoration: none;
}
.services:hover .services-content {
display: block;
}
<!doctype html>
<title>Werribee Roadworthy Centre</title>
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<body>
<div class="container">
<div class="header">
<h1>Werribee Roadworthy Centre</h1>
<img src="car.png">
</div>
<div class="nav">
Home
<div class="services">
Services
<div class="services-content">
1
2
3
</div>
</div>
<div class="projects">
Projects
<div class="projects-content">
1
2
3
</div>
</div>
Photo Gallery
Contact Us
</div>
<div class="section">
</div>
<div class="aside">
</div>
</div>
</body>
This is the code. The ordering of the navbar is correct in the HTML just not in the finished product. Also don't mind the broken dropdown.
Since the parent .nav could have a child of div or either a, you didn't float the div to left like you float a and that what was making the mess:
you just have to add:
.nav > div {
float: left;
}
body {
font-family: Arial;
background-color: #FAFAFA;
}
.container {
width: 960px;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: #FAFAFA;
padding: 10px 10px 10px;
}
.header h1 {
border-bottom: solid 2px #2c3840;
text-transform: uppercase;
color: #2c3840;
}
.header img {
float: right;
position: relative;
width: 90px;
margin-top: -60px;
}
.nav {
background-color: #2c3840;
position: relative;
width: 100%;
float: left;
height: 41px;
margin-top: -22px;
}
.nav a {
font-family: Arial;
float: left;
display: inline-block;
color: #FAFAFA;
text-align: center;
padding: 10px 14px;
text-decoration: none;
font-size: 18px;
}
.nav > div {
float: left;
}
.nav a:hover {
background-color: #6d4b4f;
}
.projects {
position: relative;
display: inline-block;
}
.projects-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 10px 14px;
z-index: 1;
text-decoration: none;
}
.projects:hover .projects-content {
display: block;
}
.services {
position: relative;
display: inline-block;
}
.services-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
text-decoration: none;
}
.services:hover .services-content {
display: block;
}
<!doctype html>
<title>Werribee Roadworthy Centre</title>
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<body>
<div class="container">
<div class="header">
<h1>Werribee Roadworthy Centre</h1>
<img src="car.png">
</div>
<div class="nav">
Home
<div class="services">
Services
<div class="services-content">
1
2
3
</div>
</div>
<div class="projects">
Projects
<div class="projects-content">
1
2
3
</div>
</div>
Photo Gallery
Contact Us
</div>
<div class="section">
</div>
<div class="aside">
</div>
</div>
</body>
Hope this helps :)
Here's my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Squallz Test Page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>This is a header</h1>
</header>
<div class="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Repo</li>
<li>Code</li>
</ul>
</div>
<div class="footer">
<div class="footerinfo">
<p id="copyright">Copyright © Squallz 2017 - Rights Reserved</p>
<p id="info">Personal website by <b>Squallz</b></p>
</div>
</div>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: url("../images/bg.png") no-repeat;
background-attachment: fixed;
}
header {
background-color: #088CAF;
color: white;
width: 100%;
padding: 20px 0;
text-align: center;
}
.navigation {
position: sticky;
}
.navigation ul {
background-color: #075E75;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
border-top: 2px solid #2E2E2E;
border-bottom: 2px solid #2E2E2E;
}
.navigation ul li {
display: inline-block;
padding: 20px;
}
.navigation li:hover {
background-color: #069DAA;
}
.navigation ul li a {
text-decoration: none;
color: white;
font-size: 20px;
}
.footer {
color: white;
text-align: center;
width: 100%;
background-color: #2E2E2E;
border-top: 2px solid #099C9E;
position: absolute;
bottom: -800px;
height: 80px;
overflow: hidden;
}
I just want it to where when I highlight the li with a link in it, the entire thing will be clickable. I know that I could make them all individual divs wrapped by anchors but that's messy
You need to make your a tag full width and height of the li. Moving padding:20px; to your a tag css and adding display:block; allows the links to be clickable, without modifying your HTML.
Update your li tag css to:
.navigation ul li {
display: inline-block;
}
Update your a tag css to:
.navigation ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 20px;
display:block;
}
Full Code:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: url("../images/bg.png") no-repeat;
background-attachment: fixed;
}
header {
background-color: #088CAF;
color: white;
width: 100%;
padding: 20px 0;
text-align: center;
}
.navigation {
position: sticky;
}
.navigation ul {
background-color: #075E75;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
border-top: 2px solid #2E2E2E;
border-bottom: 2px solid #2E2E2E;
}
.navigation ul li {
display: inline-block;
}
.navigation li:hover {
background-color: #069DAA;
}
.navigation ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 20px;
display:block;
}
.footer {
color: white;
text-align: center;
width: 100%;
background-color: #2E2E2E;
border-top: 2px solid #099C9E;
position: absolute;
bottom: -800px;
height: 80px;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Squallz Test Page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>This is a header</h1>
</header>
<div class="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Repo</li>
<li>Code</li>
</ul>
</div>
<div class="footer">
<div class="footerinfo">
<p id="copyright">Copyright © Squallz 2017 - Rights Reserved</p>
<p id="info">Personal website by <b>Squallz</b></p>
</div>
</div>
</body>
</html>
Simply interchange <li> to <a> like:
<li>Home</li>
Then just change this in your css to retain the design
.navigation ul a {
text-decoration: none;
color: white;
font-size: 20px;
}
Take the padding off your li and set the anchor within to display: block with its own padding.
.navigation li a {
display: block;
padding: 20px;
}
The only real concern is that the targets may be too close together, which you can solve with slightly larger margins between each list item.
Simple add to .navigation ul li a
padding: 20px;
display: block;
And remove it from .navigation ul li
padding: 20px;
Full code:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: url("../images/bg.png") no-repeat;
background-attachment: fixed;
}
header {
background-color: #088CAF;
color: white;
width: 100%;
padding: 20px 0;
text-align: center;
}
.navigation {
position: sticky;
}
.navigation ul {
background-color: #075E75;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
border-top: 2px solid #2E2E2E;
border-bottom: 2px solid #2E2E2E;
}
.navigation ul li {
display: inline-block;
}
.navigation li:hover {
background-color: #069DAA;
}
.navigation ul li a {
padding: 20px;
display: block;
text-decoration: none;
color: white;
font-size: 20px;
}
.footer {
color: white;
text-align: center;
width: 100%;
background-color: #2E2E2E;
border-top: 2px solid #099C9E;
position: absolute;
bottom: -800px;
height: 80px;
overflow: hidden;
}
<header>
<h1>This is a header</h1>
</header>
<div class="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Repo</li>
<li>Code</li>
</ul>
</div>
<div class="footer">
<div class="footerinfo">
<p id="copyright">Copyright © Squallz 2017 - Rights Reserved</p>
<p id="info">Personal website by <b>Squallz</b></p>
</div>
</div>
I'm having trouble with "a:active" not working at all. "a:hover" is working correctly on the other hand.
/* CSS Document */
#charset "utf-8";
/* Main HTML Elements */
body {
font-family: "Open Sans";
font-size: 14px;
background-color: #FFFFFF;
color: #1B242D;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
h1 {
font-size: 26px;
color: #FFFFFF;
}
h2 {
font-size: 20px;
color: #5EB59C;
}
h3 {
font-size: 18px;
color: #28BDEA;
}
h4 {
font-size: 14px;
color: #00ACDF;
}
/* Bart Specific */
#mainContainer {
position: absolute;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#topContainer {
position: fixed;
top: 0px;
width: 100%;
height: 150px;
background-color: #1B242D;
z-index: 1;
}
#topBar {
position: absolute;
top: 0px;
height: 5px;
width: 100%;
background-color: #00ACDF;
overflow: hidden;
}
#headerContainer {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
color: #FFFFFF;
}
#headerArrow {
position: absolute;
top: 150px;
right: 65px;
width: 0px;
height: 0px;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 60px solid #1B242D;
}
#headerText {
position: absolute;
bottom: 0px;
left: 5px;
}
#TopNav {
position: absolute;
top: 5px;
right: 35px;
}
#TopNav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#TopNav ul li {
display: inline-block;
}
#TopNav ul li a {
display: block;
padding-left: 10px;
padding-bottom: 5px;
padding-right: 10px;
text-align: center;
color: #FFFFFF;
font-size: 16px;
text-decoration: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
/* #TopNav a:link {
text-decoration: none;
} */
/* #TopNav a:visited {
text-decoration: none;
color: #FFFFFF;
} */
#TopNav ul li a:hover {
text-decoration: none;
font-weight: !important;
color: #FFFFFF;
background-color: #28BDEA;
}
#TopNav ul li a:active {
text-decoration: none;
color: #FFFFFF;
background-color: #00ACDF;
}
#midContainer {
position: absolute;
top: 160px;
padding: 0px;
margin: 0px;
width: 100%;
}
#mainContent {
position: absolute;
width: auto;
right: 305px;
left: 10px;
padding-bottom: 10px;
}
#contentSeparator {
position: fixed;
width: 1px;
height: 80%;
right: 295px;
background-color: #8D9299;
}
#newsContainer {
position: absolute;
top: 50px;
right: 25px;
max-width: 250px;
min-width: 250px;
text-align: center;
}
#bottomContainer {
position: fixed;
bottom: 0px;
background-color: #8D9299;
width: 100%;
height: 25px;
color: #FFFFFF;
text-align: center;
}
#footerContent {
position: absolute;
top: 3px;
width: 100%;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen and (max-width: 801px)" href="/css/p_mobile.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 801px)" href="/css/p_def.css">
<link rel="stylesheet" type="text/css" href="/inc/fontawesome/css/font-awesome.min.css">
<script src="/inc/js/jquery-1.11.2.min.js"></script>
<script src="/inc/js/webfont.js"></script>
<title>Home</title>
</head>
<body>
<div id="mainContainer">
<div id="topContainer">
<div id="topBar"></div>
<div id="headerContainer">
<div id="headerArrow"></div>
<div id="headerText"><h1>Page Title Here</h1><h4>...a very warm welcome to my personal portfolio website.</h4></div>
<div id="TopNav">
<ul>
<li>Home</li>
<li>My Work</li>
<li>About Me</li>
<li>Contact Me</li>
<li>Documents</li>
</ul>
</div>
</div>
</div>
<div id="midContainer">
<div id="mainContent">
<p>Some Text Here</p>
</div>
<div id="contentSeparator"></div>
<div id="newsContainer">
<div id="news_1">
<p>Some news here...</p>
<hr>
<p>Some more news here...</p>
</div>
</div>
</div>
<div id="bottomContainer">
<div id="footerContent">
Copyright Notice Here
</div>
</div>
</div>
</body>
</html>
I have tried many times to fix this but it just won't work.
I have used this before and I set it up identically and it worked fine over there, but for some reason not here. Any clues?
Thanks!
MODIFICATION: I have now added full page CSS and HTML if this may help in solving of the problem. Thanks for your help!
The problem is this :
#TopNav a:hover {
text-decoration: none;
color: #FFFFFF;
background-color: #00ACDF;
}
#TopNav a:active {
text-decoration: none;
color: #FFFFFF;
background-color: #00ACDF;
}
If you observe there is no difference between the two states. They are the same. The active class actually works in this case but since it is the same as the hover state in terms of CSS, you observe no difference visually.
So, let's change the active state's CSS a bit. Lets add an orange background with black text on active state. So the class would be modified as follows :
#TopNav a:active {
text-decoration: none;
color: Black;
background-color: orange;
}
Now, you can observe that it works. Just observe that when you click the link, you can see the anchor links having an orange background while the text turns black as specified by our active class's CSS.
See this working below :
#TopNav {
position: absolute;
top: 5px;
right: 35px;
background-color: #1B242D;
}
#TopNav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#TopNav ul li {
display: inline-block;
}
#TopNav a {
display: block;
padding-left: 10px;
padding-bottom: 5px;
padding-right: 10px;
text-align: center;
color: #FFFFFF;
font-size: 16px;
text-decoration: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#TopNav a:link {
text-decoration: none;
}
#TopNav a:visited {
text-decoration: none;
color: #FFFFFF;
}
#TopNav a:hover {
text-decoration: none;
color: #FFFFFF;
background-color: #00ACDF;
}
#TopNav a:active {
text-decoration: none;
color: Black;
background-color: orange;
}
<div id="TopNav">
<ul>
<li>Home</li>
<li>My Work</li>
<li>About Me</li>
<li>Contact Me</li>
<li>Documents</li>
</ul>
</div>