How can i draw a box using css like the answer box in stackoverflow?
Tags: css
Problem :
How can i draw a box in css? I want a box like the green one used to display the number of answers to a question in stackoverflow?
Solution :
CSS:
.answerbox
{
height: 150px; /*Specify Height*/
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
}
HTML: <div class="answerbox">4 <br /> Answers</div>
CSS Howto..
Check the fiddle here for a pure Javascript solution. /** * Gets the mixed color obtained by overlaying a front color * with the specified opacity over a solid back...
You do this using position values and negative positions. See the jsfiddle .box { position: relative; } .image { position: absolute; top: -30px; left: -30px; } And the important part...
JSBIn I post a demo on jsbin.Here is key code: #nav li span{ transition: all 0.5s; position: absolute; top: 0; left: -300px; display: block; width: 300px; height: 100%; background: #69f;...
APNG isn't a consideration as far as CSS is concerned, most browsers don't even support it (apart from firefox) What you're best off doing is turning your APNG into a...
CSS can be verbose in this sort of situation. Very often there is a lot of repetition, and not much you can do about it. Repeating the .a part of...
<ons-list-item> sets a property min-height, which you need to overwrite. So something like that should work: <ons-list-item style="height:20px; min-height: 20px" > ...
You don't really need JavaScript for this. CSS has the transform property to apply affine transforms to elements. Just do something like li:hover { transform: scale(1.2); }. It works in...
The code you have provided works fine. I have created a fiddle using your existing styling and HTML: JSFiddle HTML <a class="finaff-small-pdf-form-icon" href="/Financial_Affairs_Forms/Payee_Setup_204.pdf">Payee Setup 204</a> CSS .finaff-small-pdf-form-icon { position: relative;...
Use the content property in ::after or ::before pseudo-element to add additional text. You can also position it elsewhere with absolute and top/bottom,left/right properties. #site-title::after { content: "Another Title"; /*...
The easiest solution would be to use grunt-contrib-clean, which can simply delete the file on every build: clean: { css: ['www/assets/css/frontend.css'] } Or without installing a plugin: grunt.registerTask('clean:css', function ()...
I think this is a bug, for 4 ext you just can add "x-"-prefix for your pressedCls. But for extjs 5 you must use !important directive in your css attribute....
In CSS, something like: path { fill: none;; stroke: #646464; stroke-width:1px; stroke-dasharray: 2,2; stroke-linejoin: round; } ...
I believe this would work: select { padding-right: 15px; } ...
Friend, it is 10px not 10 for the padding value. <li style="padding: 10;">123</li> should be <li style="padding: 10px;">123</li> Cheers,...
The most elegant solution would be to use jQuery (which i believe you are trying to use) <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Vertical Tabs...
Use conditional comments to target IE6 specifically, like this: <!--[if IE 6]> <style type="text/css"> H1 {font-size: 15pt;} </style> <![endif]--> Or the other way around, whichever it is..but whatever's inside these...
The styles from #currentroom_users is cascading down your style sheet and being applied to your styles in your media query also. Hence CSS standing for Cascading Style Sheets... Cascading To...
Appears to be related to the content-type. For the CSS file that doesn't work: Content-Type:text/plain For the CSS file that does work: Content-Type:text/css As noted in the MDN docs Here...
maybe you should install vs2010 sp1? I was having the same problem the other day and I installed sp1, It was solved.
It's very hard to style <select> tags properly as different browsers/operating systems render them differently. You can build a select box-type control using JavaScript and, if you're using jQuery, there...
Using CSS3 transitions and transforms you can achieve the desired effect. Something like this would do the trick: <style> #barContainer div { height:300px; width:20px; background:#CCC; float:left; margin:10px; -webkit-transition: all 0.3s...
After digging and slogging it seems this is the best way to handle the problem (to my mind). At top of the email, add this style block. This will fix...
Please refer the code: Remove the css following css: .vcenter { height: 375px; line-height: 300px; } .vcenter input, .vcenter span{ display: inline-block; vertical-align: middle; } and update as simple: .vcenter...
I solved it setting it a variable: var redColor = {border: "1px solid #ff0000"}; if (!$scope.$$childHead.billingblock.accountID.$valid) { $scope.token_style = redColor; } Thank you to everyone for each answer....
You can apply your styles in the formfield by adding extra attributes like this: myfield = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'})) I also saw a neat solution where someone created a custom template tag...
To simplify things, I'll have two CSS classes with images you want. Set first class as default and then do something like this: $(document).ready(function () { setInterval(function() { $('body').toggleClass('class2'); },...
You should use class instead of id for multiple element. for roleback you can use Toggle Class | jQuery UI Try as below: <style> .active{ background-color: black; color: white; font-size:...
Just declare overflow: hidden; on the parent <div> container. That will clear the float and ensures that the image does not go beyond the parent's borders by ensuring that the...
var width = $('.iv_menu_thumbnail').width(); console.log(width); This will get the width of the element if this is what youre asking for. As far as I'm concerned you cannot get non numerical...
In supporting browsers, one can use multiple backgrounds: background-image: -webkit-linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png'); background-image: -moz-linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png'); background-image: -o-linear-gradient(bottom, #9B7698 24%, #4447AB 63%),...