Here, I am trying to make <p>Lex</p> a hyperlink without using <a> tag and using css, so that on right click of above <p>Lex</p> Open Link In New Tab can be accessed.
Below is Html and CSS
<style>
p{
color:red;
font-size:14px;
}
</style>
<p>LexL Luther</p>
You need to use a tag to make a hyperlink.
You can use _blank to open link in a new tab.
Visit W3Schools!
The target="_blank" does this in the code above.
Related
I need to make all site clickable.
I tried to make ahref before content div but it works only in Firefox&Chrome not in IE.
So I made site as a clickable table like this:
<table onclick="window.location='http://google.pl'" id="Table_01"> ...here goes content...
It's working in Chrome, FireFox and IE ....but... I am wondering if it is right method and it will be working on every computer?
According html5 spec, you can use link tag outside a block tag like table:
<a href="http://google.pl">
<table></table>
</a>
Dont forget to apply display: block to link.
If you dont want to use link tag, you should write your script on js file and not usinf onclick property using id for example:
<table id="Table_01">
js:
function redirect() {
window.location = 'http://google.pl';
}
document.getElementById("Table_01").onclick = redirect;
On this link, instead of hovering the mouse over the image, I wanted to make the other images appear only when I click in the main image. I tried replacing the pseudo class for target, focus, but none of them worked. Is there a way to do this with css only? Because my CMS doesn't allow me to insert javascript.
Thanks,
Bruno
Stuff you can do with the “Checkbox Hack”
It is possible to do in combination with HTML, not just css. You will have to take use of the checked css event in combination with <label> element, you will also have to have some checkbox hidden somewhere in the document. It is quite hacky and its all described in the article.
It is possible to do this. There is one problem where links do not register :focus events, it will register them if you navigate to the link with TAB. But that would be a problem for the users. Anyway you can use that to overcome the problem. Just place tabindex on your link
<a href="#" tabindex="0">
<img src="1.png">
</a>
On your CSS:
a:focus img{
content:"xxx";
width:XXpx;
height:XXpx;
/*Whatever you need here*/
}
I'm new in ASP.NET and i have a little problem . I have a master page which has a div and i want to edit the height of this div dynamically with code. I don't want to change the href to another css file , i just want to edit this css file.
<div id="div" runat="server" ></div>
#div
{
position:absolute;
background-color:red;
width:200px;
height:150px;
}
I tried this , but doesn't work :
System.Web.UI.HtmlControls.HtmlGenericControl div;
div.Style.Add("height","200px");
This should do the trick...
If you're writing this code in the code-beind of the master page you can just write the following:
div.Attributes.Add("style", "position:absolute;background-color:red;height:200px;height:150px;");
Otherwise, if you're on a content page, you'd add this before the code above...
var div = (System.Web.UI.HtmlControls.HtmlGenericControl) Page.Master.FindControl("div");
Although Scottys answer is correct, a nicer way might be the following:
div.Attributes.CssStyle.Add("height", "200px");
This will allow you to change individual css attributes.
I'm trying to make my little icons on this page (http://www.alinewbury.com/contact.html) into links.
They're each in a div separately, but whenever I try to do:
<div class="social-btn pinterest"></div>
It doesn't seem to work! How can I link these icons to the respective websites?
The Div is supposed to be inside the Anchor tag.
Check Anchor tag usage
To make the icon click able you have to fix some issues. First of all your icons are not really linked. you can see the Hand cursor because the property defined in the class .social-btn
To make a icon clickable you should follow this approach. put the text inside a tag a better approach also you have to change the font-size:0
.social-btn a
{
padding: 22px;
font-size: 0;
}
your HTML should be like this.
<div class="social-btn pinterest">
pinterest
</div>
I am curious as the best (only?) way to go about this.
I was asked to make a text link, display an image (under it) upon rollover and of course disappear when you rolloff the link.
(the original personal used some in-line style that broke the page, instead of declaring a block).. they also tried to use an IMAGE MAP to make the displayed image a LINK/clickable, and have a different/unique URL that the TEXT link used to display the image.
I made the style:
/*custom client requested CSS styling/functionality*/
a.imageDisplay img {
display:none;
}
a.imageDisplay:hover img {
display:block;
}
Here is a snippet of the HTML I am try to add this functionality to:
<a class="imageDisplay" href="#">Client Name XYZ<img src="/UserFiles/image/ALLSAtestpage3.jpg" usemap="#allsa" /><map id="allsa" name="allsa"><area coords="12,113,123,142" href="http://www.nike.com/" shape="rect" target="_blank" /></map></a><br />
My question is: what is the best way (better way) to add a LINK/URL to the image that is being displayed?
Because the image is INSIDE the anchor/link tag.. is will also be/get the same URL as the target when clicked....yes?
Anybody have some SIMPLE ideas as a work around?
(I really hate those MAP tags anyways) :)
thanks!
Is this simple?
<span class="txt-img">
<a class="txt" href="#1">Client Name ABC</a>
<a class="img" href="#2"><img src="http://placehold.it/200/0000cc/" /></a>
</span>
.txt-img {position:relative;}
.txt-img .img {position:absolute; display:none; left:0;}
.txt-img:hover .img {display:block;}
FIDDLE: http://jsfiddle.net/46Tf6/