This is the html part of my page:
<div class="edenKomentar">
<div class="rejtingVoKomentar" onmouseover="alert('asd');">
<div class="thumbUp"> </div>
<div class="thumbDown"> </div>
</div>
<div class="imeVoKomentar">Name</div>
<div class="tekstVoKomentar">Comment</div>
<div class="datumVoKomentar">Date</div>
</div>
and this is my css code:
div.edenKomentar:hover {
// border-bottom: dashed 1px gray;
border-left: solid 8px #003366;
}
div.edenKomentar:hover div.imeVoKomentar {
color:#003366;
}
.edenKomentar div.rejtingVoKomentar {
position: absolute;
overflow:hidden;
right:5px;
top:15px;
height:35px;
width: 100px;
padding: 5px;
border: solid 1px green;
}
.edenKomentar div.rejtingVoKomentar:hover{
border: solid 2px green;
background-color:#66FF00;
}
.rejtingVoKomentar .thumbUp,.thumbDown {
position: relative ;
height: 25px;
width: 25px;
border: solid 1px red;
top: 10px;
}
.rejtingVoKomentar .thumbDown {
right: 5px;
background:url(sliki/Ikoni/Thumb-down-icon.png);
background-repeat:no-repeat;
}
.rejtingVoKomentar .thumbUp {
left: 5px;
background:url(sliki/Ikoni/Thumb-up-icon.png);
background-repeat:no-repeat;
}
.rejtingVoKomentar .thumbDown:hover{
border: solid 2px red;
}
The problem is that hover (and onmouseover) on .rejtingVoKomentar ( and .thumbUp and .thumbDown also) is not working while .rejtingVoKomentar has the
position:absolute;
attribute. What can be the problem here?
.headermenu li a{
text-align:center;
padding:0px 0 0 12px;
margin-left:20px;
display:block;
color: #ccc;
text-decoration:none;
font-size:12px;
float:right;
background:url(../images/arrow.png) no-repeat left center;
}
.headermenu li a:hover{
text-align:center;
display:block;
color: #0066CC;
text-decoration:none;
float:right;
background:url(../images/arrow_hover.png) no-repeat left center;
}
You can use this short Jquery code:
$(document).ready(function() {
$(".rejtingVoKomentar").hover(
function () {
//On mouseOver
alert('asd');
},
function () {
//On mouseOut
}
);});
you will use jQuery to activate hover on DIV
or just want to use it by CSS only you will need to use ul,li instead
UPDATE1
check this link in SO Jquery Div Hover change other Div Class
Related
This question already has answers here:
How can I show only corner borders?
(20 answers)
Closed 7 years ago.
I am trying to figure out how to use CSS to create the below effect.
I've tried to do this by creating 4 divs within a parent div and positioning them on all four sides.
This works, but breaks when I need those 4 divs to be transparent to the background and not a single color.
For example, I want to try to make this work again a picture background and not just a solid background.
If the background is solid I can make the 4 divs the same color as the background, the problem is that if the background is a picture I can't have the 4 divs match the background.
Also, I understand my fundamental approach to the problem might be wrong. I heard someone mentioning using a pseudo :before and :after to accomplish this effect for effectively, but I'm not sure how to do that.
Here I made it as close as I could get with the least code:
.daysleft {
position: relative;
padding: 20px;
width: 100px;
text-align: center;
}
.daysleft span {
display: block;
z-index: 2;
position: relative;
}
.white {
background-color: #fff;
height: 20px;
width: 101%;
position: absolute;
top: 50%;
left: 0;
z-index: 1;
transform: translateY(-50%);
}
.daysleft:before {
height: 100%;
content: "";
position: absolute;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 20px;
left: 0px;
top: 0;
}
.daysleft:after {
height: 100%;
content: "";
position: absolute;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 20px;
right: 0px;
top: 0;
}
<div class="daysleft"><div class="white"></div><span>37 Days left</span></div>
EDIT:
Found a way to interupt the borders! Awnser updated.
I'm guessing this is the sort of thing you want.
.container {
margin: 0 auto;
position:relative;
display: inline-block;
padding: 15px;
background: #ccc;
}
#content {
margin: 0 auto;
position:relative;
display: inline-block;
padding: 10px;
background: #ccc;
font-size: 38px;
color: #333;
}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
position:absolute;
width:15px;
height: 15px;
border-color:#777;
/* or whatever colour */
border-style:solid;
/* or whatever style */
content:' ';
}
#content:before {
top:0;
left:0;
border-width: 2px 0 0 2px
}
#content:after {
top:0;
right:0;
border-width: 2px 2px 0 0
}
#content>:first-child:before {
bottom:0;
right:0;
border-width: 0 2px 2px 0
}
#content>:first-child:after {
bottom:0;
left:0;
border-width: 0 0 2px 2px
}
<div class="container">
<div id="content">
<p><i>37</i> days left</p>
</div>
</div>
Example:
http://jsfiddle.net/link2twenty/5gjh6jkx/
demo
Try out this... here am using background as image
<div class="parent">
<div class="child">
37 days Left
</div>
</div>
CSS:
.parent{
background-color : #ccc;
padding : 20px;
width : 100%;
margin : 0 auto;
}
.child
{
width: 100%;
padding: 10px;
text-align : center;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
border: 15px solid #ccc;
border-image: url('https://i.stack.imgur.com/1WlsT.png') 34% repeat;
}
Try something like this FIDDLE
DEMO CODE
HTML
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
CSS
.box1{
position:relative;
background:#FFF;
width:200px;
height:200px;
border:solid 2px #090;
-webkit-border-radius: 3px;
border-radius: 3px;
margin:0 auto;
}
.box2{
position:absolute;
width:210px;
height:180px;
background-color:#FFF;
top:10px;
left:-5px;
}
.box3{
position:absolute;
width:180px;
height:210px;
background-color:#FFF;
top:-5px;
left:10px;
}
Why is the two boxes to the right side, and not centered align?
fiddle: http://jsfiddle.net/gh76q/1/
I, tried change the position of box 2 to relative, it will do the trick but the box moves when hovering the box 1.
HTML:
<div align="center" id="top-link">
<div class="switch">
<div class="avg_display">Box 1</div>
<div class="avg_hide">Box1 info<br></div></div>
<div class="link-block">Box2</div>
</div>
CSS:
#top-link {padding-bottom:40px;}
.switch {display:inline-block;}
.link-block {
display: inline-block;
padding: 20px 20px 20px 20px;
border: 2px solid #e7e7e7;
border-radius: 5px;
height:25px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
position:absolute;
color:#555;
}
.link-block a {
text-align: center;
vertical-align: middle;
line-height: 25px;
color:#555;
}
.link-block:hover {
background-color:#1396d0;
border:2px solid #1396d0;
color:#fff;
margin-top:10px;
margin-right:20px;
}
.link-block:hover a{
color:#fff;
}
.avg_display {
display:inline-block;
padding: 20px 20px 20px 20px;
border: 2px solid #e7e7e7;
border-radius: 5px;
height:25px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
}
.avg_hide {
display:none;
padding: 20px 20px 20px 20px;
background-color:#1396d0;
border:2px solid #1396d0;
color:#fff;
border-radius: 5px;
height:250px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
}
.avg_display a {
text-align: center;
vertical-align: middle;
line-height: 25px;
color:#555;
}
Fiddle:
Remove position:absolute from the box2 class.
.link-block {
display: inline-block;
padding: 20px 20px 20px 20px;
border: 2px solid #e7e7e7;
border-radius: 5px;
height:25px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
/*position:absolute;*/
vertical-align:top; /* Keep the box always on top */
color:#555;
}
DEMO
I am trying to make a basic button box with an arrow at the top of it...
http://jsfiddle.net/8K4qB/ --this is what it comes out to.. i can't make it align at the top in the middle of the bottom.
HTML Code
Read More
CSS Code
.button {
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: #2ecc71;
}
.test:before {
content:'';
position: absolute;
width: 0;
height: 0;
border-bottom: 20px solid #3498db;
border-right:50px solid transparent;
border-left:50px solid transparent;
}
I'd like it to look like the pic
In order to achieve the specific behaviour you're after you need to change your HTML as well as your CSS- otherwise centrally justifying a pseudo element correctly will elude you.. Change the elements in the example as required (e.g. the top level div can be changed to a.button.test)
REVISED FIDDLE
HTML
<div>
<div></div>
<div>text goes here</div>
</div>
CSS
div {
display:inline-block;
text-align:center;
}
div div:first-child {
display:block;
width: 0;
height: 0;
border-bottom: 10px solid darkorange;
border-right:30px solid transparent;
border-left:30px solid transparent;
margin: 0 auto;
}
div div:last-child{
display:block;
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: darkorange;
position:relative;
text-transform:uppercase;
}
Try this ,display:block so that your arrow still in the middle: DEMO
CSS:
.button {
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: #2ecc71;
display:block;position:relative;top:20px;
}
.test:before {
content:'';
position: absolute;
top:-20px;
width: 0;
height: 0;
border-bottom: 20px solid #3498db;
border-right:50px solid transparent;
border-left:50px solid transparent;
}
.middle{
padding-left:15px;
}
HTML:
<span class="middle">Read More</span>
I'm doing some HTML and am running into an issue with my left and right column divs not scaling based on the content inside them as well as in proportion to the rest of the page.
Here's my example:
http://i.imgur.com/9vi2EK9.png
And my CSS for each of the divs:
#wrapper{
background:white;
width:1280px;
position:relative;
border: 1px solid black; /* black border */
margin:auto; /* centre this div */
}
#header{
height:90px;
text-align:center;
padding: .5em;
background-color: grey;
border-bottom: 2px solid black;
}
#leftmenu{
width:100px;
float:left;
font-size: 75%;
padding:.5em;
border-right:2px solid black;
border-left:2px solid black,
}
#rightmenu{
width:180px;
float:right;
font-size: 75%;
padding:.5em;
border-left:2px solid black;
border-right:1px solid black;
}
#content{
background-color:white;
margin-left:120px;
font-size: 80%;
}
#footer{
clear:both; /* push footer under other divs */
height: 70px;
background-color:white;
border-top:1px solid black;
border: 1px solid black;
padding-top:40px;
text-align:center;
font-size: 70%;
}
How can I ensure that my divs resize based on the content in my other divs?
Thanks!
Without seeing your HTML, here's a stab at it:
JSFiddle here: http://jsfiddle.net/2hf8q/
CSS
html, body {
height: 100%;
}
#wrapper {
height: calc(100% - 2px); /* for border */
}
#leftmenu, #rightmenu {
height: calc(100% - 234px); /* for header, footer */
}
#wrapper {
background:white;
width:100%;
position:relative;
border: 1px solid black;
/* black border */
margin:auto;
/* centre this div */
}
#header {
height:90px;
text-align:center;
padding: .5em;
background-color: grey;
border-bottom: 2px solid black;
}
#leftmenu {
width:100px;
float:left;
font-size: 75%;
padding:.5em;
border-right:2px solid black;
border-left:2px solid black;
}
#rightmenu {
width:180px;
float:right;
font-size: 75%;
padding:.5em;
border-left:2px solid black;
border-right:1px solid black;
}
#content {
background-color:white;
margin-left:120px;
font-size: 80%;
}
#footer {
clear:both;
/* push footer under other divs */
height: 70px;
background-color:white;
border-top:1px solid black;
border: 1px solid black;
padding-top:40px;
text-align:center;
font-size: 70%;
}
HTML
<div id="wrapper">
<div id="header"></div>
<div id="leftmenu"></div>
<div id="content"></div>
<div id="rightmenu"></div>
<div id="footer"></div>
</div>
You can do it by wrapping #leftmenu, #content and #rightmenu in a div that is displayed as a table. And display the three children as a table-cell:
HTML:
<div id="header">#header</div>
<div id="wrapper">
<div id="leftmenu">#leftmenu</div>
<div id="content">#content</div>
<div id="rightmenu">#rightmenu</div>
</div>
<div id="footer">#footer</div>
CSS (without colors, padding, font sizes and stuff):
html, body {
margin: 0;
padding: 0;
}
#header{
height:90px;
}
#wrapper {
display: table;
table-layout: fixed;
width: 100%;
}
#wrapper > div {
display: table-cell;
}
#leftmenu{
width:100px;
}
#rightmenu{
width:180px;
}
#content{
}
#footer{
height: 70px;
}
And a working demo.
I have a label inside of a div. I want to position the label in the middle of the div and the text on the left side of the label, vertically aligned to center. How can I do this without padding and margin?
http://jsfiddle.net/E3Wb4/
<div class="center">
<label style="width:255px;height:40px;display:inline-block;float:center">Test</label>
</div>
.center {
padding:0px;
background:#B3B3B3;
height:44px;
width:400px;
border-top:2px solid red;
border-bottom:2px solid red;
border-left:2px solid red;
border-right:2px solid red;
}
label{
border-top:2px solid yellow;
border-bottom:2px solid yellow;
border-left:2px solid yellow;
border-right:2px solid yellow;
}
THe best way is to add margin: 0px auto; to Label.
http://jsfiddle.net/WZ5MU/
you can also shotcode border by using border: 2px solid red;
border: <border-width> || <border-style> || <color>
you can set line-height: 44px for div.center
.center{
position: relative;
}
label{
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
That's good way to center elements.