i have a div that contains an image fills all the div,
positioned on it a text.
when the mouse is over the container div the mouse will change to pointer(no problem),but and the image changed to look like pressed one.
But this wont happened thus the text represents other layer.
so could any one help me to resolve this problem in html and css?
<div style="float: right; width: 127px; height: 35px; background-color: rgba(139, 84, 164,.44); background-color: rgb(229, 230, 218);
cursor:pointer; position:absolute;">
<div style="overflow: hidden; width: 87px; height: 100%; float: right; position:absolute; z-index:2; background-color:#FF0099;
margin-left: 40px;">
<p class="para" style="color: rgb(0,178,192); padding-top: 8px; padding-right: 5px;">اسم الملف</p>
</div>
<div style="position:absolute; z-index:1; ">
<img src="saba/playa.png" onMouseOver="this.src='saba/playao.png'" onMouseOut="this.src='saba/playa.png'"style="float: left;">
</div>
</div>
I'm not sure if I understand well..
But I think this shows what you want to create...
<div class="wrapper">
<div class="text-div">
some text
</div>
<div class="colored-button-on-hover"></div>
<div class="clear"></div>
</div>
css:
.wrapper {
width: 200px;
height: 100px;
background: #999;
position: relative;
}
.wrapper .text-div {
float: right;
color: #000;
}
.wrapper .colored-button-on-hover {
float: left;
width: 30px;
height: 25px;
background: red;
}
/*on wrapper div hovered*/
.wrapper:hover {
background: blue;
cursor: pointer;
}
.wrapper:hover .text-div {
color: #FFF;
}
.wrapper:hover .colored-button-on-hover {
background: yellow;
}
.clear {
clear: both;
}
Here is jsfiddle sample: http://jsfiddle.net/AYjmF/
Related
As the title says: I need the 'info-box' to not be fixed while the head-box and head-in-block are fixed.
I know it is possible. I have a live example: http://www.marktplaats.nl/.
The orange box is fixed (head-box) then the white part (my info-box) is not fixed. And the Title block is fixed again (head-in-block).
This is the css and html I'm using right now. What adjustment needs to be made to make the middle (white) box not fixed?
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
Do you guys see the website the same I do?
The website you linked to hides the white box when the header is sticky. So to do that here, you would hide #info-box when #head-block has class .fixed
.fixed #info-box {
display: none;
}
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
.fixed #info-box {
display: none;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
I want split screen only two div's for that purpose write this html code:
<div class="box">
<div class="div1">
<img src="../Content/45.png" style="width:auto;" />
</div>
<div class="div2">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div class="clear"></div>
</div>
and this is css style:
<style>
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.div1 {
background: #999;
float: left;
height: 100%;
width: 50%;
}
div.div2 {
background: #666;
height: 100%;
width:50%;
left:100px;
float:right;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
</style>
but when i run that page,i see this output:
Why i can not split screen?what is correct css?thanks.
Its working fine..
Check
https://jsfiddle.net/3d5mq1tf/
Please update the fiddle .. If you find something missing..
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.div1 {
background: #999;
float: left;
height: 100%;
width: 50%;
}
div.div2 {
background: #666;
height: 100%;
width:50%;
left:100px;
float:right;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
<div class="box">
<div class="div1">
<img src="../Content/45.png" style="width:auto;" />
</div>
<div class="div2">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div class="clear"></div>
</div>
Your code is working up to the point where the image gets rendered, which will stretch over the bounds of your div because you don't tell it otherwise.
While the only parts you need to add are the image width ones, I took the liberty and turned this from a float-based arrangement to in inline-based one, giving you reduced markup as well as CSS, and better control over what you're doing.
div.box {
background: #EEE;
height: 100px;
width: 600px;
white-space: nowrap;
}
div.box > div {
display: inline-block;
height: 100%;
vertical-align: top;
width: 50%;
}
div.box > div img {
width: 100%;
}
.div1 {
background-color: #999;
}
.div2 {
background-color: #666;
}
<div class="box">
<div class="div1">
<img src="http://i.imgur.com/k8BtMvj.jpg" alt="test image" />
</div><div class="div2"></div>
</div>
I suspect that you also want the image to have a maximum height of 100px, as the parent container has. If you do, you could use overflow: hidden on the parent container, but you would be better off rendering it as a background image, like this:
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.box > div {
display: inline-block;
height: 100%;
vertical-align: top;
width: 50%;
}
div.box > div img {
width: 100%;
}
.div1 {
background: #999 url('http://i.imgur.com/k8BtMvj.jpg') left top no-repeat;
background-size: cover;
}
.div2 {
background-color: #666;
}
<div class="box">
<div class="div1"></div><div class="div2"></div>
</div>
This also shows the differences in where you should use background vs background-color
Let me preface this by saying I feel like a moron. I have a fairly simple scenario that I can't figure out.
This is a sample of what my code looks like:
<div id="container-wrapper">
<div id="container">
<div class="left">This is LEFT</div>
<div class="line"></div>
</div>
</div>
Let's say #container-wrapper is a fixed width such as 960px. #container has its width set to 100%. I don't know the width of .left because the text inside is dynamic. It's floated left. .line has a background image that is essentially a line which will repeat to fill the width of the div. I want to float it next to .left so it looks something like this:
This is LEFT ---------------------------------------------------------
If I set the width of .line to 100% it will trying to fill the entire container width so the question is how do I get it to fluidly adjust to the space that is left over from .left.
Hope I'm being clear.
Thanks,
Howie
Here's a sample of the real code I'm using. .line is really .inside-separator.
<div id="container-wrapper">
<div id="container">
<div class="left">This is LEFT</div>
<div class="inside-separator"><span class="inside-separator-left"> </span><span class="inside-separator-right"> </span></div>
</div>
</div>
.inside-separator
{
background: transparent url('../images/inside_separator.png') no-repeat center center;
margin: 0;
padding: 0;
height: 7px;
width: something?;
}
.inside-separator-left,
.inside-separator-right
{
display: block;
position: absolute;
width: 8px;
height: 7px;
background: transparent url('../images/inside_plus.png') no-repeat 0px 0px;
}
.inside-separator-left
{
float: left;
left: 0;
}
.inside-separator-right
{
float: right;
right: 0;
}
I'm not sure this is possible using floats. But if you're ok using display:table instead of floating .left then it's easier.
div#container { display:table; width:100%; }
div.left, div.line { display:table-cell; }
<div class="left"><div class="line">11111111111111111</div> This is LEFT</div>
Put the .line inside the .left and float .line right
http://jsfiddle.net/Hk7GR/1/
Thanks for all of your help. The display:table did the trick. Here's a sample http://jsfiddle.net/idpexec/QKSzC/
<div class="container-wrapper">
<div class="container">
<div class="left">This is LEFT</div>
<div class="inside-separator-wrapper">
<div class="inside-separator">
<span class="inside-separator-left"> </span>
<span class="inside-separator-right"> </span>
</div>
</div>
</div>
</div>
<style>
.container-wrapper
{
width: 500px;
height: 60px;
border: 1px solid green;
margin-bottom: 50px;
}
.container
{
display:table;
width:100%;
}
.left,
.inside-separator-wrapper
{
display:table-cell;
}
.left
{
border: 1px solid red;
white-space: nowrap;
padding: 0 15px;
}
.inside-separator-wrapper
{
width: 100%;
position: relative;
}
.inside-separator
{
background: transparent url('http://test.2wsx.ws/inside_separator.png') no-repeat center center;
height: 7px;
position: relative;
top: 0px;
left: 0px;
padding: 0;
width: 100%;
}
.inside-separator-left,
.inside-separator-right
{
display: block;
position: absolute;
width: 8px;
height: 7px;
background: transparent url('http://test.2wsx.ws/inside_plus.png') no-repeat 0px 0px;
}
.inside-separator-left
{
float: left;
left: 0;
}
.inside-separator-right
{
float: right;
right: 0;
}
<style>
I currently have a div element with a repeat-y background and a child div interrupts the current background.
How can I stop this from happening?
<div id="content">
<div id="container-top"></div>
<div id="container-body">
<div id="container-right">
<h1>LOGIN</h1>
<br />
<h1>CLICK HERE</h1>
</div>
<div id="container-left">
<h1 style="padding-left: 50px; font-weight: bold; color: #000000;">NEWS</h1>
</div>
</div>
<div id="container-bottom"></div>
</div>
CSS:
#content {
float:left;
margin: 5px auto;
border: red 1px solid;
}
#container-top {
width: 800px;
height: 23px;
background: url(http://cdn2.tribalwars.net/graphic/index/sprites.png) no-repeat 0 -39px;
}
#container-body {
padding: 15px;
overflow: visible;
background: url(http://cdn2.tribalwars.net/graphic/index/bg-content-line.jpg) repeat-y;
}
#container-right {
float: right;
width: 275px;
}
#container-left {
float: left;
width: 440px;
}
#container-bottom {
width: 800px;
height: 23px;
background: url(http://cdn2.tribalwars.net/graphic/index/sprites.png) no-repeat 0 -56px;
clear: both;
}
If you go to you can
you need to make your container overflow hidden cause you are floating childs.
checkout code at http://jsfiddle.net/xUf87/
This code will output some blinks on divs when we do the mouse over. What i want is show the content of the hidden div when the mouse is over the red div. But with the "flashes" the effect didn't works properly.
Any idea about that?
<div class="content">
<div class="absolute"></div>
<div class="new_l">---links</div>
</div>
.content {
width: 195px;
margin-top: 15px;
border:1px solid red;
}
.content>.new_l {
width: 195px;
height: 20px;
z-index: 0;
position: relative;
display: inline-block;
}
.content>.absolute {
width: 195px;
height: 20px;
position: absolute;
z-index: 1;
background-color: red;
display: inline-block;
}
.content>.absolute:hover {
display: none;
}
demo
Not sure if this is what you're looking for, but here it goes. The trick is to put the hidden div inside the other one.
HTML
<div class="content">
<div class="absolute">
<div class="new_l">---links</div>
</div>
</div>
CSS
.content {
width: 195px;
margin-top: 15px;
border:1px solid red;
}
.new_l {
width: 195px;
height: 20px;
background-color: #ccc;
display:none;
}
.absolute {
width: 195px;
height: 20px;
background-color: red;
}
.absolute:hover .new_l {
display: block;
}
http://jsfiddle.net/uFsUa/1/