Jump to content

html/css layout question


BdR
 Share

Recommended Posts

I'm trying to make my first HTML5 game and it's going pretty well. The javascript coding is not a problem, but I'm new to the whole css stuff. I've looked at several examples and here is what I've got so far (bonus points if you know which game I'm making ;) )

 

http://jsfiddle.net/5Saxg/

 

I'm pretty close to my goal layout, except for points A and B, see image below:

2mxifl0.png

 

A: What is the best way to make the hintpegs on the right so they are shown on two rows instead of on one line? I mean, so they are shown like in the goal layout. I've tried using a <br/> in the html but then it jumps down too much. Also when there are 3 or 5 hintpegs, what's the best way to make it "jump in" a little? So it's more like a honeycomb pattern instead of a grid.

 

B: I want to add a indicator for when the player selects a color, which cycles through all the colors. It's like a small rectangle above the pegs at the bottom. What is the best way to accomplish this?

Link to comment
Share on other sites

Ugly solution for B:

.selectpeg:before{    background: white;    content: "";    width: 16px;    height: 6px;    position: absolute;    transform: translate(75%, -133%);    -webkit-transform: translate(75%, -133%);}

Runs in (the latest Versions of) Firefox, Chrome, Opera and Explorer. Just change the class for your needs :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...