I am trying to create a handle for a progress bar on my website. I have the bar there and it works perfectly, but when I try to draw the handle above the progress bar it gets cut off. See the picture attached. The code I have now is:
CSS:
.mejs-controls .mejs-time-rail .mejs-time-handle {
position: absolute;
display: block;
width: 14px;
height: 14px;
margin-top: -5px;
z-index: 1;
background: url(../img/sprite.png) 0 -394px;
}
HTML (Just a picture because I believe that this is a CSS issue):
and this is what it looks like on my page:
Does anyone know what the issues might be? I feel like I am close to solving it, but I could use some help getting there! Thanks.
padding-up the div in which your progress bar is placed will work.
in the class mejs-time-rail , add the following code: padding-top: 5px; in that class. if that doesn't work, try to increase the 5px to 10px
Related
Im building a webpage as part of an assignment, so fair warning, my css and html probably isnt very good.
Im having this issue where this invisble box appears to be pushing the text on my webpage to one side. not all the text, just the first couple lines.
Here is an image:
http://i.imgur.com/xtYd6xi.png
For the life of me i am unable to find a reason for this.. weird margin.. to be added.
Here is my code:
http://pastebin.com/MVRpx8uq
Can anyone give me any insight as to why this is happening? Also if there is any way i could improve the code, pointers would be appreciated.
Try adding clear: both; to your "Locations" ID selector.
Instead of this:
#Locations
{
position: relative;
left: 0px;
text-align: left;
}
Do this:
#Locations
{
position: relative;
left: 0px;
text-align: left;
clear: both;
}
Let me know if this works.
I've created three circles that are used for the dot controls/pagination on an image slider. For some reason on page load in Chrome they always appear first as squares and not as circles. Once you interact with them they then turn to circles. How can I get them to be outlined circles on page load? (if i just fill in the circles with a background they work and are circles on page load but I want them to be outlined circles on page load)
Any ideas? Thanks!
.flex-control-paging li a {
display: block;
cursor: pointer;
text-indent: -9999px;
margin: 0 8px;
height: 8px;
width: 8px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border: 2px solid #b6b6b6;
}
Thanks for the help guys! I figured out what the issue was but I don't quite understand why. I added an overflow to the dots and this took care of the bordered showing up as a square rather than a circle like I wanted on page load.
overflow: hidden;
I don't know exactly what do u mean.
But I think issue is html of slider creates dynamically via js on dom or page load event, so css applied with some delay.
Check source code of your page with right click->view source to ensure.
Try to call your slider plugin immediately after slider container, not at the end of page for ex.
I believe this is a pretty basic question for someone who knows CSS language (not my case lol). I'm using this code hosted at jsfiddle to make some speech balloons in my website. The problem came when the message inside the balloon is little. For example, in the code posted above, change the code from "bubble you" balloon to something like:
<div class="bubble you">Hi.</div>
You will see that the balloon stay on the same horizontal line as the previous balloon, and this is ugly and strange. I want the balloons to stay one after another (one below another) even when the message is small like a simple 'Hi'... What properties should I change or add in the balloons classes to get this?
Add clear: both to .bubble.
Demo here:
http://jsfiddle.net/sifriday/mek5Z/1957/
.bubble{
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0 0 6px #B2B2B2;
display: inline-block;
padding: 10px 18px;
position: relative;
vertical-align: top;
clear: both
}
Here's a screenshot.
And my CSS markup:
.submitbutton
{
background: url("/Content/SiteImages/button.png") no-repeat scroll 0 0 transparent;
color: white;
cursor: pointer;
height: 26px;
width: 76px;
margin-left: 8px;
margin-top: 12px;
}
Also, I'd like the background image to stretch to fit into the dimensions of the button. Currently it's displaying full size (I think). Any tips for this new HTML web developer?
HTML buttons always have a border, simply setting border:0; should fix this.
Try stating
background: 0; outline: 0;
on it.
Note: This should only be used for testing purposes, disabling the outline makes people who navigate with their keyboards to not receive feedback when focusing on your button.
If it works, try using a more subtle outline.
I am trying to look at this page in Firebug:
http://128.48.204.195:3000/
What I am trying to do is make the top-right area with login/signup be all the way to the right, but I am not sure how to do it. I tried to I surround that stuff with its own div called site_login but it didn't seem to do the trick.
Any idea how to put that stuff on top right further to the right so it looks a little more proportional and symmetrical?
Here is what my css looks like:
.banner .site_login {
height: 20px;
position: absolute;
float:right;
right: 0.5em;
top: 0.5em;
color: #fff;
}
.banner .site_login a
{
color: #fff;
text-decoration: underline;
}
.banner .site_login a:hover
{
color: #ff0;
}
Thank you!
Looks like you accidentally commented out the closing div tag </div>
Get that back in there (un-comment it), then position it absolutely (you'll always want it in the same place):
.site_login{position:absolute;width:300px;text-align:right;padding:10px;}
.banner{position:relative}
As Faust pointed out, you forgot your closing div tag </div>. Also, I added a float:right and it seems to work the way you are asking for. Check it out.