This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make a whole 'div' clickable in html and css without javascript?
I've set up a 100% width/height div to stay on the background of the website, like so:
.background {
background-color:rgba(50,50,50,0.4);
width:100%;
height:100%;
position:absolute;
z-index:-1;
}
I'd like to have a link that would cover the WHOLE div, but if I code something like this, I'll have the link to appear only on the last part of the div (remember that this div has to stay in the background, with some divs above it), after the other divs, that stay above it.
<a href='/home'>
<div class='background'></div>
</a>
Are there any HTML/CSS solutions?
You cannot nest <div> tags inside <a> tags. However, you can make the <a> behave like a <div> by utilizing the CSS display:block property.
CSS
*, html, body {
width: 100%;
height: 100%;
}
.background {
display: block;
}
HTML
JS Fiddle
Related
as i read around the web, it's a valid html5 practice to wrap block elements inside <a> elements. i have a problem though.
my html
<a href="http://google.com" target="_blank">
<div> </div>
</a>
my css
div {
background:#f00;
height:100px;
margin-left:10px;
width:300px;
}
a {background:blue;}
the link actually works, but i see no blue background and chrome says that my a have no height and width
changing the css of the a to display:inline-block does the trick here, but not in my website.
do you have any suggestion or solution? how come the a element doesn't "follow" its child?
thank you!
http://jsfiddle.net/72cYy/82/
it depends on what you're looking for, you can set a to display:block if you want it to behave like a block element:
a {
display: block;
background:blue
}
EXAMPLE 1
or you could set it to display: inline-block to make it behave like it natrually would:
a {
display: inline-block;
background:blue
}
EXAMPLE 2
There is no reason that either of these wouldn't work on your site. Perhaps you have CSS or javascript overwriting it? Both of these methods will fix the collapsed height/width issue. If it is a conflicting CSS issue you could be more specific by adding an id or a class:
a#wrapper{
display: inline-block;
}
or
a.wrapper{
display: inline-block;
}
For more information on collapsed elements, you can check out this SO answer
TL;DR : Before you read anything, the desired end-result is illustrated in the image below, otherwise refer to the JSFiddle. Preferably, I would like to only use CSS and not modify the DOM structure.
The icons must be aligned completely to the right (hence the .pull-right), but the icons must be stacked vertically (Sometimes some icons must not appear, so they are .hidden, like the .fa-undo icon in the second row).
(When I say 'the icons' i mean the <i> tags and the <img> tag)
The icons must not make the textarea go down (no margin on top of the textarea).
Hopefully, the WIDTH of the textarea would be dynamic and not statically put to width: 90%; for example. It should take as much width as possible, without interfering with the vertical icon stack.
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
In general, images that are UI elements, and not content, should be CSS backgrounds, not inline images. You then use class names to control the image content.
You should be doing this, or something similar:
td.fr {
background-image:url(/images/fr.gif);
background-repeat:no-repeat;
background-position: top right;
}
The same should go for your buttons. Use <button> and style the background.
Not exactly what you wanted I'm afraid, but this is how I'd achieve that result:
fiddle
<div class="pull-right icons">
<img src="http://www.convertnsftopst.net/images/gb.gif" class="pull-right" />
<i class="fa fa-reply"></i>
</div>
td .icons{
width:20px;
text-align:center;
}
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
I was unable to do it without adding another pull-right container, I fear that doing it with only CSS would end up being an odd hack
Fixed here : http://jsfiddle.net/QTXxp/2/
What was lacking when I asked this question was the clear:right; and the use of <div> (or display: block;)
Here is the CSS (if you're too lazy to open the JSFiddle) with the addition of the boostrap class pull-right on the div.icons
textarea.hover-edit {
width: 90% !important;
}
div.icons {
width: 10% !important;
}
div.icons > div > i.fa {
margin-top: 4px;
margin-right: 4px;
}
div.icons > div.action-icon-right {
float:right;
clear:right;
}
I actually use css function :hover to make my div appear and no jquery. The problem is that the div disappear when the cursor goes out of the div.
I'm also avoiding using display:block; function because i cannot take advantage of the opacity transition features of css. I saw other posts solving the question using all built jquery code. I wondered if it could be done without rewriting the entire code in jquery.
Here is the fiddle http://jsfiddle.net/dandecasa/k22UG/1/
As you see, when hovering the black div on the left, the #zobbigmenu div appears. Could it be possible to let it be visible when the cursor is in the #zobbigmenu div?
Thank you for you help
Javascript/jQuery is not necessary.
Add the styling on :hover of #zobbigmenu too.
jsFiddle example
#zobmenu:hover ~ #zobbigmenu, #zobbigmenu:hover {
margin-left: 20px;
cursor:alias;
opacity:0.8;
margin-right: auto;
z-index:10;
}
Alternatively, I would suggest nesting #zobbigmenu in #zobmenu.
You could wrap everything inside a <div>:
<div id="wrap">
<div id="zobmenu"></div>
<div id="zobbigmenu">
<a href="http://instagram.com/dandecasa" target="_blank">
<img src="http://theyellowhopeproject.com/iconmonstr-instagram-4-icon.png" height="50px"></img>
</a>
</div>
</div>
And change the CSS:
#wrap:hover #zobmenu ~#zobbigmenu {
margin-left: 20px ;
cursor:alias;
opacity:0.8;
margin-right: auto ;
z-index:10;
}
jsFiddle
Using a method I've done before but having issues. Not sure if it's a sprite or what.. Basically you have two versions of an image saved into one file with them stacked on top of each other and use CSS to adjust the margins when hovering. Here's an example of it working successfully: http://minimalpluscreative.com
Trying to do the same thing here, but running into issues with overflow:hidden; not working. Instead, the the full (double) image is shown. Here's what it looks like: http://cl.ly/023p1I1D1W0W3a1T1q1R It should be just the top half of the image with overflow:hidden; preventing the other half from showing.
Help? Some kind of syntax error I'm sure...
HTML:
<div id="work" class="sub">
<h3>MUSIC VIDEOS</h3>
<img id="show_fire" class="thumbnail sprite" src="images/daniel_gomes_soundoffire_sprite.png" />
</div>
CSS:
.sprite {
width:140px;
height:61px;
overflow:hidden;
}
.sprite:hover {
margin-top:-61px;
}
I've never seen this done before except with background images, but I don't see why not… it just seems like you need a lot of extra css, and extra html to get it to work as opposed to a background image.
As was said earlier, it's hard to see the problem without seeing your actual code in context, but based on what I see, there could be a few potential things wrong:
You need to wrap the image in a containing element, and assign the width, height and overflow to that. Hidden overflow will hide what's outside of the boundaries that div contains. The image element is the image, it doesn't contain the image, so setting it to overflow:hidden isn't going to hide andything, and assigning it a width will just resize it, not "crop" it (which is the effect you're going for). So you'd need something like:
<div id="work" class="sub">
<h3>MUSIC VIDEOS</h3>
<a class="sprite" href="#">
<img id="show_fire" class="thumbnail" src="images/daniel_gomes_soundoffire_sprite.png" />
</a>
</div>
with this css:
.sprite {
width:140px;
height:61px;
overflow:hidden;
}
.sprite img {
margin-top: 0;
}
.sprite:hover img {
margin-top: -61px;
}
I suggest you use 'a' as the containing element, as not all browsers will recognize the hover pseudo-class on tags other than anchor tags.
I know you think using an image instead of a background image is simpler, but using background images, you can accomplish all this with only one element and less css.
In the example site you refer to, the overflow:hidden property is set on the outer 'div#a'
'div#work' in your code should have it's overflow set to hidden.
Thus when you change the margin on your image it will move within the frame of your outer div.
Additionally I had to add a tag name to the hover declaration.
<html>
<head>
<style>
#work{
position:relative;
overflow:hidden;
width:140px;
height:61px;
}
div.sprite {
margin-top:0;
}
div.sprite:hover {
margin-top:-61px;
}
/* instead of an image */
.sprite div{
height:61px;
}
.red {background:red}
.blue {background:blue}
</style>
</head>
<body>
<div id="work">
<div class="sprite">
<div class="red">a</div>
<div class="blue">b</div>
</div>
</div>
</body>
Is it possible to make a div invisible without commenting it out? If so, how?
You need to hide that with CSS:
div { /* this will hide all divs on the page */
display:none;
}
If it is a particular div with certain class or id, you can hide it like:
<div class="div_class_name">Some Content</div>
CSS:
div.div_class_name { /* this will hide div with class div_class_name */
display:none;
}
Or
<div id="div_id_name">Some Content</div>
CSS:
div#div_id_name { /* this will hide div with id div_id_name */
display:none;
}
Note: You need to wrap CSS tyles in between <style type="text/css"></style> tags, example:
<style type="text/css">
div#div_id_name {
display:none;
}
</style>
More Information :)
You can do this by inline style
<div style="display:none"></div>
or by defining CSS Style like
In css add
.HideableDiv{display:none;}
and in your HTML write
<div class="HideableDiv" ></div>
Its Easy. The only thing you need is, adding a style to it, like following example shows:
CSS:
<style type="text/css">
div.myInvisibleDiv {
overflow: hidden;
visibility: hidden;
height: 0;
width: 0;
}
</style>
HTML:
<div class="myInvisibleDiv"><p>My invisible content</p></div>
This div, and it content does definitely not show, and it wont disturb surrounding elements.
if you want it to be essentially gone from your layout:
.element_class {
display:none;
}
if you want to just make it invisible (but still keeping it's space seemingly empty)
.element_class {
visibility: hidden;
}
and then your element (if a div) would look like this:
<div class="element_class"></div>
basically anything you add the class="element_class" to will be either invisible or completely hidden.
position: absolute;
left: -99999px; /* big number */
will make the content accessible to most screen readers but will render the element off-screen.
May be, its not the required solution, but you can tackle this kind of issues by these little tricks.
You can use jQuery to achieve the solution.
If you want to totally hide/show the div, then you can use:
$('#my_element').show()
$('#my_element').hide()
Or if you want that your div become invisible and its still existing in the page, then you can use efficient trick:
$('#my_element').css('opacity', '0.0'); // invisible Maximum
$('#my_element').css('opacity', '1.0'); // visible maximum