Jump to content

Div Positioning


garyblackpool
 Share

Recommended Posts

Hi i am trying to create a div holder, but i cant make it cover the whole of the screen. I have several divs which are displayed by javascript in the center of the page in turn. Tell me where i am goiing wrong thanks.

div#holder{	background-color:black;	position:relatve;	}div.intro{background-color:black;font-size:100px;color:white;font-family:areal,helvetica,sans-serif;font-weight:bold;width:50%;position:fixed;left:25%;top:30%;}	div#one{visibility:visible;}div#two{visibility:hidden;}div#three{visibility:hidden;}div#four{visibility:hidden;}div#five{visibility:hidden;}div#six{visibility:hidden;}div#seven{visibility:hidden;}div#eight{visibility:hidden;}div#nine{visibility:hidden;}div#ten{visibility:hidden;}div#eleven{visibility:hidden;}div#twelve{visibility:hidden;}div#thirteen{visibility:hidden;}</style></head><body onload="initiate();"><div id="holder"> <div class="intro" id="one"> Touch It</div><div class="intro" id="two"> Bring It </div><div class="intro" id="three"> Baby! </div><div class="intro" id="four"> You  </div><div class="intro" id="five"> Know </div><div class="intro" id="six"> My Scripts </div><div class="intro" id="seven"> Amazing !!</div><div class="intro" id="eight"> Drop It </div><div class="intro" id="nine"> Make You </div><div class="intro" id="ten"> Crazy!!! </div><div class="intro" id="eleven"> Gazey</div><div class="intro" id="twelve"> BABY</div><div class="intro" id="thirteen"> CRAZY</div></div></body>

Link to comment
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/var one, two;var InnerDivTotal;var runthis;function initiate(){var a = document.getElementById("holder");var b = a.getElementsByTagName("div");InnerDivTotal = b.length;for(i=0;i<InnerDivTotal;i++){b.setAttribute('id','div'+(i+1));b.setAttribute('class','intro');b.setAttribute('className','intro');if(i>0){b.style.visibility="hidden";}}var div1 = setTimeout("runthis(1)",500);}var dothis;function runthis(divref){if(divref<InnerDivTotal){document.getElementById("div"+divref).style.visibility="hidden";document.getElementById("div"+(divref+1)).style.visibility="visible";dothis=setTimeout("runthis("+(divref+1)+")",500);}else{clearTimeout(dothis);}}/*--*//*]]>*/</script> <style type="text/css">body{background-color:black;height:100%;margin:0;}html{height:100%;}div.intro{font-size:100px;color:white;font-family:areal,helvetica,sans-serif;font-weight:bold;width:50%;position:absolute;left:25%;top:30%;}#holder{ height:100%; background-color:#FF9933; overflow:hidden;}</style></head><body onload="initiate();"><div id="holder"><div> Touch It</div><div> Bring It </div><div> Baby! </div><div> You </div><div> Know </div><div> My Scripts </div><div> Amazing !!</div><div> Drop It </div><div> Make You </div><div> Crazy!!! </div><div> Gazey</div><div> BABY</div><div> CRAZY</div></div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...