Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    CSS positioning help

    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.
    Last edited by bigbada; 03-07-2013 at 09:12 AM. Reason: CSS table

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there bigbada,

    check out the attachment, it may suit your requirements.

    coothead
    Attached Files Attached Files

  • Users who have thanked coothead for this post:

    bigbada (03-07-2013)

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    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

  • Users who have thanked coothead for this post:

    bigbada (03-07-2013)

  • #4
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to use css when i am using wordpress?

    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??


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •