I put a Div box in a table cell that should slide up once its hovered over. When I hover over it, it doesn't do anything. I have tried the code below without success.
I also tried the Javascript way which didn't work either.
<td>
Product 1
<div id="p1" class="bottombox"></div></td>
.bodytable td #p1{
bottom:-10px;
}
.bodytable td #p1:hover{
bottom:-130px;
width: 50%
}
Hovering is actually working. Try to give background color to the div and you will see it.
Also if you haven't specified div position as absolute than bottom property will not work like this. Perhaps you wanted to have margin-bottom or padding-bottom?
EXAMPLE HERE
you can´t see what happens on hover because your p1 class is empty.
Try:
<div id="p1" class="bottombox">Product 1</div>
Is this what you're looking for? It uses the height property. http://jsfiddle.net/vBdne/
If you want the hidden to stick, you're gonna want to use javascript.
Related
There is my code :
<div class='f-left vignetteFamille box-sizing'>
<div class='relative contenuVignetteFamille box-sizing' style='z-index:1;'>
<br/><br/><br/><br/>
<img class='absolute' src='./charte/famille/fondBasGaucheVignetteFamille' style='bottom:-21px;left:-4px;z-index:0;'>
</div>
</div>
I want my div contenuVignetteFamille hover the image but this doesn't work and I don't know why
EDIT:
there is my css but I don't know if will help you :
.vignetteFamille{background-image:url('./charte/famille/fondVignetteFamille.png'); background-repeat:no-repeat;background-position:bottom right;margin-right:16px;width:201px;margin-top:2px;padding-bottom:19px;padding-right:19px;}
.contenuVignetteFamille{width:100%;border:solid 4px #FFC600;}
I'm not sure if I understood your question correctly but I'm assuming you want to highlight the image when hovering the div contenuVignetteFamille?
This can be solved by adding css to the child when hovering the parent, like this:
.contenuVignetteFamille:hover img {
opacity: 0.5;
}
See my fiddle here.
On another note, don't use br tags to get some height on your div, add a height value instead. I've also moved your inline styling to the external one.
I have a div which have a text and then a button. but the button's position drops down by a few pixels when I add an element before it.
The html:
<div id="profile-header-bottom">
<span id="thetitle">My website</span><button class="action-button">Add to friends</button>
</div>
The css:
#profile-header-bottom{position:relative;width:935px;height:40px;background-color:#F0F0FF;margin:auto;padding-left:10px;}
#thetitle{font-family:arial;font-size:25px;}
.action-button{border:1px solid #000080;background-color:#AAAACC;}
that's the result I get:
the only way I can make the button positioned correctly at the top of the div is to give it an absolute position. that's the result I want:
How can I obtain this result without making the button's position absolute?
Try this:
span, button {
vertical-align: middle;
}
The correct code for this would be:
.action-button {
/*
Insert rest of css.
*/
vertical-align: middle;
}
EDIT: It works by setting both of the 'anchor point' to the middle of the object, rather than wherever it is by default. So with the code above you put the two middle points against each other, instead of two random points.
I added a MS Paint picture explaining it further.
You can use the css item:
vertical-align:middle
and put it in the button's class or style tag and then add it to the text
This is the link for view : http://jsfiddle.net/mQsWc/10/
I have a text strings in value column these are editable items. For indication I used pencil icon after text string.
Problem is if I move mouse around white spaced area(right side of the text string), pencil icon getting flashy(blinking).
Instead
<div class="ghostPencil">some number</div>
Write
<span class="ghostPencil">some number</span>
And the blinking will go away
Edit:
Working example: http://jsfiddle.net/mQsWc/15/
Hope this helps :)
I'm sending two methods for fix the bug. I hope they will help you.
http://jsfiddle.net/mQsWc/22/
http://jsfiddle.net/mQsWc/24/
Here is the working fiddle without blinking.
Demo Fiddle: http://jsfiddle.net/mQsWc/25/
It's because your divs are transparent, and the pointer hit target alternates between the div and its container td. To avoid this, I suggest that you associate the editing capabilities and the UI feedback with td rather than div.
This will solve your problem.. it will remove the blinking effect
.ghostPencil {
width:100%;
}
edit
Or if u want the pencil to appear on hover of td then give the parent td of .ghostPencil a class suppose .parent and use the following code
.parent:hover .ghostpencil{
background:url("icon_pencil.png") no-repeat right;
padding-right:15px;
cursor:pointer;
float:left;
}
as suggested by Alexander
I have following code:
<div class='parent'>
<div class='left-child"'></div>
<div class="right-child"></div>
</div>
What I want to do is, if height of "left-child" is going to increase then height of "right-child" is also going to increase.
This might be a simple question as I'have less knowledge of html and css.
I don't want to use any of the java script code.
I want only css and html code for this.
Thanks.
Have a look at:
Demo
The most cross-browsers solution is styling your divs with table properties. This is also the least semantic solution.
.parent{
display:table;
}
.parent > div {
display:table-cell;
}
DEMO
You can create the illusion of the left and right child having the same height, by adding the background you want to use in the right column to .parent. I've added an example:
http://jsfiddle.net/3MCzm/
I'd like to add a hyperlink to this background image. Should I create a new class within the stylesheet? (When I attempted to call the new class, the image disappeared).
body{
background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
line-height:20px; font-size:14px;
font-family:"Trebuchet MS";
margin:0
}
EDIT: Now there's whitespace on the top and bottom (created by the new div class?)
You're using a background-image on the body tag. Assigning a hyperlink to it is impossible.
Also, whats stopping you from using it in an img tag? This seems like a semantically valid thing to do:
<img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" />
But, if you must use it as a background image, than creating an additional class is the way to go.
You can place a div behind everything on the page, give it a background image, and then add an onclick handler to that div. But you can't hyperlink a background image.
You'd have to do something like:
<body>
<div id='background' onclick='window.location.href="mynewurl"'>
<!-- Rest of page goes here -->
</div>
</body>
Also, add cursor: pointer to the css for the background div so people know it's a link.
OK, I can't tell you if this would be a valid solution, because I would have to see what you actually wanted to be a link. If for example you wanted to make a link to the cream "Boundless" boxes in your background image I do have a work around. It will be a pain to get it correct cross browser, but it's doable.
Make clear gif's the same size as your cream boxes
Put those images in something like this <img src="blank.gif" alt="Link Location" />
Use CSS to make the a tag a block element and place it over the cream boxes in the background image
I would of course clean up my code, it's a mess, but I am sure you can figure that out. Just make sure to have descriptive alt tags for accessibility.
This isn't the best solution, that would be to take the "boundless" boxes out of the background image and place them instead of the blank gifs, but if you HAVE to do it for one reason or another, this option will work.
You're going to have to change your html code a bit to do that. You need to surround the image with a tag, but you can't do that to the <body> tag, obviously.
** EDIT ** Since it's been pointed out my first answer is invalid HTML (thanks, and sorry), you can use a jquery approach like this:
$(document).ready(function(){
$("body").click(function(){
window.location='http://www.yoururl.com';
});
});
The issue with setting up an onClick method, is that you remove the anchor hint at the bottom left of the browser window, as well as any SEO that might be associated with the link.
You can accomplish this with just HTML/CSS:
<style>
.background-div {
background-image:url("/path/to/image.jpg");
position:relative;
}
.href:after {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
}
</style>
<body>
<div class="background-div">
</div>
</body>
In this case, the relative positioning on background-div will keep the link contained to only that div, and by adding a pseudo element to the link, you have the freedom to still add text to the link (if necessary), while expanding the click radius to the entire background div.