Can anyone see why this isnt working? For this example the box should turn white when hovered over.
<style type="text/css" media="screen">
.center {
margin: 0 auto;
}
.box {
width: 250px;
height: 250px;
display: block;
background: #000;
border: 1px solid white;
float: left
}
.inner {
width: 175px;
height: 175px;
display: block;
margin-top: 15%;
margin-left: 15%;
background: #fff;
position: relative
}
.boxLink {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
width: 100%;
text-align: center;
line-height: 175px;
font-size: 30px
}
a:link.boxLink {
color:#000;
background: yellow
}
a:visited.boxLink {
color:#000;
background: yellow
}
a:hover.boxlink {
color:#fff;
background: white
}
a:active.boxLink {
color:#000;
background: green
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="inner">
<a class="boxLink" href="#">about</a>
</div>
</div>
</div>
You need to put the class name before :hover:
a.boxLink:link{color:#000; background: yellow}
a.boxLink:visited{color:#000; background: yellow}
a.boxLink:hover {color:#fff; background: white}
a.boxLink:active {color:#000; background: green}
While my suggestion is good practice, you actually made a spelling error on that hover line:
a.boxlink:hover {color:#fff; background: white}
CSS is case-sensitive, you need to make that l uppercase.
Related
I want to have 3 dots on my page to, for example, toggle the display of a contextual menu. How can I achieve this using CSS?
using an unicode char
.test:after {
content: '\2807';
font-size: 100px;
}
<div class="test"></div>
using background property
div {
width: 100px;
height: 100px;
background-image: radial-gradient(circle, black 10px, transparent 11px);
background-size: 100% 33.33%;
}
<div></div>
shadow
div {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: black;
box-shadow: 0px 40px 0px black, 0px 80px 0px black;
}
<div></div>
pseudo elements
div {
position: relative;
width: 20px;
height: 20px;
background-color: black;
border-radius: 50%;
}
div:before, div:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0px;
background-color: inherit;
border-radius: inherit;
}
div:before {
top: 40px;
}
div:after {
top: 80px;
}
<div></div>
Try this complete source code for 3 dot menu:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Three Dot Menu</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
*{margin: 0;padding:0px}
.header{
width: 100%;
background-color: #0d77b6 !important;
height: 60px;
}
.showLeft{
background-color: #0d77b6 !important;
border:1px solid #0d77b6 !important;
text-shadow: none !important;
color:#fff !important;
padding:10px;
}
.icons li {
background: none repeat scroll 0 0 #fff;
height: 7px;
width: 7px;
line-height: 0;
list-style: none outside none;
margin-right: 15px;
margin-top: 3px;
vertical-align: top;
border-radius:50%;
pointer-events: none;
}
.btn-left {
left: 0.4em;
}
.btn-right {
right: 0.4em;
}
.btn-left, .btn-right {
position: absolute;
top: 0.24em;
}
.dropbtn {
background-color: #4CAF50;
position: fixed;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: absolute;
display: inline-block;
right: 0.4em;
}
.dropdown-content {
display: none;
position: relative;
margin-top: 60px;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
<script>
function changeLanguage(language) {
var element = document.getElementById("url");
element.value = language;
element.innerHTML = language;
}
function showDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</head>
<body>
<div class="header">
<!-- three dot menu -->
<div class="dropdown">
<!-- three dots -->
<ul class="dropbtn icons btn-right showLeft" onclick="showDropdown()">
<li></li>
<li></li>
<li></li>
</ul>
<!-- menu -->
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
</body>
</html>
If you are using font-awesome, it is as easy as including the .fa-ellipsis-v style. Further documentation is found here: http://fontawesome.io/icon/ellipsis-v/.
Unicode includes ⠇ which is the Braille symbol for the letter "U". To use, just use the HTML entity ⠇ in your code.
Most voted answer showed me with dotted with 2 column, So I accomplished with below Unicode character.
<div>︙</div>
︙
With fontawesome.css
<i class='fa fa-ellipsis-v'></i>
With Glyphicons
<span class="glyphicons glyphicons-option-vertical"></span>
With css
.textSpan:after {
content: '\2807';
font-size: 3em;
color: #2e2e2e
}
HTML
<div class="dot"></div>
css:
.dot{
width: 10px;
height: 10px;
background: red;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
<script> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link></script>
<i class="fa fa-ellipsis-v col-2 mt-3 .text-light fa-lg" style={{"float":"right"}}></i>
This can be used to see three dots.This can be used in cards in react
I have this kind of complex set up with divs and links. Anyway, the logo in the top of left of my page is supposed to change when you hover over it, and it does. However, it also changes if your mouse goes anywhere in the top section of the page (outlined in red on the image)
Also when I click on the logo, the link doesn't work. I think it may have to do with the way I have the divs set up, but i'm not sure.
I'm still kind of new at all of this, and I'm a little overwhelmed at figuring out this issue. If you can help, I would appreciate it.
Below is my html, css, and an image to help show you what I'm talking about.
This is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Playing with backgrounds</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="topheader">
<a href="index.html">
<div id="logo">
<div id="navigation">
NEWS<br />
ABOUT<br />
VOLUNTEER<br />
DONATE<br />
CONTACT US
</div>
</div>
</a>
</div>
<div id="welcome">
<h1>Welcome</h1>
<h2>
To
<span class="gold"> Promise Land Partners</span></h2>
</div>
<div id="bottom_bar">
<p>COPYRIGHT DAVIDMORRIS © 2014 | NEWSLETTER | FACEBOOK
<span class="right">DESIGN: HANGING OUT</span>
</p>
</div>
</div>
</body>
</html>
This is my CSS
#charset "utf-8";
/* CSS Document */
body {
background-image: url(img/dot.png), url(img/background.jpg);
background-repeat: repeat, no-repeat;
background-position: top left, center center fixed;
background-size: auto, cover;;
margin: 0px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
#topheader {
height: 135px;
width: 100%;
overflow: hidden;
position: relative;
background-image: url(img/headerbar.png);
background-repeat: repeat-x;
}
#logo {
background-image:url(img/PLP.png);
background-repeat: no-repeat;
background-position: top left;
height: 100px;
width: 100%;
margin: 0;
padding: 0;
}
#logo:hover, #logo:active {
background-image:url(img/PLP_pushed.png);
}
#navigation {
background-image: none;
background-position: top left;
padding-left: 180px;
}
#bottom_bar {
background-image:url(img/bottom_bar.jpg);
position: fixed;
bottom: 0;
height: 27px;
width: 100%;
color: white;
}
#bottom_bar p {
text-align: left;
padding: 4px;
margin: 0;
}
.right {
float:right;
}
#welcome {
background-image: url(img/welcomepanel.png);
background-repeat: no-repeat;
position: relative;
left: 0;
top: 70px;
height: 261px;
width: 100%;
padding-top: 10px;
padding_left: 10px;
margin: 0;
}
h1 {
color:white;
padding-left: 90px;
font-size: 6em;
margin: 0;
margin-top: 8px;
}
h2 {
color: white;
font-size: 4em;
padding-left: 20px;
margin: 0;
line-height: .65em;
}
.gold {
color: #ee9f00;
font-size: .75em;
margin: 0;
}
a {
text-decoration: none;
color: white;
}
a:visited {
color: #c88601;
}
a:focus {
color: #ee9f00;
}
a:hover {
color: #ee9f00;
}
a:active {
color: c88601;
}
#navigation a {
text-decoration: none;
color: white;
}
#navigation a:visited {
color: white;
}
#navigation a:focus {
background-color: #ee9f00;
}
#navigation a:hover {
background-color: #ee9f00;
}
#navigation a:active {
background-color: #ee9f00;
}
You have your CSS set to change the image when you hover over #logo and #logo is set to width: 100%; Try changing the width of #logo or, if that breaks your style, add a child div to #logo in which you can change the background image.
See this fiddle for an example: http://jsfiddle.net/QDgVy/
HTML
<a href="index.html">
<div id="logo_container">
<div id="logo"></div>
<div id="navigation">
NEWS<br />
ABOUT<br />
VOLUNTEER<br />
DONATE<br />
CONTACT US
</div>
</div>
</a>
CSS
#logo_container {
background-repeat: no-repeat;
background-position: top left;
height: 100px;
width: 100%;
margin: 0;
padding: 0;
background-color: black;
}
#logo {
background-image:url(...);
width: 100px;
height: 100px;
display: block;
float: left;
}
#logo:hover, #logo:active {
background-image:url(... );
}
I have a problem concerning three divs in the header of my website: http://www.pianoson.nl.
What I want:
The middlemenu needs to fill up the space between the left and the right menu. When you make the browser smaller, only the middle-menu should get smaller too.
The middle menu needs to have a minimum width, so the text in it does not get messed up.
At the moment the rightmenu drops down below the leftmenu at some point, but the three menu's should always stay together in the top.
I hope this is possible with css/html.
Thanks in advance!
The html-page:
<body>
<div id="menu">
<div id="leftmenu">
<a href="http://www.pianoson.nl">
<div class="key white"ID="home">
<img src="http://www.pianoson.nl/images/home_32.png"></img>
</div></a>
<div class="key black"ID="Csharp"></div>
<a href="http://www.pianoson.nl/genres.htm">
<div class="key white"ID="repertoire">
<img src="http://www.pianoson.nl/images/music2_32.png"></img>
</div></a>
<div class="key black"ID="Dsharp"></div>
<a href="http://www.pianoson.nl/samples.htm">
<div class="key white "ID="samples">
<img src="http://www.pianoson.nl/images/music_32.png"></img>
</div></a></div>
<div ID="middlemenu"></div>
<div id="rightmenu">
<a href="https://www.linkedin.com/e/fpf/184174635">
<div class="key white "ID="linkedin">
<img src="http://www.pianoson.nl/images/linkedin_32.png"></img>
</div></a>
<div class="key black"ID="Csharp"></div>
<a href="https://www.facebook.comthijs.waleson">
<div class="key white"ID="facebook">
<img src="http://www.pianoson.nl/images/facebook_32.png"></img>
</div></a>
<div class="key black"ID="Dsharp"></div>
<a href="https://plus.google.com/u/0/112443072032497378793/">
<div class="key white "ID="googleplus">
<img src="http://www.pianoson.nl/images/google_32.png"></img>
</div></a></div>
</div>
And the css page:
body {
background-color: #F2F2F2;
width: auto;
overflow: hidden;}
div {
display: inline-block;}
#middlemenu {
height: 230px;
float: none;
width: 100%;
border: 1px solid #000000;
position: relative;
border-radius: 5px;
z-index: 1;}
.key {
float: left;
border-radius: 5px;
border: 1px solid #000000;
position: relative;
text-align:center;}
.white {
background-color: #FFFFFF;
height: 230px;
width: 40px;
z-index: 2;}
.black {
background-color: #000000;
height:150px;
width: 24px;
z-index: 3;
margin-left:-15px;
margin-right: -15px;}
.white:hover {
background-color: #FFFFFF;
height: 345px;
width: 60px;
z-index: 1;}
.key:hover img {
position: static;
vertical-align: -335px;
bottom: 5px;
padding: 14px;}
#menu{
width: 100%;
display: inline;
position: relative;}
#leftmenu{
float: left;}
#rightmenu{
float: right;}
div a div img{
vertical-align: -210px;
position: static;
bottom:5px;
color: #000000;}
Is this you are looking for..
modify the css to this
body {
background-color: #F2F2F2;
width: auto;
overflow: hidden;
}
div {
}
#middlemenu {
height: 230px;
margin-left: 130px;
margin-right: 130px;
min-width:300px;
border: 1px solid #000000;
position: relative;
border-radius: 5px;
z-index: 1;
}
#menu {
width: 100%;
position: relative;
}
#leftmenu {
float: left;
}
#rightmenu {
float: right;
position:absolute;
top:0;
right:0;
}
div a div img {
vertical-align: -210px;
position: static;
bottom:5px;
color: #000000;
}
.key {
float: left;
border-radius: 5px;
border: 1px solid #000000;
position: relative;
text-align:center;
}
.white {
background-color: #FFFFFF;
height: 230px;
width: 40px;
z-index: 2;
}
.black {
background-color: #000000;
height:150px;
width: 24px;
z-index: 3;
margin-left:-15px;
margin-right: -15px;
}
.white:hover {
background-color: #FFFFFF;
height: 345px;
width: 60px;
z-index: 1;
}
.key:hover img {
position: static;
vertical-align: -335px;
bottom: 5px;
padding: 14px;
}
Im trying to make a couple of hexagons in css /html to resemble something like this:
http://www.asta-uk.com/sites/all/themes/asta/logo.png
now i have made one hexagon, and tried to copy it two other times but the top part doesn't seem to show on the second two.
any ideas why?
PS use IE, reason being it will only ever be used in an IE environment.
<html>
<HEAD>
<STYLE>
.top
{
height:0;
width:50;
display: block;
border:15px solid red;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:red;
border-left-color:transparent;
}
.middle
{
height: 20px;
background: red;
width: 50px;
display: block;
}
.bottom
{
height:0;
width:50;
display: block;
border:15px solid red;
border-top-color:red;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
<!-- Second Hex-->
.top2
{
height:0;
width:50;
display: block;
border: 15px solid black;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:black;
border-left-color:transparent;
}
.middle2
{
height: 20px;
background: black;
width: 50px;
display: block;
}
.bottom2
{
height:0;
width:50;
display: block;
border:15px solid black;
border-top-color:black;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
<!--hex 3-->
.top3
{
height:0;
width:50;
display: block;
border:15px solid green;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:green;
border-left-color:transparent;
}
.middle3
{
height: 20px;
background: green;
width: 50px;
display: block;
}
.bottom3
{
height:0;
width:50;
display: block;
border:15px solid green;
border-top-color:green;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
</STYLE>
</HEAD>
<BODY>
<div class="hexagon"style="position: absolute; top: 0px; left: 2px;">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<!-- GREEN-->
<div class="hexagon3" style="position: absolute; top: 48px; left: 55px;">
<span class="top3"></span>
<span class="middle3"></span>
<span class="bottom3"></span>
</div>
<!-- black-->
<div class="hexagon2" style="position: absolute; top: 120px; left: 40px;">
<span class="top2"></span>
<span class="middle2"></span>
<span class="bottom2"></span>
</div>
</BODY
</html>
Remove your comment from the css
like <!-- Second Hex--> and <!--hex 3-->
they are buggy.
These comments are meant to be in HTML only not for css
for css use this syntax --> /* A comment */
You have typo in width:50; Add px so it should be width:50px; for .top, .top2, .top3
So my CSS layout was all fine until I wanted to add some into the content area of my web page.
What I'm trying to add into the content section is a wrapper box which contains a graph on the left and a bunch of little info boxes on the right, and potentially an info area underneath those two with 100% width of the content box.
But as soon as I add that in, it pushes my User Info div down below Content. =/ So I guess what's asking is how to create containers of divs within my content section that won't affect things like my sidebar?
Here's my code:
<div id="wrapper">
<div id="header"> </div><!-- #header-->
<div id="nav"> </div>
<div id="middle">
<div id="container">
<div id="content"><!-- content -->
<div id='containerGraph'>
<div id='sngAnimals'></div>
<div id='graph'><img src='./lib/pChart2.1.1/examples/chartAnimalKillsPerDay.php' width='x' height='y' id='graphImg'/></div>
<div id='bottomCont'></div></div>
</div><!-- #content-->
</div><!-- #container-->
<div class="sidebar" id="sideLeft">
User info
</div><!-- .sidebar#sideLeft -->
</div><!-- #middle-->
</div><!-- #wrapper -->
And the css:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-image:url('/mcimages/bg.png');
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
color: white;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
#content {
padding: 10px 0 10px 195px;
background: #666666;
}
#containerGraph {
border-style:solid;
border-width:5px;
width: 75%;
position:relative;
}
#graph {
width: 249px;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:left;
}
#sngAnimals {
width:50%;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:right;
}
#bottomCont{
position: relative;
clear:both;
}
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 175px;
margin-left: -100%;
position: relative;
margin-top: 10px;
padding-left: 5px;
padding-top: 10px;
border-right-style: solid;
border-right-color: black;
border-right-width: 1px;
}
#friend {
float: left;
background: #B5AAFF;
border:1px solid;
position: relative;
top:5px;
left:0px;
margin-left:10px;
width:175px;
height:175px;
}
You didn't close a div and your CSS had errors as well:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="A short description." />
<meta name="keywords" content="put, keywords, here" />
<title>CraftLink</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="wrapper">
<div id="header">HEADER CONTENT</div><!-- #header-->
<div id="nav">
Nav item 1
Nav item 2
Nav item 3
Nav item 4
</div>
<div id="middle">
<div id="container">
<div class="sidebar" id="sideLeft">USER INFO GOES HERE.</div><!-- .sidebar#sideLeft -->
<div id="content"><!-- content -->
<div id='containerGraph'>
<div id='sngAnimals'></div>
<div id='graph'><img src='./lib/pChart2.1.1/examples/chartAnimalKillsPerDay.php' width='x' height='y' id='graphImg'/></div>
<div id='bottomCont'></div>
</div>
</div><!-- #content-->
</div><!-- #container-->
</div><!-- #middle-->
</div><!-- #wrapper -->
<!-- #footer -->
<div id="footer">
<h1>Footer Stuff</h1>
</div>
</body>
</html>
The CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-image:url('/mcimages/bg.png');
}
a {
color: white;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
color: white;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
height: 100px;
background: #999999;
text-align: center;
font-size: 200%;
}
#nav {
height: 25px;
background: #555555;
text-align: center;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
#content {
padding: 10px 0 10px 195px;
background: #666666;
}
#containerGraph {
border-style:solid;
border-width:5px;
width: 75%;
position:relative;
}
#graph {
width: 249px;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:left;
}
#sngAnimals {
width:50%;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:right;
}
#bottomCont{
position: relative;
clear:both;
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 175px;
position: relative;
margin-top: 10px;
padding-left: 5px;
padding-top: 10px;
border-right-style: solid;
border-right-color: black;
border-right-width: 1px;
}
#friend {
float: left;
background: #B5AAFF;
border:1px solid;
position: relative;
top:5px;
left:0px;
margin-left:10px;
width:175px;
height:175px;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
width: 1000px;
margin: -100px auto 0;
height: 100px;
background: #BFF08E;
}
/* Progress bar
----------------------------------------------------------------------------*/
.meter-wrap{
position: relative;
}
.meter-wrap, .meter-value, .meter-text {
/* The width and height of your image */
width: 155px; height: 30px;
}
.meter-wrap, .meter-value {
background: #3D352A url(/path/to/your-image.png) top left no-repeat;
}
.meter-text {
position: absolute;
top:0; left:0;
padding-top: 5px;
color: #fff;
text-align: center;
width: 100%;
}