I've messed with the display and position style properties but no matter what I try my element is stuck on the vertical axis.
I copied the CSS code from a button generator website and all works perfectly, I even added a function to it in javascript but I'm completely stuck on positioning it.
I'm only a few weeks into self-teaching myself to code and at the moment javascript is my strong point but obviously, CSS and HTML come in handy too. Any help is appreciated.
#startButton {
box-shadow: 0px 0px 12px 2px #3dc21b;
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:18px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
position: relative;
top: 50%;
left: calc(50% - 30px);
}
.startButton:hover {
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
}
.startButton:active {
position:relative;
top:1px;
}
I have the element 'on its own in HTML if that makes any sense, it's not in its own div or head or body. I'm not sure if that makes a difference though.
Thanks!
Edit: I've got as far as figuring out the elements don't just overlap like I thought. I've learnt my problem is that the 'space' for the button element is stuck below the canvas. I now need a way to overlap these elements.
The reason is that the parent element (body in your case) does not have a static height.
Therefore you can add a parent element with static height and wrap your #startButton.
Edit your html:
<div class="parent">
<button id="startButton"> #Startbutton </button>
</div>
Add static height to the parent element (e.g. 300px):
.parent {
height: 300px;
}
Fiddle: https://jsfiddle.net/kongallis/chqn18us/6/
Refer also to: https://stackoverflow.com/questions/9765402/why-is-is-top50-in-css-not-working#:~:text=To%20answer%20your%20question%20why,a%20unit%20other%20than%20percent.
Related
I'm trying to get an input to load a CSS sprite, and put the icon I want out of it, right at the END of the input. Here is what I have so far:
#test2 {
width: 140px;
outline:0;
background: url(http://www.chambresdhotes.org/new_design/sprites-all.png) -87px -97px no-repeat;
}
Here is some code I have that works fine, but it uses an individual image (this is what is currently live, but we want to convert it into a sprite for SEO);
#test1 {
width: 140px;
background-image:url(http://www.chambresdhotes.org//new_design/bookings/images/calendar1.png);
background-repeat:no-repeat;
background-position:95% center;
outline:0;
}
Here is a JSFiddle to see the 2 running alongside each other:
https://jsfiddle.net/vr5emuar/
Can anyone explain where I'm going wrong? I've even tried using :after on the input (but it seems that doesn't work, as you can't use :before or :after on inputs)
Thanks!
::after and ::before are pseudo-elements and an input can't have element inside it.
There are multiple solutions :
If you use css sprite, your sprite should be vertical and icons must be separated with some transparents pixel to avoid others icons to be visible in the input.
Use a span or i element around the input, it generate icon with pseudo-element (:after) and put it over the input with absolute positionning on :after and relative position on the span.
You can do it like below only change needed is your sprite should be vertical.
.input {border:none; float:left;padding:1px; outline: 0;}
.calander{
border:1px solid #efefef;
display:inline-block;
float:left;
background: url(http://www.chambresdhotes.org/new_design/sprites-all.png) no-repeat scroll 85px -94px #fff;
width:190px;
padding: 4px 4px 6px 0px
}
<div class="calander"><input type="text" class="input" /></div>
I have a custom webkit scrollbar like this:
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: #999 !important;
}
So it renders a grey custom scrollbar instead of the standard one. However, it is stuck to the right side of the page. I know I can change this by adding a margin, padding or border to my body but I am using fullscreen (on backgrounds) images. So when I try this all the images are affected by this too, which I do not want. So I tried to position the scrollbar but this does not work (as it is not an element but a user agent property...
So I'm looking for a way (without using another plugin) to customize the toolbar so that it is offset from the side.
Or, if possible that I can make the scrollbar offset in a div.
Secondly, I'm looking for a way that I can make the "track" of the scrollbar transparet. So only a handle.
Thanks in advance!
If you are still looking for for the answer (or somebody else is, like I was) - here is a definitive article about webkit scrollbars.
Answering Your first question - I'd suggest that you put all your scrollable content in a div with 100% height and 90% width - the 10% left on the right would be your offset. Like that:
.superDiv{
height:100%;
width:90%;
position:fixed;
}
body{ overflow: hidden }
The second question - you're looking for
::-webkit-scrollbar-track-piece {
background:transparent;
}
But as Apple people are pushing for no-scrollbar web browsing, only the properties set by CSS are visible, so you don't have to change the track-piece.
Clever solution I found recently was to put the border on the right hand side of the screen / div that contains scrollbar:
<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
An easy way to control the position of a custom scrollbar is to set the scrolling element (body?) using definitive positioning. You'll also need to set html to overflow:auto;
To make the thumb transparent, use a RGBa value for declaring the color. In this case I used 0,0,0,0.4 (red,green,blue,alpha). RGBa is not supported in every browser, Chris Coyier has a good table of who supports it here: http://css-tricks.com/rgba-browser-support/
If all you want to show is the thumb than also consider hiding the other elements of the scrollbar: resizer, scrollbar-button, and scrollbar-corner.
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 5px;
right: 20px;
overflow: scroll;
}
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }
Check out the working demo at http://jsfiddle.net/Buttonpresser/G53JQ/
I want a border on the right hand side of a div.
I do:
<div class="span6" style="border-right: 2px solid #727272;">
the things is I'd like my border not to run to the top and bottom of the div. Maybe 5px from the top and 5px from the bottom. Or 90% of the height of the div. How do I do this?
Thanks
You can use a pseudo element to hold the border. The following would make the "border" be 90% of the height of the parent element:
http://cssdeck.com/labs/kyrvt8hf
div {
position: relative;
}
div:after {
display: block;
content: '';
position: absolute;
top: 5%;
bottom: 5%;
right: 0;
border-right: 2px solid red;
}
I could be wrong, but I don't believe there is any way to really make this happen that you would probably want to roll with. In fact, I thought of three "hacky" ways that might work, but all three can't get you to the desired state, assuming a variable height.
Assuming a fixed height, you could create a 2px wide by 90% div height image of the color you want, then set it as the background image of the div. Something like:
.span6 { background: #fff url(bgBorder.png) no-repeat right center; }
Update
A variation based on what Tyblitz said in the comments. This allows for dynamic height. I am still inclined to go with the :after option, as it keeps your DOM cleaner, but in case that is not possible:
http://jsfiddle.net/designingsean/bsbgX/1/
HTML:
<div class="span6">The content div<div class="border"></div></div>
CSS:
.span6 {
width:50%;
height:400px;
background-color:#ddd;
position:relative;
padding:10px;
}
.border {
width:2px;
background-color:#222;
position:absolute;
top:5%;
bottom:5%;
right:0;
}
Note that to make it a fixed distance (say, in pixels), just change the top and bottom from a percentage to the px you want. See http://jsfiddle.net/designingsean/bsbgX/2/ for the example.
This picture show's how border's work
You can either set margin to curtail the border or set padding to extend the border. Currently there is no option in CSS to target the border and make it bigger or smaller(not talking about width obviously). You can however use padding, margin, another div or pseudo element's to reach the desired effect.
I have looked around for this and it seems simple but i cant seem to work it out.
I have a div with a background.
I want the background to start 20px down and then repeat-y, as in repeat the rest of the way down.
<div class="main_col"></div>
.main_col {
width: 680px;
float: left;
background:#fff;
background-position:50% 50%;
}
This is what im trying but it is filling the whole div?
this is what i have tried....http://jsfiddle.net/uzi002/gqqTM/4/
You cannot do this with one class definition in current CSS2 standards.
Use a separate div for the background.
If you want to fiddle with some CSS3, you can check out
background-origin
at
http://www.css3.info/preview/background-origin-and-background-clip/
Be aware of browser support.
You might try to add padding-top: 20px to .main_col and inside it create additional div with this background.
.main_col {
width: 680px;
float: left;
background: url("your image") 0px 20px;
}
Update
this is using giker s example
try something like this
There are 3 CSS properties relevant to achieving this:
background-image { url(/myBackground.png) } // To select the image
background-repeat { no-repeat } // To choose how or if it repeats
background-position { 1px 1px } // To choose the X, Y coordinates of the top left corner of the background image in relation to the top left corner of the element.
Now, that's all quite verbose but it can be condensed into a single rule, as follows:
background { url(myBackground.png) no-repeat 1px 1px }
It is possible to use relative values (such as the % which your code shows) for the background-position, but you will need to use px.
Try using a margin padding.
i.e.
.main_col {
width: 680px;
float: left;
background:#fff;
background-position:50% 50%;
padding-top:20px;
}
Just wondering if its possible to cleanup (less code needed to do the same thing) making this div container. Basically it's just a div with a background image however the top & bottom of the div have rounded graphical corners which is why I have a top, middle, and bottom div inside the container div.
<div class="fbox">
<div class="ftop"></div>
<div class="fmid">
Fullbox Text Goes Here
</div>
<div class="fbot"></div>
</div>
Css:
.fbox {
width: 934px;
margin: 0 auto;
opacity: 0.70;
}
.ftop {
width: 934px;
background:url(../images/cb/full.png) no-repeat 0 -34px;
height: 17px;
margin:0
}
.fmid {
width: 894px;
padding-left: 20px;
padding-right: 20px;
background:url(../images/cb/fullmid.png) repeat-y;
min-height: 50px;
margin:0
}
.fbot {
width: 934px;
background:url(../images/cb/full.png) no-repeat 0 -17px;
height: 17px;
margin:0
}
Outcome:
http://img709.imageshack.us/img709/6681/fbox.jpg
http://www.the-art-of-web.com/css/border-radius/
You can use CSS Border Radius with a single div instead of creating the top and bottom. IE won't recognize this but there are some handy work arounds for that as well.
I will commonly use CSS3 PIE which is an htc behavior for IE. It does a bunch of other stuff like linear gradient background colors etc. All you do is supply the border radius css for each browser and the browser will know which one to use.
http://css3pie.com/
.yourbox {
/* PIE Sample */
border: 1px solid #696;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(/PIE.htc);
}
All you really need is the border radius stuff for other browsers though.
You could use the border-radius CSS property. In Firefox, you would use -moz-border-radius and in WebKit you would use -webkit-border-radius. I generally will use all three. This will round the corners of the box without need for all the extra div's.
Of course, users of IE are S.O.L. but sometimes you have to give a little to take a little, right? :)
<div id="box">Blah blah blah.</div>
#box{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}
The easiest way would be to use border-radius, but it's not compatible across all browsers. Support is decent. Also, covering all supported browsers requires vendor specific code, which is kind of annoying:
-webkit-border-radius: 4px; /* Vendor code */
-moz-border-radius: 4px; /* Vendor code */
border-radius: 4px; /* CSS 3 Standard */
You can add borders to divs with border-radius applied, and it'll follow the round of the corners as you'd hope.
If you have to use images which is what it sounds like. Create a single image file that has the borders you want and use special css selectors to adjust the background position so your not loading 3 different background images.
.fbox .border {
background: url(bg.png);
}
.border.mid {
background-position: center center;
background-repeat: repeat-y
}
.border.top {
background-position: top left;
background-repeat: no-repeat
}
and so on and so forth
I can't say exactly how you would adjust the bg position because it will depend on the image you use and whether or not your using a constant fixed width. But I highly recommend using only one image and then using an additional selector to just move the bg position.