How can I make my css sprite back button validate through W3C? Here is my code to call the button.
<div class="icon-backbtn"></div>
I ended up using the below code to pass W3C validation and still using CSS Sprites.
<a id="icon-backbtn" title="Back" href="#" onclick="history.go(-1)"></a>
You shouldn't have a <div> as a child of an <a>, use an <img src="..."/> instead.
EDIT:
If you have a spritesheet, then simply add display:block; for the anchor and it will behave just like a div.
Since you are using a CSS Sprite, I would suggest placing the <a> inside the <div> (proper way to do it) and add some css:
HTML
<div class="icon-backbtn">
</div>
CSS
.icon-backbtn a {
display:block;
cursor:pointer;
text-decoration:none;
text-indent:-9999px;
}
The CSS sets the link to be a block element, thus occupying the width and height of the div. The remaining styles are to prevent the regular link behavior for texts, since you are using an image.
Related
I have an html snippet that will hide a button when clicked:
<div class="item">
Some Text
</div>
<div>
<button onclick="hideButton()">
Hide me
</button>
</div>
CSS:
.item {
background-image: linear-gradient(180deg,black,white);
}
Using CSS, is it possible to remove the background-image style on div.item if the button nested in the sibling div is in the hidden state? I know how this can be done in JavaScript, but curious if this can be handled solely with CSS?
This is possible using the newly added CSS has selector: div:has(> button:active) ~ .item This is not widely supported at the moment, so JavaScript might be what you need here.
I am trying to set a button's background color if the menu is open. The class for the menu when open is client-menu-open. The class for the button is client-header button. Is there a way to set the button's color only if the menu is open? I have tried .client-menu-open ~ .client-header button, .client-menu-open .client-header button... Can't get anything to work.
Here is the HTML:
<body>
<div>
<header>
<button class="client-header button"/>
</header>
<div class="client-menu client-menu-open">...</div>
</div>
</body>
I think it would be (assuming the class-menu-open is added, not swapped for):
.client-header button client-menu-open {
background-color: #abcdef;
}
If your CSS is all in one line it's .class.class. If it's a div in a div it's .class .class.
So it should be:
.client-menu.client-menu-open for <div class="client-menu client-menu-open">
Only if you are working with HTML elements do you not use a # or . to select.
You can't go backwards into a previously nested element. You can probably do this with Javascript, but your question is based on CSS only.
With regard to the following markup:
<div class="mydiv">
<img src="myimage.gif" />
</div>
The div.mydiv is basically styled to be a pretty rounded edge box around the image specified within the link. Lets say its background-color starts as black.
I would like to make it so that when I :hover over myimage.gif, the style of div.mydiv changes the background-color to, lets say, yellow.
How can I specify the style of div.mydiv when a nested <a> is being hovered over?
Use
.mydiv:hover
{
background-color:yellow;
}
in a CSS file, assuming you have one. I don't think there's a way to do this inline.
This question already has answers here:
Is putting a div inside an anchor ever correct?
(16 answers)
Closed 8 years ago.
I want to make a div click-able and but inside this <div> i have another <div> which also should be click-able or linked.
HTML
<a href="#">
<div class="box">
<div class="plus"><img src="aaa.jpg"/></div>
</div>
</a>
CSS
.box{
float:left;
width:100px;
height:100px;
}
.plus{
float:left;
width:30px;
height:30px;
}
Can i make both <div>s to link and for different links?
and Is this proper way use div inside a href ?
As of HTML5 it is OK to wrap <a> elements around a <div> (or any other block elements):
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
Just have to make sure you don't put an <a> within your <a> ( or a <button>).
No, the link assigned to the containing <a> will be assigned to every elements inside it.
And, this is not the proper way. You can make a <a> behave like a <div>.
An Example [Demo]
CSS
a.divlink {
display:block;
width:500px;
height:500px;
float:left;
}
HTML
<div>
<a class="divlink" href="yourlink.html">
The text or elements inside the elements
</a>
<a class="divlink" href="yourlink2.html">
Another text or element
</a>
</div>
This is a classic case of divitis - you don't need a div to be clickable, just give the <a> tag a class. Then edit the CSS of the class to display:block, and define a height and width like a lot of other answers have mentioned.
The <a> tag works perfectly well on its own, so you don't need an extra level of mark-up on the page.
Nesting of 'a' will not be possible.
However if you badly want to keep the structure and still make it work like the way you want,
then override the anchor tag click in javascript /jquery .
so you can have 2 event listeners for the two and control them accordingly.
I think you should do it the other way round.
Define your Divs and have your a href within each Div, pointing to different links
I would just format two different a-tags with a { display: block; height: 15px; width: 40px; } . This way you don't even need the div-tags...
For a webpage I used a div id that with css inserts a logo directly in the page. I'd like that logo to be linked to (for instance) a homepage. I can make it easily by doing this
<a href=xyz><div id=logo></div></a>
of.course that doesn't validate (eventually DTD XHTML 1.0 Strict).
Can anyone suggest the (probably obvious) best practice?
Thanks
You can do away with fiddly SPAN and DIV cluttering up your page and have the link itself be a block.
And in your CSS, style it with background and size it to the dimensions of the image you want to be clickable:
#logo
{
background:url("/path/to/image.jpg");
display:block;
width:200px;
height:80px;
}
<span></span>
Apply the background image, width, height and display:block to the span. Hope that helps!
<span class="logo"></span>
You might have to declare <span> as display: block;.
Use a span:
<a href=xyz><span id=logo></span></a>
Don't forget to convert the span to a block element in your css:
.logo {
display: block
}