I'm working on a site that has a "switch" (just an images linked to a different version of the site). The image will show up, but it wont be clickable. After some troubleshooting, I also discovered it was clickable before I put any CSS or internal styling in. The image is using both a wrapped link and an internal link.
Code:
<a href="aboutOff.htm">
<div style="position:absolute;left:90%;float:right;">
<img src="on.jpg" href="aboutOff.htm" alt="Switch" id="switch" style="z-index:12; float:right;"/>
</div>
</a>
CSS:
#switch{
width:119px;
height:auto;
z-index:10;
}
Any help would be GREATLY appreciated. Thanks!
HTML
<div class="switchContainer">
<a href="aboutOff.htm">
<img class="switch" src="on.jpg" href="aboutOff.htm" alt="Switch"/>
</a>
</div>
And the CSS
.switchContainer {
position:absolute;
left:90%;
}
.switch {
width:119px;
height:auto;
z-index:10;
}
Related
Good day. I have a code:
<div style=\"position:relative;height:auto;padding:5px;float:left;\">
<img id=\"avimg\" src=".$uinfo["avatar_url"]."><p id=\"act-await\" style='position:absolute;top:13px;left:24px;'><i id=".$uinfo['id']." class=\"icon-checkmark\" onclick=\"accfr(this.id);\"></i><br><i id=".$uinfo['id']." onclick=\"decfr(this.id);\" class=\"icon-cancel-2\"></i></p>
</div>
CSS:
#avimg:hover {
opacity:0.3;
-moz-opacity:0.3;
filter:alpha(opacity=40);
}
#act-await {
display:none;
}
#avimg:hover + #act-await {
display:block;
}
All works. But I need a link under an image. When I make this, block #act-await not showing (when mouse over).
<div style=\"position:relative;height:auto;padding:5px;float:left;\">
<img id=\"avimg\" src=".$uinfo["avatar_url"]."><br><font size=\"1\">".$uinfo['name']. "<br>".$uinfo['surname']."</font>
<p id=\"act-await\" style='position:absolute;top:2px;text-align:center;'><i id=".$uinfo['id']." class=\"icon-checkmark\" onclick=\"accfr(this.id);\"></i><br><i id=".$uinfo['id']." onclick=\"decfr(this.id);\" class=\"icon-cancel-2\"></i></p>
</div>
If you don't know what the link is yet use the pound key. You have an empty href
<a href ="#"......
In you case
<a href=\"#\".......
And when you have a link replace the pound key with it
I am learning HTML and CSS at the moment but having a bit of trouble with my code.
If anyone is able to help it would be much appreciated.
Here is my website design - http://puu.sh/5D4yG.png
And here is an image of the portion of my website I am having trouble with.
http://puu.sh/5D3Rr.png
If you look between the two images at the top you will see a very tiny blue underline in the gap.
Then if you look under the heading there is another purple underline.
I have not coded for anything to be underlined so am not sure why it has appeared.
The code is as follows:
CSS
#currentprojects
{
padding:5px;
width:75%;
height:auto;
margin:0px auto;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}
#projects
{
padding:5px;
width:75%;
height:auto;
margin:10px auto;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}
#latestvideos
{
padding:5px;
width:75%;
height:auto;
margin:10px auto;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}
HTML
<div id="currentprojects">
<div align="center"><h1>current projects</h1></div>
</div>
<div id="projects">
<a href="https://itunes.apple.com/gb/app/ritgk/id581734892?mt=8"><img class="ritgk" src="images/ritgk.png" onmouseover="this.src='images/ritgkhover.png'" onmouseout="this.src='images/ritgk.png'" alt="RITGK iOS App" width="296" height="168"/>
<a href="http://www.redbubble.com/people/f7james/works/10680438-imagine-dragons-night-visions-poster"><img class="imaginedragons" src="images/imaginedragons.png" onmouseover="this.src='images/ imaginedragonshover.png'" onmouseout="this.src='images/imaginedragons.png'" alt="Imagine Dragons - Night Visions Poster" width="296" height="168"/>
</div>
<div id="latestvideos">
<div align="center"><h1>latest videos</h1></div>
</div>
There is also another problem I am having with the above code where, rather than just the Imagine Dragons button linking to my RedBubble page with the Imagine Dragons poster on, for some reason the whole blue section in the image below links to it.
http://puu.sh/5D4EE.png
If anyone could help me with these problems I would be extremely grateful as I can't seem to get my head round why.
Thanks
The single space character between the images is being given a hyperlink underline.
You can get rid of this either by removing whitespace between the images in the html, closing the link tag or styling the link with
text-decoration: none
I suspect you didn't want one link to continue across anyway which brings us to...
It looks like you're missing the closing anchor tag from your links (</a>)
Links (aka anchors) should be in this format...
<a href="..." ...> {Thing that is clickable} </a>
Try...
<div id="projects">
<a href="https://itunes.apple.com/gb/app/ritgk/id581734892?mt=8">
<img class="ritgk"
src="images/ritgk.png"
onmouseover="this.src='images/ritgkhover.png'"
onmouseout="this.src='images/ritgk.png'"
alt="RITGK iOS App"
width="296"
height="168"/>
</a>
<a href="http://www.redbubble.com/people/f7james/works/10680438-imagine-dragons-night-visions-poster">
<img class="imaginedragons"
src="images/imaginedragons.png"
onmouseover="this.src='images/imaginedragonshover.png'"
onmouseout="this.src='images/imaginedragons.png'"
alt="Imagine Dragons - Night Visions Poster"
width="296"
height="168"/>
</a>
</div>
Although getting fully W3C compliant html can be time consuming with browser incompatibilities, it's always useful to run your page through the W3C validator which will find almost all syntax errors.
I am trying to figure out how exactly to add two buttons side by side. The button will be an image that the user clicks and it then goes to the URL. I tried adding a class in CSS with an inline display and added html calling that class on a button with an extra style tag added to it. It is not displaying the button though.
I am unsure how else to do it without adding the style tag directly in the html code if I needed the buttons side by side. That is the only way I know how to di it with display: inline;.
Here is how I am doing it:
CSS
.storebtns {
display: inline;
}
HTML
<a class="storebtns" href="http://www.google.com" style="background-image: url(/img/btn.png);"></a>
I might not be understanding the question correctly, but if you want two buttons to be side by side and have an image background, try:
<a class="storebtns" href="#"></a>
and:
.storebtns {
padding:100%;
background:url("IMAGE_PATH_HERE");
}
This might work better, not sure if its feasible for you.
.storebtns
{
float:left;
width:100px;
}
<a class="storebtns" href="http://www.google.com">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSUZXG8Fd-auKjn_fLKsFtHMIarXLlcnDoTAvV86PSxmJFLwYgzJQ" width="100"/>
</a>
<a class="storebtns" href="http://www.stackoverflow.com">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSHUhwMHx9nciceUQQ5X5Id7pK9pFeAXPRVc0BhunO5zt49OvNiag" width="100" />
</a>
here is a working example Here
This might work better, not sure if its feasible for you.
<a class="storebtns" href="http://www.google.com">
<img src="/img/btn.png" />
</a>
Try adding the buttons using ul, floating it and adding background images with css.
http://jsfiddle.net/nxEd5/
<body>
<h1>Click on a kitty.</p>
<div id="buttons">
<ul>
<li>Button1</li>
<li>Button2</li>
</ul>
</div><!--end buttons-->
</body>
Here is the CSS:
ul li{
float:left;
list-style-type:none;
}
ul li a{
padding:40px;
text-decoration:none;
text-indent:-9999px;
background:url(img.jpg) no-repeat;
opacity:0.5;
display:inline-block;
}
ul li a:hover{
opacity:1.0;
}
I am putting the share buttons from the social networks onto my website and have spent some time trying to line them all up nicely and have just about managed it, but for some reason it won't allow me to click on the 'tweet' button anymore.
Can anyone suggest why this may be? When I remove the divs surrounding the 'tweet' button and the 'social network' div it works fine.
Thanks in advance for any help.
.social-network{
border:1px solid #000;
width:300px;
overflow:visible;
height:20px;
}
.fb{
float:left;
width:73px;
margin-right:12px;
}
.twitter{
float:left;
width:95px;
margin-right:12px;
}
.google{
float:left;
width:60px;
}
<div class="social-network">
<div class="fb"><fb:like send="false" layout="button_count" width="150" height="80" show_faces="false"></div>
<div class="twitter"><a class="twitter-share-button" data-text="this is the best website" data-count="horizontal">Tweet</a></div>
<div class="google"><g:plusone annotation="bubble" size="medium"></g:plusone></div>
</div>
If memory serves, the <a> should have a href="https://twitter.com/share" attribute. The Twitter javascript file will then automatically find it and replace it with an actual button.
-edit-
Looked it up, the href attribute isn't actually needed. It is, however, very important that you include Twitter's widgets.js after the <a>.
My Code:
<a id="entire" href="/check-appointment.php">
<div id="check_box">
<div id="check_content">
<a id="boxis" href="/check-appointment.php">I am a sales rep</a>
<br> making a request on behalf of the client.
</div>
</div>
</a>
CSS:
#check_box {
width:423px;
height:250px;
margin-left:100px;
margin-top:10px;
}
#check_content {
font-weight:bold;
font-size:37px;
}
Problem:
I am unable to make the work with the I am trying to get that entire div to be part of the
How can i make it work?
If you have an HTML5 DocType it should work, anything before that won't allow inline elements a to wrap block level elements div.
Even if you use an anchor unless you do some z-indexing then your inner link likely won't be seen how you are expecting...since it's the same link it shouldn't be a problem, but that then becomes repetitive.