I am working on a site and came across a problem. I have several divs with the same css class applied to them. I want to rotate every3rd,5th 8th etc with css transform to give the look of randomness. I have done this with nth-child in the past, but now my divs not direct siblings but are nested about 5 levels down from the common parent.
Here is a simplification of the code (too long to add all).
<tr>
<td valign="top" width="20%">
<form>
<div class="box fp-product-listing">
<div class="product-image">
<a href="">
<img class=" " />
</a>
</div>
<div class="product-description">
<div class="prices"> <- THIS IS THE DIV TO BE STYLED
</div>
</div>
</div>
</form>
</td>
<td valign="top" width="20%">
<form>
<div class="box fp-product-listing">
<div class="product-image">
<a href="">
<img class=" " />
</a>
</div>
<div class="product-description">
<div class="prices"> <- THIS IS THE DIV TO BE STYLED
</div>
</div>
</div>
</form>
</td>
</tr>
Any advice on how to do this with pure CSS? (no I'm not going to use jQuery just for this little effect :)
Thanks in advance.
From the HTML you've provided, it looks like each div.prices is in its own td, in that pattern. In that case you use td:nth-child(...) div.prices and not div.prices:nth-child(...), since the td elements are siblings of one another.
Related
I need to create a list of divs as looking like below sample:
I'm using Bootstrap grid system and augularjs. I create divs dynamically, using angularjs ng-repeat directive.
What I want is an endless list of divs containing attribute 'class"col-md-2"' inside a div containing attribute 'class"col-md-12"'. Then I want to use a scrollbar to scroll all the divs in the outer div.
Example code:
<div class="col-md-12" scrollablebar>
<div ng-repeat="newview in newviewslist" class="col-md-2">
Here goes the date from newview...
</div>
</div>
This doesn't work and "off course" is creating new rows each time ng-repeat is creating a div.
How do I prevent that from happen?
I solved the problem like this:
<div class="container-fluid">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-11" scrollablehorizontal>
<table class="borderless">
<tbody>
<tr>
<td ng-repeat="newviews in newviews" valign="top" class="shadowbox" scrollableverticall>
<p>
all the things...
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-1"></div>
</div>
</div>
in a col-md-12, there can be 6 x col-md-2 after that there is a linebreak.
try to change "col-md-12" to "row-fluid"
<div class="row-fluid" scrollablebar>
<div ng-repeat="newview in newviewslist" class="col-md-2">
Here goes the date from newview...
</div>
</div>
and add css:
.row-fluid{
white-space: nowrap;
}
.row-fluid .col-md-2{
display: inline-block;
margin-left:10px;
}
jsfiddle
I am working on site which is based on table-layout (no div). Now requirement change and has to re-create so that it look responsive, and for responsive we choose bootstrap as option.
Now, How can I convert tables layout into bootstrap grid layout so can 1. look not change, 2. have responsive also.
table-layout is too complex in site. lots of nesting is there. For example:
<table border="0" width='100%' bgcolor='#ff00ff'>
<tr style='padding-bottom:1em;'>
<td>
<table border="0">
<tr valign='bottom'>
<td width='50'> </td>
<td>
<img border="0" src="#" width="100" height="300">
</td>
<td width='25'> </td>
<td>
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</td>
</tr>
</table>
</td>
<td align='right'>
<table border="0" cellspacing="0">
<tr>
<td align='center' colspan='3'>
<span>Another tesing text</span>
<span style='color:#FFFFCC;'> - </span>
<span style='font-size:11px;color:#fffff;'>Random text</span>
</td>
</tr>
</table>
</td>
</tr>
For example how can I convert above code with bootstrap row, col-*-* grid-layout.
Trust me, I tried a lot to convert this, but sometime looks change or some time just not work at all.
General suggestion on how to convert table base layout into bootstrap are also welcome.
Here is some great literature: Bootstrap 3 Grid system
Replace table and tbody with div class="container"
Replace tr with div class="row"
Replace td with div class="col-ww-nn"
Where ww is device width (xs, sm, md, lg)
Where nn is a number 1-12 for width percentage (divided by 12)
Below is your updated code (including some syntax fixes too). Note, I've added responsiveness so that on phones (xs devices) your second main column would be a separate line. And you can make images responsive with img-response so that it's size changes with the device.
<div class="container" style="background-color:#ff00ff">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
</div>
<div class="col-xs-4 col-sm-4">
<img src="#" class="img-responsive">
</div>
<div class="col-xs-4 col-sm-4">
</div>
<div class="col-xs-4 col-sm-4">
<span style="font-size:10px;color:#cccccc;">Alpha testing</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
<span>Another tesing text</span>
</div>
<div class="col-xs-4 col-sm-4">
<span style="color:#ffffcc;"> - </span>
</div>
<div class="col-xs-4 col-sm-4">
<span style="font-size:11px;color:#ffffff;">Random text</span>
</div>
</div>
</div>
</div>
</div>
Actually it is not so complex.
Just skip every <table> and <tbody> tag, treat every <tr> as block element with class="row" and every <td> as block element with class="col-*-*". Nesting Bootstrap grid is totally okey, so if you have somthing like that:
<tr style='padding-bottom:1em;'>
<td>
<table border="0">
<tr valign='bottom'>
<td width='50'> </td>
<td>
<img border="0" src="#" width="100" height="300">
</td>
<td width='25'> </td>
<td>
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</td>
</tr>
</table>
</td>
</tr>
Just do:
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"> </div>
<div class="col-xs-6">
<img border="0" src="#" width="100" height="300">
</div>
<div class="col-xs-10"> </div>
<div class="col-xs-2">
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</div>
</div>
</div>
</div>
Ofcourse those are just example Bootstrap classes - you don't have to stick with numbers ;)
Here is my jsFiddle for full code example.
I couldn't figure out how to upload my placeholder.png image. Nevertheless, notice that there are (supposed to be) 6 images under the subheading?
When I run this locally (where my browser can actually resolve placeholder.png) the images are all smushed together. I can force them to be separated by hackishly adding 's but that seems like the wrong way to accomplish padding:
<div class="row">
<div class="col-md-2 text-center">
<img src="placeholder.png"/>
<img src="placeholder.png"/>
<img src="placeholder.png"/>
<img src="placeholder.png"/>
<img src="placeholder.png"/>
<img src="placeholder.png"/>
</div>
</div>
Any ideas how I can get these to be padded such that all 6 images are centered and yet still take up most of the page width?
Also, just to throw a curve ball into the equation, when this runs in production, the server decides how many images to send back. It won't always be 6 images: it will always be between 3 and 7 images (so: 3, 4, 5, 6 ot 7 images). I need this to be smart enough to center the images and make them take up most of the page width regardless of how many images are returned by the server. Any ideas?
You could use Bootstrap's list-inline..
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1 style="text-align: center;">
<span class="glyphicon glyphicon-user secondary" style="display: block"></span>
<span class="strong-primary">Who's using Fizz<b>Cloud</b>?</span>
</h1>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<ul class="list-inline">
<li><img src="//placehold.it/100x100"></li>
<li><img src="//placehold.it/100x100"></li>
<li><img src="//placehold.it/100x100"></li>
<li><img src="//placehold.it/100x100"></li>
<li><img src="//placehold.it/100x100"></li>
<li><img src="//placehold.it/100x100"></li>
</ul>
</div>
</div>
</div>
Demo: http://www.bootply.com/DSpNtxqsYJ
I wouldn't use Bootstrap Rows and Columns for this. I would actually use a Bootstrap Table (which I'll likely get yelled at for saying)
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1 style="text-align: center;">
<span class="glyphicon glyphicon-user secondary" style="display: block"></span>
<span class="strong-primary">Who's using Fizz<b>Cloud</b>?</span>
</h1>
</div>
</div>
<table class="table table-responsive">
<tbody>
<tr>
<td class="text-center"><img src="//placehold.it/100x100" class="img-thumbnail"></td>
<td class="text-center"><img src="//placehold.it/100x100" class="img-thumbnail"></td>
<td class="text-center"><img src="//placehold.it/100x100" class="img-thumbnail"></td>
<td class="text-center"><img src="//placehold.it/100x100" class="img-thumbnail"></td>
<td class="text-center"><img src="//placehold.it/100x100" class="img-thumbnail"></td>
<td class="text-center"><img src="//placehold.it/100x100" class="img-thumbnail"></td>
</tr>
</tbody>
</table>
</div>
Visual: http://www.bootply.com/dmrb3J8ihl
This will also address the issue of having 3 - 7 pictures; the table-responsive class makes the table adjust to the width of your browser.
Hope that helps!
In order to take up the full screen, you'll need each image to take up it's share of the available screen width. I can't really see a way of doing this without jQuery. The good news is, it's rather trivially implemented.
Just find the number of images. Take the total percent width available and divide by that number. Then apply that as a width to each image:
var $images = $(".centerImages > img");
var numberImages = $images.length;
var width = 90/numberImages;
$images.css('width', width+'%');
.centerImages {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="centerImages">
<img src="//placehold.it/100x100">
<img src="//placehold.it/100x100">
<img src="//placehold.it/100x100">
<img src="//placehold.it/100x100">
<img src="//placehold.it/100x100">
<img src="//placehold.it/100x100">
</div>
I have layout with two left floating divs - one for a picture the other for content. In the content div I have inserted a table to show some numeric data. When I add the table to the content div my float seems to get lost, the second div does not show up next to the first one but rather below.
Code example:
<div style="float:left;">
<img src="images/image.jpg" width="200" height="125" alt="Image" /></p>
</div>
<div style="float:left; padding-left:16px;">
<p>Paragraph text </p>
<table width="650">
....
</table>
</div>
Please check the width of the parent div that contains these two divs, my guess is that the parent does not have enough width to accommodate both given their content and width settings.
<div style="width:866px;overflow:hidden">
<div style="float:left;">
<img src="images/image.jpg" width="200px" height="125" alt="Image" /></p>
</div>
<div style="float:left; padding-left:16px;">
<p>Paragraph text </p>
<table width="650px">
....
</table>
</div>
</div>
<div>My Cart (0 items)</div> and #cart do not overlap, but they have no pixels between them. The problem I'm running into is when I mouse over the My Cart #cart shows, which is correct given the :hover class, but the problem is when I move my mouse off of My Cart and onto #cart the :hover doesn't stick. Any ideas why? There is no space between these two elements, so I thought it would be seamless.
#hd .top-nav ul .tab:hover .content {
display: block;
}
<li class="tab my-cart"><div>My Cart (0 items)</div>
<div id="cart" style="display: block;">
<table>
<tbody><tr>
<td class="no-result faded" colspan="4">Your cart is empty</td>
</tr>
<tr class="empty-row hide">
<td class="remove"><img src="/images/s.gif"></td>
<td class="product">
<strong></strong>
</td>
<td class="quantity"></td>
<td class="quantity-options">
<div class="adjust">
<div class="increment"></div>
<div class="decrement"></div>
</div>
</td>
</tr>
</tbody></table>
<div class="yui-g">
<div class="yui-u first">
<div class="working faded hide">
Working...
</div>
</div>
<div class="yui-u">
<div class="review hide">
<div class="button">Review purchases</div>
</div>
</div>
</div>
</div></li>
Is your issue with IE6? IE6 has notoriously spotty support for pseudo classes (:anything). IE6 does support :hover, but only on anchor tags.
Check out this writeup.
Sorry, the problem was something stupid... the CSS wasn't doing the hover, it was javascript