CSS positioning help

bigbada · 03-07-2013, 08:04 AM

Hello, i have some problems in css that i cant figure it out. Here is my code:

Code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
#wrapper{  
   width:420px;  
   border: solid black 1px;
   margin:0 auto;  
   text-align:center;  
} 

div#izbira {
    position: relative;
    height: 62px; width: 450px;
    border: solid black 1px;
    margin: auto;
}
div#izbira div {
	clear: both;
    position: absolute; 
    height: 20px; width: 20px;
    border: solid black 1px;
    margin: auto;
}
div#theChoice {
	clear: both;
    position: relative;
    height: 50px; width: 400px;
    border: solid black 1px;
}

</style>
</head>
<body>
<div id="wrapper">
TEST
<br/><br/>
<div id="izbira">
    <div style="background-color: #000;"></div>
	<div style="background-color: #111;"></div>
	<div style="background-color: #222;"></div>
	<div style="background-color: #333;"></div>
    <div style="background-color: #444;"></div>
	<div style="background-color: #555;"></div>
    <div style="background-color: #666;"></div>
	<div style="background-color: #777;"></div>
    <div style="background-color: #888;"></div>
	<div style="background-color: #999;"></div>
    <div style="background-color: #AAA;"></div>
	<div style="background-color: #BBB;"></div>
    <div style="background-color: #CCC;"></div>
	<div style="background-color: #DDD;"></div>
    <div style="background-color: #EEE;"></div>
    <div style="background-color: #FFF;"></div>
</div>
<br/><br/>
<button type="button" onclick="napolniPolje();">Napolni!</button>
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
Moja barva:
<div id="theChoice"></div>



<script type="text/javascript">
(
  function( )
  {
      var divs = document.getElementById("izbira").getElementsByTagName("div");
      for ( var d = 0; d < divs.length; ++d )
      {
          var div = divs[d];
          div.style.left = ( d * 55 ) + "px";
          div.onclick = pickThis;
      }
      divs[divs.length-1].style.borderColor = "red";

      function pickThis( )
      {
          document.getElementById("theChoice").style.backgroundColor =
              this.style.backgroundColor;
          for ( var d = 0; d < divs.length; ++d )
          {
              divs[d].style.borderColor = "black";
          }
          this.style.borderColor = "red";
      }
	  
	  document.write('<center><table width="30" border="1">');

		//loop for rows
		for (j=1;j<=16;j++)
		{
			document.write('<tr>');
		//loop for columns
		for (i=1;i<=16;i++)
		{
			document.write('<td id="celica_'+i+'_'+j+'" onclick="izbira(this)">' +i+ '</td>'); 
		}
			document.write('</tr>');
		}
			document.write('</table border></center>'); 
		}	  
		)();

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

.js

Code:

function izbira(celica)
{
	celica.style.backgroundColor = document.getElementById("theChoice").style.backgroundColor;
}

function napolniPolje()
{
	barva = document.getElementById("theChoice").style.backgroundColor
	for(i=1;i<=16;i++)
	{
		for(j=1;j<=16;j++)
		{
			celica = document.getElementById("celica_"+i+"_"+j);
			if(celica.style.backgroundColor != "")
				celica.style.backgroundColor = barva;
		}
	}
}

How to make the cells in the table the same size in width and height? And how can you make the tabe without the numbers i used.. If u delete +i+ from document.write('<td id="celica_'+i+'_'+j+'" onclick="izbira(this)">' +i+ '</td>'); the table doesnt show.. I dont want numbers in the table, i want it empty.

coothead · 03-07-2013, 09:33 AM

Hi there bigbada,

check out the attachment, it may suit your requirements.

coothead

coothead · 03-07-2013, 09:53 AM

Hi there

In the attachment that I sent you, I had forgotten to finalize the CSS file.

This...

Code:


#izbira {position:relative;
    padding:20px 1px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    margin-bottom:20px;
    overflow:hidden;
 }

...should be changed to this...

Code:


#izbira {
    padding:20px 2px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    margin-bottom:20px;
    overflow:hidden;
 }

coothead

ashishsaini7433 · 03-07-2013, 12:12 PM

hi i have used wordpress on my site free android apps...but i want to make it look attractive..so what where should i insert css coding??