Jump to content

Search the Community

Showing results for tags 'grid'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 3 results

  1. Trying to Create Image Grid w/ Hover

    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?
  2. 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
  3. 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; }
×