I want the hover background to stretch all the way from border to border of the div and not just wrap the word
<div id="selection">
<label class="category_label"><input type="checkbox">abc</label><br>
<label class="category_label"><input type="checkbox">d</label>
</div>
CSS:
#selection{
padding:0.5em;
width:200px;
height:150px;
overflow-y:auto;
position:absolute;
border:1px solid #000;
background: white;
}
label.category_label{
cursor:pointer;
width:100px;
}
label.category_label:hover{
background:#ccc;
}
http://jsfiddle.net/2H2tr/1/
There you go:
http://jsfiddle.net/vahidseo/2H2tr/3/
Delete that br tag.
Change this:
label.category_label{
cursor:pointer;
width:100%;
display: block;
}
One thing You can do is set label styles to
display:block;
remove "br" tag, then, on hover You just set label to
width:100%;
and thats it :-)
updated fiddle: http://jsfiddle.net/2H2tr/2/
try this
label.category_label{
cursor:pointer;
width:100%;
float:left;
}
http://jsfiddle.net/2H2tr/4/
Wrap each of the label elements in a div (which is designed to have display: block;) and give that the hover rule:
div.wrapper:hover {
background: #ccc
}
Fiddle
Related
I need this input field to prepend a # before the hex colour code, like so, as well as horizontally center both the div and the span containers:
<div id="color_wrapper">
<span>#<input type="text" value="ffffff"></span>
</div>
When I try with the following css:
html, body{
margin:0;
padding:0;
font-size:22px;
color:#fff
}
#color_wrapper{
border: none;
background-color:#444;
text-align:center;
}
span, input {
border: none;
}
input{
outline:none;
width:85px;
background-color:transparent;
font-size:inherit;
color:inherit;
display:inherit;
}
I achieve limited success, in that the hash is at the start and the span and input seem to be centered. The problem occurs when I attempt to set the width of the div, and though the width is set, it snaps back to the left.
So, how can I center the div and the span, while also being able to change the div's width?
Here's a fiddle with the code.
Just specify margin: 0 auto for your div.
html body{
margin:0;
padding:0;
font-size:22px;
color:#fff
}
#color_wrapper{
width:300px;
border: none;
background-color:#444444;
text-align:center;
margin:0 auto;
}
span, input {
border: none;
}
input{
outline:none;
width:85px;
background-color:transparent;
font-size:inherit;
color:inherit;
display:inherit;
}
<div id="color_wrapper">
<span>#<input type="text" value="ffffff"></span>
</div>
Hope it helps :)
Try this
span,input
{
align:center;
}
Hope it helps :-)
my goal is to create a Statistic Bar.
To create this, i use a list which has position:absolute to have a vertical List.
My problem is that - because of the absolut position- i have to give each li tag +50 Pixel, so that they are not overlapped.
Maybe someone has an idea or a better code snipped for this ;)
HTML
<div class="statisticWrapper">
<div class="barWrapper">
<ul>
<li class="element1" style="height:0%"></li>
<li class="element2" style="height:0%"></li>
<li class="element3" style="height:100%;"><span>1056</span></li>
<li class="element4" style="height:30%"></li>
<li class="element5" style="height:0%"></li>
</ul>
</div>
</div>
and here is the CSS Code
.statisticWrapper{float:left; width:494px; height:250px; margin-left:8px;}
.statisticWrapper .barWrapper{float:left; width:494px; height:210px; position:relative;}
.statisticWrapper .barWrapper ul > li {position: absolute; width: 40px; bottom:0px; background-color:#ccc;}
statisticWrapper .barWrapper li.element2{margin-left:50px;}
statisticWrapper .barWrapper li.element3{margin-left:100px;}
statisticWrapper .barWrapper li.element4{margin-left:150px;}
statisticWrapper .barWrapper li.element5{margin-left:200px;}
The code actually works, but when i want to have a responsive site, i have to change the margins in each media query and so.. There have to be a better method to solve my problem :(
This is what i actually have: http://skruffes.bplaced.net/test.html
This is what i want:
Another way would be to use vertical-align and display:inline-block or even inline-table to go a bit further.
gradient and box-shadow can help too to improve styling . example : DEMO
style attribute can be set from class and removed from HTML.
.statisticWrapper {
float:left;
border:solid;
margin-bottom:25px;
}
.barWrapper {
width:494px;
height:250px;
line-height:275px;
text-align:justify;/* spread evenly */
background:lightgray repeating-linear-gradient(to bottom, transparent 0 , transparent 24px, gray 24px, gray 25px);
}
ul {
margin:0;
padding:0 50px 0 0;/* add padding on right, left has got an empty pseudo element using that much space */
list-style-type:none;
height:100%;
line-height:1em;
box-shadow:0 15px 15px gray
}
ul:before {/* handy once you have nothing up to 100% :) */
content:'';
padding-top:275px;
display:inline-block;
vertical-align:bottom;
}
ul:after {/* triggers justify like in flex model by adding a virtual line */
content:'';
display:inline-block;
width:100%;
height:0px;
padding-right:50px;
}
li {
width:40px;
display:inline-table;
vertical-align:bottom;
background:lightgreen;
padding-bottom:25px;
position:relative;
box-shadow:0 0 1px 1px;
}
li span {
display:table-cell;
vertical-align:middle;
text-align:center;
background:green;
}
.h10 {height:10%;}
.h20 {height:20%;}
.h30 {height:30%;}
.h35 {height:35%;}
.h40 {height:40%;}
.h50 {height:50%;}
.h60 {height:60%;}
.h70 {height:70%;}
.h80 {height:80%;}
.h90 {height:90%;}
.h100 {height:100%;}
/* extra , demo purpose to center X,Y body*/
html {
display:flex;
min-height:100%;
}
body {
margin:auto;
}
free interpretation of your chart possible through CSS and static position:
The easiest way would be to float li elements to left and move position: relative; from .barWrapper to li element. Then position span with bar label absolutely from bottom. Then you can forget about any additional classes or anything for individual bar.
Demo on JSFiddle
Note: I've removed unnecessary code and added <em>s to position bar label on the bottom to make it look better.
EDIT: If you want label to be over the bar as in your picture simply change bottom: 0; to bottom: 100% in em styling - JSFiddle
UPDATE:
Or you can do that even better by setting display: inline-block; to li so then you can set height directly on li not on inner span as in my first solution so you don't need additional element. em is used only to get labels over the bar.
Demo on JSFiddle
As you can see by my code, I am creating several different links in the shape of a circle, these links have an image, however when you hover the image, I want it to change the image to something else.
However when I try to hover it will not work? :S
CSS:
.Row {
width:16%;
height:250px;
text-align:center;
margin-top:25px;
margin-left:130px;
float:left;
display:block;
border:0px solid red;
overflow:hidden;
}
.Google {
width:240px;
height:240px;
text-align:center;
border:5px solid white;
border-radius:300px;
margin:auto;
background-image:url("img/googlet.png");
}
.Google:hover {
background-image:url("img/outlook.png");
}
HTML:
<div class="Row">
<div class="Google"></div>
</div>
You can block a tag with a {display:block;}
than write css for hover like following.
a:hover .Google {background-image:url("img/outlook.png");}
I learn and use css and css3 around 2 years but i dont know 1 thing and i cant find a really good answer or fix for this.
So here is an example :
I created a div and inside this div we have a link (its a button).
When i hover my mouse on the div this div will change the bg-color but the link not because im above the div... So when im above the div this div and the link too will change the color or background this is what i need... But how to do it ? I never used this but now i think i'll need this for my next work :))
Thank you very much!
It's very easy to achieve using css: (working jsFiddle)
HTML:
<div class="container">
<a class="button">some text</a>
</div>
CSS:
.container:hover{
background-color:red;
}
.container:hover .button{ // selector for .button which is in a hovered .container
background-color:blue;
}
Try this:
<div id="test">
A link
</div>
CSS :
div#test:hover {
background-color: red;
}
div#test:hover a {
background-color: red;
}
What you're asking is the following CSS selector:
div:hover a{
/* your styles here */
}
Demo here
Hope this demo link will work for you.
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
.wrapper {
width:95%;
padding:10px;
overflow:hidden;
height:100%;
margin:0 auto;
border:1px solid green;
}
.spacer {
clear:both;
font-size:0;
line-height:0;
height:0;
}
.wrapper:hover {
background-color:#999999;
cursor:pointer;
}
.btmoOne {
width:170px;
margin:0 auto;
height:20px;
background-color:#FF0000;
padding:10px;
}
.wrapper:hover .btmoOne {
background-color:#006600;
}
I need to auto fill spaces next to menu links.
I have a unknown number of links that make up a menu bar.
I need a way to fill in the empty space next to the links in a way that it looks exactly like the link.
If you have a look at my fiddle you will see there are green and black links classed:
a.menu(green) and a.menu_filler(black). I set them Green and Black to make it obvious which links I am talking about in the end they will have the same background.
I need the a.menu_filler(black) links to self adjust to 100% of the remaining width of the navbar div called div.navbar (silver).
http://jsfiddle.net/RFZees/Gt4SG/6/
I hope my explanation is understandable.
HTML:
<div class='navbar'>
<a class='menu_filler'></a>
<a class='menu' href='#'>LINK</a>
<a class='menu' href='#'>BIGGER LINK</a>
<a class='menu' href='#'>BIGGEST LINK</a>
<a class='menu_filler'></a>
</div>
CSS:
div.navbar {
background:silver;
height:50px;
width:600px;
margin:auto;
text-align: center;
}
a.menu_filler {
background:black;
height:30px;
width:auto;
padding:10px;
margin:5px;
}
a.menu {
background:green;
height:30px;
padding:10px;
margin:5px;
color:blue;
}
a.menu:hover {
background:blue;
color:green;
}
You can use display: table; and border-spacing: 10px; in .navbar, and then declare every <a/> element as display:table-cell;.
This way the fillers will be automatically calculated, the space between divs will be auto-adjusted, and they will be transparent.
Code
div.navbar {
/* all your stuff */
display: table;
border-spacing: 10px;
}
div.navbar > a{
display: table-cell;
}
DEMO: http://jsfiddle.net/nWzqc/
Add display: table-cell; to a and remove height from div.navbar.
Demo