How can I turn the entire div into a clickable link?

How can I turn the entire div into a clickable link? - html

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>

Related

How to get a hover underline to appear above text and have a drop-shadow effect?

As you can see in the first image, I have the underline appear under the links which covers the red "hr" that runs across the page. I want to apply the same effect on the archives and categories links but with it appearing above. I can't seem to find a way of doing it. I looked up a hover underline position, and tried using text-underline-position to being above but that doesn't do what I want it to do. How do I go about doing this?
In the second image, in the prototype I had designed to have the underline have a drop-shadow effect. How do I go about doing that with hover links? Can it even be achieved if I'm using an image as a background? Or would I need to save that as a .png with transparency? Any tips?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<header></header>
<div id="NavSection">
<div id="TopNav">
<nav id="MainNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<hr />
<div id="SecondNavSection">
<nav id="SecondNav">
<ul id="SecondMenu">
<li>Archives</li>
<li>Categories</li>
</ul>
</nav>
</div>
<div id="SiteTitle">
<h1 id="My">My<span id="Site">Site</span></h1>
</div>
</div>
<div id="ContentDiv">
<main id="ContentSection">
<div id="Content">
<p>Content goes here.</p>
</div>
</main>
</div>
<footer>
<p>My Site</p>
</footer>
</body>
</html>
CSS:
body {
background-color: #ffffff;
background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
font-family: Arial;
}
#font-face {
font-family: ubuntu-medium;
src: url(/fonts/ubuntu-medium.ttf);
}
/* #media (max-width:3440px){
body{background: url(/images/background.jpg) no-repeat center center fixed;}
} */
/* #media (min-width:480px){
body{background: url(/images/background.jpg) no-repeat center center fixed;}
} */
#NavSection {
margin-top: 3%;
}
#MainNav {
position: left;
margin-left: 11%;
}
#Menu li {
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#Menu a:hover {
text-decoration-color: #414141;
text-underline-offset: 0.12em;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 4px;
}
hr {
margin: 0px;
border: 2px solid red;
width: auto;
}
a {
color: #414141;
text-decoration: none;
}
a:active {
color: #ff0000;
}
#SiteTitle {
margin-left: 0%;
}
#My {
font-family: Impact;
font-weight: normal;
font-size: 30px;
color: #ffffff;
text-decoration: underline;
text-decoration-color: #414141;
text-decoration-thickness: 2px;
text-underline-offset: 0.08em;
}
#Site {
color: red;
}
ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#SecondNav {
float: right;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
font-size: 15px;
margin-right: 11%;
}
#SecondMenu a:hover {
margin-bottom: 5px;
text-decoration-line: underline;
text-underline-position: above;
text-decoration-style: solid;
text-decoration-color: #414141;
text-decoration-thickness: 4px;
}
#SecondMenu li {
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#ContentDiv {
width: 70%;
height: 40%;
position: absolute;
top: 30%;
left: 15%;
transform: translateX(0%);
background-color: rgba(255, 0, 0, 0.4);
}
#ContentSection {
width: 90%;
height: 60%;
position: absolute;
top: 20%;
left: 5%;
background-color: rgba(255, 255, 255, 0.9);
}
#Content {
margin: 3%;
}

Use this
HTML code
<div class="menu">
A
B
C
D
E
F
</div>
CSS
.body {
background:#222;
padding:50px;
}
.menu {
margin:0 auto;
with 90%;
}
.menu a {
display:block;
float: left;
padding:5px 0;
color:#fff;
text-decoration:none;
margin:0 10px; font-family:arial;
}
.menu a:hover {
border-bottom:3px solid #fff;
}
Hope gonna help you, also i would be glad if you rate my comment good!

Using two lists and using border on the li you can get the color.
.navbar {
position: relative;
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
}
.navbar a {
text-decoration: none;
color: #414141;
}
.navbar ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar ul li {
display: block;
flex: 0 1 auto; /* Default */
list-style-type: none;
line-height: 2.5em;
margin-left: 1em;
}
.sub ul {
justify-content: flex-end;
}
.navbar::before{
position: absolute;
z-index: -1;
margin-top: 2.5em;
content: '';
border-top: 10px solid #FF0000;
width:100%;
}
.main li.active {
border-bottom: 10px solid #000000;
box-shadow: 0 4px 2px -2px #AAAAAA;
}
.sub li.active {
border-top: 10px solid #000000;
margin-top: -10px;
box-shadow: 0px -4px 2px -2px #AAAAAA;
}
<div class="navbar">
<nav class="main">
<ul>
<li>Home</li>
<li class="active">About</li>
<li>Contact</li>
</ul>
</nav>
<nav class="sub">
<ul>
<li class="active">Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</nav>
</div>

How would I place a logo at the top left hand corner of the screen?

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>
`

Can't see hyperlink text within div container

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

a:active doesn't work yet a:hover functions correctly

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>

Nav Links Stack When Zoom Out

So I'm building a website in html and css. I have made a navigation bar with the links, but when I zoom out, the links go underneath one another instead of inline. If someone can give me some pointers, that'd be great. Thanks
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="wrap">
<div class="logo"><img src="img/logo.png"></div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SHOPS</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="main">
</div>
</div>
</body>
</html>
body {
padding: 0;
margin: 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
.logo {
margin-bottom: 10px;
margin: auto;
width: 524px;
}
.wrap {
width: 960px;
margin: auto;
}
.nav {
height: 37px;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
margin-bottom: 10px;
}
ul {
margin: 0;
padding: 0;
text-align: center;
line-height: 38px;
}
ul li {
display: inline;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}
ul li a {
text-decoration: none;
color: white;
font-family: arial;
}
ul li a:hover {
}
.main {
min-height: 300px;
height: auto;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
}

"the links go underneath one another instead of inline"
To fix this, you will want to add the float: left; property to your li like so:
ul li {
display: inline-block;
float: left;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

How can I turn the entire div into a clickable link? - 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.

Related

How to get a hover underline to appear above text and have a drop-shadow effect?

How would I place a logo at the top left hand corner of the screen?

Can't see hyperlink text within div container

a:active doesn't work yet a:hover functions correctly

Nav Links Stack When Zoom Out

Categories

Resources