I have all my divs necessary for my tic tac toe game, however I can't seem to find a simpler way to make a grid and not have any borders so it's just a grid and not 9 full squares... I think it's an issue in CSS.
<html>
<head>
<title>First Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tic Tac Toe</h1>
<div class="wrapper">
<div class="gameboard">
<div class="Row1">
<div id="cell1"></div>
<div id="cell2"></div>
<div id="cell3"></div>
</div>
<div class="Row2">
<div id="cell4"></div>
<div id="cell5"></div>
<div id="cell6"></div>
</div>
<div class="Row3">
<div id="cell7"></div>
<div id="cell8"></div>
<div id="cell9"></div>
</div>
</div>
<div class="button">
<button>New Game</button>
<button>End Game</button>
</div>
</div>
</body>
</html>
HERE IS THE CSS, I HAVE 9 BOXES I NEED A GRID, HOW DO I DO THAT?
.gameboard {
width: 330px;
height:310px;
border:3px solid white;
z-index: 1;
}
.wrapper {
width: 330px;
margin:0 auto;
}
.button {
background-color:white;
width: 160px;
margin:0 auto;
}
.row1, .row2, .row3 {
clear:both;
}
#cell1,#cell2,#cell3 {
width:100px;
height:100px;
border:3px solid black;
float: left;
}
#cell4,#cell5,#cell6 {
width:100px;
height:100px;
float: left;
border:3px solid black;
}
#cell7,#cell8,#cell9 {
width:100px;
height:100px;
float: left;
border:3px solid black;
}
Not 100% sure what your saying but lets have a look.
Here we have a grid for "tic tac toe", you can use float: left; to put 9 boxes into one container to line up these boxes in a row (3 a row due to width: 100px; and the overall container width: 300px;)
HTML:
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS:
div {
width: 300px;
height: 600px;
}
div div {
width: 100px;
height: 100px;
outline: 1px solid;
float: left;
}
DEMO HERE
Now if we want the border like when you normally play the game lets do something like this:
CSS:
div {
width: 310px;
height: 600px;
}
div div {
width: 100px;
height: 100px;
float: left;
}
div div:nth-child(-n+3) {
border-bottom: 1px solid;
}
div div:nth-child(-n+6) {
border-bottom: 1px solid;
}
div div:nth-child(1), div:nth-child(2), div:nth-child(4), div:nth-child(5), div:nth-child(7), div:nth-child(8) {
border-right: 1px solid;
}
Note that its early in the morning and there could be a better was to get that layout, brain not be fully working yet. But that is a way that will work.
DEMO HERE
NOTE: Only just seen I set the height: 600px; for some reason, you can lower that to fit the box.
Update:
Your code with easier grid:
HTML:
<h1>Tic Tac Toe</h1>
<div class="wrapper">
<div class="gameboard">
<div></div>
<div class="leftright"></div>
<div></div>
<div class="updown"></div>
<div class="middle"></div>
<div class="updown"></div>
<div></div>
<div class="leftright"></div>
<div></div>
</div>
<div class="button">
<button>New Game</button>
<button>End Game</button>
</div>
</div>
CSS:
.wrapper {
width: 330px;
margin:0 auto;
}
.gameboard {
width: 330px;
height:310px;
border:3px solid white;
z-index: 1;
}
.gameboard div {
width: 100px;
height: 100px;
float: left;
}
.middle {
border: 1px solid;
}
.button {
background-color:white;
width: 160px;
margin:0 auto;
}
.updown {
border-top: 1px solid;
border-bottom: 1px solid;
}
.leftright {
border-left: 1px solid;
border-right: 1px solid;
}
So to make it easier for you, I have based it around your code and put in an easier grid. Using classes I made to set the borders that create the layout of the game board.
DEMO HERE
You make a 3 × 3 grid in HTML and CSS by writing a 3 × 3 HTML table and setting the dimensions of its cells in CSS. It is absurd not to use a table for a tic tac toe grid, which is a tabular structure if there ever was one.
<style>
td { width: 1em; height: 1em; line-height: 1 }
</style>
<table>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
</table>
You normally don’t need id attributes here, as you can refer to cells by their structural position, both in CSS and JavaScript, unless you need to support ancient browsers.
The details depend on the detailed requirements. Now the question says “not have any borders”, yet the CSS code clearly sets borders.
Like #NoobEditor said in his comment: show us what you've tried so far next time.
You can achieve this by using divs floated next to each other, acting as columns.
Inside those divs you add more divs acting as rows.
CSS
.column{
float: left;
width: 70px;
height: 70px;
border: 1px solid blue;
overflow: hidden;
}
.row{
width: 68px;
height: 25px;
border: 1px solid red;
}
Example here.
Related
This question already has answers here:
Align 2 DIV per line, both the with the same height
(4 answers)
Closed 4 years ago.
I am having a few issues getting 3 divs to align in a web page. Basically, I have 3 divs along side each other in a 'main' div. I want to set a minimum height on all 3 of the child divs, but have them expand to match the height of the largest of the 3. The crude image below shows the issue.
EDIT - To clarify, I am trying to get the 'Blue' and 'Red' sections (sideMenu, rightMenu and contentDiv) to expand automatically to reach the footer. As it stands now, the central div expands and leaves white space beneath the left and right 'Blue' sections.
My html looks like this -
<div class="mainDiv">
<div class="sideMenu">
<div class="vertical-menu">
<a id="uxLink_1" runat="server" href="1.aspx">1</a>
</div>
</div>
<div class="rightMenu" id="uxRightMenu">
<img alt="" src="" border="0" id="uxRightImage" runat="server"></img>
</div>
<div class="contentDiv">
<asp:ContentPlaceHolder ID="uxContentPH" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="footerBanner" id="uxFootBanner">
<center>
<img alt="" src="" border="0" id="uxFooterImage" runat="server" class="footerBannerImage"></img>
</center>
</div>
The CSS is as follows -
.mainDiv {
width: 98%;
min-width: 440px;
border: solid 5px black;
margin-top: -4px;
border-top: none;
overflow: auto;}
.contentDiv {
min-height: 700px;
height: auto;
font-size: 9.5pt;}
.sideMenu {
height: 100%;
min-height: 700px;
width: 150px;
float:left;
background-color: black;
border-right: solid 5px black;}
.rightMenu {
height: 100%;
min-height: 700px;
width: 115px;
float: right;
background-color: black;
border-right: solid 5px black;
padding-left: 5px;}
.footerBanner {
display: none;
width: 98%;
float:none;
background-color: black;
border: solid 5px black;
border-top: none;
min-width: 440px;
padding-top: 3px;}
.footerBannerImage {
width: 98%;
height: auto;
min-width: 440px;
max-width: 728px;
max-height: 90px;
min-height: 54px;}
.vertical-menu {
width: 150px;}
.vertical-menu a {
background-color: black;
color: white;
display: block;
padding: 12px;
text-decoration: none;}
.vertical-menu a:hover {
background-color: #37353d; }
.vertical-menu a.active {
background-color: #438210;
color: white;}
You should use % instead of px units for your child div tags.
It means if you add width: 50%; its width will be half of its parent element width.
So if you want to create something like that picture you should give width: 30%; to your side elements and width: 40%; to you bigger (center) element.
That should work fine. Also, delete every min-width & max-width property that you add to your child elements.
You can achive it with flexbox as well.
I've focussed in the layout only and I've ommited some of your markup:
.container {
display:flex;
flex-direction:column;
height:200px;
}
.container a{
color:#fff;
}
.mainDiv {
display:flex;
flex-grow:1;
justify-content:space-between;
}
.contentDiv {
flex-grow:1;
background:#f00;
}
.sideMenu {
display:flex;
flex-direction:column;
flex-basis:15%;
align-itens:start;
background-color: #00f;
}
.footerBanner {
background-color: #000;
height:20%;
}
<div class="container">
<div class="mainDiv">
<div class="sideMenu">
1
</div>
<div class="contentDiv">
</div>
<div class="sideMenu">
2</img>
</div>
</div>
<div class="footerBanner">
3
</div>
</div>
This is a helper tool for creating flexbox layouts quickly.
Is there a possibility for the div (#contentwrapper) to take all the remaining width while floating side by side for the next example:
#maincontainer {
width:1000px;
height: 100%;
display:inline-block;
}
#leftcolumn {
float:left;
width: 100px;
height:20px;
background: blue;
}
#contentwrapper {
float:right;
width:900px;
height: 20px;
background-color: red;
}
<div id="maincontainer">
<div id="leftcolumn"></div>
<div id="contentwrapper"></div>
</div>
JsFiddle
Try using flexbox. It is better than using tables. Make sure to include the vendor prefixes in it.
https://jsfiddle.net/qa6cds9c/
<div id="maincontainer">
<div id="leftcolumn"></div>
<div id="contentwrapper"></div>
</div>
#maincontainer {
border: 1px solid red;
display: flex;
}
#leftcolumn {
border: 1px solid blue;
height: 400px;
width: 100px;
}
#contentwrapper {
border: 1px solid green;
height: 400px;
flex: 1;
}
It's really simple. Using good ol' CSS:
float-left only the left element
add margin-left to the right column to compensate the left's one width:
#leftcolumn {
float:left;
width: 100px;
background: blue;
}
#contentwrapper {
margin-left: 100px; /* same as #leftcolumn width */
background: red;
}
<div id="maincontainer">
<div id="leftcolumn">left</div>
<div id="contentwrapper">right<br>contentwrapper</div>
</div>
You could use a table instead of The divs. Or make the divs behave as a table using CSS.
When you have two table cells in a row and set the width for one then the other will fill the remaining space.
Not sure if this is considered best practice though.
I am trying to create 3 column home layout, in which center, left and right looks fine, but I am unable to create 2 slider division inside div class middle, I actually expect slider1 should come on top, but should be inside the class middle, and slider2 after slider1 inside class middle.
As you can see here JSFIDDLE , slider2 and slider1 is not coming inside div class middle
This is my effort
HTML
<div id="content-container">
<div class="middle">
<div class="slider1"></div>
<div class="slider2"></div>
</div>
<div class="left">
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
</div>
</div>
CSS
/* Container */
#content-container{
background:white;
margin-top:10px;
margin-bottom:10px;
height:600px;
}
/* follow container height*/
.left,.right,.middle{
height:100%;
}
.left{
float: left;
width: 23%;
border:1px solid red;
}
.right{
float: right;
width: 23%;
border:1px solid red;
}
.middle{
display: inline-block;
width: 53%;
border:1px solid red;
}
/* Sliders */
.slider1 {
height: 50px;
border:1px solid green;
}
.slider2 {
height:60px;
border:1px solid green;
}
Thank you
something like this? added float: left; to slider1 also you miss spelled slider1 in css
.slider1 {
height: 50px;
border:1px solid blue;
overflow: hidden;
float: left;
background: blue;
}
http://jsfiddle.net/fa308n2b/
check your class name
.slder1 {
height: 50px;
border:1px solid green;
}
.slder1 It should be .slider1
I have 3 divs inside a main div as marked up in the HTML /CSS code below, when the page renders, the second div is twice as large as the first and last. When the page renders, because the second div is twice the size of the first and last, this causes the last div to display below the second, leaving a gap inbetween. What I want is that the third div occupies that gap that:
<html>
<head>
<title>Liquid Divs</title>
<style>
#splash {
width: 600px;
margin: 1px;
border: solid 1px #ccc;
}
.box {
width: 196px;
height: 196px;
margin: 1px;
border: solid 1px #ccc;
float: left;
}
.box2 {
width: 392px;
height: 392px;
margin: 1px;
border: solid 1px #ccc;
float: left;
}
.clear-fix {
clear: both;
}
</style>
</head>
<body>
<div id="splash">
<div class="box">
</div>
<div class="box2">
</div>
<div class="box">
</div>
<div class="clear-fix">
</div>
</div>
</body>
</html>
Can this be done with CSS or does anyone know a method to accomplish this with javascript? It will be helpful to figure this out.
Switch up your box2 to float right
.box2 {
width: 392px;
height: 392px;
margin: 1px;
border: solid 1px #ccc;
float: right;
}
Tested and it works placing the 3rd box beneath the first
if you plan on including more elements in #splash you are after the jQuery plugin masonry
here is a soltion demo for the extension problem
http://jsfiddle.net/kxMYS/
$( function() {
$('#splash').masonry({
itemSelector: 'div'
});
});
however
if you only want a solution to you're exact given problem
just change your css for .box2 to float:left;
http://jsfiddle.net/kxMYS/1/
Wrap 1st and 3rd boxes in left-container and the big box in right-container
Try this instead: http://jsfiddle.net/wcQ3L/1/
<html>
<head>
<title>Liquid Divs</title>
<style>
#splash {
width: 600px;
margin: 1px;
border: solid 1px #ccc;
}
#left-container{
float: left;
}
.box {
width: 196px;
height: 196px;
margin: 1px;
border: solid 1px #ccc;
}
.box2 {
width: 392px;
height: 392px;
margin: 1px;
border: solid 1px #ccc;
float: left;
}
.clear-fix {
clear: both;
}
</style>
</head>
<body>
<div id="splash">
<div id="left-container">
<div class="box">
</div>
<div class="box">
</div>
</div>
<div id="right-container">
<div class="box2">
</div>
</div>
<div class="clear-fix">
</div>
</div>
</body>
</html>
I'd like to have a [Fixed][Liquid][Fixed] cross-browser compatible layout.
HTML:
body
div#col-1
div#col-2
div#col-3
CSS:
#col-1 {
width:150px;
float:left;
}
#col-2 {
width:100%;
padding:0 150x;
}
#col-3 {
positon:absolute:
right:0;
width:150px;
}
Would this work/better way to do it?
This is pretty simple.
here is the code
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>
I'm using floats instead of position absolute. The advantage of using floats above absolute positioning is that you can put a nother div beneath it, lets say the footer. And just give it a clear: both and it will automatically display at the bottom of the page.
here is an example with a footer
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
#footer {
clear: both;
margin-top: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>
Voila! You've got your liquid layout.
check this out:
http://siteroller.net/articles/3-column-no-tables-no-floats
But no,I don't think that would work. There are plenty of links in said article though to address your issue.
And if there is any interest, I will extend what is written there.
Okay, got it: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
I like Robert's answer. I would also add a wrapper around the left, right, center and footer. Here, I set the id to "page":
<body>
<div id="page">
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</div>
</body>
Then, you can also add the style for the "page":
#page {
min-width: 600px;
}
This way, if the user shrinks their browser down to a very small size, the content still looks good.