SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Sudoku grid

  1. #1
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sudoku grid

    I want to make a sudoku grid in css. I have tried this but it does not work.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html lang="Eng" xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <style type='text/css'>
    #colleft{width:260px; height:260px;float:left; no-repeat top left;border-color: #000000 black black;border-style: solid; }
    #box{width:28px;height:28; border-color: #000000 black black;border-style: solid; }
    </style>
    </head>

    <body>
    <div id="colleft" class="colleft">
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box">3</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <br>

    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box">3</div>
    <br>

    <div class="box">5</div>
    <div class="box">8</div>
    <div class="box">7</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">4</div>
    <div class="box">3</div>
    <br>

    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box">3</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <br>

    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box">3</div>
    <br>

    <div class="box">5</div>
    <div class="box">8</div>
    <div class="box">7</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">4</div>
    <div class="box">3</div>
    <br>


    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box">3</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <br>

    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box">3</div>
    <br>

    <div class="box">5</div>
    <div class="box">8</div>
    <div class="box">7</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">4</div>
    <div class="box">3</div>
    <br>

    </div>
    </body></html>

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This webpage contains the type of layout that I want - this is in tables though

    http://www.e-sudoku.fr/en/impression.php

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I would really advice against using px sizes. howver this might do:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="Eng" xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <style type='text/css'>
    #colleft{width:279px; height:279px;float:left;  border:3px  #000 solid;  }
    .box{width:31px;height:31px; float:left ;text-align: center; vertical-align: middle; position: relative}
    .box+.box{width:30px;  border-left: #000 1px solid; float:left;}
    .newline + div.box{  border-left: none;width:31px  }
    .newline ~ div {  border-top: 1px solid #000; height:30px}
    .box:after {content:""; vertical-align: middle; height:100%; display: inline-block;}
    </style>
    </head>
    
    <body>
    <div id="colleft" >
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box">3</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box newline">6</div>
    
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box newline">3</div>
    
    <div class="box">5</div>
    <div class="box">8</div>
    <div class="box">7</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">4</div>
    <div class="box newline">3</div>
    
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box">3</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box newline">6</div>
    
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box newline">3</div>
    
    <div class="box">5</div>
    <div class="box">8</div>
    <div class="box">7</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">4</div>
    <div class="box newline">3</div>
    
    
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box">3</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box newline">6</div>
    
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box newline">3</div>
    
    <div class="box">5</div>
    <div class="box">8</div>
    <div class="box">7</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">4</div>
    <div class="box newline">3</div>
    
    </div>
    </body></html>
    Alternatively: you could also wrap a DIV arown each row and use the display:table/table-row/table-cell property. Same amount of mark up is involved as using tables, so the question is... it this, semantically, what you are representing?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="Eng" xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <style type='text/css'>
    #colleft{width:279px; height:279px;float:left;  display:table; border-collapse:collapse; border:3px solid #000}
    .box{display:table-cell; text-align: center; vertical-align: middle; border: 1px solid #000}
    .row {display:table-row; width:100%; background: red}
    </style>
    </head>
    
    <body>
    <div id="colleft" >
    <div class="row">
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box">3</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box ">6</div>
    
    <!--row--></div>
    <div class="row">
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box ">3</div>
    
    <!--row--></div>
    <div class="row">
    <div class="box">5</div>
    <div class="box">8</div>
    <div class="box">7</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">4</div>
    <div class="box ">3</div>
    
    <!--row--></div>
    <div class="row">
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box">3</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box ">6</div>
    
    <!--row--></div>
    <div class="row">
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box ">3</div>
    
    <!--row--></div>
    <div class="row">
    <div class="box">5</div>
    <div class="box">8</div>
    <div class="box">7</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">4</div>
    <div class="box ">3</div>
    
    <!--row--></div>
    
    <div class="row">
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box">3</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box ">6</div>
    
    <!--row--></div>
    <div class="row">
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">8</div>
    <div class="box">5</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">4</div>
    <div class="box ">3</div>
    
    <!--row--></div>
    <div class="row">
    <div class="box">5</div>
    <div class="box">8</div>
    <div class="box">7</div>
    <div class="box">9</div>
    <div class="box">6</div>
    <div class="box">2</div>
    <div class="box">1</div>
    <div class="box">4</div>
    <div class="box ">3</div>
    
    <!--row--></div>
    </div>
    </body></html>
    hope that helps

  4. #4
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,268
    Mentioned
    116 Post(s)
    Tagged
    1 Thread(s)
    Not to be pedantic, but why not just use tables for this purpose? It's a perfectly valid use of a table, since you're creating a grid of numbers.

    But if you're determined to do it this way, then there's an easier way to style this:

    Code ASP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
    <html lang="Eng" xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
    <head>
    <style type='text/css'>
    div { margin: 0; border: 1px solid black; float:left; }
    div div { width: 28px; height: 28px; text-align: center;  padding: .25em 0}
    .other { background-color: grey; }
    .clear { clear: both; } 
    </style>
    </head>
    <body>
    <div>
     <div>7</div>
     <div>4</div>
     <div>3</div>
     <div class="clear">2</div>
     <div>1</div>
     <div>8</div>
     <div class="clear">5</div>
     <div>9</div>
     <div>6</div>
    </div>
    <div class="other">
     <div>2</div>
     <div>1</div>
     <div>8</div>
     <div class="clear">5</div>
     <div>9</div>
     <div>6</div>
     <div class="clear">7</div>
     <div>4</div>
     <div>3</div>
    </div>
    <div>
     <div>5</div>
     <div>8</div>
     <div>7</div>
     <div class="clear">9</div>
     <div>6</div>
     <div>2</div>
     <div class="clear">1</div>
     <div>4</div>
     <div>3</div>
    </div>
    <div class="other clear">
     <div>7</div>
     <div>4</div>
     <div>3</div>
     <div class="clear">2</div>
     <div>1</div>
     <div>8</div>
     <div class="clear">5</div>
     <div>9</div>
     <div>6</div>
    </div>
    <div>
     <div>2</div>
     <div>1</div>
     <div>8</div>
     <div class="clear">5</div>
     <div>9</div>
     <div>6</div>
     <div class="clear">7</div>
     <div>4</div>
     <div>3</div>
    </div>
    <div class="other">
     <div>5</div>
     <div>8</div>
     <div>7</div>
     <div class="clear">9</div>
     <div>6</div>
     <div>2</div>
     <div class="clear">1</div>
     <div>4</div>
     <div>3</div>
    </div>
    <div class="clear">
     <div>7</div>
     <div>4</div>
     <div>3</div>
     <div class="clear">2</div>
     <div>1</div>
     <div>8</div>
     <div class="clear">5</div>
     <div>9</div>
     <div>6</div>
    </div>
    <div class="other">
     <div>2</div>
     <div>1</div>
     <div>8</div>
     <div class="clear">5</div>
     <div>9</div>
     <div>6</div>
     <div class="clear">7</div>
     <div>4</div>
     <div>3</div>
    </div>
    <div>
     <div>5</div>
     <div>8</div>
     <div>7</div>
     <div class="clear">9</div>
     <div>6</div>
     <div>2</div>
     <div class="clear">1</div>
     <div>4</div>
     <div>3</div>
    </div>
    <br class="clear" />
    </body>
    </html>
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,630
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DaveMaxwell View Post
    Not to be pedantic, but why not just use tables for this purpose? It's a perfectly valid use of a table, since you're creating a grid of numbers.

    But if you're determined to do it this way, then there's an easier way to style this:

    Code ASP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
    <html lang="Eng" xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
    <head>
    <style type='text/css'>
    div { margin: 0; border: 1px solid black; float:left; }
    div div { width: 28px; height: 28px; text-align: center;  padding: .25em 0}
    .other { background-color: grey; }
    .clear { clear: both; } 
    </style>
    </head>
    <body>
    <div>
     <div>7</div>
     <div>4</div>
     <div>3</div>
     <div class="clear">2</div>
     <div>1</div>
     <div>8</div>
     <div class="clear">5</div>
     <div>9</div>
     <div>6</div>
    </div>
    <div class="other">
     <div>2</div>
     <div>1</div>
     <div>8</div>
     <div class="clear">5</div>
     <div>9</div>
     <div>6</div>
     <div class="clear">7</div>
     <div>4</div>
     <div>3</div>
    </div>
    <div>
     <div>5</div>
     <div>8</div>
     <div>7</div>
     <div class="clear">9</div>
     <div>6</div>
     <div>2</div>
     <div class="clear">1</div>
     <div>4</div>
     <div>3</div>
    </div>
    <div class="other clear">
     <div>7</div>
     <div>4</div>
     <div>3</div>
     <div class="clear">2</div>
     <div>1</div>
     <div>8</div>
     <div class="clear">5</div>
     <div>9</div>
     <div>6</div>
    </div>
    <div>
     <div>2</div>
     <div>1</div>
     <div>8</div>
     <div class="clear">5</div>
     <div>9</div>
     <div>6</div>
     <div class="clear">7</div>
     <div>4</div>
     <div>3</div>
    </div>
    <div class="other">
     <div>5</div>
     <div>8</div>
     <div>7</div>
     <div class="clear">9</div>
     <div>6</div>
     <div>2</div>
     <div class="clear">1</div>
     <div>4</div>
     <div>3</div>
    </div>
    <div class="clear">
     <div>7</div>
     <div>4</div>
     <div>3</div>
     <div class="clear">2</div>
     <div>1</div>
     <div>8</div>
     <div class="clear">5</div>
     <div>9</div>
     <div>6</div>
    </div>
    <div class="other">
     <div>2</div>
     <div>1</div>
     <div>8</div>
     <div class="clear">5</div>
     <div>9</div>
     <div>6</div>
     <div class="clear">7</div>
     <div>4</div>
     <div>3</div>
    </div>
    <div>
     <div>5</div>
     <div>8</div>
     <div>7</div>
     <div class="clear">9</div>
     <div>6</div>
     <div>2</div>
     <div class="clear">1</div>
     <div>4</div>
     <div>3</div>
    </div>
    <br class="clear" />
    </body>
    </html>
    Off Topic:


    I just contracted a case of divitis.

    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dave Maxwell and dresden_phoenix. Thats given me just what I need


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •