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.
Related
I need it to look like this:
Here is the markup:
<div class="hni_vaBreadcrumbContainer">
<progress class="hni_vaBreadcrumbProgress" value="0" max="100"></progress>
<span class="hni_vaBreadcrumbContent">0%</span>
</div>
Here are a couple jfiddles I tried but couldn't get working:
http://jsfiddle.net/x4wLf/, http://jsfiddle.net/cogent/6A5Lb/
I could just use a background image for the percentage text but prefer all CSS.
thanks!
I think I actually figured it out with very little markup/css.
http://jsfiddle.net/o22b4uyz/2/
Markup
<div class='wrapper'>
<div class='concave'><span class="percent">20%</span></div>
</div>
CSS
div.wrapper {
background:blue;
width:80px;
height:20px;
position:relative;
border-radius: 50px;
}
div.concave {
position:absolute;
background:white;
width:20px;
height:20px;
border-radius:50px;
left:-3px;
}
span.percent {
padding-left: 40px;
color: #fff;
}
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 am placing images on a page using div id tags, so far i have four lined up in a row across the top of the page, but when i come to place one under the image in the top left corner, it just goes under a picture in the middle instead. I have used float:left and clear:left but none of these seem to work. I need the id "facts" to be underneath the top left corner image which is "light" any help?? This is my code so far -
HTML
<div id="light"><img src="harrypotter/harrylightening.png"/></div>
<div id="kiss"><img src="harrypotter/ronkiss.png"/></div>
<div id="keeper"><img src="harrypotter/keeper.jpg"/></div>
<div id="photo"><img src="harrypotter/photo.jpg"/></div>
<div id="facts"><img src="harrypotter/facts.jpg"/></div>
CSS
#light > img {
float:left;
height:447;
width:326;
margin-top:10px;
margin-left:8px;
margin-right:5px;
margin-bottom:5px;
}
#kiss > img {
height:252;
width:336;
margin-top:10px;
margin-bottom:5px;
margin-right:5px;
float:left;
}
#keeper > img {
height:234;
width:333;
margin-top:10px;
margin-bottom:5px;
margin-right:5px;
float:left;
}
#photo > img {
height:301;
width:225;
margin-top:10px;
margin-bottom:5px;
float:right;
}
your CSS could be more simple like this:
jsFiddle
div{
float:left;
margin:10px 5px 5px;
}
#light{
margin-left:8px;
}
#photo{
float:right;
margin-right:0;
}
#facts{
clear:left;
}
and about your problem, you must set float to divs not to images.
with your CSS you can use this:
#facts{
clear:left;
}
If your page is dynamic, you can try this code, every fifth elemnt should be come below the left element
HTML
<div><div id="light" class="img-class"><img src="harrypotter/harrylightening.png"/></div>
<div id="kiss" class="img-class"><img src="harrypotter/ronkiss.png"/></div>
<div id="keeper" class="img-class"><img src="harrypotter/keeper.jpg"/></div>
<div id="photo" class="img-class"><img src="harrypotter/photo.jpg"/></div>
<div id="facts" class="img-class"><img src="harrypotter/facts.jpg"/></div></div>
CSS
.img-class {float:left;width:100px;height:100px;margin-bottom:15px;padding:0 10px;}.img-class:nth-child(5) {clear:left;}
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 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;
}