i have tried designing my own input file base on this fiddle i need to align properly the button in input text of a bootstrap.
this is my code to design my input type. also the button of bootstrap is not aligning.
.forUplBtn {
background-color:#427db8;
width:50px;
display:inline-block;
border: none;
color: #fff;
padding:5px 20px 5px 20px;
border:none;
overflow:hidden;
text-align:center;
position:relative;
margin:0;
}
.forUplBtn a{
z-index:-1;
}
.forUplBtn input[type="file"]{
/*margin-left:-145px;*/
width: 100%;height:100%; position:absolute; left:0;top:0; opacity:0
}
Try adding vertical-align:top to .forUplBtn and add this for the upload button:
.uplPhot a button{
vertical-align:top;
}
Add the below css to your code
button {
position: absolute;
margin-left: -90px;
width: 90px;
margin-top:4px
}
Check this Fiddle
Also check Jasny's fork Bootstrap for file upload, easy to integrate.
Related
I've problem with my "JS-block validator". It should cover all the page and show this message, but in my project there shows also other files behind it. Can there be problem vith multiple !important?
`
body:not(div#wojs){
display:none !important;
}
#wojs{
width:100%;
height:100%;
display:block !important;
background-color: black;
position:absolute;
top:0;
left:0;
}
#wojs p {
font-size: 2.5em;
color: red;
margin: 10% auto;
}
<div id="wojs">
<p>JavaScript is disabled. Please, Allow it and refresh.</p>
</div>
`
I'm trying to get buttons that are all the same size, however I'm new and therefore stuck, here's my CSS code :
.bannerArea nav ul li{
list-style:none;
display:inline;
padding: 10px 30px;
background-color:#0C0C0C;
opacity:0.7;
text-align:center;
text-shadow:none;
}
http://www.webpagetemplates.org/web-page-templates/download/preview/wpt0054/
Notice the buttons ? They are all the same size, like I want. And also, how do I center the actual buttons and not just the text?
Top tip: putting a test case into a JSFiddle will give people a clearer idea of your problem, and thus provide you with an answer.
Having said that, you want to use display: block instead of inline and then set a width:
.bannerArea nav ul li{
list-style:none;
display:block;
width: 25%; /* Adjust this accodringly */
padding: 10px 30px;
background-color:#0C0C0C;
opacity:0.7;
text-align:center;
text-shadow:none;
}
I have a div I'm adding appearance: button style to it. This works but it causes a shift in Firefox, I suspect it is because of the border but using box-sizing:border-box doesn't stop it. I also tried adding width and height but it still shifts.
http://jsfiddle.net/2CEuu/2/
<div id="add-new-complaint">
<div class="plus 3"></div>
Add new Complaint
</div>
[id|=add-new]{
display: inline-block;
padding:4px;
cursor:pointer;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
[id|=add-new]:hover{
-webkit-appearance:button;
-moz-appearance:button;
appearance:button;
}
div.plus{
width:15px;
height:15px;
position:relative;
display: inline-block;
}
div.plus::before{
width:100%;
height:33.333%;
top:33.333%;
left:0;
position:absolute;
content:'';
background-color:#789dc3;
}
div.plus::after{
width:33.333%;
height:100%;
top:0;
left:33.333%;
position:absolute;
content:'';
background-color:#789dc3;
}
You can target only Firefox to fix the problem:
#-moz-document url-prefix() {
[id|=add-new]:hover{
padding: 1px;
}
}
Would it work for you?
The way I see it there are 2 solutions,
Either add/reduce padding/margin accordingly on hover to fake the shift back to its position,
like so:
a { margin: 10px 5px; padding: 10px; }
a:hover { padding: 9px 10px 10px 9px; }
Or, better, add a default transparent border:
a { border: 1px solid rgba(0,0,0,0); }
This will keep the box at the correct size until it is hovered.
I have a previous and a next button for a php pagination script, which both fall under the class paginate.
.paginate {
font-family:Arial, Helvetica, sans-serif;
padding: 3px;
width:400px;
}
.paginate a {
padding:2px 5px 2px 5px;
margin:2px;
text-decoration:none;
color: #fff;
width: 180px;
}
so i have given them both their own individual classes Next and previous
Next
.next {
background: url("../images/more.fw.png") no-repeat;
height: 87px;
width:128px;
padding:10px;
margin:50px;
font-family:Arial;
font-size:24px;
color:#fff;
position:fixed;
top:585px;
right:470px;
}
Previous
.previous {
background: url("../images/previous.fw.png") no-repeat;
height: 87px;
width:128px;
padding:10px;
margin:50px;
font-family:Arial;
font-size:24px;
color:#fff;
position:fixed;
top:585px;
right:620px;
}
As you can see in the link below these buttons fit perfectly side by side when set against the top of the page, however what i am trying to do is get the buttons to sit say 20 px below the section above. However if i change ti from top 558px, what happens is the buttons sit at different heights and will not sit next to one another.
Any ideas would be appreciated.
Thanks
you can set the button by position:absolute; on both the .next and .previous so that the potion of button wont change
You have the style set to position: fixed, so they wont move when the screen scrolls - is this what you want?
.paginate {
position: relative;
...
.next {
position: absolute;
display: block;
...
Now set your button top and right all relative to the paginate container
I'm trying to style a button with the css 'sliding doors' technique, but it isn't working properly. I've only got access to firefox 3 at the moment so this issue may not occur in other browsers but I would like to solve it for firefox as well.
Here's a picture of what the problem is:
http://img131.imageshack.us/img131/3559/buttons.png
As you can see the second side is lower than the first by a pixel and also is not over to the right enough. Here is the code I am using:
button
{
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button span
{
display: block;
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
<button class="important" type="button"><span>Register</span></button>
<button type="submit"><span>Submit</span></button>
How do I fix this problem? I tried relatively positioning the span using top: -1px right: -3px but then the text is mis-aligned.
Thanks.
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I just did sliding doors on a div background, and the code from this site worked perfectly.
Try setting the padding for the button to zero, and then playing with the padding-left and width to put the text in the right place.
button { padding:0; padding-left:5px; width:90px; /* total width:95px */ }
button span { ... }
If you look at the HTML block display: padding gets added to the overall width of the object, and the background starts in the padding area, and the right half is padded
However please take note, that button elements are NOT suited for embeding any other nodes inside (like span). They may work OK in the browser, but IE can make your life really hard (not to mention that as far as I know, it's not valid)
Form elements like buttons are always hard to style, and riddled with minor bugs like these.
Instead of applying the class to the button element itself, perhaps try and apply the button's styling to an extra span element inside the actual button?
In short:
button {
background: white;
border: 0;
}
button div {
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button div div {
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
And HTML:
<button type="submit"><div><div>Submit</div></div></button>
I use DIVs instead of buttons and have a function to build them in-place. It ends up looking like this:
alt text http://fb.staging.moveable.com/samplebutton.gif
inline script call:
<script type='text/javascript'>makeButton("Log in","login()")</script>
code:
function makeButton(text,action) {
document.writeln("<a class='titleGen' href='javascript:// "+action+"' onclick='"+action+";return false'><div class='btn'><div class='btnLeft'></div><div class='btnMiddle'><div class='btnText'>"+text+"</div></div><div class='btnRight'></div></div></a>")
}
css:
a.titleGen, .btnText, .btnGText {
text-decoration:none
}
a.titleGen:hover, .btnText:hover, .btnGText:hover {
text-decoration:none
}
.btn {
height:22px;
display:inline;
cursor:pointer;
margin-right:5px;
}
.btnLeft {
background-image:url(/images/bg_btnLeft.gif);
width:3px;
height:22px;
float:left;
}
.btnRight {
background-image:url(/images/bg_btnRight.gif);
width:5px;
height:22px;
float:left;
}
.btnMiddle {
background-image:url(/images/bg_btnMiddle.gif);
width:auto;
height:22px;
float:left;
}
.btnText {
color:#ffffff;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:2px;
padding-left:10px;
padding-right:10px;
}