Div focus using css - html

HTML
<div class="div1">
<ul class="dropdown">
<li>example</li>
</ul>
<div>
CSS
.dropdown{
visibility: hidden
}
.div1:focus .dropdown{
visibility: visible
}
I'm trying to make click event in css using focus without jquery and I need it when I am clicking on div1 it will hide a dropdown ul.
Is there any way to do that?

You can't do that with "focus", but you may do that with "active". Active is accepted by most browsers as the "click" event (i.e. while you click on an element it is active).
Check the code below. I have just tested with Chrome and it works as you intended. Also tested with Internet Explorer; it "sort-of" works with this too (the second selector is specifically for IE).
Hope this helps you out. Good luck!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
.div1 {
border: 1px solid green;
}
.div1:active .dropdown {
display: none;
}
.dropdown:active {
display: none;
}
</style>
</head>
<body>
<p>This is my web page</p>
<div class="div1">
test
<ul class="dropdown">
<li>example</li>
</ul>
<div>
</body>
</html>

What about using javascript
<div id="div1">
<ul class="dropdown" id="ul1">
<li>example</li>
</ul>
<div>
<style>
.hidden {
visibility: hidden;
}
</style>
<script>
document.getElementById('div1').onclick=function(){
var element = document.getElementById("ul1");
element.classList.add("hidden");
};
</script>
JSFiddle: http://jsfiddle.net/4Ls0ygp3/

Related

Force an html element to be visible when parent is set to display:none

When a parent element has been set to display:none;, how can we make just one of its descendants visible?
css:
div: display:none;
html:
<div>
<p id='required'>required</p>
<p>not required</p>
</div>
How can I make p#required alone to be visible.
Limitation - I will be using this in the stylus browser extension.
You can do this with the visibility property but not display.
Example code below
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
div {
visibility: hidden;
}
</style>
</head>
<body>
<div>
<p id='required'>required</p>
<p style="visibility: visible;">not required</p>
</div>
</body>
</html>

Why 'p.class or li#id' doesn't get applied when I use in this format?

I have seen in many css tutorials, syntax like p.class or p#id
Eg.
p.center
But I always have to use class p{ }, otherwise it doesn't get applied.
Any suggestions?
#nav li {
display: inline-block;
}
li#nav {
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="first.css">
</head>
<body>
<div id="icon">
<h1>icon</h1>
<div id="nav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
</div>
</body>
</html>
p.center{} refers to p elements with 'center' class and .center p {} refers to
all p elements inside element having .center class. So based on your html structure you can have css selectors .
You can refer from here
li.list {
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="first.css">
</head>
<body>
<div id="icon">
<h1>icon</h1>
<div id="nav">
<ul>
<li class="list">link</li>
<li class="list">link</li>
<li class="list">link</li>
</ul>
</div>
</div>
</body>
</html>
So, element.classname means, element must be having a class with classname. Same goes for id. But, remember #id is always unique. So, prefer classname in such scenarios.
Also, you are trying to make a change to the P element in your html.
In css you just need to do p{} but that would change all the P on your page which is normally not a good idea unless you are 110% sure that is what you want, no matter what.

DIV container issue

So this is probably a very minor adjustment that needs to be made to the HTML/CSS code but here is the issue I've been facing. My code for a general HTML page is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<link href="sites/css/style.css" rel="stylesheet" type="text/css" />
<title>My Page</title>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
<div class="main_content">
</div>
<div class="footer">Copyright © 2012-2013.</div>
</div>
</body>
</html>
The CSS for the .wrapper class is as follows:
.wrapper {
border: 1px solid #ddd;
margin-left: auto;
margin-right: auto;
width: 980px;
}
I finding that when I put content into any of the other DIVs that go on the page especially when using either float: left; or float: right; the border for the wrapper does not continue on down the page unless I use a class called:
.clearer {
clear: both;
}
and put a DIV:
<div class="clearer"></div>
at the bottom of every DIV that is floated. Is there something I'm not doing correctly here or is this a common issue?
Any help or advice appreciated!
Thanks!
Dave.
This is a common issue, which you can usually fix by adding overflow: auto to the #wrapper. If that doesn't work, your clearer solution is another often-used alternative.

padding not working in IE7 and IE8

I searched all over the web to find a solution for this issue, but I was not lucky.
I know when it comes to styling web pages for IE is worse than watching grass grow.
So, I have a problem with the padding. It works just fine in IE9 and all other browsers, but it fails in IE7 and IE8. Probably lower versions too (I will check on that later)
Th e UL suppose to be in-line with a back-ground
thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
a{font-weight:bold;color:#369;}
a:link{text-decoration:none;}
a:visited{color:#936;text-decoration:none;}
a:hover{text-decoration:underline;}
.manubar a:link{color: #FFFFFF;}
.manubar a:visited{color: #DFFFDF;}
.manubar{
padding:10px 0 0 0;
height:26px;
text-transform:uppercase;
background-color:#FF8C00;}
.manubar ul{list-style-type:none;padding:0;margin:0;}
.manubar ul li{text-align:center;border-left:1px solid
#999;display:block;float:left;}
.manubar ul li:first-child{border:0;}
.manubar ul li.insert{width:191px;}
.home{width:94px;}
.insert{width:94px;}
.offer{width:94px;}
.search{width:114px;}
</style>
</head>
<body>
<div style="height:30px; width:100%;">
<nav class="manubar">
<ul >
<li class="home" >
Home
</li>
<li class="insert">
Post
</li>
<li class="offer">
Offer
</li>
<li class="search">
Search
</li>
</ul>
</nav>
</div>
</body>
</html>
The nav tag is introduced in HTML5. So obviously it will not support in older browsers. Replace nav tag with div tag to make it work. (Check browser compatibility section in the provided link)
Fiddle (Replaced nav with div)
or else
Stick the below code in the Head tag
<!--[if lt IE 9]>
<script>
document.createElement('nav');
</script>
<![endif]-->
<style type="text/css">
nav{
display: block;
}
</style>
Source
Working Fiddle

Display:Block as an input submit, is it possible?

Is it possible to us a display:block for and input submit? or do I have to create an image for the submit button?
<div class="signin_btn">
<a title="Current Members Sign-In" class="l_helpl" href="/">SIGN-IN</a>
</div>
You can even do this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<style type="text/css">
.button
{
width: 100px;
height: 200px;
background-color: Red;
cursor: pointer;
display: block;
</style>
<div>
</div>
</body>
</html>
<a title="Current Members Sign-In" class="l_helpl" href="/">
<span class="signin_btn">
SIGN-IN
</span>
</a>
This should do the trick. And of course change your styling to suit the changes.
I think it is stupid for a person having more than 500 reps to ask this question. Anyway here is how I would do it
<div class="signin_btn">
<a title="Current Members Sign-In" class="l_helpl" href="/" style="display:block;">SIGN-IN</a>
</div>
But please be remembered that it is a bad practice to have a block level element inside an inline element.