This is undoubtedly a stupid error, but I am going crazy trying to find it. In the following code for a calendar, links if there is an event and also links for today are not clickable.
Note I have substituted www.google.com for the hyperlink. In the actual app it points to the daily view of calendar.
Would be extremely grateful if someone could spot the error. Thank you.
Links for 2, 3, 4 and 7 work but links for 5, 6 and 8 do not work.
The jsfiddle is here.
Here is the same code as in the fiddle:
CSS:
div.event {
position:relative;
vertical-aligh:top;
z-index:3;
top:25px;
text-width: 70px;
}
a.event {
position:relative;
vertical-align:top;
z-index:3;
// top:-15px;
text-width: 70px;
}
a.day-number {
vertical-align:top;
background:#999;
z-index:2;
top:0px;
padding:4px;
color:#fff;
font-weight:bold;
width:18px;
text-align:center;
float:right;
}
a.theday-number {
vertical-align:top;
background:#999;
z-index:2;
top:0px;
padding:4px;
color:#fff;
font-weight:bold;
width:18px;
text-align:center;
float:right;
background-color:red;
}
HTML:
<table>
<tr class="calendar-row"><td class="calendar-day"><span style="position:relative;height:400px;width:70px;">2<p> </p><p> </p></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;">3<p> </p><p> </p></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;">4<p> </p><p> </p></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;">5<div class="event">6:00 PM<br>drinks</div></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;">6<div class="event">Test</div></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;">7<p> </p><p> </p></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;">8<div class="event">6:00 PM<br>party</div></span></td>
</tr>
</table>
You need to move the <p> and <div> tags out of the <span>
<p> and <div> are block-level elements and a <span> is an inline element, and you can't have a block element inside an inline element.
When using position:absolute;and links together, there are issues with z-index. In order for the link to work, add a high z-index value,
For example,
z-index:9999999;
Instead of div within a span use other html element. It seems this is the problem. If you remove those divs, elements are clickable..
Add a display block to your span inside your td calendar-day and it will work.
I see the links are clickable if you remove the <span></span> tag which you have placed inside <td></td>. I suggest you add styling inside <td> instead of using <span>.
Try. It might work :)
From what I can tell, you have some elements overlapping one another. Part of the problem is that you are setting width on an inline element (span).
Discussed here on stackOverflow:
CSS - width not honored on span tag
I added the display: inline-block property to your span tags and also added some background color just for contrast here:
<span style="display: inline-block;position:relative;height:400px;width:70px;">
http://jsfiddle.net/6YRRF/16/
All your links seem to be working now.
Hope this helps!
You can either remove <p> tag or provide css(display: inline-block) to <p> tag.
For those who didn't address their problem out of the answers provided here, check html element or it's parent element to don't have this CSS property:
pointer-events: none;
Please remove the span wrap inside td. And Yes! correct your css.
<style>
div.event {
position:relative;
vertical-align:top;
z-index:3;
top:25px;
width: 70px;
}
a.event {
position:relative;
vertical-align:top;
z-index:3;
// top:-15px;
width: 70px;
}
a.day-number {
vertical-align:top;
background:#999;
z-index:2;
top:0px;
padding:4px;
color:#fff;
font-weight:bold;
width:18px;
text-align:center;
float:right;
}
a.theday-number {
vertical-align:top;
background:#999;
z-index:2;
top:0px;
padding:4px;
color:#fff;
font-weight:bold;
width:18px;
text-align:center;
float:right;
background-color:red;
}
</style>
Related
I am going to create a cascading menu with divs, for example when an <a> hovered another div shows:
I can create it with li and ul but want to do it with div.
My problem: When mouse pointer is on <a> the div shows but when mouse pointer come to div, div will disappear (display:none;)
this is my demo
<div id="topDiv">
<img src="http://www.balit.ir/kgl/pic/user/logo.png" id="logo"/>
<div id="rightTopMenu">
<a href="about.html">About KGL
<div class="hoverMenuDiv">
About Samuel
About Hoshange
About GhochAli
</div>
</a>
Contact KGL
KGL Website
KGL Gallery
</div>
My CSS:
body{
margin:0;
}
#topDiv{
position:absolute;
background: black;
}
#logo{
width:65px;
height:auto;
margin-left:40px;
}
#rightTopMenu{
float:right;
margin-top:20px;
}
#rightTopMenu a{
position:relative;
color: white;
display: inline-block;
text-align: center;
text-decoration:none;
width: 103px;
}
.hoverMenuDiv{
position:absolute;
top:40px;
background:#CAD20E;
display:none;
text-align:center;
width:130px;
}
#rightTopMenu a:hover, #rightTopMenu a:focus{
color:#CAD20E;
}
#rightTopMenu a:hover+.hoverMenuDiv{
display:block;
}
JSFiddle
In your CSS, you need
.hoverMenuDiv:hover{
display:block;
}
This ensures that when you hover over the div, it will stay there.
Also, in my JSFiddle, I've put your HTML to this:
About KGL
<div class="hoverMenuDiv">
About Samuel
About Hoshange
About GhochAli
</div>
You can't have <a> tags in <a>'s.
Here is a second JSFiddle with the previous work done, but also deleting top in .hoverMenuTop. I think it looks better this way and behaves how most websites would.
You have to add this when the user is inside menu.
.hoverMenuDiv:hover{
display:block;
}
also remove top from this class .hoverMenuDiv
fiddle
This selector is too broad. It is targeting ALL of your anchors.
#rightTopMenu a { ... }
You need to only select the immediate child:
#rightTopMenu > a {
Also, consider using an unordered list as your menu container, not nested A-tags.
See: http://www.dhtmlgoodies.com/?whichScript=dhtmlgoodies_menu3
Consider using the '>' selector instead of the '+' selector, like this:
#rightTopMenu:hover>.hoverMenuDiv{
display:block;
}
The '+' selector is used for finding subsequent tags, but .hoverMenuDiv is actually a child tag of #rightTopMenu.
See w3 schools for a quick reference on this.
I'am currently working some code for my website and i came to this problem.I want to change background of paragraph on div's hover but it doesn't seems to works.I found some tutorials and I don't know what is wrong with my code
<style>
.more_news{
padding:10px;
border:1px double lightgray;
width:170px;
height:100px;
overflow: hidden;
margin:0px;
}
.more_news img{
width:100%;
height:100%;
}
.more_news p{
color:green;
position:absolute;
display:block;
background:gray;
margin-top:-40px;
width:170px;
height:40px;
}
.more_news div:hover ~ .more_news p{
background:red;
}
</style>
<div class="more_news">
<img src="images/proba1.png" class="more_news_img">
<p class="more_news_p">Hello</p>
</div>
All you need to do is select the class and element like so:
p.more_news_p:hover {
background:red;
}
No need for ~ or any other combinator/selector
http://jsfiddle.net/7H4XW/
Or, if you want to change the background when you hover over the entire div you can do something like this:
.more_news:hover p.more_news_p {
background:red;
}
http://jsfiddle.net/qfb9Z/
"I want to change background of paragraph on div's hover but it
doesn't seems to works."
You'd just use:
.more_news:hover > .more_news_p {
background:red;
}
You were using the general sibling selector ~, which selects sibling elements after that element.
whereas you actually want to target the paragraph which is a child element - hence the use of the direct child selector (>)
jsFiddle here
i want some text and textfields to properly display in the same line and make an line break after each textfield. First i had all buttons in a class which had a absolute position, but i think there is a better solution.
At the moment i have it this way
<form action="" method="get" name="pdaten" >
<p><div class="text">Vorname</div><input class="button" id="vname" type="text" /></p>
<p><div class="text">Nachname</div><input class="button" id="nname" type="text" /></p>
<p><div class="text">Geburtstag</div><input class="button" id="gebdat" type="text" /></p>
</form>
CSS:
form{
padding-left:1em;
}
.button{
position:relative;
left:0%;
}
.text{
position:relative;
text-align:left;
width:20%;
background-color:#00FF00;
}
The thing is, the textfields are always displayed in the next line, instead of the same as the div in which the text is. I could use a span, but than i dont know how to position them correctly, since i want the textfields to be exactly underneath the last one.
Anybody can help me fix this?
Add display:inline-block; to your text class.
.text{
position:relative;
text-align:left;
width:20%;
background-color:#00FF00;
display:inline-block;
}
jsFiddle example
You can set the divs display property to inline, like this:
.text {
display: inline;
}
This will make the divs behave like inline elements.
It is because div's are block element, you can change the behavior by changing the display property value to inline-display
.text{
position:relative;
text-align:left;
width:20%;
background-color:#00FF00;
display: inline-block;
}
Demo: Fiddle
Add float:left; clear:right; to your .button elements
Why not just add display: inline-block for your div
Demo: http://jsfiddle.net/mAsxZ/1/
How to show an edit link on the profile picture just like the one on facebook but positioned at the right-top corner of the image?
HTML Code:
<div class="topgrid">
<a href="#"><img src="C:/images/users/image1.png"/>
<span class="image" id="image">Edit Picture</span>
</a>
</div>
CSS Code:
.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
right:0;
width:80px;
position:absolute;
}
.topgrid:hover .image{
display:block;
cursor:pointer;
}
.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}
I am here using the fixed width of the span element, but when I don't specify the width of the span element, the element doesn't appears at the absolute top right-corner . So i have to adjust the right property as:
right:13%;
which is not the standard way to do it. I need your valuable suggestions!
I am also attaching the tried out fiddle here!
http://jsfiddle.net/nQvEW/81/
Try this Fiddle
css:
.image {
position:relative;
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
}
.topgrid:hover .image{
display:block;
cursor:pointer;
position:relative;
width:auto;
background:none;
top:-205px;
}
.topgrid {
text-align:right;
width:300px;
height:200px;
margin:20px;
}
Is this what your looking for ?
The span element has no fixed width and remains in the top-right corner!
.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
width:auto;
float:right;
}
.topgrid:hover .image{
display:block;
margin:0 auto;
cursor:pointer;
}
.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}
Here's the updated Fiddle: http://jsfiddle.net/b6Yw6/15/
What i have done is :
made the span width to auto and gave float:right.
Removed position:absolute;top:0;right:0 property from span. Add them if it causes browser compatibility problems
You can also do
.image{
background:transparent;
color:white;
font-weight:500;
}
to make it look good!
Here's the new Fiddle as per your request! Tell me if there's anymore changes to be made.
First step is to have the image be a background image rather than a straight-up <img> tag. This will allow you to add child nodes.
Add one such child node: the edit link. Make it appear where you want it, ignore the "only when hovering" part for now.
When you're ready, add display:none. Then, in the :hover style for the container, (ie. #container:hover>#editlink), add display:block. Done.
Or you can use the dynamic html tag generations every time on hover
I have an A tag button with Span inside to hold icons. It works well in all browsers. WHen I apply float:right to shift Span to the right side it also works fine in all browsers (Firefox, IE8+, etc.) except IE7 (I know... but I need to fix it).
<span> </span>Link
So, IE7 works fine when SPAN is floated left. However, once it is floated right it stretches the A tag container 100%.
I do not wish to change the structure of HTML, i.e. insert another span to handle IE7 only or move SPAN right of text, but I do want to fix it with CSS though what I tried did not work well for me yet.
Test case: http://jsfiddle.net/QeQSQ/1/ (IE7 works OK when SPAN is on left side)
Test case: http://jsfiddle.net/QeQSQ/2/ (IE7 does NOT work because SPAN is on right side and container is stretching)
Position it absolutely instead (example):
a{
display:inline-block;
border:1px solid red;
height:auto;
width:auto;
padding:5px;
position:relative;
padding-right:1em;
}
a span{
position:absolute;
right:0;
display:block;
height:14px;
width:15px;
}
Or, another [better] solution would be to add the character via :before and :after pseudo-elements (example):
Link
Link
a{
display:inline-block;
border:1px solid red;
height:auto;
width:auto;
padding:5px;
}
a.site:before {
content:"» ";
}
a.account:after {
content:" »";
}
Note: This doesn't work in IE7 at all (no additional text appears), but it also doesn't introduce any bugs.
remove the float:left and instead give the span display inline-block with an ie7 workaround:
a{
display:inline-block;
border:1px solid red;
height:auto;
width:auto;
padding:5px;
}
a span{
display:inline-block;
zoom:1;
*display: inline;
height:14px;
width:15px;
}
updated fiddle here: http://jsfiddle.net/QeQSQ/5/
also an article about the ie7 inline-block workaround: http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html