How to automatically fit a paragraph into a div box

How to automatically fit a paragraph into a div box - javascript

I'm using JQuery to prepend a <p> element into a div however if mainButtonText in the p element is too long, it will be outside of the div.
http://puu.sh/mvm7F/a99aba0b1e.jpg
I want it to look like this: http://puu.sh/mvmEy/c17db01e4a.jpg
Is it also possible to automatically resize the text font size?
html:
<div id="mainButton"></div>
css:
#mainButton {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100px;
height: 40px;
font-family: monospace;
font-size: 12px;
text-align: center;
line-height: 40px;
background: #808080;
color: #fff;
text-decoration: none;
border-radius: 10px;
box-shadow: inset 1px 1px 1px rgba(255,255,255,0.05), inset 0 0 35px rgba(0,0,0,0.6), 0 5px 5px -4px rgba(0,0,0,0.8);
}
#mainButton:hover {
background: #d3d3d3;
}
#mainButton:active {
top: 5px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.4), inset 0 0 35px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.1), inset 0 6px 4px rgba(0,0,0,0.4);
}
javascript:
function changeMainButton() {
'use strict';
$('#mainButton').empty();
$('#mainButton').prepend('<p>' + mainButtonText + '</p>');
}
Thanks for any help! :)

Maybe this could help:
#mainButton {
...
overflow: hidden;
}

You can make the text adjust to its container using
#mainButton {
word-wrap: break-word;
}
You can also resize the font size in relation to its parent element using javascript like http://simplefocus.com/flowtype/ or http://fittextjs.com/ but if you want to control it in granular use #media, em and rem

Related

How can I create the angle shown on the header with CSS?

I need to create a header that looks like the firs image, however, it can't be an image. Preferably just css, but open to jQuery if there is a way to do this with jQuery.
I have tried many different things, but cannot create the 45 degree angle on the header(just before Home). This is the closest I have gotten. The colors are wrong in this image but that is intentional so that I could better illustrate the issue.
This is part of my latest attempt make this work and I think I am close with it, but it still isn't right.
#header{
float:left;
margin-top:20px;
overflow: hidden;
padding-bottom: 10px;
background-color:#F1F1F1;
-moz-box-shadow: 3px 3px 5px 0px #ccc;
-webkit-box-shadow: 3px 3px 5px 0px #ccc;
box-shadow: 3px 3px 5px 0px #ccc;
width: 100%;
height:130px;
z-index: 1;
}
#secondHeader{
float:right;
background-color:#ffffff;
width:50%;
height: 80px;
position: relative;
margin-top: -50px;
margin-right:15px;
/* border-radius: 15px 15px 0px 20px; */
/* background-color:#ff0000; */
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
z-index: 10;
}
#secondHeader::before{
height: 80px;
width: 70px;
border-radius: 10px 10px 10px 10px;
background-color: #f1f1f1;
content: "";
position: absolute;
left: 32px;
top: 0px;
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
z-index: -1;
}
What am I doing wrong? I have worked on this for two days and cannot figure it out.

this is pretty close to what you need. Simply using borders to do this:
#menubar {
width: 40vw;
min-height: 100px;
background-color: rgba(0,0,0,0.1);
}
#menubar ul {
margin-left: 55px;
padding-top: 40px;
}
#angle {
position: absolute;
border-top: 102px solid rgba(0,0,0,0.1);
border-right: 52px solid transparent;
border-left: 0px solid transparent;
height: 0;
width: 2px;
}
#angle2 {
position: absolute;
border-top: 100px solid white;
border-right: 50px solid transparent;
border-left: 0px solid transparent;
height: 0;
width: 1px;
}
<div id="menubar"><div id="angle"></div><div id="angle2"></div><ul>Menu here</ul></div>

footer button in Android Browser

I am new to CSS and developing a simple template which will be showed inside an Android Browser. Basically my template only has two elements, an error message, and a button (should be placed at footer).
I have read a few posts at stackoverflow. People suggest to use
position:fixed;
bottom: 0;
to place an element at footer. However, when I added this my button css, it seems my button was just placed right below the error message instead of at the footer. Anyone has any ideas why?
.fulfill-application-button{
display: inline-block;
width: 100%;
zoom: 1;
margin: 0;
text-align: center;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 25px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
color: #555;
background-color: #ddd;
transition: background-color .2s ease-out;
background-clip: padding-box;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
0 2px 2px -1px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .3) inset;
text-shadow: 0 1px 0 rgba(255,255,255, .9);
}
.fulfill-application-button:hover{
background-color: #eee;
color: #555;
}
.fulfill-application-button:active{
background: #e9e9e9;
position: relative;
top: 1px;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.fulfill-application-button.color{
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.fulfill-application-button.ok{
position: relative;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
.fulfill-application-button.ok:hover{
background-color: #ee5f5b;
}
.fulfill-application-button.ok:active{
background: #c43c35;
}
html,body
{
padding: 15px;
height: 100%;
background-color: black;
}
div.error-message{
color: white;
line-height: 120%;
padding-top: 20%;
font-size:30px;
}
</style>
<body>
<div class ="error-message">
${error}
</div>
<button id="ok" type="button" class="color ok fulfill-application-button">
OK
</button>
</body>

Change position: relative; to position: fixed; from class .fulfill-application-button.ok
Code :
.fulfill-application-button.ok{
position: fixed;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
Note : You can give right and left for the same, if you want.

Box-Shadow over child elements?

I need to make my box-shadow appear like a border: If I have a parent with a inset boxshadow and I put a child div in it, the box shadow should go over the child div like shown here with borders:
jsFiddle: http://jsfiddle.net/7rRsw/2/
Is there anything like a z index for this problem, or a css hack?
Thanks
EDIT: I need to use box shadow inset + no borders or box seizings.
I am searching for hacks to make this possible only with box shadow. A possible hack would be to add box shadows left and right on the child div.

If you want a solution in which you don't need any extra markup, you can use the ":before" pseudo class selector: http://jsfiddle.net/7rRsw/8/
HTML
<div class="a"><div class="b">No extra markup needed</div></div>
CSS
.a {
width: 200px;
float: left;
height: 200px;
margin-right: 100px;
background-color: red;
position: relative;
}
.a:before {
content: '';
position: absolute;
left: 0;
right: 0;
width: 200px;
height: 200px;
box-shadow: inset 0px 0px 0px 2px black;
-webkit-box-shadow: inset 0px 0px 0px 2px black;
-moz-box-shadow: inset 0px 0px 0px 2px black;
}
.b {
width: 200px;
height: 100px;
background-color: yellow;
}

It is because your box shadow is inset. Meaning it will appear inside the box.
Whilst your nested div will cover it. Using a border applies to the outside of the "box".
Removing the inset from your CSS will cause the effect you are after.
See updated fiddle with inset remove. fiddle
box-shadow: 0px 0px 0px 2px black;
-webkit-box-shadow: 0px 0px 0px 2px black;
-moz-box-shadow: 0px 0px 0px 2px black;
UPDATE
To have just the inset box shadow visible, you could make the child div 4px pixels smaller in width than the parent. Then use margins to correctly position the div. However I'm not sure this completely achieves what you are after? See this fiddle.
.a{
width: 200px;
float: left;
height: 200px;
margin-right: 100px;
background-color: red;
box-shadow: inset 0px 0px 0px 2px black;
-webkit-box-shadow: inset 0px 0px 0px 2px black;
-moz-box-shadow: inset 0px 0px 0px 2px black;
}
.b {
width: 196px;
height: 100px;
background-color: yellow;
margin:2px auto 0 auto;
}
UPDATE 2
This "Hack" applies an overlay to the two elements with the box shadow. See fiddle.
HTML
<div class="a">
<div class="b">How it is (Yellow div covers the box shadow)</div>
<div class="shadow"> </div>
</div>
CSS
.a{
width: 200px;
float: left;
height: 200px;
margin-right: 100px;
background-color: red;
position:relative;
}
.b {
width: 200px;
height: 100px;
background-color: yellow;
}
.shadow {
box-shadow: inset 0px 0px 0px 2px black;
-webkit-box-shadow: inset 0px 0px 0px 2px black;
-moz-box-shadow: inset 0px 0px 0px 2px black;
position:absolute;
top:0;
width:200px;
height:200px;
}

One way is to not make your box-shadow inset so that it appears outside the box. But if you really want to use an inset box shadow, you can add a padding to the container element equal to the thickness of the shadow:
.a {
...
padding: 2px;
box-shadow: 0 0 0 2px #000000;
}

Add:
z-index: -1; /** less than the parent in general */
To the child element and it should work.

Give your main element position: relative, then create another div within that element that has:
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0px 0px 0px 2px black;
What this does is it creates an invisible div that goes over your content, then you apply your box-shadow to that div and it will lay on top of all the elements that were previously covering the shadow. It's like placing a sheet of glass with the shadow etched on to its edges over your element.

Changing CSS dynamically according to its inner elements

Just look at my code
http://jsfiddle.net/rkumarnirmal/GXAYa/6/
#box_bg is the outer gray box and #box is the inner black box. I used jquery accordion in the #box. What I need is #box_bg should dynamically enlarge or reduce its height according to the size of the inner #box.
Could anyone help me?
Thanks!

Don't specify an absolute height: just use height:auto. With a static position of #box and some padding for the frame the #box_bg will automatically resize to its content.
See http://jsfiddle.net/GXAYa/18/

I'm not sure why you need the position: absolute, so try this as an option and see if it resolves your problem:
#box_bg {
cursor: move;
background-color: #4f575e;
border-radius: 10px;
-moz-box-shadow: 3px 3px 5px 6px #00000;
-webkit-box-shadow: 0px 3px 5px 6px #00000;
box-shadow: 0px -3px 3px 1px #4f575e;
overflow: hidden;
width: 245px;
position: relative;
padding-bottom: 2em;
margin-left: 100px;
margin-top: 150px;
}
#box {
cursor: pointer;
background-color: #24272a;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
box-shadow: 0px 0px 3px 1px #4f575e;
width: 225px;
margin-top: 20px;
padding: 10px;
word-wrap: break-word;
}
JSFiddle here.

Change height:260px; to height:auto;.
UPD: Add position:relative to the #box

Editing 2D arrays to display a "map"

So, I'm doing a "map overlay" for a 2D array in Javascript, but it keeps coming out like this:
Have a Fiddle:
http://jsfiddle.net/HcRVW/6/
Note that the map is being rendered in some strange order.
Cheers in advance, I've been looking at it for ages now.
<html>
<head>
<title>tileEngine - Isometric</title>
<style type="text/css">
#mapoverlay {
position: absolute;
z-index: 888;
top: 70px;
color: lightgreen;
width: 420px;
height: 300px;
padding: 10px 5px 5px 5px;
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
background-color: #666;
z-index: 900;
-moz-text-shadow: 3px 3px 3px #000;
-webkit-text-shadow: 3px 3px 3px #000;
text-shadow: 3px 3px 3px #000;
-moz-box-shadow: 3px 3px 3px #000;
-webkit-box-shadow: 3px 3px 3px #000;
box-shadow: 3px 3px 3px #000;
}
.mN { width: 8px; height: 8px; display: inline-block; float: right; list-style-type: none; background-color: #fff; font-size: 1px; line-height: 1px; margin: 0px; padding: 0px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var map = Array( //land
[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
[2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2],
[2,2,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2],
[2,2,1,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,1,0,0,0,0,0,0,0,1,1,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,2],
[2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,1,1,1,1,0,1,1,1,1,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2],
[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2]
);
for(i=0;i<map.length;i++){
for(a=0;a<map[i].length;a++){
$('#mapoverlay').append('<li class="mN '+map[i][a]+'"> </li>');
}
}
$('.mN').each(function() {
if ($(this).hasClass('0')) {
$(this).css({'background-color':'green'})
} else if ($(this).hasClass('1')) {
$(this).css({'background-color':'blue'})
} else if ($(this).hasClass('2')) {
$(this).css({'background-color':'blue'})
} else {
$(this).css({'background-color':'green'})
}
});
});
</script>
</head>
<body align="center" style="text-align: center;">
<ul id="mapoverlay"></ul>
</body>
</html>

It's your css. See you have 57 items per array. That is 57x8=456px.
#mapoverlay {
position: absolute;
z-index: 888;
top: 70px;
color: lightgreen;
width: 456px;
border: 10px solid #666;
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
background-color: #666;
z-index: 900;
-moz-text-shadow: 3px 3px 3px #000;
-webkit-text-shadow: 3px 3px 3px #000;
text-shadow: 3px 3px 3px #000;
-moz-box-shadow: 3px 3px 3px #000;
-webkit-box-shadow: 3px 3px 3px #000;
box-shadow: 3px 3px 3px #000;
overflow: hidden;
}
.mN { width: 8px; height: 8px; display: block; float: left; list-style-type: none; background-color: #fff; font-size: 1px; line-height: 1px; margin: 0px; padding: 0px; }

Here you go: http://jsfiddle.net/HcRVW/9/
Removed the fancy CSS stuff and updated the width to hold same amount of items as each "inner" array length.
Also separated HTML, JS and CSS as jsFiddle supports it.

Heloo,
i saw the fiddle example and i think u have to decrease the array size
or increase overlay size.
because i tried to decrease the array size like this http://jsfiddle.net/HcRVW/10/

Two off-topic points (hence this being a CW answer):
0, 1, and 2 are invalid CSS classes. In CSS, a class name must not start with a digit.
Rather than calling Array as a function, recommend just using literal notation throughout as you have with the sub-arrays, e.g.:
var map = [
[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2, // ...
];

Have a look here. Seems they do the same, but transforming to 3D also:
http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/

We Keep Coding

JavaScript is the programming language of the Web.

How to automatically fit a paragraph into a div box - javascript

Maybe this could help: #mainButton { ... overflow: hidden; }

Related

How can I create the angle shown on the header with CSS?

footer button in Android Browser

Box-Shadow over child elements?

Changing CSS dynamically according to its inner elements

Editing 2D arrays to display a "map"

Categories

Resources