Drawing responsive Tic Tac Toe board in pure (no JS) HTML & CSS - html

I'm solving HTML layout problem similar to drawing responsive Tic Tac Toe board in HTML + CSS and without any JS. Here is how I define the board's layout:
<div class="board">
<div class="lines">
<div class="line">
<div class="cell">
<div class="cell-content"></div>
</div>
<div class="cell">
<div class="cell-content"></div>
</div>
<div class="cell">
<div class="cell-content"></div>
</div>
</div>
<div class="line">
<div class="cell">
<div class="cell-content"></div>
</div>
<div class="cell">
<div class="cell-content"></div>
</div>
<div class="cell">
<div class="cell-content"></div>
</div>
</div>
<div class="line">
<div class="cell">
<div class="cell-content"></div>
</div>
<div class="cell">
<div class="cell-content"></div>
</div>
<div class="cell">
<div class="cell-content"></div>
</div>
</div>
</div>
</div>
and here is the corresponding CSS:
.board {
position: relative;
height: 100%;
width: 100%;
border:1px solid black;
box-sizing:border-box;
}
.board:before {
content:"";
display: block;
padding-top: 100%;
}
.lines {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.line {
width: 100%;
}
.cell {
float: left;
width: 33.3333%;
border:1px solid black;
box-sizing:border-box;
}
.cell:before {
content:"";
display: block;
padding-top: 100%;
}
.cell-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Here I do not set any sizes besides width: 33.3333%. The height of the board and fields is set using the Height equals width with pure CSS approach.
And I would note that almost everything is great. The only problem here: sometimes the sum of widths/heights of board cells are less than the width/height of the board. It means that I can see the gap between last field border and the board border. I can reproduce it with Chrome or FF, but it never happens in IE. Is there a way to fix this?
The demo is available on the jsfiddle (the red line is what I'm trying to get rid of)
UPDATE: It happens in IE also, not sure why I did not saw it before.


Simple Fix is to give the .line Elements overflow: auto;
.line {
overflow: auto;
}
and your good to go :D

Related

Align div at the bottom of bootstrap col

How can I align div element at the bottom of parent element while using bootstrap col?
.wrapper {
background-color: green;
height: 200px;
}
.bottom {
position: relative;
}
.bottom-div {
height: 200px;
position: absolute;
bottom: 0;
}
<div class="wrapper">
<div class="col-md-3 bottom">
<div class="bottom-div"> TEST1 </div>
</div>
<div class="col-md-6">
TEST2
</div>
<div class="col-md-3">
TEST3
</div>
</div>
bottom div element does not align at bottom. What is correct way of doing this? Thanks.
UPDATE: Div element runs out of wrapper (it basically moves up)

Not sure exactly what you're trying to do, as #CBroe said flexbox would be the best way but try this:-
/* CSS used here will be applied after bootstrap.css */
.wrapper{
background-color:green;
height: 200px;
position: relative;
}
.bottom-div{
height: 50px;
width: 50px;
position: absolute;
bottom:0;
left: 0;
background-color: red;
}
.testclass {
height: 100%;
}
<div class="wrapper">
<div class="col-md-3 testclass">
<div class="bottom-div"> TEST1 </div>
</div>
<div class="col-md-6">
TEST2
</div>
<div class="col-md-3">
TEST3
</div>
</div>

16 responsive divs that fill the entire page

Is it possible to fill an entire page with 16 divs but still have it responsive so it can be viewed on different devices. At the moment I have only used percentages but I am open to other solutions if there are any.
-How it is suppose to look.
The webpage has to contain 16 divs in total four spread across the top first quater of the webpage four spread across the second quarter of the page four spread across the third quarter of the page and four spread across the forth quarter of the page.
So overall it is suppose to look like a big cube or look like the 2408 game http://gabrielecirulli.github.io/2048/
-My code so far
***HTML***
<!doctype html>
<head>
<link rel="stylesheet" href="master.css">
</head>
<!-- ========================================================================================================================= -->
<div id="s1" class="divq"> </div> <div id="s2" class="divq"> </div> <div id="s3" class="divq"> </div> <div id="s4" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s5" class="divq"> </div> <div id="s6" class="divq"> </div> <div id="s7" class="divq"> </div> <div id="s8" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s9" class="divq"> </div> <div id="s10" class="divq"> </div> <div id="s11" class="divq"> </div> <div id="s12" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s13" class="divq"> </div> <div id="s14" class="divq"> </div> <div id="s15" class="divq"> </div> <div id="s16" class="divq"> </div>
<!-- ========================================================================================================================= -->
***CSS***
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
.divq {
height: 25%;
margin: 0px;
width: 25%;
}
#s1 {
background-color: rgb(100,100,100);
float: left;
}
#s2 {
background-color: rgb(120,100,100);
}
#s3 {
background-color: rgb(100,120,100);
}
#s4 {
background-color: rgb(100,100,120);
float: right;
}
#s5 {
background-color: rgb(140,100,100);
float: left;
}
#s6 {
background-color: rgb(100,140,100);
}
#s7 {
background-color: rgb(100,100,140);
}
#s8 {
background-color: rgb(160,100,100);
float: right;
}
#s9 {
background-color: rgb(100,160,100);
float: left;
}
#s10 {
background-color: rgb(100,100,160);
}
#s11 {
background-color: rgb(180,100,100);
}
#s12 {
background-color: rgb(100,180,100);
float: right;
}
#s13 {
background-color: rgb(100,100,180);
float: left;
}
#s14 {
background-color: rgb(200,100,100);
}
#s15 {
background-color: rgb(100,200,100);
}
#s16 {
background-color: rgb(100,100,200);
float: right;
}

Make them all float: left, and don't forget to add box-sizing: border-box to all elements (via .divq)
That way you can add margings and paddings without breakting your grid.

If you are fine with flexbox, you can span four rows inside a wrapper with display: flex and flex-direction: column, each including four columns.
Sample Fiddle:
http://fiddle.jshell.net/n50tnnka/2/

Maybe you could try using a Bootstrap grid? It's fairly easy to use!
Just give your div's the class col-md-3. That way, the div's will know they can take up 3/12th of the screen = 25% = 4 divs per row.
If you then contain all these divs in one parent div with fixed width and height, you should be fine.
<div id="cube">
<div class="col-md-3" id="s1"></div>
<div class="col-md-3" id="s2"></div>
<div class="col-md-3" id="s3"></div>
<div class="col-md-3" id="s4"></div>
<div class="col-md-3" id="s5"></div>
<div class="col-md-3" id="s6"></div>
<div class="col-md-3" id="s7"></div>
<div class="col-md-3" id="s8"></div>
<div class="col-md-3" id="s9"></div>
<div class="col-md-3" id="s10"></div>
<div class="col-md-3" id="s11"></div>
<div class="col-md-3" id="s12"></div>
<div class="col-md-3" id="s13"></div>
<div class="col-md-3" id="s14"></div>
<div class="col-md-3" id="s15"></div>
<div class="col-md-3" id="s16"></div>
</div>
By still using the id's you can give any square the color you like, but by using bootstrap you won't have to use float.

You can do this easily with Flexbox like this
DEMO
.content {
display: flex;
height: 100vh;
width: 100vw;
flex-wrap: wrap;
box-sizing: border-box;
}
.box {
flex: 25%;
border: 1px solid black;
padding: 5px;
box-sizing: border-box;
}
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

For better browser support (than flex) you can use display table-cell for your elements
But you will have to nest each "row" (four divs) in a parent element:
HTML:
<div class="row">
<div id="s1" class="divq"> </div>
<div id="s2" class="divq"></div>
<div id="s3" class="divq"> </div>
<div id="s4" class="divq"> </div>
</div>
CSS:
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
div {
box-sizing:border-box;
}
.row{
display: table;
table-layout: fixed;
border-spacing:0px;
width:100%;
height:25%;
}
.divq {
display:table-cell;
height: 25%;
width: 25%;
}
DEMO: https://jsfiddle.net/Nillervision/06z1L5tg/

Scalable circles with dynamic numbers inside

Apologies if this has been asked and answered already, as I was not able to find an appropriate solution to this problem.
I need to work on a site navigation that require some numbers to be placed inside circles. The circles will increase in diameter based on the length of the text inside. I'm looking for a very elegant, preferably css only solution for this. Please note the alignment of the circles here with respect to the entire row and label text on the mock up attached.

It required some CSS trickery to get this working, but this works in the latest version Chrome and Firefox. Let me know if you have any other questions.
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: #9653DA;
font: 600 14px sans-serif;
}
.nav-table {
display: table;
text-align: center;
}
.nav-row {
display: table-row;
}
.nav-col {
display: table-cell;
}
.text {
margin: 1em;
}
.icon {
display: inline-block;
border-radius: 100%;
border: 2px solid;
min-width: 10px;
padding: 0.5em;
margin: 0.5em;
}
.icon div {
position: relative;
height: 0;
padding: 50% 0;
top: -7px; /* Half of font-size, in our case it is (14px / 2) */
}
<div class="nav-table">
<div class="nav-row">
<div class="nav-col">
<div class="icon">
<div>20</div>
</div>
</div>
<div class="nav-col">
<div class="icon">
<div>300</div>
</div>
</div>
<div class="nav-col">
<div class="icon">
<div>50</div>
</div>
</div>
<div class="nav-col">
<div class="icon">
<div>1</div>
</div>
</div>
</div>
<div class="nav-row">
<div class="nav-col">
<div class="text">Japanese</div>
</div>
<div class="nav-col">
<div class="text">Main Course</div>
</div>
<div class="nav-col">
<div class="text">Non Vegetarian</div>
</div>
<div class="nav-col">
<div class="text">Beginners</div>
</div>
</div>
</div>

How to make the top row of a Bootstrap grid fill the entire screen

A common, modern design technique for responsive websites is to use a screen-height element as the above-the-fold content wrapper, and have all other content available below. Here's a good discussion on this technique. Here's a demo at CodePen:
#fullscreen {
width: 100%;
height: 100%;
display: table;
}
#fullscreen .fullscreen-content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div id="fullscreen">
<div class="fullscreen-content">
...
</div>
</div>
How can I make a Bootstrap 3 row behave in this manner?

I'm facing this challenge. Here's my current solution.
.full-ht {
height: 100vh;
position: relative;
}
.full-ht-content {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
margin-left: -15px;
padding-left: 15px;
}
<div class="container-fluid">
<div class="row full-ht">
<div lass="col-xs-12 full-ht">
<div id="page-top-content" class="full-ht-content">
Above-the-fold content.
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
Other content.
</div>
</div>
</div>
Fiddle demo

How to have a 100% width background inside container of twitter bootstrap?

I am currently building a wordpress site, where I need a 100% width background (css color, no image) for a div. My div is inside a container and I can't modify the html. So, I was wondering if there was any way with css to do this. I have already tried the padding+margin hack, but it didn't work.
HTML:
<div class="container">
<div class="row-fluid">
<div class="main span12">
<div class="row-fluid blue"> <!--this is the div that needs the background-->
<div class="span4">some content</div>
<div class="span4">some content</div>
<div class="span4">some content</div>
</div>
<div class="row-fluid">
<div class="span12"> some other content, doesn't need the background</div>
</div>
</div>
</div>
</div>
Any help is much appreciated. I tried this one : http://www.sitepoint.com/css-extend-full-width-bars/ but it didn't work.

Based on this article from CSS Tricks (Full Width Browser Bars ).
HTML
<div class="container">
<div class="level"></div>
<div class="level purple"></div>
<div class="level"></div>
</div>
CSS
html, body {
overflow-x: hidden;
}
.container {
width:960px;
margin: 0 auto;
border:1px solid black;
}
.level {
height:100px;
background: #bada55;
}
.purple {
position: relative;
background: #663399;
}
.purple:before,
.purple:after {
content: "";
position: absolute;
background: #663399; /* Match the background */
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
}
.purple:before {
right: 100%;
}
.purple:after {
left: 100%;
}
Codepen Demo
Support should be IE8 & up