Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
All of my .rRow are inside of the element #queryResult.
I want every other row to have a colored background.
<div id="queryResult" style="display: block;">
<div class="rRow">
<div class="rCell4" style="width: 144px;">Job</div>
<div class="rCell4" style="width: 144px;">Company</div>
<div class="rCell4" style="width: 144px;">Customer</div>
<div class="rCell4" style="width: 144px;">Product</div>
<div class="rCell4" style="width: 144px;">Balance
<div id="pTotal" class="ib">207.08400</div>
</div>
<div class="rCell4" style="width: 144px;">INBOL Date</div>
</div>
<div class="rRow">
<div class="rCell4 editMe" style="width: 144px;">46500</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName" style="width: 144px;">IDT</div>
<div class="rCell4" style="width: 144px;">ai ing co</div>
<div class="rCell4" style="width: 144px;">249.400</div>
<div class="rCell4" style="width: 144px;">0.00000</div>
<div class="rCell4" style="width: 144px;">06/15/2015 </div>
</div>
<div class="breakdown" style="padding-left: 144px;">
<div class="bdCell">
<div class="bdCom" title="commodity">249.400</div>
0.12850
</div>
</div>
<div class="clr"></div>
<div class="rRow">
<div class="rCell4 editMe" style="width: 144px;">46507</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName" style="width: 144px;">IDT</div>
<div class="rCell4" style="width: 144px;">mgm kerry</div>
<div class="rCell4" style="width: 144px;">272.000</div>
<div class="rCell4" style="width: 144px;">0.00000</div>
<div class="rCell4" style="width: 144px;">08/05/2015 </div>
</div>
<div class="breakdown" style="padding-left: 144px;">
<div class="bdCell">
<div class="bdCom" title="commodity">272.000</div>
0.51300
</div>
</div>
<div class="clr"></div>
</div>
and the CSS
#queryResult{
width:90%;
border:1pt solid #888;
border-radius:3px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
padding:10px;
font-size:.8em;
background:#fff;
}
.rRow{
border-bottom:1pt solid #ccc;
background:#fff;
width:100%;
display:table-row;
}
.rRow:first-child{
font-weight:bold;
}
.rRow:nth-child(odd){
background:#f9f5b0;
}
.rRow:hover{
background:#ffff00;
cursor:pointer;
}
.rCell4{
width:15%;
border-right:1pt solid #ccc;
background:#fff;
display:table-cell;
border-bottom:1pt solid #ccc;
padding 1px;
}
.rRow > .rCell4:last-child{
border-right:none;
}
.hideMe{
display:none;
}
.clr{
clear:both;
}
.bdCell{
width:20%;
float:left;
padding:2px;
border:1pt solid #666;
border-radius:3px;
margin-right:5px;
margin-top:3px;
background: #f2f2f2;
}
.bdCom{
display:inline-block;
background:#c4f5c4;
width:50%;
}
https://jsfiddle.net/6znodevx/
The style .rRow:nth-child(odd){ background:#f9f5b0; } "fails" because the cells has defined a white background in (.rCell4). If you remove the background:#fff from .rCell4 it will work fine:
.rCell4{
width:15%;
border-right:1pt solid #ccc;
/*background:#fff;*/
display:table-cell;
border-bottom:1pt solid #ccc;
padding 1px;
}
You can see it working on an update of your JSFiddle
Related
I want to make a table with angular-material, like this:
<div class="xo-container" layout="column" layout-align="center center">
<div layout="row">
<div class="cell" flex="33">1</div>
<div class="cell" flex="33">2</div>
<div class="cell" flex>3</div>
</div>
<div layout="row">
<div class="cell" flex="33">1</div>
<div class="cell" flex="33">2</div>
<div class="cell" flex>3</div>
</div>
<div layout="row">
<div class="cell" flex="33">1</div>
<div class="cell" flex="33">2</div>
<div class="cell" flex>3</div>
</div>
</div>
And i want to be seen just inner borders of this structure. How can I do this?
In your case you need to define three row class as first-row, row and last-row for top and bottom border and three cell class as first-cell , cell and last-cell for left and right side border.
CSS file
div.first-row div{
border-bottom: 1px solid black;
}
div.row div{
border-top: 1px solid black;
border-top: 1px solid black;
}
div.last-row div{
border-top: 1px solid black;
}
div.first-cell {
border-right: 1px solid black;
}
div.cell {
border-right: 1px solid black;
border-left: 1px solid black;
}
div.last-cell {
border-left: 1px solid black;
}
HTML File
<div layout="column" flex style='background-color:red'>
<span flex="10"></span>
<div layout="row" class="first-row">
<div class="first-cell" flex="33">Content 1</div>
<div class="cell" flex="33">Content 2</div>
<div class="last-cell" flex>Content 3</div>
</div>
<div layout="row">
<div class="first-cell" flex="33">Content 11</div>
<div class="cell" flex="33">Content 22</div>
<div class="last-cell" flex>Content 33</div>
</div>
<div layout="row" class="last-row">
<div class="first-cell" flex="33">Content 111</div>
<div class="cell" flex="33">Content 222</div>
<div class="last-cell" flex>Content 333</div>
</div>
Here is working example. http://codepen.io/next1/pen/PNxxyR
I've created 3 div tags according to the grid rules
<div class="row">
<div class="col-md-3" style=" border:1px solid;"><uc1:ucretsizilan runat="server" ID="ucretsizilan" /></div>
<div class="col-md-9" style=" border:1px solid red;"><uc1:seriVitrin runat="server" ID="seriVitrin" /></div>
<div class="col-md-3" style=" border:1px solid blue;"><uc1:nobetciBox runat="server" ID="nobetciBox" /></div>
</div>
Div = Black
Div = Red
Div = Blue
Ranking musn't change and i would like to remove space between black and blue.
How can I remove it, So that black and blue divs should stand one under the other ?
<div class="left">
<div class="col-md-3" style=" border:1px solid;"><uc1:ucretsizilan runat="server" ID="ucretsizilan" /></div>
<div class="col-md-3" style=" border:1px solid blue;"><uc1:nobetciBox runat="server" ID="nobetciBox" /></div>
</div>
<div class = "right> <div class="col-md-9" style=" border:1px solid red;"><uc1:seriVitrin runat="server" ID="seriVitrin" /></div> </div>
Or you can do this, this will remove space in bootstrap grid.
Example
HTML
<div class="no-pad>
<div class="col-lg-12>
/*--Content--*/
</div>
</div>
CSS
.no-pad [class*="col-"] {
padding:0;
margin: 0;
}
You can acomplish this behavior with only 2 columns: left column (col-xs-3) and right column (col-xs-9).
Then you create 2 additional div elements in the left column, one for each element. Since the div is a block element, you will end up with one div bellow the other.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-3">
<div style=" border:1px solid black;">
black
</div>
<div style="border:1px solid blue;">
blue
</div>
</div>
<div class="col-xs-9" style="border:1px solid red;">
red
</div>
</div>
Since you don't want to change the order of the elements, you could try something like the snippet bellow.
However i would recommend you reading more about the grid system. You're supposed to have a maximum of 12 columns in every row.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-3" style="border: 1px solid #000">
black
</div>
<div class="col-xs-9 pull-right" style="border: 1px solid #f00">
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
</div>
<div class="col-xs-3" style="border: 1px solid #00f">
blue
</div>
</div>
According with the grid that provided bootstrap-grid you have to made some modifications like this:
<div class="row">
<div class="col-md-3" style=" border:1px solid;">
<uc1:ucretsizilan runat="server" ID="ucretsizilan" />
<div class="row">
<div class="col-md-12" style=" border:1px solid blue;"><uc1:nobetciBox runat="server" ID="nobetciBox" /></div>
</div>
</div>
<div class="col-md-9" style=" border:1px solid red;"><uc1:seriVitrin runat="server" ID="seriVitrin" /></div>
</div>
<body>
<div id="containers" >
<div id="header">
<table> <tr>
<td><div id="logo"></div></td><td><div id="band-logo">
</div></td><td><div id="facebook"></div></td><td>
</td></tr>
<div id="amenu">
<ul id="mainMenu"><li id="first"></li><li></li><li id="last"></li></ul></div>
<div id="clearheader"></div>
</div>
<div id="container">
<div id="subMainBox"></div>
<div id="mainBox">
<div id="contents">
</div></div>
</div>
<div id="footer_show"> <div id="fd">
<div id=copy_right><br /><strong></strong></div>
</div>
</div>
</div>
</body>
(CSS CODE UPDATED)
#containers{
width:1000px;
margin: 0 auto;
position:relative;
margin-top:-20px;
}
#container{
position:relative;
top:-247px;}
#header{
width:1000px;
margin: 0 auto;
}
#contents{
position:relative;
top:-60px;
left:30px;
}
#mainBox{
height:500px;
float:right;
width:650px;
margin:0 150px 0 150px;
}
#mainBox2{
float:right;
width:650px;
margin:0 120px 0 150px;
}
The code as above, can anyone help to make this code to sticky footer? I have tried many methods. Thanks.(CSS CODE UPDATED)
Bootstrap Responsive 2 span6 inside span12 not side by side. Any idea?
http://jsfiddle.net/6TaQt/24/
<div class="MainDiv container-fluid" style="border:1px solid pink">
<div class="row-fluid">
<div class="span12" style="border:1px solid green">
<div class="span6" style="border:1px solid red">Span A</div>
<div class="span6" style="border:1px solid red">Span B</div>
</div>
</div></div>
........Live demo................
Hi now used to display:inline-block;
as like this
[class*="span"], .row-fluid [class*="span"]{
display:inline-block;
vertical-align:top;
}
Live demo
use float: left for both of the span6 classes
like : style="border:1px solid red; float:left"
I have following html codes
<div align="center" style="width:1000px;border:1px solid green;">
<div style="border:1px solid red;float:left; width:200px; ">
ssssssssssss </div>
<div style="border:1px solid red;float:left; width:200px; ">
ssssssssssss </div>
<div style="border:1px solid black; overflow: hidden;" id="endText">
xxx<p> </p><p> </p><p>x</p>
</div>
<div style="clear:both"></div>
</div>
It works very fine in FF,Opera,Safari,Chrome, But in IE it shows wrong things. IE request predefined height for endText div for example
<div style="border:1px solid black; overflow: hidden;height:117px; " id="endText">
What is the problem? Which addional CSS code may keep its visual properties in IE as like as other browsers?
You are in correct way. Please add any tag after your code and make #endText height as 100%.
It would be works as other browsers.
<div align="center" style="width:1000px;border:1px solid green;">
<div style="border:1px solid red;float:left; width:200px; ">
ssssssssssss </div>
<div style="border:1px solid red;float:left; width:200px; ">
ssssssssssss </div>
<div style="border:1px solid black; height:100%" id="endText">
xxx<p> </p><p> </p><p>x</p>
</div>
<div style="clear:both"></div>
</div> <hr>
Try floating #endText right and specifying a width? below i have used 594px as the borders are adding width.
<div align="center" style="width:1000px;border:1px solid green;">
<div style="border:1px solid red;float:left; width:200px;">
ssssssssssss
</div>
<div style="border:1px solid red;float:left; width:200px;">
ssssssssssss
</div>
<div style="border:1px solid black; overflow: hidden; float: right; width: 594px" id="endText">
xxx<p> </p><p> </p><p>x</p>
</div>
<div style="clear:both"></div>
</div>
Try to use positioning in CSS check out w3schools for how to make divs overlap, fixed etc