I was going through this code for Codeplayer in Codepen (see link below), there is a #control{} listed in the CSS code but not mentioned in either HTML or JS code. Could anyone tell me why. Is this a mistake? I'm a newbie to web development so would really like to understand if this is standard or a trick... Thank you!
https://codepen.io/likezli/pen/dXPdJL
CSS code:
body {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
li {
list-style: none;
float: left;
}
a {
color: black;
}
.clear {
clear: both;
}
#logo {
font-weight: bold;
padding: 10px 0 0 10px;
float: left;
}
#menuBar {
height: 40px;
width: 100%;
background-color: #EDEDED;
border-bottom: 1px solid #C8C8C8;
box-sizing: border-box;
}
#buttonDiv {
float: right;
padding: 5px 15px 0 0;
}
#runButton {
font-size: 110%
}
#control {}
#toggleDiv {
height: 40px;
margin: auto;
width: 20%;
box-sizing: border-box;
padding-top: 5px;
position: relative;
}
#toggles {
float: left;
margin: 0;
list-style: none;
padding-left: 0;
box-sizing: border-box;
border: 1px solid #D3D3D3;
border-radius: 5px;
}
#toggles li {
float: left;
border-right: 1px solid #D3D3D3;
box-sizing: border-box;
padding: 5px 8px 4px 7px;
}
.codeContainer {
height: 100%;
width: 50%;
float: left;
position: relative;
}
.codeContainer textarea {
width: 100%;
height: 100%;
border: none;
border-right: 1px solid #E5E5E5;
font-family: SourceCodeProRegular, Menlo, Monaco, consolas, monospace;
font-size: 90%;
box-sizing: border-box;
padding: 30px 0 5px 5px;
}
.codeLabel {
position: absolute;
right: 10px;
top: 10px;
}
#cssContainer,
#jsContainer {
display: none;
}
iframe {
height: 100%;
position: relative;
width: 100%;
border: none;
padding-top: 30px;
}
.selected {
background-color: #EAF3FF;
}
a {
text-decoration: none;
}
a:visited {
color: #000000;
}
**here is the html code:**
<div id="container">
<div id="menuBar">
<div id="logo">
CodePlayer
</div>
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
<div id="toggleDiv">
<ul id="toggles">
<a href="#">
<li class="toggle selected">HTML</li>
</a>
<a href="#">
<li class="toggle">CSS</li>
</a>
<a href="#">
<li class="toggle">JS</li>
</a>
<a href="#">
<li class="toggle selected" style="border:none">Result</li>
</a>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="codeContainer" id="htmlContainer">
<div class="codeLabel">HTML</div>
<textarea id="htmlCode"><div id="test"></div></textarea>
</div>
<div class="codeContainer" id="cssContainer">
<div class="codeLabel">CSS</div>
<textarea id="cssCode"></textarea>
</div>
<div class="codeContainer" id="jsContainer">
<div class="codeLabel">Javascript</div>
<textarea id="jsCode"></textarea>
</div>
<div class="codeContainer" id="resultContainer">
<div class="codeLabel">Output</div>
<iframe id="resultFrame"></iframe>
</div>
</div>
**JS Code:**
var windowHeight = $(window).height();
var menuBarHeight = $("#menuBar").height();
// code container height calculated
var codeContainerHeight = windowHeight - menuBarHeight;
$(".codeContainer").height(codeContainerHeight + "px");
// Toggling between HTML, CSS, JS and Output
$(".toggle").click(function(event) {
// toggle items in menuBar
$(this).toggleClass("selected");
// get html of list item (html, css, js or result) in lowercase
var activeDiv = $(this).html().toLowerCase();
// combine it to one of the cor container id's (htmlContainer, cssContainer, etc.)
// toggle show or hide
$("#" + activeDiv + "Container").toggle();
// count the container id's which are not hidden (display != none)
var showingDivs = $(".codeContainer").filter(function() {
return ($(this).css("display") != "none");
}).length;
// 100% width divided by active divs
var width = 100 / showingDivs;
// set the width
$(".codeContainer").width(width + "%");
});
$("#runButton").click(function(event) {
// find html tag in iframe and set this to html("text")
$("iframe").contents().find("html").html('<style>' + $("#cssCode").val() + '</style>' + $("#htmlCode").val());
// run javascript code in iframe
document.getElementById("resultFrame").contentWindow.eval($("#jsCode").val());
});
We can create styles whatever for id, or class in css,,,like you said #control{},,If there is any id or class assigned to tag / element, then only the styles gets reflected,,otherwise css wont applied.
Related
I'm not very knowledgeable in javascript. But I need a dropdown on a vertical menu that is pure javascript, so I copied/paste the script from W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown
and modified it to fit the page style. This menu needs to be on multiple pages, so it's also an html include. I got it to somewhat work, but you have to double click the drop-drop down in order to close it and this needs to be a single-click. I've been searching for a solution for a couple weeks now and still not sure what I'm doing wrong. I can't use jquery, bootstrap or any outside library since it's not connected to the internet.
HTML:
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div onclick="myButton()">Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>
Codepen
The problem is that on your .drop-button element, you have an inline onClick() attribute/event, AND inside the handler function (function myButton()) you you declare another eventListener on top of that.
You should just remove the onclick="myButton()" attribute all together, and then your JavaScript would look like this:
(Run code snippet)
There are a few different ways in JavaScript to declare event listeners. One way is Inline/HTML Event Handlers that you put inline on the HTML element like an attribute, ie- <div onClick="handlerFunction"> But the more modern, and more recommended way is using addEventListener() directly from your JavaScript.
var dropdown = document.querySelector(".drop-button");
dropdown.addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display == "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display= "block";
}
});
#content {
margin: 1.875em 0px 0.625em 0px;
width: auto;
background-color: #002f6c;
border-radius: 0.75em;
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
display: inline-block;
overflow: hidden;
top: 9.375em;
}
.quick {
margin: 0;
padding: 0;
display: block;
overflow: hidden;
font-family: sans-serif;
}
.quick a {
display: block;
height: auto;
padding-top: 0.625em;
padding-bottom: 0.625em;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
text-align: center;
text-decoration: none;
background-color: #888B8D;
}
.quick a:hover {
display: block;
width: auto;
height: auto;
color: #002F6C;
background-color: #FFD300;
}
.topvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmverthome {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.vertheader {
width: auto;
padding: 2%;
display: block;
text-align: center;
}
.vertbtn {
width: auto;
cursor: pointer;
display: block;
}
.vertbtn :hover {
background-color: #FFD300;
position: relative;
display: block;
}
a.backhome {
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
color: #fff;
text-align: center;
padding: 2%;
box-sizing: border-box;
}
a.backhome:hover {
color: #002f6c;
background-color: #FFD300;
position: relative;
display: block;
}
.quicklinks {
color: #fff;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
}
.drop-button {
padding-top: 0.625em;
padding-bottom: 0.625em;
text-decoration: none;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
color: #fff;
display: block;
border: none;
background-color: #888B8D;
width: 100%;
text-align: center;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.drop-button:hover {
color: #002f6c;
background-color: #FFD300;
}
.main {
margin-left: 200px;
font-size: 20px;
padding: 0px 10px;
}
.active {
background-color: #06a7e0;
color: white;
}
.dropdown-container {
display: none;
background-color: #b4e4f5;
border-bottom: solid 2px #06a7e0;
}
.dropdown-container > a {
background-color: #50c1e9;
border-bottom: solid 1px #06a7e0;
}
a {
display: block;
position: relative;
color: #f3f3f3;
text-decoration: none;
}
a:hover {
color: #fff;
position: relative;
}
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div>Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>
I have a header and I need a small menu box below it, I'm trying to make sure I won't need to use top in css, and I can just add a line break in HTML. I have the following code for the header, the global_tools_menu is the menu I'm trying to add. For some reason, it starts from the top of the page? How would I make it start from just below the header? Here's the codeHTML:
<div class="global_header">
<b><p>ex</p></b>
<header>
<ul class="nav-bar">
<li class="nav-item global_tools" onclick="tools()"><a><img src="/ex/assets/tools.png" width="20px"/></a></li>
<?php
if(isset($_SESSION['id'])) {
echo '<li class="nav-item right-3826" onclick="redirect(`myaccount`);"><a>My Account</a></li>';
echo '<li class="nav-item right-3826" onclick="redirect(`scripts/logout.php`);"><a>Logout</a></li>';
}
if(!isset($_SESSION['id'])) {
echo '<li class="nav-item right-3826" onclick="redirect(`login`);"><a>Log in</a></li>';
echo '<li class="nav-item right-3826" onclick="redirect(`signup`)";><a>Sign Up</a></li>';
}
?>
<li class="nav-item" onclick="redirect('');"><a>Home</a></li>
<li class="nav-item" onclick="redirect('all');"><a>All</a></li>
<li class="nav-item" onclick="redirect('search');"><a>Search</a></li>
</ul>
</header>
</div><br>
<div id="global_tools_menu">
<div id="global_tools_true">
</div>
<div id="global_tools_false">
</div>
</div>
CSS:
.tools {
background-image: url('assets/tools.png');
}
a {
color: #009AFF;
text-decoration: none;
}
body {
font-family: 'PT-Sans', sans-serif;
}
.nav-bar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #009AFF;
height: 30px;
border: 1px solid;
}
.nav-item {
display: block;
color: #fff;
text-align: center;
padding: 6px 8px;
width: calc(2px + 13%);
text-decoration: none;
float: left;
border-right: 1px solid #000;
cursor: pointer;
background-color: #0050FF;
}
.nav-item a {
color: white;
}
.nav-item:hover {
background-color: #0039B5;
}
.right-3826 {
float: right;
border-right: 0px solid;
border-left: 1px solid #000;
}
input:focus {
outline: none;
}
.global_header p {
position: relative;
font-size: 70px;
cursor: pointer;
text-align: center;
margin-bottom: 20px;
vertical-align: middle;
top: -20px;
color: white;
}
.global_header {
background-color: #009AFF;
word-wrap: break-word;
position: absolute;
top: 0px;
width: 100%;
left: 0;
}
.global_tools {
background-color: white;
}
.global_tools:hover {
background-color: #EAEAEA;
}
#global_tools_menu {
position: relative;
width: 400px;
height: 700px;
background-color: #080808;
Here is a JSFiddle for that. I need to make that black box start from below the header?
https://jsfiddle.net/qypm88dm/
I don't know if this is the answer you were looking for but I would do this,
add
<div class="blank"></div>
just below
<div class="global_header">
...
</div>
so it would be
<div class="global_header">
...
</div>
<div class="blank"></div>
and css would be
.blank {
height: 190px;
width: 100%;
}
https://jsfiddle.net/qypm88dm/2/
Set the position of global_tools_menu to inline instead of absolute or relative because those are in reference to the top left of the page, which is why it is up at the top. If you set it to inline it will pop down right below your header.
Edit: My mistake, that will set it behind it, but if you do that and then give it margin-top: 200px that will get it below it. But that may not be the exact fix you want.
I have a web page with sticky navbar fixed top and structure of sticky navbar and my sticky navbar structure is
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > $(".b").offset().top + $(".b").height() && $("input").val() == "") {
$(".sticky").show();
} else {
$(".sticky").hide();
}
});
});
.container {
width: 1020px;
margin: 0 auto;
}
.container>div {
width: 100%;
height: 300px;
background: #f0f0f0;
border: 1px solid #ccc;
margin: 100px 0;
}
.a:after {
content: "A";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.b:after {
content: "B";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.c:after {
content: "C";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
ul.sticky {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f0f0f0;
height: 50px;
border-bottom: 5px solid #ccc;
display: none;
}
ul.sticky:after,
ul.sticky:before {
content: "";
display: table;
clear: both;
}
ul.sticky li a {
display: block;
float: left;
line-height: 50px;
padding: 0 30px;
text-decoration: none;
color: #999;
}
ul.sticky li a:hover {
background: #999;
color: #f0f0f0;
}
<ul class="sticky">
<li>Home
</li>
<li>About Us
</li>
<li>Download
</li>
<li>Forums
</li>
<li>Contact
</li>
</ul>
<div class="container">
<input type="text" class="input">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
click to see on codepen
and my question is if I'm not putting my .sticky element another pages javascript notifier give me this error and I am not gonna put my .sticky element every page what do I have to do ?
click to see real demo
click to see getting error
You get this error beacause jQuery did not find the element .hotel-search-box in your website.
Javascript
$(function() {
$(window).scroll(function() {
if (!$(".hotel-search-box").length) {
return false; //Check if the element exist
}
if($(window).scrollTop() > $(".hotel-search-box").offset().top+$(".hotel-search-box").height() && $(".oda-giris-cikis").val() == ""){
$(".sticky-checkin").show();
}else{
$(".sticky-checkin").hide();
}
});
});
To fix your probleme add a .hotel-search-box element in your page where you want to show your sticky menu.
I am attempting to make a tabbed "table" of sorts but I am having trouble making it display the information.
$(document).ready(function() {
$('#orenk ul a').click(function() {
$('#orenk ul a').removeClass('selected');
$(this).addClass('selected');
$('#orenk_changer').html(
('.' + $(this).attr('id') + '_content').html()
);
});
});
body,
html,
div,
ul,
li,
a {
margin: 0;
padding: 0;
}
body {
font-family: arial;font-size:12px; color:#222;}
.clear {
clear: both;
}
a img {
border: none;
}
ul {
list-style: none;
position: relative;
z-index: 2;
top: 1px;
border-left: 1px solid #f5ab36;
}
ul li {
float: left;
width: 12.5%;
}
ul li a {
background: #ffd89b;
color: #222;
display: block;
padding: 6px 0px;
text-decoration: none;
border-right: 1px solid #f5ab36;
border-top: 1px solid #f5ab36;
border-right: 1px solid #f5ab36;
text-align: center;
}
ul li a.selected {
border-bottom: 1px solid #fff;
color: #344385;
background: #fff;
}
h1 {
display: block;
width: 600px;
margin: 0 auto;
padding: 20px 0;
color: #fff;
}
#orenk {
width: 900px;
margin: 0 auto;
}
#tabs {
width: 900px;
margin: 0 auto;
}
#content {
width: 900px;
margin: 0 auto;
height: 270px;
background: #fff;
z-index: 1;
text-align: center;
margin-bottom: 20px;
}
<div class="titlebg" style="padding: 4px; text-align: left; font-size: 20px;">
ORENK PROVINCE
</div>
<div id="orenk">
<ul>
<li>ORENK PROVINCE
</li>
<li>Glass Shores
</li>
<li>Torrid Terrain
</li>
<li>Muculent Plains
</li>
<li>Ambrosial Marsh
</li>
<li>Viscid Expanse
</li>
<li>Opulent Retreat
</li>
<li>Reedy Knolls
</li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<div id="orenk_changer">
<img src="http://placehold.it/900x270">
</div>
<div id="glass_content" style="display: none;">Glass content test</div>
<div id="torrid_content" style="display: none;">torrid content test</div>
<div id="plains_content" style="display: none;">plains content test</div>
<div id="marsh_content" style="display: none;">marsh content test</div>
<div id="expanse_content" style="display: none;">expanse content test</div>
<div id="Opulent_content" style="display: none;">opulent content test</div>
<div id="knolls_content" style="display: none;">knolls content test</div>
</div>
I am VERY new to javascript and I can get it to display the id where I want the content but when I attempt to get it to show the html inside the container I am trying to call, it does nothing. It's incredibly frustrating. Any one care to point out what I am doing wrong and how to fix it?
jsBin demo
Two things wrong with your ('.' +
$('.' + ›missing $
$('#' + ›you need to target # (Id) elements, not .(class)
$('#orenk ul a').click(function( evt ) {
evt.preventDefault();
$('#orenk ul a').removeClass('selected');
$(this).addClass('selected');
$('#orenk_changer').html(
$('#'+ this.id +'_content').html() // missing $ and # instead of .
);
});
Also, a href="#" (instead of a href="javascript:void(0);") is quite enough if than inside JS you do Event.preventDefault()
I'm trying to make the entire li tag area clickable as well as the text which I have made clickable already. I have tried giving it a href property but that doesn't work. I have already set the li background to change color when it's hovered over but as I said, how do I also make the entire area clickable? Thanks in advance.
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
Home
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2 id="sectwohead">Best Selling Books Right Now</h2>
<div id="bestsellerimages">
<figure>
<img src="Images/4.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Girl On The Train <br>
<span style="font-style: italic; font-size: 0.9em">Paula Hawkins</span></figcaption>
</figure>
<figure>
<img src="Images/3.jpg" alt="book2" height="200" width="131" class="imgbot">
<figcaption>Meet Me In Manhattan <br>
<span style="font-style: italic; font-size: 0.9em">Claudia Carroll</span></figcaption>
</figure>
<figure>
<img src="Images/5.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Pointless Book 2 <br>
<span style="font-style: italic; font-size: 0.9em">Alfie Deyes</span></figcaption>
</figure>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
}
a:link, a:visited, a:hover, a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
font-style: italic;
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
#sectionone {
/*position: fixed;*/
top: 0;
right: 0;
width: 80%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#sectiontwo {
width: 80%;
top: 0;
right: 0;
}
#containertwo {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #888888;
}
#sectwohead{
margin: 2em 0 2em 0;
color: #888888;
}
#bestsellerimages{
float: left;
display: inline-block;
width: 100%;
max-width: 100%;
margin: 0 0 2em 0;
}
#bestsellerimages img{
padding: 0;
}
#bestsellerimages figure{
display: inline-block;
width: 131px;
}
#bestsellerimages figcaption{
font-size: 1.2em;
}
#bestsellerimages figure .imgbot{
margin: 0 0 0.5em 0;
}
This should help see more clearly what I'm trying to do, as you can see in this image - http://i.imgur.com/OZIt9TM.png - The only clickable area is the blue part within chromes inspect that's easy to see. So what I'm trying to do is make the entire area of that specific 'Home Li' clickable.
Rule #1 of list-based menus: Style the links, not the wrappers. Only style the list for positioning (display/float etc.).
Use display:block on your A-tags and put all styling on that tag, not the list itself.
Home
Move background-color: #333 to the .link class in your css, and add display:block to that declaration.
If you are using jQuery (assuming the tags are right) you can do it like this without styling the anchor tags:
$('ul li').click(function() {
location.href = $(this).find('a').prop('href');
});
I would suggest a class name for the ul list like <ul class="navigation">
$('ul.navigation li').click(function() {
location.href = $(this).find('a').prop('href');
});
Ups sorry...Try this..
#nav li {
list-style-type: none;
/* margin: 0; */
/* padding: 0.75em 0 0.75em 0; */
/* text-align: center; */
/* max-width: 100%; */
/* display: block; */
}
#nav li a {
display: block;
padding: 0.5em 0;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
Wrap your A tag around the LI tag. For example look at the google link. You're putting the A tag around the text only, not the entire element.
<ol>
<a href="http://google.com">
<li>google</li> <!-- DO THIS -->
</a>
<li>
yahoo <!-- YOUR CURRENTLY DOING THIS -->
</li>
</ol>