In my website, I have a div with some content in it, which links to another part of the page. The code is shown here with placeholders for the actual content. When the div is clicked, the page does scroll as intended, but I want the entire div to darken on hover, so it is more clear to the user. I am not completely sure how to do this with divs in CSS. How could I do this?
<a href="#testing">
<div class="w3-third">
<img src="media\[image]" width="171" height="80">
<h1>
[title]
</h1>
<h3>
[item]<br>
[item]<br>
[item]
</h3>
</div>
</a>
<!DOCTYPE html>
<html>
<head>
<style>
#darkOnHover:hover {
background-color: #383838 ;
}
</style>
</head>
<body>
<a href="#testing">
<div class="w3-third" id="darkOnHover">
<img src="media\[image]" width="171" height="80">
<h1>
[title]
</h1>
<h3>
[item]<br>
[item]<br>
[item]
</h3>
</div>
</a>
</body>
</html>
You have a space in the hover selector. This matters because the space is the descendant selector in CSS
div.w3-third :hover{
background-color: #E3E3E3;
}
This means that only hovered descendants of .w3-third are affected by the rules. Remove the space.
check the example fiddle
You can use the filter property https://developer.mozilla.org/en-US/docs/Web/CSS/filter
div.w3-third:hover {
filter:brightness(50%);
}
<!DOCTYPE html>
<html>
<head>
<style>
.w3-third {
background: #216efc;
}
div.w3-third:hover {
filter: brightness(50%);
}
</style>
</head>
<body>
<a href="#testing">
<div class="w3-third">
<img src="media\[image]" width="171" height="80">
<h1>
[title]
</h1>
<h3>
[item]<br> [item]
<br> [item]
</h3>
</div>
</a>
</body>
</html>
use :visited CSS pseudo-class -> https://developer.mozilla.org/en-US/docs/Web/CSS/:visited
a:visited > div:hover {
filter:brightness(50%);
}
Related
When i click on
<a href="images/full/3.jpg#light"> <!-- redirect to Div id=light" -->
the image not display on Div Id=light but in a new page ;
fails to find a solution.
<html>
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- scripts -->
<link href="style1.css" rel="stylesheet" type="text/css" media="screen" />
<head>
scrollmenu1.light{}
</head>
<body>
<!-- div destination -->
<div id="light">
<img src="images/thumbs/9.jpg" height="190px">
</div>
<div class="scrollmenu1">
<a href="images/full/3.jpg#light"> <!-- redirect to Div id=light" -->
<img src="images/thumbs/8.jpg" height="190px">
<div class="caption">Caption 1</div>
</a>
<a href="images/full/4.jpg">
<img src="images/thumbs/4.jpg" height="190px">
<div class="caption">Caption 2</div>
</a>
</div>
</body>
</html>
CSS
/* sezione diapositive */
.images{
text-align:center;
margin:10px auto;
}
.images a{
margin:0px 3px;
display:inline-block;
text-decoration:none;
padding: 3px;
color:white;
}
.images a:hover {
background-color: blue;
}
/* scroll zona 2 */
div.scrollmenu1 {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu1 a {
display: inline-block;
color: white;
text-align: center;
padding: 3px;
text-decoration: none;
}
div.scrollmenu1 a:hover {
background-color: blue;
}
A link is an anchor that takes you to a place or location specified by the address, in this case the address in the href = " ". Sorry if that seems too obvious for you but I feel like I needed to remind you of it for the sake of clarity. With that being said, unless you make your code go to a certain div when you click on a link, it won't just magically do it by itself. You can redirect you page to the div you want by specifying the address in the href attribute of the link you click as in here:
<div class="scrollmenu1">
<a href="images/full/3.jpg#light"> <!-- redirect to Div id=light" -->
<img src="images/thumbs/8.jpg" height="190px">
<div class="caption">Caption 1</div>
</a>
<a href="#Id-Name-Of-The-Div-You-Want-To-Go-To-On-Click">
<img src="images/thumbs/4.jpg" height="190px">
<div class="caption">Caption 2</div>
</a>
</div>
Notice the difference in the href attribute in your link that I changed. This will redirect you to the div. However, like other have pointed out in their comments, you can't just make the image you clicked on to magically appear in the div you want by just having it in between your "a" tags like that. You need some javascript or other ways for that. By default, links don't work like that. Also, doing some research before posting questions is a good practice. It will help you learn things better.I hope that helped
Here's what I got. I'm trying to center pandora, rocket league and chess.com in the #header div. Right now they're on the left.
<!DOCTYPE html>
<html>
<head></head>
<body>
<link type="text/css" rel="stylesheet" href="abc.css"/>
<div id="top"></div>
<div id="header">
<div class="hovimg">
<a href="https://www.chess.com">
Chess.com
<span>
<img src="https://tmp-m.org/wp-content/uploads/2015/02/chess.jpg" height="100px" width="180px"/>
</span>
</a>
</div>
<div class="hovimg">
<a href="https://www.pandora.com">
Pandora
<span>
<img src="https://c.slashgear.com/wp-content/uploads/2016/10/pandora-rebrand-980x420.png" height="100px" width="150px"/>
</span>
</a>
</div>
<div class="hovimg">
<a href="steam://rungameid/252950">
Rocket League
<span>
<img src="http://static5.gamespot.com/uploads/screen_kubrick/1551/15511094/2999833-20141023_rocketleague_01.jpg" height="120px" width="200"/>
</span>
</a>
</div>
</div>
<div id="left"></div>
</body>
</html>
I'm a little stuck trying to figure out exactly what you're after, but here's one solution that may be what you're after:
.header:after { /* Clearfix */
content: "";
display: table;
clear: both;
}
.hovimg {
width: calc(100% / 3);
float: left;
}
Note: Has not been tested, so it is possible this may not work, however at least the theory behind this idea should be of use.
I am not sure if that's what you are looking for.
<div id="header" style="text-align:center">
This will center the content of the header division.
If you want to add it to your CSS:
#header{
text-align: center;
}
If you want all content in the center then you can apply text-align: center to #header.
Try this:
.hovimg { text-align: center; }
That's the class of the block elements your a tags, spans and images (which are inline elements by default) are in - it should center them (all together - they are in one line).
I have a div element I wish to incorporate into my page.
The div will contain text and a background image and I want each one on a new line with each one alternative from the left to the right
i.e.
Text box
Textbox
Text box
Here is the HTML code
<html>
<head>
<!-- This is a comment tag -->
<meta charset="UTF-8" />
<title>Lecture 4</title>
<link rel="stylesheet" href="ok.css" type="text/css" media="screen,projection" />
<link href='https://fonts.googleapis.com/css?family=Black+Ops+One|Open+Sans:600' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<header>
<img src="logo.jpg" alt="company logo" />
<h1>Mega Computers</h1>
<img src="twitter.png" alt="Twitter Link" style="width:50px;height:50px;border:0;"> <img src="facebook.png" alt="Twitter Link" style="width:50px;height:50px;border:0;"> <img src="flickr.png" alt="Twitter Link" style="width:100px;height:50px;border:0;">
</header>
<div id="main_body">
<h1></h1>
<div id="absolute">
<h1>ok</h1>
</div>
<div id ="absolute2">
<h1>ok</h1>
</div>
<footer>
<ul>
<li>© BB Industries Ltd 2015</li>
</ul>
</footer>
</div>
</body>
</html>
Here is a pastebin containing the code: http://pastebin.com/pQN9vPfF
However mine appears to be ignoring most of what I specified in the CSS, the background color and position are ignored, and there is no border. The relevant CSS is shown below
div.absolute {
position: relative;
top: 80px;
right: 0;
width: 200px;
height: 100px;
background-color: white;
border: 3px solid #73AD21;
}
Most of these are being ignored, the text sits on the left instead of the right and all the features of the box are not shown. It effectively gives me a transparent area with some text in, which is not what I want.
The problem is that you address <div id="absolute"> with div.absolute in the css. However, the . notation is for class names, not ids.
Solution:
either change the id on the div to a class
or change div.absolute in the css to div#absolute or just #absolute.
By the way, "absolute" is not the most terrific name for a div that is positioned relatively...
I have a quick question, when I try to style my image in this example, the text doesn't go down in its own line? How can I do that without adding many br's, is there a easier way to do this? I DO NOT WANT TO EDIT ON THE IMAGE STYLE (thats the whole point of this question)
JS Fiddle link: https://jsfiddle.net/3vy8p6fx/
How do I get the "Staff" to be its own line?
<strong>History</strong><br />
<br />
<strong>Mission</strong><br />
<br />
<strong>Leadership</strong>
<div class="image123">
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/Vujic-150x150.jpg">
</img>
</a>
<p align="center">
Jasmina Vujic
<br>Principal Investigator
</p>
</div>
<div class="imgContainer">
<a href="http://www.nuc.berkeley.edu/karl-van-bibber">
<img style="Padding-left: 5%;" src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/KarlVan-Resized-150x150.jpg">
</img>
</a>
<p align="center">
Karl Van Bibber
<br>Executive Director
</p>
</div>
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img style="Padding-left: 5%;" src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/Bradley_M_Sherrill-150x150.png">
</img>
</a>
<p align="center">
Bradley Sherill
<br>Deputy Exec Director
</p>
</div>
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img style="Padding-left: 5%;" src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/Vetter-150x150.jpg">
</img>
</a>
<p align="center">
Kai Vetter
<br>NNSA Liaison
</p>
</div>
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img style="Padding-left: 5%;" src="http://npwg.berkeley.edu/wp-content/uploads/2014/05/Leadership-Bethany-Goldblum.png">
</img>
</a>
<p align="center">
Bethany Goldblum
<br>Associate Director
</p>
</div>
</div>
<br>
<b>Staff:</b>
css:
.imgContainer
{
float: left;
}
In your fiddle, simply adding the following will resolve your issue:
.image123 { overflow: auto }
That being said, I would refactor this a bit to use something like flexbox. I took the liberty to rework your fiddle a bit to reflect better semantics, and more organized styling.
Fiddle: https://jsfiddle.net/3vy8p6fx/3/
The following material was in response to the original code provided by the OP.
This is because the image is positioned absolutely to the viewport, thus removed from the flow of the layout, overlapping the paragraph. Also, the image element is self-closing, thus </img> is not needed.
Furthermore, paragraphs are already block elements. So your inline styles are not needed. Remove all styles, and you'll have the effect you're desiring.
<!DOCTYPE html>
<head></head>
<body>
<img src="w3css.gif" />
<p>This is a heading.</p>
</body>
</html>
If you must have the image positioned absolutely, at the top of the document, you can give the <body> itself some additional padding to push the contents (the <p> in this case) down further:
<!DOCTYPE html>
<head>
<style>
body {
padding-top: 150px;
}
img {
top: 0; left: 0;
position: absolute;
width: 100px; height: 140px;
}
</style>
</head>
<body>
<img src="w3css.gif" />
<p>This is a heading.</p>
</body>
</html>
just change your
.imgContainer
{
float: left;
}
TO
.imgContainer
{
display: inline-block;
}
DEMO:
https://jsfiddle.net/3vy8p6fx/2/
NOTICE:
i changed some html syntax too, like:
instead of <img ...></img> i do <img ... />
break tags <br> to <br/>
...etc. look to my DEMO!
I'm currently in the process of creating a HTML/CSS layout for a Kiosk-style site.
However, I am having a few issues making the alignment of the images and text to work exactly how I want.
The logo and header should be fixed in the same place across every page, whereas I might need to expand the amount of buttons on-screen.
Here is the illustration of an example: Example Image, where:
Black box represents logo
Blue boxes represent individual buttons
Current HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="style.css">
<html>
<body background="background.png">
<div id="logo">
<img src="logo.png">
</div>
<br>
<div id="icons1">
<img src="button-wmcweb.png"></a>
</div>
<div id="icons1">
<img src="button-appointments.png"></a>
</div>
<div id="icons1">
<img src="button-prescriptions.png"></a>
</div>
<br>
<div id="icons2">
<img src="button-somccg.png"></a>
</div>
<div id="icons2">
<img src="button-patient.png"></a>
</div>
<div id="icons2">
<img src="button-nhschoices.png"></a>
</div>
</body>
</html>
CSS:
body {
text-align:center;
}
#mainContainer {
margin:0 auto;
}
#icons1 {
display: inline-block;
}
#icons2 {
display: inline-block;
}
Is using inline blocks the best practice for what I'm trying to achieve?
Any help would be much appreciated.
I have created for you a JSFiddle with what you want as a starting point.
Click for the full screen mode for the fiddle.
There is the full code below for the ease of referencing.
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body background="background.png">
<div id="logo">
<div id="logoimg">
<img src="http://cs614926.vk.me/v614926650/93b6/n9S5OGKt8L0.jpg" />
</div>
<div id="logotext">lorem ipsum</div>
</div>
<div class="row"> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a>
</div>
<div class="row"> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a>
</div>
</body>
</html>
style.css:
body {
text-align: center;
}
#logoimg, #logotext, .row > img {
display: inline;
}
#logo, .row {
margin: 30px 10px;
min-width: 1000px;
}
#logotext {
min-width: 320px;
vertical-align: top;
font-size: 36px;
padding: 0 20px;
}
img {
width: 320px;
resize: noresize;
}
a:link {
text-decoration:none;
}
For more info on HTML/CSS, consider checking the following w3school tutorials: HTML and CSS.
Your HTML was wrong in a few places. No opening <a> tag, multiple id's with the same name, and the <link> for the css needs to be inside the <head></head> tags, as shown below.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Is this what you're looking to achieve?
http://jsfiddle.net/Q8gVL/