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>.
Related
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'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;
}
I'm building a site that is almost complete. The problem I am having is with IE7 and displaying images that look very distorted/muddy.
First how it looks in all the other browsers I tested, including IE8.
Removed due to link limit on new accounts
And then the muddy one from IE7
Muddy/Distorted Image
After doing some googling it looks like it has to do with the pixel transparency in PNG images on IE7.
First I tried setting a solid background color in the actual background file. This did not work as the image was still very muddy and distorted.
Next I tried specifying a fixed width and height but still the same result. Not sure what else to try at this point.
Any suggestions I am willing to try.
Here is the code pertaining to the element.
.feature {
padding-top:10px;
border-top:solid 1px #ccc;
width:440px;
margin:0 auto;
padding-bottom:5px;
}
.featureimg {
float:left;
width:190px;
}
.featureimg img {
max-height:90px;
max-width:190px;
vertical-align:middle;
}
.featuretext {
float:right;
text-align:left;
width:250px;
}
<div class="feature">
<div class="featureimg">
<img src="images/certipur.png" alt="" />
</div>
<div class="featuretext">
<div class="featurehead red">
Sealed with comfort and confidence
</div>
<p>
TEXT BLOCK
</p>
</div>
<div class="clear">
</div>
</div>
Here is the link to original file http://imgur.com/z2SoV
In case you still care: http://imgur.com/9H9nFHe
I tried using BrowserStack.com to check for the image using IE7 and it didn't look muddy at all. I guess it your VM display settings but i think it shows up perfectly fine. :)
I have three div tags wraps on my website and in those wraps i have multiple other div tags aligned under each other. When I started working on the right column div tag wrap and when i had put my inner div tag in that one it didnt show on FireFox although I coded it the same as the left and center one.
Code of the right column divtag wrap:
<div id="right_column_wrap">
<div id="advertisement_panel">
<img src="images/advertisement_h1.png" />
<p class="advertisement_panel">Want your website featured here? Mail us at info#Ranklist-Top100.com</p>
</div>
</div>
CSS Code:
#right_column_wrap{
width:312px;
height:auto;
margin:0 auto;
text-align:center;
float:right;
}
#advertisement_panel{
background:url('http://www.ranklist-top100.com/skins/ranklist/images/advertisement_panel-bg.png') no-repeat top;
width:312px;
height:710px;
float:right;
}
.advertisement_panel{
font-family:Arial;
font-size:15px;
color:#FFF;
}
I hope I supplied you guys with enough information =)
Miro is right. Your image gets blocked by 'adblock plus' - this will quite probably be the same for the majority of your users.
Try to use that background file locally and name it something different from 'advertisement_panel'.
I see nothing wrong in Firefox - example.
But i have to turn off adblock plus, because it blocks that image.
I have a submit button and am styling it using the following css:
.subm
{
background-color:Transparent;
background-image:url(Images/Button_Send.png);
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;}
.subm:hover
{
background-color:Transparent;
background-image:url(Images/Button_Send_Over.png);
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;
}
Here is the html:
<input type="submit" class="subm" value="" />
Nothing surprising. However, what annoys me is that when the submit button is clicked in IE it moves the image up a couple of pixels cutting them off which makes it look, hmm, good word, 'naff.' How can I compensate or stop this?
I have tried expanding the image and leaving a couple of blank pixels at the top but it still does the same thing!
Thanks R.
I had an issue with my buttons moving around when they were clicked in IE after I styled them too. The solution I found was:
1.) Give your button(s) an equal margin
2.) Place the button(s) in a wrapper division that you can position to your liking
.subm {
background-color:Transparent;
background-image:url(Images/Button_Send.png);
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;
margin:10px; //maybe more maybe less
}
<div style="position:...;float:...;">
<input type="submit" class="subm" name="myButton" id="myButton" />
</div>
Although I have to mention that in my particular case I'm styling my buttons by ID and not applying a class so you might have issues with multiple buttons using the .subm class. THIS WORKED FOR ME IN IE THOUGH.
Try replacing the input with the button tag.
<button type="submit"><img src="..." alt="..." /></button>
and see if this doesn't accomplish it. You would need to adjust your hover effects though which might prove to require either just putting text inside the button and using a negative text-indent, or a javascript hover event to change the referenced image.
Another option is using javascript to call the form submit on a normal link, as buttons typically have a click animation.
Just a note, you could probably get more consistent results by adding a background position, and all of this you can shorthand as well
.subm:hover
{
background: transparent url("Images/Button_Send_Over.png") top center no-repeat;
}
Yet another maybe more ideal option, use the input type image instead of submit.
<input type="image" src="..." Value="Submit" />
I am pretty sure this describes the bug and has some solutions for you:
Fixing the IE8 Form Button with Background Image On Click CSS Bug