CSS

Question

I am working on a few projects to improve my HTML and CSS. One of which is a simple Sudoku solver. I need to create a Grid in which to put either Labels or TextBoxes. I want a grid layout exactly like the Grid image in this question.

What's the best way of achieving this? CSS... or tables? And how would I go about creating this?

Sampson · Accepted Answer

If it's tabular data, you can use a table. If you want to stick with DIV's, you can do that easily by setting specific width/height values for each parent cube, and the child cubs, and simply floating them left/right. Just be sure to use the clear fix to keep the content from flowing past their sibling tags if you decide NOT to use explicit width/height values.

#sudoku {
  width:297px;
  height:297px;
}
  .parentCube {
    width:99px;
    height:99px;
    float:left;
  }
    .childCube {
      width:33px;
      height:33px;
      float:left;
    }

<div id="sudoku">
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
</div>

merkuro · Answer

Wow Jonathan Sampson was FAST and deserves the credit! Here is my approach:

 <?xml version='1.0' encoding='UTF-8'?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
        <head>      
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
            <title>Sudoku</title>

        <style type="text/css">
          #playfield{
            width:920px;
            height:920px;
          }
          #playfield div{
            width:300px;
            height:300px;
            float:left;
            border:1px solid #ff8a00;
          }
          #playfield span{
            font-size:300%;
            width:98px;
            height:98px;
            float:left; 
            display:block;
            border:1px solid white;
            text-align:center;  
            line-height:99px;
            background-color:#f2f2f2;      
          }
          #playfield span:hover{
            background-color:#0d2f5a;
            color:white; 
          }
        </style>          
        </head>

        <body>
          <div id="playfield">
            <div>
            <span id="position_1">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            </div>
            <div>
              <span>...</span>
            </div>
          </div>
        </body>
    </html>

CSS - What's the best way of creating a 9x9 Sudoku grid?

Tags:

html

asp.net

djdd87

2 Answers

Sampson

merkuro

Recent Activity

Donate For Us