I have a tree viewer that stopped working correctly in August when Chrome 21 was released. When zooming out (90% and lower) the layout gets messed up. I think it has to do with the margin-left: -1px; not zooming correctly.
I created a bug https://code.google.com/p/chromium/issues/detail?id=142178&thanks=142178&ts=1344723455 but have had no response.
The issue doesn't occur in Safari, IE and chrome 20, and until recently it didn't occur in FireFox.
Any suggestions?
http://jsfiddle.net/reueljw/yWgLU/3/
To reproduce zoom out in Chrome or FireFox.
<style type="text/css">
.tree { float:left; display:block; position:relative; }
.viewer { margin-left:auto; margin-right:auto; font-size:0.6em; }
.node-top { position:relative; min-width:30px; margin-left:auto; margin-right:auto; }
.node-left { position:relative; min-width:30px; }
.node-right { position:relative; min-width:30px; }
.node-data { max-width:60px; margin-left:auto; margin-right:auto;text-align:center; clear:both; overflow:hidden; height:15px; }
.starter { width:49.9999%; min-height:10px; position:relative; float:left; }
.ender { margin-left: -1px; width: 49.9999%; min-height:10px; position:relative; float:left; }
.tail { border-right: 1px solid #ACE; width: 49.9999%; min-height:10px; position:relative; float:left;}
.tailend { margin-left: -1px; width: 49.9999%; min-height:10px; position:relative; float:left;}
.node-left .ender { border-left: 1px solid #ACE; border-top: 1px solid #ACE;}
.node-right .starter { border-right: 1px solid #ACE; border-top: 1px solid #ACE;}
.child .tail { border: none }
</style>
<div id="template-area" class="viewer" style="width: 70px; padding-top: 30px;">
<div id="1" class="tree " style="width: 70px;">
<div class="node-top">
<div class="starter"></div>
<div class="ender"></div>
<div class="node-data node node-open">
<p class="node-text">1</p>
</div>
<div class="tail"></div>
<div class="tailend"></div>
</div>
<div id="2" class="tree child " style="width: 35px;">
<div class="node-left">
<div class="starter">
</div>
<div class="ender"></div>
<div class="node-data node node-open">
<p class="node-text">2</p>
</div>
<div class="tail"></div>
<div class="tailend"></div>
</div>
</div>
<div id="3" class="tree child " style="width: 35px;">
<div class="node-right">
<div class="starter"></div>
<div class="ender"></div>
<div class="node-data node node-open">
<p class="node-text">3</p>
</div>
<div class="tail"></div>
<div class="tailend"></div>
</div>
</div></div></div>
</div>
Related
I am trying to create inline flow arrows similar to the attached image:
I have managed to create something using css, however what I need is for each arrow to contain text and everything falls apart when you try and add text into the center div, and I can't help thinking that there must be an easier way to achieve this.
https://jsfiddle.net/ez8632f4/
<div style="display:inline-block">
<div id="zz" class="arrow-left"></div>
<div id="zz" class="arrow-ctr"></div>
<div id="zz" class="arrow-right"></div>
</div>
<div style="display:inline-block;position:relative;left:-30px">
<div id="zz" class="arrow-left"></div>
<div id="zz" class="arrow-ctr"></div>
<div id="zz" class="arrow-right"></div>
</div>
.arrow-left {
display:inline-block;
width: 0;
height: 0;
border-top: 40px solid red;
border-bottom: 40px solid red;
border-left: 40px solid transparent;
}
.arrow-ctr {
display:inline-block;
width:150px;
background:red;
min-height:80px;
position:relative;
left: -4px;
}
.arrow-right {
display:inline-block;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid red;
position:relative;
left: -8px;
}
My intention is to eventually animate the arrows flying them in from the right.
You may add float: left to the elements:
CSS:
.arrow-container > div {
float: left;
}
HTML
<div style="display:inline-block;position:relative;left:-30px" class="arrow-container">
<div id="zz" class="arrow-left"></div>
<div id="zz" class="arrow-ctr">asdasdasdasd </div>
<div id="zz" class="arrow-right"></div>
</div>
You can change also .arrow-ctr to center the text like so:
.arrow-ctr {
display: inline-block;
width:150px;
background:red;
min-height:80px;
line-height: 80px;
position:relative;
text-align: center;
}
https://jsfiddle.net/9ay6L0bu/
I have 5 div and I want the last 2 or the last one centered. Because when I resize the window I can have 4div at the top and 1 at the bottom or 3 at the top and 2 at the bottom.
Here is a fiddle for better explanation
.button-video{
width:220px;
height:50px;
background-color: #234CA5;
position:relative;
float:left;
margin:5px 10px;
}
.button-video a{
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
}
.button-video span{
font-size:14px;
color:white;
padding-left:25%;
line-height: 50px;
}
.play{
position:absolute;
background-color:white;
border-radius:10px;
top:10px;
left:5px;
width:40px;
height:30px;
}
.triangle{
margin-top:5px;
margin-left:15px;
width: 0;
height: 0;
border-left: 16px solid #234CA5;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.triangle:hover{
cursor:pointer;
}
.button-video:hover .triangle{
border-left: 16px solid #D3222A;
}
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Présentation TRIXELL 05</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>P4600 - P4700 - P4800</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>P3543pR - P4343RF</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Animation PIXIUM 4600</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Animation 4700 - 4800</span>
</div>
</div>
wrap buttons within container with text-align center, remove floating and display inline block button-video
<div class="container">
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Présentation TRIXELL 05</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>P4600 - P4700 - P4800</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>P3543pR - P4343RF</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Animation PIXIUM 4600</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Animation 4700 - 4800</span>
</div>
</div>
<style>
.container{
text-align: center;
}
.button-video{
width:220px;
height:50px;
background-color: #234CA5;
position:relative;
display: inline-block;
margin:5px 10px;
}
.button-video a{
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
}
.button-video span{
font-size:14px;
color:white;
padding-left:25%;
line-height: 50px;
}
.play{
position:absolute;
background-color:white;
border-radius:10px;
top:10px;
left:5px;
width:40px;
height:30px;
}
.triangle{
margin-top:5px;
margin-left:15px;
width: 0;
height: 0;
border-left: 16px solid #234CA5;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.triangle:hover{
cursor:pointer;
}
.button-video:hover .triangle{
border-left: 16px solid #D3222A;
}
</style>
http://jsfiddle.net/nk398pcp/1/
You can use the flexible box method for easily achieving that layout on resize.
Wrap all the elements inside a container. display: flex and justify-content: center will center the last single or two items.
Updated JSfiddle
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.button-video {
width: 220px;
height: 50px;
background-color: #234CA5;
position: relative;
float: left;
margin: 5px 10px;
}
.button-video a {
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.button-video span {
font-size: 14px;
color: white;
padding-left: 25%;
line-height: 50px;
}
.play {
position: absolute;
background-color: white;
border-radius: 10px;
top: 10px;
left: 5px;
width: 40px;
height: 30px;
}
.triangle {
margin-top: 5px;
margin-left: 15px;
width: 0;
height: 0;
border-left: 16px solid #234CA5;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.triangle:hover {
cursor: pointer;
}
.button-video:hover .triangle {
border-left: 16px solid #D3222A;
}
<div class="container">
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Présentation TRIXELL 05</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>P4600 - P4700 - P4800</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>P3543pR - P4343RF</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Animation PIXIUM 4600</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Animation 4700 - 4800</span>
</div>
</div>
I want column 1 (comment 1) and column 2 (comment 2) to be next to each other and to be floated to the left side. Column 3 (comment 3) should be floated to the right side.
jsfiddle
I've tried a lot but can't make it work with %.
HTML:
<div class="comment_one">
<div class="reitings">
<div class="rate pluss"><img class="plus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC"> 83</div>
</div>
</div>
<div class="comment_two">
<div class="reitings">
<div class="rate minuss"><img class="minus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC"> 9</div>
</div>
</div>
<div class="comment_three">
<div class="reitings">
<div class="rate minuss"><img class="minus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC">Report</div>
</div>
</div>
CSS:
.comment_one {
width:25%;
float:left;
}
.comment_two {
width:25%;
float:left;
}
.comment_three {
float:right;
width:40%;
}
.reitings {
display:table;
width:50%;
border:1px solid #e9e9e9;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.rate {
display:table-cell;
text-align:center;
vertical-align:middle;
line-height:1.5em;
padding:10%;
}
.rate img {
vertical-align:middle
}
.pluss {
background:#f5f5f5;
color:#4d761a
}
.minuss {
background:#f5f5f5;
color:#a8404b;
border-left:1px solid #e9e9e9;
text-align:center
}
Structure the HTML:
<div id="comments">
<div class="c1 rate-plus"></div>
<div class="c2 rate-plus"></div>
<div class="c3 rate-minus"></div>
</div>
Access all divs in #comments with #comments div. Think about what the divs have in common. Write it in the CSS. For Example:
#comments div {
background: #f5f5f5;
border-left: 1px solid #e9e9e9;
padding: 12px;
margin: 5px;
text-align: center;
}
Float c1 and c2 with left and c3 with right.
Complete CSS
#comments div {
background: #f5f5f5;
border-left: 1px solid #e9e9e9;
padding: 12px;
margin: 5px;
text-align: center;
}
.rate-plus {
color: #4d761a
}
.rate-minus {
color: #a8404b;
}
.c1, .c2 {
width: 25%;
float: left;
}
.c3 {
width: 37%;
float: right;
}
Complete HTML
<div id="comments">
<div class="c1 rate-plus">
<img class="plus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC">83
</div>
<div class="c2 rate-minus">
<img class="minus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC">9
</div>
<div class="c3 rate-minus">
<img class="minus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC">Report
</div>
</div>
I've modified it a little bit.
Demo
Following is my fiddle in which I am trying to give hr line between two floating divs . Kindly let me know how can I give a responsive line between two floating divs.
http://jsfiddle.net/NH5Lc/5/
<div style="display:inline-block; float: left;">Calories</div>
<div style="inline-block">
<hr class="between" />
</div>
<div style="display:inline-block; float: right;">20</div>
<br/>
<div style="display:inline-block; float: left;">Calories</div>
<div style="inline-block">
<hr class="between" />
</div>
<div style="display:inline-block; float: right;">20</div>
You can use flex too. jsFiddle Live Demo
.between {
border: 3px dotted #0099CC;
margin-left:10px;
margin-right:10px;
}
.parent
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:-ms-flexbox; /* Internet Explorer 10 */
display:box;
width:100%;
}
.child2
{
-moz-box-flex:5.0; /* Firefox */
-webkit-box-flex:5.0; /* Safari and Chrome */
-ms-flex:9.0; /* Internet Explorer 10 */
box-flex:9.0;
}
<div class='parent'>
<div class='child1'>Calories</div>
<div class='child2'> <hr class="between" /></div>
<div class='child3'>20</div>
</div>
<div class='parent'>
<div class='child1'>Calories as dasd as dasd</div>
<div class='child2'> <hr class="between" /></div>
<div class='child3'>20</div>
</div>
paste it your between class
.between {
width: 500px;
float: left;
border-right: 1px solid gray;
}
<div style="border-top:1px solid black; width:100%;"></div> will do it. As Gert B. says, you should really be using a linked file rather than inline styles though. In which case, you would have in your CSS file:
.line{
border-top:1px solid black;
width:100%
}
Then in your markup:
<div class="line"></div>
it seems like you could use a <table> or at least a list <ul> for what you are trying to do .
With a list, you can use text-align, float and pseudo-element .
http://codepen.io/gc-nomade/pen/Bmhqc
ul, li {
padding:0;
margin:0;
list-style-type:none;
text-align:right;
}
li em {
float:left;
}
li em:after {
content:'';
border-bottom:dotted;
width:2000px;
margin-right:-2000px;/* reduce space needed to 0 */
display:inline-block;
vertical-align:middle;
}
li, span {
background:white;
overflow:hidden; /* hide pseudo line overflow */
}
<ul>
<li><em>calorie</em><span>20</span></li>
<li><em>calorie</em><span>20</span></li>
<li><em>calorie</em><span>20</span></li>
<li><em>calorie</em><span>20</span></li>
</ul>
Html
<div id="outer">
<div id="left">Calories</div>
<div id="middle">
<hr class="between" />
</div>
<div id="right">20</div>
</div>
<br>
<br>
<div id="outer">
<div id="left">Calories</div>
<div id="middle">
<hr class="between" />
</div>
<div id="right">20</div>
</div>
CSS
#outer {
display:block;
width: 100%;
}
#left {
width: 100px;
float: left;
text-align:center;
}
#right {
width: 200px;
float: right;
text-align:center;
}
#middle {
float: left;
}
.between {
border: 3px dotted #0099CC;
width:200px;
margin-left:10px;
margin-right:10px;
}
Output:
Working fiddle
HTML
<div class="right-details">
<div class="right-details-row">
<b>Left title</b>
</div>
<div class="right-details-row">
<div class="right-details-row-l">K</div>
<div class="right-details-row-r">Laass</div>
</div>
</div>
<div class="details-divider"></div>
<div class="left-details">
<div class="left-details-row">
<b>Right Title</b>
</div>
<div class="left-details-row">
<div class="left-details-row-l">Option 1</div>
<div class="left-details-row-r">Chosen 1</div>
</div>
<div class="left-details-row">
<div class="left-details-row-l">Option 2</div>
<div class="left-details-row-r">Chosen 2</div>
</div>
<div class="left-details-row">
<div class="left-details-row-l">Option 2</div>
<div class="left-details-row-r">Chosen 2</div>
</div>
</div>
CSS
.left-details{
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:237px;
}
.details-divider{
width:20px;
display:table-cell;
}
.right-details{
margin-left: 20px;
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:350px;
}
.left-details-row{
width: 232px;
float:left;
margin: 0 0 5px 4px;
}
.left-details-row-l{
width:110px;
float:left;
overflow:hidden;
}
.left-details-row-r{
width:122px;
float:left;
overflow:hidden;
}
.right-details-row{
width: 345px;
float:left;
margin: 0 0 5px 4px;
}
.right-details-row-l{
width: 35px;
float:left;
margin: 0 0 2px 4px;
}
.right-details-row-r{
width: 296px;
float:left;
overflow:hidden;
}
As you see in jsfiddle , in the left Div text is in the bottom, How to shift it to the top?
Add vertical-align:top to your .right-details rule:
.right-details {
margin-left: 20px;
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:350px;
vertical-align:top;
}
jFiddle example
add
vertical-align: top;
to .right-details
.left-details{
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:237px;
vertical-align: top;
}
note the last property
http://jsfiddle.net/V5JtR/1/