Just redoing our captcha.
Demo: http://sitehelp.com.au/demos/ttt/422.php
Anyhoo the css is as follows:
.funcaptcha { width: 81px; overflow: hidden; float: left; margin-right: 0px; }
.funcaptcha a { display: inline-block; background: url("http://sitehelp.com.au/demos/ttt/images/ttt-small.png"); margin: 2px 2px 0 0; float: left; }
.funcaptcha a.circle { background-position: 0px -29px; }
.funcaptcha a.cross { background-position: -29px -83px; }
.funcaptcha a.empty { background-position: -0px 0px; }
.funcaptcha a.marked,
.funcaptcha a:hover { background-position: -29px 0px; }
.funcaptcha .box { display: block; cursor: pointer; overflow: hidden; width: 25px; height: 25px; }
Contains php, so unable to do a fiddle. But My css positioning is just off a tad, any suggestions ?
the ttt-small.png is:
So that it can be marked answered....
Bottom layer is 25 pixels tall and the top layer is 26. Sprite needs to be fixed.
Here's an editable jsFiddle with the HTML and CSS: http://jsfiddle.net/WhG5L/
Related
My footer background image is not showing. I cant figure out why.
Any help would be greatly appreciated. Thank you.
/* Footer */
}
.footer {
height: 400px;
width: 100%;
background: url(/images/space.jpg);
background-size: cover;
}
.footer .container {
position: relative;
top: 200px;
}
.footer p {
color: #fff;
font-size: 15px;
margin: 0px 0 20px 0px;
padding: 50px 0 0;
}
I am working on a plugin and need to align some social buttons to right side using CSS. But instead of showing in a line (horizontally) the buttons are showing vertically. Here's the code for that.
<div class= "sc1"><div class= "sc2"><span>Connect with us:</span>
<div class= "sc3"><div class="facebook-icon"></div>
<div class="twitter-icon"></div>
<div class="google-icon"></div>
<div class="instagram-icon"></div></div></div></div>
Now the CSS
.sc1 {
margin: 5px 0px;
background-color: #3498DB;
display: inline-block;
padding: 8px 10px;
width: 100%;
}
.sc2{
float: right;
color: white;
}
.sc3 {
float: right;
}
.sc3 .facebook-icon {
background-image: url(images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: 0 0;
/*float: right;*/
}
.sc3 .twitter-icon {
background-image: url(images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: -32px 0px;
/*float: right;*/
}
.sc3 .google-icon {
background-image: url(images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: -125px 0px;
/*float: right;*/
}
.sc3 .instagram-icon {
background-image: url(images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: -63px 0px;
/*float: right;*/
}
But after this the code final result is showing as
Here's the picture
I have also uploaded complete code on GitHub, in case someone wants to look at the complete code. Here it is.
You can add display: flex; to your .sc3 class:
.sc3 {
display: flex;
}
This will make all the icons align horizontally.
I have seen this, but it does not provide any solution to my programming issues:
Custom cursor to entire page
This is the CSS Markup:
body {
height: 100%; width: 100%; padding: 0; margin: 0;
background: #000 url('http://1hdwallpapers.com/wallpapers/undead_dragon.jpg') no-repeat fixed center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; font-size:12px; font-weight:bold;
cursor: url('http://www.rw-designer.com/cursor-view/21962.png'), auto;
}
div#mask {
cursor: not-allowed;
z-index: 999;
height: 100%;
width: 100%;
}
a:link {
color: #ffffff;
font-weight: normal;
text-decoration: none;
}
a:visited {
color: #ffffff;
font-weight: bold;
text-decoration: line-through;
}
a:active {
color: #F433FF;
font-weight: normal;
text-decoration: blink;
}
a:hover {
color: #F433FF;
font-weight: bold;
text-decoration: blink;
}
#about_me
div.center {
margin-left: auto;
margin-right: auto;
width: 8em;
}
{
width: 355px;
float: right;
margin: 20px 0px 0px 0px;
}
.contentTitle {
color: #fff;
background: #000;
}
.contentModule {
color: #FF00FF;
border: 1px solid transparent;
background: transparent;
cursor: pointer;
}
#right_column {
float: left;
width: 355px;
margin: 20px 0 0 20px;
}
#left_column {
width: 210px;
margin-bottom: 10px;
margin-right: 0px;
float: left;
}
#pet_panel {
position: absolute;
top: 80px;
right: 700px;
margin-top: 50px;
width: 40%; float: left; margin: 0 0 20px 0;
}
#comment_panel {
position: absolute;
top: 700px;
right: 85px;
margin-top: 50px;
}
#tombstone_panel {
position: absolute;
top: 30px;
right: 85px;
margin-top: 50px;
}
#user_panel {
position: absolute;
top: 30px;
right: 385px;
margin-top: 50px;
}
#wishlist_panel {
position: absolute;
top: 250px;
right: 85px;
margin-top: 50px;
}
This is the HTML Markup:
<div id="about_me" class="contentModule">
<div class="contentTitle">About Me</div>
<div class="contentModuleI">my tagline </div>
</div>
What can I do to make my custom cursor visible throughout my page like the default cursor is?
If you need to display custom cursor on full page you have to add CSS like this. Have a look at DEMO.
body, html
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background: #000 url('http://1hdwallpapers.com/wallpapers/undead_dragon.jpg') no-repeat fixed center;
cursor:url('http://www.rw-designer.com/cursor-view/21962.png'), url('cute25.cur'), help;
}
so here explain how it works; Firefox and chrome are fine with .jpg or .png file extension. But to support in IE need a .cur file extension. You may convert your image into .cur extension. from this online tool.
Note: If you need it work also in IE then you have to use cursor .cur file extension.
I'm so confused, I want to make a sidebar with plugin tinyscrollbar, I want "height" of viewport is '100%' but if i change the css then the content is does not appear, can you give me another solution?
This a default code of tinyscrollbar but I change the 'height' of viewport:
#scrollbar1 {
width: 520px;
margin: 20px 0 10px; }
#scrollbar1 .viewport {
width: 500px;
height: 100%;
overflow: hidden;
position: relative; }
#scrollbar1 .overview {
height:100%;
list-style: none;
position: absolute;
left: 0;
top: 0;
padding: 0;
margin: 0; }
#scrollbar1 .scrollbar{
background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0;
position: relative;
background-position: 0 0;
float: right;
width: 15px;
height:100% }
#scrollbar1 .track {
background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%;
height: 100%;
width:13px;
position: relative;
padding: 0 1px; }
#scrollbar1 .thumb {
background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%;
height: 20px; width: 25px;
cursor: pointer;
overflow: hidden;
position: absolute;
top: 0;
left: -5px; }
#scrollbar1 .thumb .end {
background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0;
overflow: hidden;
height: 5px;
width: 25px; }
#scrollbar1 .disable {
display: none; }
.noSelect {
user-select: none;
-o-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none; }
You can't make it proportional (percent), you'll need a fixed value for it. Use jQuery or something similar to determine the actual height, then use it as a fixed pixel height value. This is the best I can advise. Also, you may need to react on window resizing.
I've been trying to create a small social media bar for my website.For some reason which I can't work out the images which I want to use to create a sprites won't load. I should also mention that I have had similar problems with background-image not displaying.
HTML call is this:
<div id="socialbar">
<div class="plus">Google Plus</div>
<div class="twitter">Twitter</div>
<div class="facebook">Facebook</div>
<div class="youtube">YouTube</div>
<div class="flickr">Flickr</div>
</div>
CSS looks like this:
#socialbar
{
width: 245px;
margin: 0px;
display: inline;
border: 0px;
}
#socialbar a.plus
{
display: block;
float: left;
height: 32px;
width: 32px;
text-indent: -9999px;
background-image: url('http://www.mediafire.com/conv/9452d5f77f6e5e7e91294b54b9a74d18029cbeae2075ef9d12787e7631f849226g.jpg');
background-position: 0px 0px;
margin-left: 5px;
margin-right: 5px;
}
#socialbar a:hover.plus
{
background-image: url('http://www.mediafire.com/conv/9452d5f77f6e5e7e91294b54b9a74d18029cbeae2075ef9d12787e7631f849226g.jpg');
background-position: 0px -32px;
}
#socialbar a.twitter
{
display: block;
float: left;
height: 32px;
width: 32px;
text-indent: -9999px;
background-image: url('http://www.mediafire.com/conv/d2133ecf83fc76b78008ed1357a8fb8213e6c2300c26f6af3b1758c576ed17db6g.jpg');
background-position: 0px 0px;
margin-left: 5px;
margin-right: 5px;
}
#socialbar a:hover.twitter
{
background-image: url('http://www.mediafire.com/conv/d2133ecf83fc76b78008ed1357a8fb8213e6c2300c26f6af3b1758c576ed17db6g.jpg');
background-position: 0px -32px;
}
#socialbar a.facebook
{
display: block;
float: left;
height: 32px;
width: 32px;
text-indent: -9999px;
background-image: url('http://www.mediafire.com/conv/df04514676d02be959e52f440b9c10e82d09eefdb82d34fdd336a896be551d026g.jpg');
background-position: 0px 0px;
margin-left: 5px;
margin-right: 5px;
}
#socialbar a:hover.facebook
{
background-image: url('http://www.mediafire.com/conv/df04514676d02be959e52f440b9c10e82d09eefdb82d34fdd336a896be551d026g.jpg');
background-position: 0px -32px;
}
#socialbar a.youtube
{
display: block;
float: left;
height: 32px;
width: 32px;
text-indent: -9999px;
background-image: url('http://www.mediafire.com/conv/6de4cbb7ecf8e81a25e0ebe35e2cb82af5859b4b2cb3ac9c3ec2fe8c62348c296g.jpg');
background-position: 0px 0px;
margin-left: 5px;
margin-right: 5px;
}
#socialbar a:hover.youtube
{
background-image: url('http://www.mediafire.com/conv/6de4cbb7ecf8e81a25e0ebe35e2cb82af5859b4b2cb3ac9c3ec2fe8c62348c296g.jpg');
background-position: 0px -32px;
}
#socialbar a.flickr
{
display: block;
float: left;
height: 32px;
width: 32px;
text-indent: -9999px;
background-image: url('http://www.mediafire.com/conv/dbab33ccef1c60b2974d10a0323f7bb04f594f3b57468dc1a7be8551eb9d1b176g.jpg');
background-position: 0px 0px;
margin-left: 5px;
margin-right: 5px;
}
#socialbar a:hover.flickr
{
background-image: url('http://www.mediafire.com/conv/dbab33ccef1c60b2974d10a0323f7bb04f594f3b57468dc1a7be8551eb9d1b176g.jpg');
background-position: 0px -32px;
}
Your find my code here also:
http://jsfiddle.net/Yx8tT/122/
(Please note that i am using another host for this as the host for my website does not allow direct links to images etc for anything other than my actual website)
And the site in question being:
http://www.darrenlumber.co.uk
Thanks inadvance!
You aren't applying your css to the plus elements.
<div class="plus">Google Plus</div>
#socialbar a.plus
{
display: block;
float: left;
height: 32px;
width: 32px;
text-indent: -9999px;
background-image: url('http://www.mediafire.com/conv/9452d5f77f6e5e7e91294b54b9a74d18029cbeae2075ef9d12787e7631f849226g.jpg');
background-position: 0px 0px;
margin-left: 5px;
margin-right: 5px;
}
The selector should be:
#socialbar .plus a
and so on for each of the others.