According to this answer, I'm supposed to be able to style my anchor tag as follows.
<a href="#Url.Action("Index", "Home")"
style="background: no-repeat url(../../Images/Logo.png) 0 0"></a>
However, I noticed that it doesn't work as expected because the image doesn't appear on the screen. However, if I create an image tag inside, it does.
<a href="#Url.Action("Index", "Home")">
<img src="../../Images/Logo.png" />
</a>
I'd prefer using the second approach but I'm afraid that it's old-school and that today it's recommended to use styling for adding images and not mark-up. So, naturally I want to embrace the new ways.
What am I doing wrong?
You need to set the style to display: block; and give it a width and a height.
Example:
Hope this helps
Ensure your <a> tag is styled to be large enough to display the image. By default this tag is displayed inline and you have given no content between the <a> and </a> tags, so therefore the browser will allocate no screen space at all for this element.
I suggest adding some rules to your inline style attribute (well it is better still in a stylesheet to be honest):-
<a href="#Url.Action("Index", "Home")" style="
background: no-repeat url(../../Images/Logo.png) 0 0;
display: inline-block;
width: 30px;
height: 20px"></a>
Just replace the 30px and 20px with the actual dimensions of your image.
Related
I'm having trouble getting the right selector.
Let me try to explain the best way I can:
I'm working on a project that I cannot change HTML and Javascript, it has some dynamic HTML and other reasons.
On the project, there is an image on a <img> tag.
However, I need to change colors between two layouts, and as you can see on the HTML/CSS the only way I got that to work is to hide th <img> tag and set a background to the anchor, that has a title.
So, now, when I change the layouts, the image changes, however there is also something else, this image on click hides the menu and changes the image one more time.
Now, I need to hide the background on the anchor when the title on the image changes.
Here is the HTML BEFORE clicking the image
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Esconder menu horizontal" id="imgHideMenu" src="images/ico_hidemh.png" width="16" height="16">
</a>
</li>
</ul>
And here is the HTML AFTER I click on the image
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Exibir menu horizontal" id="imgHideMenu" src="images/ico_showmh.png" width="16" height="16">
</a>
</li>
</ul>
THE CSS
I HIDE THE ORIGINAL IMAGE, USED ON THE OTHER LAYOUT
#ul-icone-mh li a img {
visibility: hidden !important;
}
AND SET THE NEW IMAGE
a[title="Esconder menu horizontal"] {
box-sizing: border-box;
background-image: url(../images/ico_hidemhc.png);
background-size: 16px;
background-repeat: no-repeat;
}
And when I click it, the image stays the same, but I need to hide that image when the title changes and add another image.
Any ideas what I can do?
You need a bit more than just the right CSS selector. The problem there is the old stumbling block that there is no parent selector.
A bit more thought and work is required.
img { height:50px; width:50px }
ul {padding: 0; list-style:none;}
.icones a::after {
content: '';
height:50px; width:100px;
background-image: linear-gradient(to right, #00FF00 50%, #0000FF 50%);
display:inline-block;
}
.icones a {
height:50px; width:50px;
display:block;
white-space:nowrap;
overflow:hidden;
font-size:0;
}
.icones a img[title='Esconder menu horizontal'] {
margin-left: -50px;
}
.icones a img[title='Exibir menu horizontal'] {
margin-left: -100px;
}
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Esconder menu horizontal" id="imgHideMenu" src="http://placehold.it/200/ff0000" width="16" height="16">
</a>
</li>
</ul>
</div>
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Exibir menu horizontal" id="imgHideMenu" src="http://placehold.it/200/990000" width="16" height="16">
</a>
</li>
</ul>
</div>
Here I've increased the images to 50x50px from 16x16px to make them a bit easier to see but the principle is just the same.
For the two images referenced by the HTML, I've used two blocks that are different shades of red.
For the two CSS overlay images, for simplicity I've used a linear gradient making a block that's the height of the image and twice the width. The left half is green and the right half blue. You would use a sprite for the two images you want to display. The left half of the sprite would contain the "Esconder ..." replacement image and the right half of the sprite would contain the "Exibir ..." replacement image.
I've also shown both cases together rather than switching between them on click, again for simplicity.
The idea is that the left margin of the image is made negative to shift it out of the a element. The pseudo element that follows contains the sprite and is shifted into that space, either by the width of the image, or twice the width of the image to show different contents for the two cases.
Hence we get a green box for the "Esconder ..." case and a blue box for the "Exibir ..." case.
So if I understand correctly, then the title is "esconder", you want to hide the default image and inject your own. And otherwise you want to show the original (when the title is "exibir".)
You have correctly identified how you would target the a tag based on the title: a[title="Esconder menu horizontal"]. What you then need to do is only exclude the image when it is inside of this tag, and then replace it with your own image. You then also need to give it an explicit size, and declare the a tag which now directly has the background image with some size. Like so:
a[title="Esconder menu horizontal"] img { display: none; }
a[title="Esconder menu horizontal"] {
box-sizing: border-box;
background-image: url(../images/ico_hidemhc.png);
background-size: 16px;
background-repeat: no-repeat;
height: 16px;
width: 16px;
display:inline-block;
}
You will notice I added a few lines to your existing styling:
display:inline-block tells the browser that this element should follow the flow like an inline element, but should have block-type semantics. By default, an anchor tag is an inline element, which means it doesn't have explicit size or width -- just what is enforced by its children. Since you've delcared that the child is not to be seen, the anchor tag effectively collapses to be of 0x0 size.
height:16px; width:16px tells the browser the size you want for this image. I guessed at these dimensions based on the background-size property you had set. Since we've told the browser using the display property that this element has explicit size, we now tell it what that size is.
It's not very clear what you're trying to accomplish, but if you're trying to change the anchor based on the image, this is simply not possible using CSS alone.
You can target child elements based on their parents, but you can not target parent elements based on their children in CSS (currently).
The only way to do this would be to affect how the HTML renders the two options, or using Javascript.
There are a few different suggested specs for such a selector, but none have yet been implemented.
Since the img tag is what has the dynamic title, that is the only thing you will be able to target with your CSS. If you cannot accomplish your task by targeting the img then it can't be done within the constraints you stated.
Selectors:
https://www.w3.org/TR/CSS2/selector.html
Support for the proposed spec for a parent selector:
https://caniuse.com/#feat=css-has
http://exfluor.com/productsMain.html
I can't seem to get the boundary of the clickable link area to stay within the bounds of the <div> it is making a link(11 buttons linking to product categories). Even with using a class to specify the width, it spans the entire width of the <td> it is in. I've run out of options.
<a href="bycategory.php?cat=anhydrides">
<div class="category" align="center">
Anhydrides<br><img src="images/cat/anhydrides.jpg" alt="">
</div>
</a>
Use block display:
.catTable a {
...
display: block;
}
To set element's witdth it must have block or inline-block display. Also consider setting overflow: hidden.
Add word-wrap: break-word property to your as. It will break your links appropriately. You should pay attention though: You will not get automatic hyphenation from this. For that you would have to look into some library like hypenator
See this fiddle as an example: http://jsfiddle.net/8Lrhr22u/
Your HTML is not valid. You can't put div into a (well you can but it's not reliable). Instead try to improve markup a little (span instead of div):
<a href="bycategory.php?cat=hydrofluorocarbons">
<span class="category" align="center">Hydrofluorocarbons<br>
<img src="images/cat/hydrofluorocarbons.jpg" alt="">
</span>
</a>
However it's not really necessary, since setting a to display: inline-block should fix the issue:
.catTable a {
display: inline-block;
}
I want to show an image with the link on the menubar. My code is as below:
The login class in css is as below:
.login{background: url(../img/user.png) no-repeat 6px center;}
But, I am not able to view the image in the browser. If I tried like
Login
then image appears in the background. But I want to use only image and not the text. how can I do that?
You'll have to set dimensions on the a tag, and set it to display: block;.
.login {
background: url(../img/user.png) no-repeat 6px center;
width: 100px;
height: 100px;
display: block;
}
Of course replace dimensions with the correct ones.
Alternatively you could put the image directly into the a tag like so:
<img src="../img/user.png" />
You can use the following:
<img src="../img/user.png" />
EDIT: I forgot to mention this would mean you have to remove the background image from your CSS.
Use the following code:
<img src= {require('../img/image_namer.svg')} />
05 2021
for SEO
Something to keep in mind when adding image wrapped with href element. If it is possible try to use the img inside the href element. This is good for seo. If the image fail to load it will show you the alt text.
Whenever an image is linked, Google will use the text contained in the image's alt attribute as the anchor text. - moz
src: https://moz.com/learn/seo/anchor-text
When you wrap the img with the href element, always include the alt text.
This will act as a Anchor text to your href element.
<a href="#" class="login" title="Login">
<img src="../img/user.png" alt="User profile"/>
</a>
I have got this div..:
<div id="logoCover" style="position: absolute;width: 341px;height: 100px;z-index: 9999;top: 0px;left: 0px;"></div>
The problem with the div, is that, it would only show in ie8, if i give it a background color.
Otherwise the div wont exist, which means the user cant click on it.. why is that behavior common in ie8 and how do I prevent it
UPDATE:
This is the element on which I try to place my div:
#logo {
float: left;
height: 93px;
}
logo is an image
FULL HTML:
<div id="logo" style="position:relaive;">
<a href="/" style="position: absolute;padding:60px;padding-right: 300px;z-index: 9999;top:-20px;left: 0px;;display:block;" ></a>
<img src="images/BestCam_logo.png" width="1009px" />
</div>
<div> tags are not supported as content for <a> tags inside of standard HTML. Some browsers try to acommodate for this, but you really can't depend on every browser implementation to handle it the same way.
However, you can make an <a> tag a block element (it is an inline element by default) and move the style from the <div> tag to the <a> tag. This would also eliminate the need for the inner <div> tag in your example.
try adding display:block or insert a ' '
also, check that your relative div is also rendering right.
hope that helps.
<div id="logo" style="position:relaive;">
<a href="/" style="position: absolute;padding:60px;padding-right: 300px;z-index: 9999;top:-20px;left: 0px;;display:block;background-image: url('images/emptyImage.png')" ></a>
<img src="images/BestCam_logo.png" width="1009px" />
</div>
Solved the problem, What I had to do is to use a transparent image, as a background.
Here is what I am trying to accomplish in HTML/CSS:
I have images in different heights and widths, but they are all under 180x235. So what I want to do is create a div with border and vertical-align: middle them all. I have successfully done that but now I am stuck on how to properly a href link the entire div.
Here is my code:
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
</div>
Please note that for the sake of copy pasting here easily, the style code is inline.
I read somewhere that I can simply add another parent div on top of the code and then do a href inside that. However, based on some research it won't be valid code.
So to sum it up again, I need the entire div (#parentdivimage) to be a href link.
UPDATE 06/10/2014: using div's inside a's is semantically correct in HTML5.
You'll need to choose between the following scenarios:
<a href="http://google.com">
<div>
Hello world
</div>
</a>
which is semantically incorrect, but it will work.
<div style="cursor: pointer;" onclick="window.location='http://google.com';">
Hello world
</div>
which is semantically correct but it involves using JS.
<a href="http://google.com">
<span style="display: block;">
Hello world
</span>
</a>
which is semantically correct and works as expected but is not a div any more.
Why don't you strip out the <div> element and replace it with an <a> instead? Just because the anchor tag isn't a div doesn't mean you can't style it with display:block, a height, width, background, border, etc. You can make it look like a div but still act like a link. Then you're not relying on invalid code or JavaScript that may not be enabled for some users.
Do it like this:
Parentdivimage should have specified width and height, and its position should be:
position: relative;
Just inside the parentdivimage, next to other divs that parent contains you should put:
<span class="clickable"></span>
Then in css file:
.clickable {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 1;
}
The span tag will fill out its parent block which is parentdiv, because of height and width set to 100%. Span will be on the top of all of surrounding elements because of setting z-index higher than other elements. Finally span will be clickable, because it's inside of an 'a' tag.
Going off of what Surreal Dreams said, it's probably best to style the anchor tag in my experience, but it really does depend on what you are doing. Here's an example:
Html:
<div class="parent-div">
Test
Test
Test
</div>
Then the CSS:
.parent-div {
width: 200px;
}
a {
display:block;
background-color: #ccc;
color: #000;
text-decoration:none;
padding:10px;
margin-bottom:1px;
}
a:hover {
background-color: #ddd;
}
http://jsbin.com/zijijuduqo/1/edit?html,css,output
Two things you can do:
Change #childdivimage to a span element, and change #parentdivimage to an anchor tag. This may require you to add some more styling to get things looking perfect. This is preffered, since it uses semantic markup, and does not rely on javascript.
Use Javascript to bind a click event to #parentdivimage. You must redirect the browser window by modifying window.location inside this event. This is TheEasyWayTM, but will not degrade gracefully.
I'm surprised no one suggested this simple trick so far! (denu does something similar though.)
If you want a link to cover an entire div, an idea would be to create an empty <a> tag as the first child:
<div class="covered-div">
<a class="cover-link" href="/my-link"></a>
<!-- other content as usual -->
</div>
div.covered-div {
position: relative;
}
a.cover-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This works especially great when using <ul> to create block sections or slideshows and you want the whole slide to be a link (instead of simply the text on the slide). In the case of an <li> it's not valid to wrap it with an <a> so you'd have to put the cover link inside the item and use CSS to expand it over the entire <li> block.
Do note that having it as the first child means it will make other links or buttons inside the text unreachable by clicks. If you want them to be clickable, then you'd have to make it the last child instead.
In the case of the original question:
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<a class="cover-link" href="/my-link"></a> <!-- Insert this empty link here and use CSS to expand it over the entire div -->
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
<!-- OR: it can also be here if the childdivimage divs should have their own clickable links -->
</div>
Make the div of id="childdivimag" a span instead, and wrap that in an a element. As the span and img are in-line elements by default this remains valid, whereas a div is a block level element, and therefore invalid mark-up when contained within an a.
put display:block on the anchor element. and/or zoom:1;
but you should just really do this.
a#parentdivimage{position:relative; width:184px; height:235px;
border:2px solid #000; text-align:center;
background-image:url("myimage.jpg");
background-position: 50% 50%;
background-repeat:no-repeat; display:block;
text-indent:-9999px}
<a id="parentdivimage">whatever your alt attribute was</a>
This can be done in many ways.
a. Using nested inside a tag.
<a href="link1.html">
<div> Something in the div </div>
</a>
b. Using the Inline JavaScript Method
<div onclick="javascript:window.location.href='link1.html' ">
Some Text
</div>
c. Using jQuery inside tag
HTML:
<div class="demo" > Some text here </div>
jQuery:
$(".demo").click( function() {
window.location.href="link1.html";
});
I simply do
onClick="location.href='url or path here'"
What I would do is put a span inside the <a> tag, set the span to block, and add size to the span, or just apply the styling to the <a> tag. Definitely handle the positioning in the <a> tag style. Add an onclick event to the a where JavaScript will catch the event, then return false at the end of the JavaScript event to prevent default action of the href and bubbling of the click. This works in cases with or without JavaScript enabled, and any AJAX can be handled in the Javascript listener.
If you're using jQuery, you can use this as your listener and omit the onclick in the a tag.
$('#idofdiv').live("click", function(e) {
//add stuff here
e.preventDefault; //or use return false
});
this allows you to attach listeners to any changed elements as necessary.
A link with <div> tags:
<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
Something in the div
</div>
A link with <a> tags:
<a href="http://www.google.com">
<div>
Something in the div
</div>
</a>