PHP/CSS How to achieve a checkerboard style - php

I'm trying to achieve the following using PHP and CSS:
1 0 1 0
0 1 0 1
1 0 1 0
0 1 0 1
Using a single class, so 1 will be the class of dark and 0 the class of light.
Below is what I'm trying to create:
I've managed to achieve this using the nth-child selectors but isn't great, especially as more are added.
I'm using WordPress and the amount of blocks will be based on the amount of posts under a custom post type, currently there are 20 but this will increase.
Simplified Example:
.wrap{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 300px;
}
.checker{
background-color: rgba(43,55,140,.8);
}
.checker:nth-child(n+2):nth-child(even):nth-child(-n+4),
.checker:nth-child(n+5):nth-child(odd):nth-child(-n+8),
.checker:nth-child(n+9):nth-child(even):nth-child(-n+12){
background-color: rgba(181,230,254,.8);
}
<div class="wrap">
<div class="checker"></div>
<div class="checker"></div>
<div class="checker"></div>
<div class="checker"></div>
<div class="checker"></div>
<div class="checker"></div>
<div class="checker"></div>
<div class="checker"></div>
<div class="checker"></div>
<div class="checker"></div>
<div class="checker"></div>
<div class="checker"></div>
</div>
Any help would be greatly appreciated!

Perhaps the simplest way to achieve this would be to insert an empty element after every 4th div.
This would allow you to generate a chess-board like colouring by simply using :nth-child(odd)
I don't use PHP, but presumably there is a modulo operator available. The code might look something like this:
if ($i % 5 == 0) {
// Create empty element.
}
Example:
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
width: 25%;
padding-top: 25%;
background: lightblue;
}
.container > div:nth-child(odd) {
background: blue;
}
.container > .empty {
width: 0;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div class="empty"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="empty"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="empty"></div>
</div>

(On phone so apologies for description sans code).
Not experienced with WordPress, but the code doesn’t seem to specify a fixed number of elements per row (since you’re using bootstrap styles).
Now, it’d simple if you knew the number of elements per row, since you can just nth-child that quite succinctly.
For example, suppose it’s 4 elements per row. Then 8n, 8n+1, 8n+3, and 8n+6 are dark, which you can verify visually.
Of course in responsive we do not necessarily know how wide a row will be. But! You’re using bootstrap styles, so you do know (with caveats) since you know the media queries for when you switch from col-md-4 to col-xs-12, for example.
So, my thought is to have a set of nth child rules for each such breakpoint.
EDIT
In general, if a row is x elements wide, 2x+y rules are an easy way to make a checkboard using nth-child rules when the elements/divs themselves have no particular organization.

Related

Move elements one below other in block

I have this little problem with my site. I want to move block title and second line to center, and button to keep in at center too, something like this:
image how wanted to look
Currently it looks like this:
current look on block
Where can be seen this form is here at bottom of page. This is what I do to customize it myself, I updated this CSS class:
.heading {
font-family: GOTHAM-BOLD;
font-size: 28px;
color: #273a55;
margin-left:340px; // i added this line, but seems it mess entire look.
}
and this is PHP code from that form:
<div class="footer box">
<div class="bluebg box"></div>
<div class="container">
<div class="footermain box">
<div class="footertop box">
<div class="row">
<div class="col-md-6 nopd">
<div class="ftleft box">
<div class="ftlinner box">
<h1 class="heading"><?php echo (get_field('news_letter_title'))?get_field('news_letter_title'):get_field('news_letter_title', 'option') ?></h1>
<?php echo (get_field('news_letter_tag'))?get_field('news_letter_tag'):get_field('news_letter_tag','option') ?>
</div>
</div>
</div>
<?php
endwhile;
It seems that Heading title and line bellow that is contained into one class called heading. So question now is now to move to center to start looking like image provided.
Follow these steps :
Change your col-md-6 class to col-md-12 in both the text bloc and the button bloc.
Add class text-center to the text column like this
<div class="col-md-12 nopd text-center" >
Add style justify-content: center; to "footertop box" like this :
<div class="footertop box" style="justify-content: center;">
Remove class noleft from button column and add margin:0 to button
as far as I understand, you want to have the texts centered and the button below them
for quick solution, add this class to your css:
.footertop.box .row {
display: block;
width: 100%;
text-align: center;
}
delete div's col-md-6 classes which are in div.row

How to centre-align 'n' number of images, coming from database

I have links of images stored in database,I want to bring the set of images at the centre of the screen (which in my case is left-aligned). No matter how many pictures comes dynamically, the set of the images should be aligned centre.
Iam using bootstrap for designing and here is how my code look like:
<div class="row">
<div class="col-md-12 text-center">
<?php
foreach($n as $val)
{ // loop to iterate 'n' image links
?>
<div class="col-md-1">
<img src="<?php echo $val; ?>" // images showing up.
</div>
<?php
}
?>
</div>
</div>
I am adding an image below to demonstrate the situation.
I have tried the following:
bootstrap classes : center-block (which is based on margin)
bootstrap classes : text-center (which is based on text-align)
bootstrap classes : "img-responsive center-block"
Please Note:
I don't want to push the content toward centre forcefully (like using of bootstrap class "col-md-push-3" or something as such, because the number of images to be displayed is not fixed. They vary time to time)
The column classes you are using to wrap the images [col-md-1]are floated left by default....you'd have to override that behaviour.
.text-center .col-md-1 {
float: none;
display: inline-block;
}
.text-center .col-md-1 {
float: none;
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>
You can still use some good old CSS using FlexBox, as shown on this Fiddle. Basically, it uses a structure like:
<div class="container">
<div class="picture">
<img src="http://lorempixel.com/image_output/food-q-c-200-200-1.jpg" />
</div>
</div>
And then, with some FlexBox properties, you can achieve what you want:
.container {
display: flex;
}
.picture {
flex: 1 1;
width: 100%;
}
img {
width: 100%;
}
To sum up, you put the container in flex mode, and then all its div would occupy same space. Some intermediary divs are required in order to keep the aspect ratio of each image.
If you want to center them in case of you have less pictures available, you can still use the justify-content: center; property, setting a maximum width on the divs, such as this other Fiddle.
Note however that this solution would not work on IE9-.
Make a div with text-align:center
Amand then make a div inside it with display:inline-block

Div Positioning is not as Expected

I have the following PHP page
<?php include 'header-adminpanel.php'; ?>
<div class="container">
<div class="body-content">
<div class="side-left"><?php include 'adminproduct_sidebar.php'; ?></div>
<div class="side-right"></div>
</div>
</div>
<?php include 'footer.php'; ?>
Where I expected the output as
But the real output is
Styling is as follows;
.side-left{
width: 250px;
float: left;
height: auto;
}
.side-right{
width: 750px;
float: left;
height: auto;
}
.body-content{
height:auto;
width: 1000px;
margin:auto;
}
.container {
height: auto;
width: 100%;
}
Without those "side-left" and "side-right" divs it looks fine as below
What's wrong with my code? Any Suggestions..
You should add this before including footer. That should solve the things.
<div style="clear:both"></div>
Add
<div style="clear:both"></div>
before the line,
<?php include 'footer.php'; ?>
You are using floated elements and they collapsed as there is no content.
Add clearfix to body-content.
Also take a look at Why doesn't the height of a container element increase if it contains floated elements? and What does the CSS rule clear: both do?
add Clear both before footer div, Try the following
<?php include 'header-adminpanel.php'; ?>
<div class="container">
<div class="body-content">
<div class="side-left"><?php include 'adminproduct_sidebar.php'; ?></div>
<div class="side-right"></div>
</div>
</div>
<div style="clear:both"></div>
<?php include 'footer.php'; ?>
Example
The only reason that the footer is sliding to the right side of the '.container' is because '.container' div's child have a float property.
So for a quick fix add 'clear:both' to the '.container' div and also to the footer div or empty div.
If this does not fix the problem we need to see the footer, side-left and slid-right html.
Here is Two Solution
First Clearing Floats Using Clear:both
And Another Adding Overflow: auto to Parent div
HERE IS CODE
HTML :
<div class="body-content">
<div class="side-left"><?php include 'adminproduct_sidebar.php'; ?></div>
<div class="side-right"></div>
<div style="clear:both"></div>
</div>
Another solution is
Just adding a css
.body-content{
overflow:auto;
}
Hope it helps you :)

Bootstrap fluid layout on wordpress issue

Hi Is there any of you out there that is able to assist me on this. I'm experimenting with the fluid layout of bootstrap on my wordpress site. Apparently the isn't working properly. I created a .span 12 column and its not taking up the full width of the browser. Instead its width shrank. Is there a way around this?
Heres the experiment which i created using a custom page template
<?php
/*
Template Name: page-work
*/
?>
<?php get_header(); ?>
<h1><?php the_title(); ?></h1>
<style type="text/css">
.span12{
background:black;
color:white;
padding:20px 0;
text-align:center;
margin-top:15px;
}
.span6{
background:blue;
color:white;
padding:20px 0;
text-align:center;
margin-top:15px;
}
</style>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">span 12</div>
</div>
<div class="row-fluid">
<div class="span6">span 6</div>
<div class="span6">span 6</div>
</div>
</div>
This is because bootstrap has a fixed width of span12 as
.span12 {
width: 1170px;
}
for bigger screens.
If you still want, you can try this:
#media (min-width: 1200px) {
.span12 {
width: 100%;
}
}
Always create a child css file and put that below the bootstrap file.
I would recommend upgrading to Bootstrap 3 as it handles fluid-containers in a much better way and you wouldn't have this problem in the first place.
.span12 becomes col-xx-12 (xx is either xs, sm, md and lg...read up on that!) and has a width of 100%. BS3 uses percentage widths rather than fixed widths as mentioned in the answer above. It's also not too difficult to move from BS2 to 3.
http://getbootstrap.com/ - download here
http://getbootstrap.com/getting-started/ - documentation
As a general rule, wordpress won't really change how your website looks. It's the styles you put around it so Wordpress in this case is irrelevant.

div layout format php

i am trying it get that div displaying 5 in a row and then start a new line and display more
atm all that is happening is the are going under each other.
CODE
< div>Line1< br />Line2< br>Line3< /div>
Thank you
If you want five divs side-by-side per line, the following works:
.cell { padding:0; margin:0; float:left; width:20%; }
.clear { clear:both; }
--
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="clear"></div>
For best results, all divs should have the same height. If they don't, you should place the <div class="clear"></div> after every 5th div.
A <br /> tag will always move to the beginning of the next line. So if you had this (I took the liberty to add a "/" to your second br tag, maybe this was the problem):
<div>Line1<br />Line2<br />Line3</div>
You'd get this:
Line1
Line2
Line3
Is that not what you want? If not, please clarify.
If you want the divs to display side-by-side you'll need to use css floats to do that.
<style type="text/css">
div { float: left }
</style>
Then, you'll need to use a <br clear="all" /> to move down to the next line.
This would mean that
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
Would show up as 12345 with the content all on the same line. Is this what you're looking for?

Categories