I've put my code into a jsFiddle because I wasn't able to reproduce it with a smaller example.
I have a few menu items that show their submenu when hovered. I wanted to add a title that should also be shown on hover but the css class doesn't seem to work.
Here's the rule, it's on line 60 in the fiddle:
li:hover > .skimap-control-title {
display: block;
}
The funny thing is if I add the exact same rule in the developer tools it suddenly works.
I hope someone here can help me.
I think the problem is with some syntax/formatting errors. I wasn't able to narrow it down, but when you click "Tidy Up" in JSFiddle, it seems to work as expected. See updated fiddle
Also why do you have <ul></ul>? What is the point of these empty tags?
I was able to fix it thanks to #cocoa
I just copied the rule after using "Tidy up" in my fiddle and replaced the rule in my css file and it works.
The strange thing is in the git diff the two lines look exactly the same.
I'm clueless what the difference is here, but it works.
Without knowing your code, we can only guess.
But here's an example on how to display a child when the parent is in hover state:
<div class="outer">
<div class="show-on-hover">Hello there!</div>
</div>
and here's the CSS:
.outer {
width: 150px;
height: 150px;
display: block;
border: 1px solid green;
}
.show-on-hover {
display: none;
}
.outer:hover {
background: #ccf;
}
.outer:hover .show-on-hover {
display: block;
}
Here's a working fiddle: http://jsfiddle.net/an5v2atn/1/
Related
Not sure if anyone else has come across this - I am running Safari 12.
I have a very simple setup to demonstrate this bug.
HTML:
<div class="contents">
<p>Hello!</p>
</div>
CSS:
.contents {
display: contents;
}
.hide {
display: none;
}
See this CodePen: https://codepen.io/ericxgao/pen/dreqWp
If you go to the CodePen, inspect the text and then change the class of the wrapping div from "contents" to "hide", nothing actually happens. In every other browser, the text disappears but in Safari, it doesn't seem to apply. This appears to be a bug documented here: https://bugs.webkit.org/show_bug.cgi?id=188259
I'm curious if there's any clever workarounds available here. What's the cleanest way that I can preserve this behavior without overhauling my existing code that uses this toggle?
I ended up using this instead until Safari fixes the issue.
.hide * {
visibility: hidden;
width: 0;
height: 0;
}
I have having a few problems, with what should be a simple task.
I have spent a good while trying to fix them, but no luck.
Centre the Input boxes within the div - tried this solution, (didn't work): http://jsfiddle.net/pjAHG/27/
input {
display: block;
margin: auto;
max-width: 80%;
}
Make the background image fill the full screen, only to the bottom of my timer div... if I use a solid colour, it fills the screen though :/ I have tried all the ways I can find online, but no luck.
Media query does not seem to change the size of the text/submit button.
If anyone could share some info, or help for these problems, I would be grateful.
Here is my code:
https://codepen.io/anon/pen/dVNZZO
Thanks :)
Try this
.input-group{
max-width:80%;
margin:0 auto;
}
and
#media (max-width:768px) {
.btn-lg{
display:block;
max-width:100%;
white-space:normal;
}
.lead-subtitle {
color: #dbdbdb;
text-decoration: underline;
font-size: 1em;
display:block;
}
}
here is the updated pen.
centered the form element instead of the input fields as they are
set to display: table by bootstrap anyway
this question doesn't make quite sense to me. I have added a sample image and it fills the whole bg, have a look
Bootstrap sets white-space: nowrap for the .btn class; I overwrote it for you
https://codepen.io/anon/pen/xXgPjZ
I am trying to build a website and have encountered a tricky issue with li having display: inline-block; property.
My website is: http://www.gypsytours.in/
If you visit this site, on homepage, I have a horizontal list under the heading "Himalayan Packages by Gypsy Tours".
In this list, I have a block element A with display: block; property.
Here are my simplified codes:
HTML:
<div id="menu-board">
<ul>
<li>Elephant Safari Packages in Jim Corbett Park, India</li>
<li>Chopta Tungnath Trekking Package</li>
<li>River Rafting Packages in Rishikesh</li>
</ul>
</div>
CSS:
#menu-board
{
text-align: center;
}
#menu-board ul
{
}
#menu-board ul li
{
float: none;
display: inline-block;
}
#menu-board ul li a
{
display: block;
width: 180px;
height: 130px;
background-color: #C50000;
text-align: center;
overflow: hidden;
}
Now, the issues is: My link-text in 2nd box, is not longer than two lines, unlike the other two boxes where link-text spreads in three lines. This boxes look perfectly fine in IE and FireFox but when I open the site in Google Chrome or Safari, the box in the center (with relatively shorter text) pops down. If I make the text long enough to span in three lines, it comes back to original position. I am not able to figure out how to fix this. My apologies for not being able to put across my issue in simple and short manner. I am relatively inexperienced with web-designing. I will really appreciate if you guys can help me out. Thanks in advance.
Ok, after more digging, I found out that it was a computed float issue.
I believe that adding:
#splash-list ul li a {
float:left;
}
will solve the problem. It may compute very slightly differently on other browsers, but at least they'll be in the proper line.
Hope this helps!
Mason
I have an image like such:
and would like to when i hover, to get another Transparent image on TOP of it.
this is the css:
#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
}
#imagebox:hover {
background: url("upplyst-platta.png") no-repeat 0 0;
}
But it is behind the picture, any way to solve this in css? or i have to fix it with javascript?
The image on bottom is generated from db(later on) and cannot be set in css
EDIT:
I saw this solution:
http://jsfiddle.net/bazmegakapa/Zf5am/
but cannot get it to work. even though i copy the whole code, what can be the problem?
Use the z-index to state which order the elements are drawn in.
You can find more information here: http://www.w3schools.com/css/pr_pos_z-index.asp
A few other things as well, you might want to add relative image placement based on the parents position and where you say Width in the first style, it should be all lowercase width :-P
Hope this is what you are looking for.
#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
background: url("upplyst-platta.png") no-repeat 0 0;
}
#imagebox img{
display: none;
}
#imagebox:hover img{
display: block;
}
and the html structure should be:
<div id="imagebox"> <img src="iWantToShowThisImage.jpg" /></div>
Hope this works for you or provides some inspiration: jsfiddle example #1
Update based on first comment:
Do you mean like this? jsfiddle example #2
2nd update based on edit in question:
Well, the reason for not working is that the hoverimage isn't just transparent: it's a modification of the original.
But it clarifies your wish. I really think my first example is the solution you're looking for. Just replace the url in the style sheet with your transparent png file name.
I have a menu for which I wanted all of the space around the text, within each individual item, to take the user to the specified page. I looked around on the web and found that the best solution is to set the "a" display to block, as follows:
a {
display: block;
height: 100%;
text-decoration: underline;
}
I have managed to get this working perfectly but want to put images in some of them - like a calendar icon for the events option. I notice it is now underlining the links too. Is there any way to get rid of this? The links have padding-right set to 5px if that helps narrow down the cause / solution.
So all the relevant code is as follows:
a {
display: block;
height: 100%;
text-decoration: underline;
}
a > img {
text-decoration: none;
border: none;
padding-right: 5px;
width: 1.8em;
height: 1.8em;
}
Many thanks in advance.
Regards,
Richard
PS It is Google Chrome in which I am having this problem - I have not currently checked it in any other browsers.
Images are inline elements, so they are treated as part of the text. It's not the image that is underlined, it's the text that contains the image that is underlined, so it doesn't help to prevent underlining for the image.
You can turn the images into block elements by floating them, then they are not part of the text:
a > img {
float: left;
border: none;
padding-right: 5px;
width: 1.8em;
height: 1.8em;
}
I think your best option is to get rid of the underline text-decoration property for the a element, put the link text in a span with common class, and apply text-decoration: underline to that class.
I was running in the same doubt. The text-decoration set to none works for me:
<a href="..." style="text-decoration:none;">
<img src="...">
</a>
As was said befor, you can use a class to make this more generic.
Nice question by the way, It looks totally strange in my website when I saw some minus at the bottom of images. Then I realize that was an underlying.
I tried eveything in the comments to no avail, what worked for me was modifying div which contained all the tags. I have an inkling that they are only underlined when in their absolute default position. Here was the div each tag was wrapped in, no other tricks were applied.
.myDiv {
display: flex;
justify-content: center;
align-items: center;
}