Show elements on hover with CSS - html

I want to show 2 elements (one div, inside it one buttom) when I hover an image. I got some problems: It didn't works!
My HTML code:
<div class="discord-container">
<center>
<img src="https://i.imgur.com/7K3OLPH.png", class="discord-image", width="75"/>
<div class="discord-poupup" id="poupup-element">
<button onClick="discord.logout()" class="logout-button" id="poupup-element">LOGOUT</button>
</div>
</center>
</div>
On CSS:
.discord-image {
border: solid #7289DA;
border-radius: 100px;
}
img.discord-image:hover + div#poupup-element:hover {
display:block;
}
#poupup-element{
display: none;
}
The 'discord-poupup' class on div just change background colors and positions, it don't touch on display.
Well, I want to show everything with id 'poupup-element' when I hover the image with class 'discord-image' (and preferably keep it showing while the mouse cursor is hoving it AND its already active). I tried lots of things, but nothing works :c Can someone help-me?
(I'm also using Shiny (from R lang). If there is an easier way to do what I want please tell-me)

Like others already mentioned, 'id' should be unique. You could try giving your div and button a class called "poupup-element".
Also, you have commas in your img tag that should not be there.
HTML
<div class="discord-container">
<center>
<img src="https://i.imgur.com/7K3OLPH.png" class="discord-image" width="75"/>
<div class="discord-poupup poupup-element">
<button onClick="discord.logout()" class="logout-button poupup-element">LOGOUT</button>
</div>
</center>
</div>
.discord-image {
border: solid #7289DA;
border-radius: 100px;
}
.poupup-element{
display: none;
}
img.discord-image:hover .poupup-element {
display:block;
}

I guess there was an issue with your HTML. You should not have two same ID's. Also you should not put commas in your HTML tags.
here's the solution
css:
#poupup-element{
display:none;
}
.discord-image:hover + #poupup-element{
display:block;
}
Edit:
html
<div class="discord-container">
<center>
<img src="https://i.imgur.com/7K3OLPH.png" class="discord-image" width="75" />
<div class="discord-poupup" id="poupup-element">
<button onClick="discord.logout()" class="logout-button" >LOGOUT</button>
</div>
</center>
</div>

Related

How can i add a background color to a div(that has an id), that is inside a wrapper?

Below is my code. Im using the framework skeleton. I have separate divs that represents three,seven and six columns that equal 16(skeleton is a 16 column framework). Therefore the the 3 divs are all inline accross the screen. The wrapper has a background color grey, therefore making the whole scree grey. However, i want to make the background color of the 3 div classes black. Any ideas? As ive tried to put all 3 divs into another div with an id, and set the background black however did not work?
<div id="wrapper">
<div class="container">
<div class="three columns">
<img src="images/ste.jpg" alt="" height="150px" width="160px" />
<hr />
</div>
<div class="seven columns">
<div id="namechange" class="six columns">
<u><h4>Stephen Carter</h4></u>
<p>I am currently studentying at Leeds Beckett University, and this module is called Advanced Internet Development B </p>
<hr />
</div>
</div>
<div id="navchange" class="six columns">
About
Portfolio
Blog
Contact
<hr />
</div>
</div>
</div>
Add background color to your classes
.three, .seven, .six{
background-color:black;
}
Fiddle with skeleton
Maybe I'm thinking to easy, but how about:
#wrapper {
background: grey;
}
.three, .seven, .six {
background: lightblue;
}
See this JSFiddle.
If it doesn't work for you, please share your CSS.
//try this css code
.three, .seven, .six {
background-color:#000000 !important;
}
Did you try this?
#wrapper .three, #wrapper .seven, #wrapper .six {
background-color:#000000 !important;
}
May be your div#wrapper background color overrides the div#wrapper inside div background color,so add like below:
#wrapper{background:grey;}
#wrapper div{background:black;}
or add !important like below:
#wrapper div{background:black !important;}
You just need to do that :
<div style="background-color: #000000;">
And change the hexadecimal value for the color you want.
Or do that with CSS by usign your classes :
.yourClass {
background-color: #000000;
}

Hyperlink not responding

My landing page has a slideshow with text and links that direct the visitor to it's corresponding page.
Landing page link: http://karenrubkiewicz.com/martin/
The yellow arrow in the second box should be a clickable link, but it doesn't respond.
Here is my coding:
HTML
<div id="maximage">
<div>
<img src="images/00_landing page/backgrounds/background_01.jpg" alt="" width="1400" height="1050" />
<div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>
<div>
<img src="images/00_landing page/backgrounds/background_02.jpg" alt="" width="1400" height="1050" />
<div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>
ETC...
</div> <!--END MAXIMAGE DIV-->
CSS
#maximage {
/* position:fixed !important;*/
display:block;
}
.in-slide-content {
font-family: 'Oswald', sans-serif;
font-size:16pt;
letter-spacing:1px;
position: absolute;
right:63px;
bottom:240px;
width: 220px;
background: rgba(0,0,0,0.8);
color:#FFF;
text-align:center;
text-decoration:none;
padding-top:23px;
padding-bottom:23px;
-webkit-font-smoothing:antialiased;
}
.in-slide-content2{
position: absolute;
right:63px;
bottom:162px;
width: 220px;
background: rgba(0,0,0,0.8);
text-align:center;
padding-top:25px;
padding-bottom:25px;
-webkit-font-smoothing:antialiased;
}
.in-slide-content2 a{
position: relative;
display:block;
}
I am using a maximage plugin, I am not sure whether that could be a possible cause of inference.
One more note, in my HTML, when I remove a certain div, the link begins to work, only then my slideshow falls apart.
EXAMPLE
<div id="maximage">
<div> <----REMOVE THIS DIV
<img src="images/00_landing page/backgrounds/background_01.jpg" alt="" width="1400" height="1050" />
<div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div> <-----AND REMOVE THIS DIV
ETC...
</div> <!--END MAXIMAGE DIV-->
I'm really stuck on this one.
Thanks in advance!
Place this in CSS:
#nav {
z-index: 2;
}
body .mc-cycle {
z-index: 0;
}
If it wont help, then this:
#nav {
z-index: 2 !important;
}
body .mc-cycle {
z-index: 0 !important;
}
Looking at your codes on your site, (which btw look different from what you posted here), I think things get complicated when your in-slide-content and in-slide-content2 divs are enclosed in your mc-image with its background set to your image file (instead of using an img tag).
This is what your current codes look like:
<div class="mc-image " ... background-image: url(http://karenrubkiewicz.com/martin/images/00_landing%20page/backgrounds/background_01.jpg);" data-href="">
<div class="in-slide-content">PLACES</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>
Try convert your mc-image to an image tag and extract your in-slide-content and in-slide-content2 out of your maximage.
I think this live demo on jsfiddle is very similar to what you are trying to do.
The reason why manipulating the z-index attribute (of the image, the anchor tag etc.) in your css script probably won't work is because the jquery.cycle.all.js script assigns all your images with some high value z-index on start-up so that they can stack on top of each other.
// line 295 - 303
// set position and zIndex on all the slides
$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
var z;
if (opts.backwards)
z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
else
z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
$(this).css('z-index', z)
});
As the script cycles through your images, some codes (I haven't figured out where yet) will reset the z-index of that image to z+1, so that current image will be stack on top of the rest. I tried setting the z-index of some of your HTML elements to some ridiculous high number but to no avail. Anyway, I still think the cleanest way to solve this is to look at the fiddle I shared.

Using a:hover to display a div

I'm trying to display a div class but it won't show. I'm not sure what I'm doing wrong. Here's what I'm doing.
So, I have a table. The point of this is to hover on one of the tables contents and show a display with more details of the link hovered. In this case "Hover Me!"
file.html
<div id="bigBody">
<table class="tableClass">
<tr>
<td>
<a class="hoverHereToPopUp">Hover Me! </a>
</td>
</tr>
<table> /*Just to keep the table short */
<div class="hoverPopUp">
<p>This is a Hover</p>
</div> /*EO HoverPopUp */
</div> /*EO bigBody */
style.css
div.hoverPopUp {
display:none;
width:auto;
height:auto;
border:dotted purple;
}
a.hoverHereToPopUp:hover + div.hoverPopUp {
display: block;
}
I added some styles to attempt to debug my issue:
a.hoverHereToPopUp {
color:red;
border:green dotted;
}
a.hoverHereToPopUp:hover {
color:white;
border:yellow dashed;
}
The hover is changing the color but the div isn't showing.
What am I doing wrong?
Viewing this on chrome.
The Hover is inside a table. which is inside a DisplayDiv, in that container there's another divContainer for the popUp. So, BIG box has 2 Small Boxes, one with the Hover(a table) and another(a div) for the Pop Up. Is this the problem????
If I understand correctly, the hidden div needs to be inside the div which gets the hover.
Something like this:
<div>
Hover over me
<p>This is hidden</p>
</div>
See: http://jsfiddle.net/webbymatt/URwNz/
The current way you have your markup means this will not work with CSS. What you need to do is put the hidden area INSIDE the hoverable div. Like this:
<div id="bigBody">
<table class="tableClass">
<tr>
<td>
<a class="hoverHereToPopUp">
Hover Me!
<p>This is a Hover</p>
</a>
</td>
</tr>
</table> /*Just to keep the table short */
</div>
Then with your CSS
.hoverHereToPopUp p {
display: none;
}
.hoverHereToPopUp:hover p {
display: block;
}
From what #Slevin pointed out, the code provided is working fine. I would recommend look at the rest of your code of inspecting the live code to see if you have the element you're trying to show hidden elsewhere.

Even out space layout (table)

For a web application I'm creating (in Umbraco, but don't think that really matters in this case) I need a page that can show an overview of different media types; audio, video and images.
No problem there, for images and videos (hosted on YouTube) I will show a thumbnail and for audio I will show a static image.
The rough layout of an item will be that the image is shown on top, and below that is some info like the title and a short description.
Now because of the difference in dimensions of the images (thumbnails can have a variable size, the audio static image will probably always be smaller than the thumbnails, etc.) one item (or column if you will) can be of less width than another.
What I would like to do is show three items per row, and when the row isn't completely filled I would like to fill it up with a colored box. But that box should not always be at the end, it could also be in between, or the beginning. It just is inserted 'randomly' when a space fill is needed.
Because a picture says more than 1000 words (wire-frame of what I'm trying to describe);
Now my question; is this at all possible? If yes, how?
I can't wrap my mind around it, it can't be done in pure HTML and CSS I think. Because you couldn't determine how big an item is and if a 'filler' is needed.
The rough HTML I have right now is something like this:
<table id="portfolio">
<tr>
<td>
<div class="portfolioItem">
<div class="portfolioItemImage">
<a rel="prettyPhoto" href="http://www.youtube.com/watch?v={video}"><img src="http://img.youtube.com/vi/{video}/1.jpg"/></a>
</div>
<br clear="both" />
<div class="portfolioItemDescription">
<h3>Title</h3>
<p>Description lorem ipsum etc.</p>
</div>
</div>
</td>
</tr>
</table>
Of course there is some more dynamic stuff in there to determine whether it is a video, audio or image, determine when to start a new row, etc. but that isn't relevant here.
Here is the CSS associated with it:
#portfolio {
width:100%;
}
#portfolio td {
width:33%;
}
#portfolio .portfolioItem {
border: 1px solid #000;
}
#portfolio .portfolioItem .portfolioItemImage {
margin:0px;
padding:0px;
}
Again; can this be done? And how?
Thank you!
I think that what you want is jQuery Masonry or the Wookmark jQuery Plugin.
I would create the grid using DIVs instead of TABLES, regardless I think this is what you are looking for?:
#portfolio td
{
min-width:33%;
}
EDIT:
Here is a rudimentary example of a grid created with DIV's:
http://jsfiddle.net/rdtnU/
<div class="con">
<div class="row">
<div class="cell">a</div>
<div class="cell">b</div>
<div class="cell is_last">c</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell">e</div>
<div class="cell is_last">f</div>
</div>
</div>
.con {}
.row { width:340px; margin:0 0 20px 0; overflow:hidden; }
.cell { width:100px; margin:0 20px 0 0; float:left; background:orange; }
.is_last { margin:0; }​
I would use the div's as suggested but I would not limit myself to the row/columns as stated. I would use a more fluid layout even if it is for a specified width of a certain section.
The following will only work if you know the width of the div with the content, to allow the floating to occur (this could work if there is a min-width or if your code can determine the size of the image)
Here is the HTML
<div class="elements">
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
thisonewillpushthewidthoftheboxfartherthanthe150pxwidth
</div>
<div class="singleElement">
small text
</div>
</div>
Here is the CSS (I put some simple background colors so you can see what is going on with the width and how things are tucked in where space is available.
.elements { overflow: hidden; width: 500px; background: #FCC; }
.singleElement { padding: 5px; white-space:nowrap; float: left;
height: 200px; min-width: 100px; background: #CCC;margin: 0 10px 10px 0; }
Please note the details of the styles are just for demonstrating the example. They can be altered to fit your need.
EXAMPLE: Here is the example in jsFiddle.

How to align an image of any size from the centre, rather than the top/bottom/sides, using css

I'd like to be able to position an image (blue) so that what ever size it is, it is always centered relative to the baseline of the div behind (red, not the containing div). The div behind will always be the same size/position.
Preferably this would be using css only as I'm using drupal and I don't know much about editing beyond the tpl files.
Thanks!
EDIT: Here's the layout http://pastebin.com/SisQHM4y
Hi you can do this pure css as like this
css
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 500px;
height: 400px;
background:green;
}
HTML
<div class="wraptocenter"><img src="//?" alt="images" /></div>
Live demo http://jsfiddle.net/rohitazad/tvrMp/
More information about this http://www.brunildo.org/test/img_center.html
​
Perhaps something like this:
<style>
#blue { margin-left:auto;margin-right:auto; }
</style>
<div id="red">
<div id="blue">
<img src="?" id="myImg" />
</div>
</div>
EDIT
I see, so you wish to center the x-axis horizontally, not vertically. And that link is a little messy. Perhaps you could try to
<style>
.user-picture { margin-top: auto; margin-bottom: auto; }
</style>
<div class="content">
<div class="profile" typeof="sioc:UserAccount" about="/users/diver1">
<div class="user-picture">
<a href="/users/diver1" title="View user profile." class="active">
<img typeof="foaf:Image" src="http://waterworksworldwide.com/sites/default/files/pictures/picture-126-1333572014.gif" alt="Diver1's picture" title="Diver1's picture" />
</a>
</div>
</div>
I am still having a little bit of a hard time seeing where the overlap between areas is as suggested by the red and blue in the question. If there is no overlap with my suggestion then please let me know and perhaps we can try to use some variations with position: absolute;