Jump to content

Search the Community

Showing results for tags 'grid'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH


  • Community Calendar

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 6 results

  1. Hello to all, can somebody tell me the right common way how to center a Grid itself within the viewport? I've figured out 2 methods, but somehow both don't seem to me to be best practice. The first one is using an empty first and last column like: grid-template-areas: ". title navigation ."; When using grid-gap this method has the problem that when you resize the viewport to min-width the design gets a glitch cause the left gap will still be visible while on the right side the content starts to disappear. The code for the upper example for testing: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="grid-container"> <div class="title">1 Title</div> <div class="navigation">2 Navigation</div> <div class="header">3 Header</div> <div class="main">4 Main Article <br />....<br />....</div> </div> </body> /* style.css */ @charset "utf-8"; * { margin: 0; padding: 0; } .grid-container { display: grid; grid-template-columns: minmax(360px, 100vw); grid-template-rows: 30px 60px 30px auto; grid-template-areas: "title" "navigation" "header" "main"; grid-row-gap: 5px; } @media screen and (min-width: 736px) { .grid-container { display: grid; grid-template-rows: 30px 60px auto; grid-template-columns: 1fr 500px 226px 1fr; grid-template-areas: ". title navigation ." ". header header ." ". main main ."; grid-gap: 10px; } } .grid-container > div { background-color: #999; } .title { grid-area: title; } .navigation { grid-area: navigation; } .header { grid-area: header; } .main { grid-area: main; } The second way i found out would be using another Grip to center the main-Grip. Therefore I make the "body" itself a Grid and set the property "justify-content: center;" to it. The CSS code for the second expample (HTML remains the same): /* style.css */ @charset "utf-8"; * { margin: 0; padding: 0; } body { display: grid; justify-content: center; } .grid-container { display: grid; grid-template-columns: minmax(360px, 100vw); grid-template-rows: 30px 60px 30px auto; grid-template-areas: "title" "navigation" "header" "main"; grid-row-gap: 5px; } @media screen and (min-width: 736px) { .grid-container { display: grid; grid-template-rows: 30px 60px auto; grid-template-columns: 500px 226px; grid-template-areas: "title navigation" "header header" "main main"; grid-gap: 10px; } } .grid-container > div { background-color: #999; } .title { grid-area: title; } .navigation { grid-area: navigation; } .header { grid-area: header; } .main { grid-area: main; } I can't imagine there's no better solution to center a Grid. In the good old times you could center a DIV with "margin: 0 auto;", but adding this property to a Grind doesn't seem to do the magic I want. I would be very happy if someone could find a better solution. Many thanks in advance, Slevin
  2. Hello, I don't undesrtand grid-gap syntax(with two values) on w3schools. From example on w3schools, grid-gap(50px 100px), it says that first value represents grid-column-gap and the second grid-row-gap? When I run result in a browser, row-gap is 50px and column-gap is 100px? Shouldn't be otherwise?
  3. Can please anyone help me ? This is my Media Queries for Tablets ; @media (min-width: 37em) { body { display: grid; grid-template-columns: 10% 72% 17%; grid-template-areas: "header header header" "nav nav nav" "linkBox main main" "footer footer footer"; } and this my Media Queries for Desktops; @media (min-width: 80em) { body { display: grid; grid-template-columns: 10% 72% 17%; grid-gap: 5px; grid-template-areas: "header header header" "nav nav nav" "linkBox main infoBox" "footer footer footer"; } } My Computer has a Resolution from 1280 x 1024 . When change on @media (min-width: 37em) , on the Line "linkBox main infoBox" to “linkBox main main" , too to change the column from my Desktop...🙁 Why change it when i will only to change on Tablets ? Can please anyone help me , Thank !
  4. The page in question is Here I'm going to have a dozen or so images that I want lined up grid-style. They'll all be sized the same. But, I also want to have the hover overlay that's currently there. CSS is currently: <!-- THUMBNAIL --> <style> .container { position: relative; width: 50% } .image { display: block; margin: 3px; width: 50%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 3px; right: 0; height: 100%; width: 50%; opacity: 0; transition: .5s ease; background-color: #000000; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } </style> HTML for each image is: <div class="container"> <a href="../images/thankyounotes/football_equipment.jpg" data-lightbox="kidswehelp" data-title=""><img id="football" src="../images/thankyounotes/football_equipment.jpg" class="image"></a> <div class="overlay"> <div class="text">Testing This</div> </div> </div> Thoughts?
  5. I want to do a chess program that record the move and make sure no check was forgotten (it recently happened and we had to restart the game ). I think ECMAScript would be a good option. Each pieces would be assigned its color and type and when moved verify if an attack pattern arrived to the opposite color king. Instead of making function for all of this, I wonder if there would be some grid library or perhaps simply bitmaps that could do the trick.There would be a group A with 3 grids, past pieces positions for each color and new positions, right away the display would show the new positions; then there would group B with the grids for each move, like + for rook and × for bishop.Then the grid for the new move would be put on top of its opposing color past positions then going from its center would check if it reaches/touches something, either the border or a non-king piece and if so stop verifying further that path ; but if the king is reached, right away it the display would highlight the king and stop the verification process. Along with the missed check eye-candy/visuals, there would an alert asking to revert the previous move, and if yes the corresponding grids would be replaced then the highlight dropped.So... do I need to do all of this programmatically, or are there grid function with verification from its center? By programmatically I mean for knight go from new move position 2 positions up then right, is it outside the board limits then is it a king then 2 positions left, etc. By grid function I mean for the same move to be fed for knight possible attacks along with the new position of the knight along the grid of the opposite positions along with a filter options so it only consider kings (although there should only be 1), so it will start from the "x" and check for what's under all the "O"s ; implying its placed over the filtered kings from the opposite positions. Although for the sliding pieces after finding a king, the non-king would then be replaced to see if there was another piece (non-king) between it (king) and the center ("x"). One can also think of those punch-cards test verifiers or teachers use to assign score on an exam. Although in this case its more like students had to use a different color for a single answer and the verifier was--mainly--looking for that color ; I was going to put only instead of mainly but although only would be the case of pieces that doesn't slide from its center, like pawns & knights, for pieces that slide, like queens & rooks, the sliding would stop as soon as a non-king piece would be reached (and the board limit of course) ; so even if the different color (king) was in the punched-through overlay (piece attacks for the moved piece), if the regular color (non-king) was between it and the overlay center, the search wouldn't be successful, actually it could save processing by returning a fail right away (instead of continuing the search).I hope I'm being clear but please let me know which section need clarification (please be precise) and I'll be glad to oblige. Please consider the title. :)Thank you kindly for your help
  6. darbok

    grid and me

    So I've finally come to a light bulb moment on tying html and css together, I have a basic understanding of grid but I feel like most of the info on grid on youtube is out of date as none of it really lets me do what I want. what I want to do is put two pictures side by side, I've even achieved that to a degree. I've used griddle-it to try to make it easier, it has, put the background column image on my page... 12 columns centered on the page. The problem i'm running into is that I can't seem to make the images so that there is a column before the first image, the first image is butting up against the boarder of the grid and i cant seem to get the 2nd image to move close to the other side of the grid. I've tried using prefix and suffix and alpha/ omega but it's not doing anything for this issue. So thats the 3 files I'm using other then reset.css. Also when I put in container_12 everything shifts to the left I think mostly what I'd like to know is where can I get reliably up to date info on grid so i can do page layout. I feel once i get page layout worked out I'll be in a good place. I'd like to be able to make nice webpages without having to use wordpress, not that wordpress is bad, I'd just like to be good at doing it this way. Thanks ahead of time. Index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Camping</title> /*<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">*/ <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/campinggrid.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/background.css" type="text/css" media="screen"> </head> <body style="color: rgb(0, 0, 0); background-color: rgb(50, 211, 95);" alink="#000099" link="#000099" vlink="#990099"> <div class="container"> <div class="grid_12"> <h1 style="text-align: center; color: white;"><big>Welcome to Helpful Hints for Camping</big></h1> </div> <div id="camping" class="grid_5 prefix_1"> <p> Camping is a very fun and exciting way to pass the time.<br> It's a way to see the beauty of our country or any other for that matter. Camping has many benefits to our health and our peace of mind. On this page I attempt to give some tips and tricks for new campers and maybe even experiences ones.</p> <img src="img/hiking.jpg" alt="Camping is fun"> </div> <div id="campingincanada" class="grid_5 prefix_1"> <h2>Camping in Canada</h2> <p>Camping in canada is alot of fun even if it is a bit cold,<br> but that's alright, just bring a jacket</p> <img src="img/couple-camping.jpg" alt="canadain camping"> </div> </div> </body> </html> GRID.CSS /* Width: 1000px # Columns : 12 Column width:247px Gutter : 4px */ .grid_1 { width: 65px; } .grid_2 { width: 150px; } .grid_3 { width: 235px; } .grid_4 { width: 320px; } .grid_5 { width: 405px; } .grid_6 { width: 490px; } .grid_7 { width: 575px; } .grid_8 { width: 660px; } .grid_9 { width: 745px; } .grid_10 { width: 830px; } .grid_11 { width: 915px; } .grid_12 { width: 1000px; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { margin: 0px 0px 0px 0; float: left; display: block; } .alpha{margin-left:0px;} .omega{margin-right:0px;} .container{ width: 1000px; margin: auto; } .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1} BACKGROUND.CSS body { background: url(http://griddle.it/1000-12-20) repeat-y center top; } } #camping img { margin: 0 0 0px 0; } #campingincanada img { margin: 0 0 0px 0; }
  • Create New...