I have the following code for a selectable tab:
<div class="tabOff">
<div class="lightCorner TL"></div><div class="lightCorner TR"></div>
<div class="cornerBoxInner">
<p>My Tab</p>
</div>
</div>
On the mouse over of tabOff I have the following CSS for changing the background colour:
.tabOff:hover
{
background:#AAA;
color:#CDEB8B;
}
Is there any way I can change my classes "lightCorner TL" and "lightCorner TR" to use a different background image, without JavaScript, when tabOff is hovered
This is the current CSS for lightCorner TL and TR:
.lightCorner
{
background:url(../Images/LightCorner.gif) no-repeat;
}
.TL
{
top:0px;
left:0px;
background-position:0px 0px;
}
.TR
{
top:0px;
right:0px;
background-position:-13px 0px;
}
I have never tried it, but I would start with:
.tabOff:hover .lightCorner {
}
Don´t know if that's correct usage though.
.tabOff:hover div.lightCorner {
background:url(../Images/LightCorner.gif) no-repeat;
}
.tabOff:hover div.TL {
top:0px;
left:0px;
background-position:0px 0px;
}
.tabOff:hover div.TR {
top:0px;
right:0px;
background-position:-13px 0px;
}
Related
I have a background (used style="background-image:url('')) and 2 images.
I need the images to be positioned this way:
First image:
30px from top of the background
15px from the right
Second image
15px from the bottom of the background
15px from the left
my CSS classse:
myItem1 - first image class
myItem2 - second image class
BgGrass - the background
What i've been trying:
.BgGrass {
background-image:url('images/bg/grass.png');
width:800px;
height:480px;
}
.myItem1 {
position:absolute;
bottom: 15px;
left:15px;
}
.myItem2 {
position:absolute;
top:40px;
right:20px;
}
What's wrong?
Update: The solution here provided that I need to add the position:absolute to my background. The problem now is that all the content below this background is moving up inside it and making a total mess.
<div class='BgGrass'>
<img class='myItem1' src='http://cdn.mysitemyway.com/icons-watermarks/simple-black/raphael/raphael_gear-small/raphael_gear-small_simple-black_128x128.png' />
<img class='myItem2' src='http://iconizer.net/files/Brightmix/orig/monotone_close_exit_delete_small.png' />
</div>
<div class="clearfix"></div>
All content here is inside the background
It would have been easier if we could see the original page you're working on (html specifically)
Anyway, assuming this is your html:
<div class='BgGrass'>
<img class='myItem1' src='http://cdn.mysitemyway.com/icons-watermarks/simple-black/raphael/raphael_gear-small/raphael_gear-small_simple-black_128x128.png' />
<img class='myItem2' src='http://iconizer.net/files/Brightmix/orig/monotone_close_exit_delete_small.png' />
</div>
Then the CSS should be:
.BgGrass {
background-image:url('http://www.planwallpaper.com/static/images/744081-background-wallpaper.jpg');
width:800px;
height:480px;
position:relative;
}
.myItem1 {
position:absolute;
top: 30px;
right:15px;
width: 100px;
}
.myItem2 {
position:absolute;
bottom:15px;
left:15px;
width: 100px;
}
CSSfiddle: https://jsfiddle.net/5ndbzg6h/
Issue: you need to add position relative to your parent div.
From definition here
position:absolute The element is positioned relative to its first positioned (not static) ancestor element
By default, BgGrass is static, so you must give him an other position like relative.
.BgGrass {
background-color:red;
position:relative
width:800px;
height:480px;
}
.myItem1 {
position:absolute;
bottom: 15px;
left:15px;
}
.myItem2 {
position:absolute;
top:40px;
right:20px;
}
<div class="BgGrass">
<div class="myItem1">ABC</div>
<div class="myItem2">DEF</div>
</div>
Overview:
There are 2 containers which called top-parent and middle-parent and middle-parent's child should overlap the top-parent.
HTML Code
<div id="top-parent" class="wuuh">
<div id="top-child">
I SHALL BLOCK YOU
</div>
</div>
<div id="middle-parent" class="wuuh">
<div id="middle-child">
<div id="middle-cousin">
<div id="middle-niece">
<div id="middle-priest">
NO!
</div>
</div>
</div>
</div>
</div>
CSS
#top-parent { z-index:102; }
#top-parent #top-child { background:#ea1248; width:400px; height: 200px; }
#middle-parent { z-index:101; background:#ccc; width:400px; height:200px; text-align:right; margin-top:10px; }
#middle-parent #middle-child { background:#333; height:100px; }
#middle-child #middle-priest { z-index:200; width:95%; color:#fff; background:#4679bd; padding-right:5%; }
.wuuh { position:absolute; }
This what it looks like if we position both parents into absolute.
What I want to happen is for the middle-priest should overlap the parent 1 while overlapping the parent 2's child except for middle-priest.
Desired Result: (photoshopped)
Is there any way to do this?
Here's a fiddle link CLICK ME
hey wesley i guess you are looking like this :- DEMO
I have removed the height & Z-indexing see mentioned below the css how i achieved your desired result....
CSS
#top-parent { }
#top-parent #top-child {
background:#ea1248;
width:400px;
height: 200px; }
#middle-parent {
z-index:101;
background:#ccc;
width:400px;
text-align:right;
}
#middle-parent #middle-child {
background:#333;
}
#middle-child #middle-priest {
z-index:200;
width:95%;
color:#fff;
background:#4679bd;
padding-right:5%; }
.wuuh {
position:absolute;
}
I have this following JSfiddle.
This is the HTML markup.
<div id="container">
<img id="rotate" height="80" width="80" src="http://i.imgur.com/dEM0KGG.png" />
<span id="text">Download</span>
</div>
Here is the CSS too.
#container {
position:absolute;
height:80px;
width:80px;
left:0px;
top:0px;
overflow:hidden;
z-index:2147483647;
}
#rotate {
position:absolute;
height:113px;
width:113px;
-webkit-transform:rotate(-45deg);
-webkit-transform-origin:100% 0%;
-moz-transform:rotate(-45deg);
-moz-transform-origin:100% 0%;
-ms-transform:rotate(-45deg);
-ms-transform-origin:100% 0%;
-o-transform:rotate(-45deg);
-o-transform-origin:100% 0%;
transform:rotate(-45deg);
transform-origin:100% 0%;
background:#3868D9;
right:0px;
z-index:9001;
}
#text {
position:absolute;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
z-index:9001;
top:35px;
right:0px;
}
I want to place a text like how I have shown. The problem I am facing with is that the text can change dynamically and if I use the same position it doesn't display properly.
Is there any way I can position it dynamically based on the width of the text/container?
Also the width of the container can change. Right now its 80 x 80 but can be 50 x 50. How can I position it?
Try rotating the entire #container element, instead of the image and the text separately.
you can't resize the font dynamically, what you can do is to use a little js to solve your problem!
<script type="text/javascript">
setInterval(function(){
var cont=document.getElementById("container").style;
if(cont.width!="80px"){
document.getElementById("text").style.fontSize="9px";
document.getElementById("text").style.top="50%";
}
else{
document.getElementById("text").style.fontSize="16px";}
},1);
just add this code to the head tag
I have this html code and style "this is just an example":
<div id="mn" style="margin-top:200px;">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="fourth">4</div>
</div>
<style type="text/css">
#mn, #mn div { display:inline-block; vertical-align:middle; }
#mn div { width:350px; margin:5px; /* float:left Comment */ }
div.first { height:5px; background-color:Red; }
div.second { height:120px; background-color:#999 }
div.third { height:50px; background-color:Yellow }
div.fourth { height:180px; background-color:#ccc }
</style>
The problem is, the element on left "the yellow and red ones" have a big space or bottom margin between these.
I need delete this big margin or spacing and use just 5px in all element.
I created a script with jquery that take the List and move them to a divs, something like that:
<div id="mn_left"></div>
<div id="mn_right"></div>
<div id="mn" style="margin-top:200px;">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="fourth">4</div>
</div>
$(document).ready(function () {
$("div", "#mn").each(function (e, value) {
if ($("#mn_left").height() <= $("#mn_right").height()) {
$("#mn_left").append(value.outerHTML);
}
else {
$("#mn_right").append(value.outerHTML);
}
});
});
The script works fine, but I want to do it without scripts.
Edit...
I mistook, I changed the li by divs... But it's exactly the same. The Html Looks Like that:
http://postimg.org/image/dh6dwdjc1/
What I really want is this
http://postimg.org/image/otnkrwhep/
First off, here is your code properly set up using list markup, since you said it's a list:
HTML:
<ul id="mn">
<li class="first">1</li>
<li class="second">2</li>
<li class="third">3</li>
<li class="fourth">4</li>
</ul>
CSS:
#mn {padding:0; margin:0;}
#mn, #mn li { display:inline-block; vertical-align:middle; }
#mn li { width:350px; margin:5px; }
li.first { height:5px; background-color:Red; }
li.second { height:120px; background-color:#999 }
li.third { height:50px; background-color:Yellow }
li.fourth { height:180px; background-color:#ccc }
(JSFiddle Link 1)
Then, remove the margin from #mn li:
#mn li { width:350px; /* margin:5px; */ }
(JSFiddle Link2 )
You'll see the list items are flush now, except the first item, where the line height is taller than the item height. To fix that first one, give the list items an overflow:hidden; and change the display from inline-block to just block.
#mn, #mn li { display:block; vertical-align:middle; }
#mn li { width:350px; overflow: hidden;}
(JSFiddle Link 3)
That should be it for you, unless I've misunderstood.
Now that I understand what you're trying to do...
One way to do that is to create a class for the items that will be in the second colum:
#mn .col2 { position: absolute; left: 355px; top:0; margin-top: 0;}
JSFiddle Example. (PS, You need #mn{position:relative;} for the above to work.)
The problem with this is that if you have more than one item in the second column, you'll have to give the second (and third, fourth, etc) items a custom top position so that they line up properly.
This seems like a perfect place to use Javascript instead of CSS. And that's coming from a proponent of "always use CSS whenever you can!"
How about this? Using floats instead of absolute positioning.
#mn {width: 720px;}
#mn div { width:350px; float:left; margin:5px; }
#mn div.second {float:right;}
div.first { height:5px; background-color:Red; }
div.second { height:120px; background-color:#999; }
div.third { height:50px; background-color:Yellow }
div.fourth { height:180px; background-color:#ccc }
Floated all to left.
Added a new CSS rule for the containing div of
#mn. The width is equal to the width of each child div plus it's
margins, so ( 5px + 350px + 5px ) = ( 360px x 2 ) = 720px.
Added new CSS declaration for the second div.
I need to draw such a image like
like.. a + mark at centre and at ends of lines a text box. how do i do it.. i tried.but could not..should i use a image for + symbol or can i do in css...
or what css should i write for it...
You could use absolute positionned DIV for your "boxes" and use two DIV for the vertical and horizontal lines. Something (untested) like :
CSS:
.box { position:relative; }
.box-end { position:absolute; border:1px solid red; background:white; overflow:hidden; z-index:400; }
.box-end-v { width:20px; height:40px; }
.box-end-h { width:40px; height:20px; }
.box-end-top { top:0px; left:30px; }
.box-end-bottom { top:80px; left:30px; }
.box-end-left { top:30px; left:0px; }
.box-end-right { top:30px; left:80px; }
.box-line { position:absolute; background:black; z-index:100; }
.box-line-v { top:20px; left:50px; width:1px; height:60px; }
.box-line-h { top:50px; left:20px; width:60px; height:1px; }
HTML:
<div class="box">
<div class="box-end box-end-h box-end-top">T</div>
<div class="box-end box-end-h box-end-bottom">B</div>
<div class="box-end box-end-v box-end-left">L</div>
<div class="box-end box-end-v box-end-right">R</div>
<div class="box-line box-line-v"></div>
<div class="box-line box-line-h"></div>
</div>
However, may I suggest this instead? http://raphaeljs.com/
You make a table with 2 rows and 2 columns, and you use border-right and border-bottom for the top left cell, and border-top and border-left for the bottom right. Don't forget to add a in each cell. Then in the CSS, you can define the cell's sizes.
Hope I have helped.