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 2 of 2
  1. #1
    wyn
    wyn is offline
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing headers and body contents (newbie question)

    Ok so i'm new to this was have manged to make a few headers move round and thought it might be nice to get body of the page to move around with them but it only does it once then stops not really sure what up have tried a few things and don't seem to be able to get it to work. Any help would be greatly appreciated. am going to post the whole HTML with the script in it not sure if i should be doing that so tell me off if its my bad.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    
    Transitional//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
         <title>
           TITLE
         </title>
    
    <style type = "text/css">
    
    body{
    text-align:left;
    background:#000;
    }
    
    #all{
    
    margin:auto;
    position:relative;
    width:789px;
    border-color:#000;
    border-width:1px;
    border-style:solid;
    padding-left:20px;
    margin-top:20px;
    background:url("corner.png");
    background-repeat:no-repeat;
    background-position: 490px 0px;
    padding:10px;
    background-color:#fff;
    }
    
    #a{
    position:relative;
    top:50px;
    font-family:"verdana";
    width:789px;
    color:#988e90;
    }
    
    	#Header1
    	{position:relative;	
    	text-decoration:  none;
    	top:-50px;
    	left:75px;
    	font-family:"verdana";
    	color:#c5c5c5;
    	display:inline;
    	}
    	#Header2{
    	position:relative;
    	text-decoration:  none;
    	left:125px;
    	font-family:"verdana";
    	color:#c5c5c5;
    	}
    	#Header3{
    	position:relative;
    	text-decoration:  none;
    	left:20px;
    	font-family:"verdana";
    	color:#c5c5c5;
    	}
    #b,c,d{display:inline;}
     
    #content 
    {padding:10px;}
    
    	#dormantHeaders{
    	z-index:0
    	}
    
    #content{
    width:450px;
    border-style:solid;
    border-width:3px;
    border-color:black;
    }
    #rightBar
    {
    position:absolute;
    top:220px;
    left:650px;
    width: 143px;
    text-align:center;
    border-style:solid;
    border-width:3px;     
    }
    .mainpicstop{
    border-style:solid;
    border-color:black;
    border-width:2px;
    float:right;
    margin-left:5px;}
    
    hr{
    border-width:2px;
    }
    
    #design{
    visibility:visible;
    width:100%;
    height:100%;}
    
    #services{
    visibility:hidden;
    width:0px;
    height:0px;}
    
    #portfolio{
    visibility:hidden;
    width:0px;
    height:0px;}
    
    #about{
    visibility:hidden;
    width:0px;
    height:0px;
    }
    </style>
    
       <script type = "text/javaScript">
    
       <!--
        
    function swapHeaders(y)
    {
    
    
    var current = document.getElementById ("a")
    var obj =     document.getElementById (y)
    var swap = obj.innerHTML
    var swap2 = current.innerHTML
    current.innerHTML= swap
    obj.innerHTML = swap2
    
    var bodyServices = document.getElementById  ("services")
    var bodyAbout = document.getElementById ("about")
    var bodyDesign = document.getElementById ("design")
    var bodyPort = document.getElementById ("portfolio")
    var title = document.getElementsByTagName("h1")
    
    switch (swap)
    {
    case "About":
    	bodyAbout.style.visibility = "visible"
    	bodyAbout.style.width = "100%"
    	bodyAbout.style.height ="100%"
    		bodyServices.style.visibility = "hidden"
    		bodyServices.style.width ="0px"
    		bodyServices.style.height ="0px"
    		bodyDesign.style.visibility = "hidden"
    		bodyDesign.style.width ="0px"
    		bodyDesign.style.height ="0px"	  
    		bodyPort.style.visibility = "hidden"
    		bodyPort.style.width = "0px"
    		bodyPort.style.height = "0px"    
    		
    break;
    case "Services":
    bodyServices.style.visibility = "visible"
    bodyServices.style.width = "100%"
    bodyServices.style.height = "100%"
    		bodyAbout.style.visibility = "hidden" 
    		bodyDesign.style.visibility = "hidden"
    		bodyAbout.style.width = "0px"
    		bodyAbout.style.height ="0px"
    		bodyDesign.style.height = "0px"
    		bodyDesign.style.width = "0px"
    		bodyPort.style.visibility = "hidden"
    		bodyPort.style.width = "0px"
    		bodyPort.style.height = "0px"
    
    break;
    
    case "Design":
    bodyDesign.style.visibility = "visible"
    bodyDesign.style.width = "100%"
    bodyDesign.style.height = "100%"
    		bodyAbout.style.visibility = "hidden"
    		bodyServices.style.visibility = "hidden"
    		bodyAbout.style.width = "0px"
    		bodyAbout.style.height ="0px"
    		bodyServices.style.width = "0px"
    		bodyServices.style.height = "0px"
    		bodyPort.style.visibility = "hidden"
    		bodyPort.style.width = "0px"
    		bodyPort.style.height = "0px"
    break;
    case "Portfolio":
    bodyPort.style.visibility = "visible"
    bodyPort.style.width = "100%"
    bodyPort.style.height = "100%"
    		bodyDesign.style.visibility = "hidden"
    		bodyDesign.style.height = "0px"
    		bodyDesign.style.width = "0px"
    		bodyAbout.style.visibility = "hidden"
    		bodyServices.style.visibility = "hidden"
    		bodyAbout.style.width = "0px"
    		bodyAbout.style.height ="0px"
    		bodyServices.style.width = "0px"
    		bodyServices.style.height = "0px"
    break;
    }
    
    }
    
        // -->
      </script>
    </head>
    <body>]
    
     <div id = "all">
      
      <div id = "DivHeaders">
        <h1 id='a'>Design</h1>
          <a href = "javascript:swapHeaders('b')" 
    
    id="Header1"><h2 id = "b">Portfolio</h2> </a>
          <a href = "javascript:swapHeaders('c')" 
    
    id="Header2"><h2 id = "c">About</h2> </a>
          <a href = "javascript:swapHeaders('d')" 
    
    id="Header3"><h2 id = "d">Services</h2> </a>  
        </div>
    
    
    <hr />
    
    
    
       <div id = "content">
      <div id="about">
    <img src="one.jpg" alt="one" width = "100px" height = 
    
    "100px"   class="mainpicstop"/> 
      <img src="two.jpg" alt="one" width = "100px" height = 
    
    "100px"   class="mainpicstop"/>		
    <p> lots of crap</p> 
       <p>Built to W3C HTML 4.0 specifications using a 
    
    combination of hand coded php, html and javascript. This 
    
    is a relatively large static, brochure style site with 
    
    plenty of useful content. For this reason easy navigation 
    
    is essential as is fast loading times, I therefore steered 
    
    clear of over-complex graphics and ensure the images used 
    
    were compressed to small file sizes without affecting 
    
    quality. Currently working on SEO for this site to improve 
    
    search engine performance</p>
    <p>
    Local racehorse owner based in Windmill Hill, East Sussex. 
    
    Sells shares in each of his horses. Share owners get 
    
    access to parade ring, winners enclosure etc plus stable 
    
    visits and more.
    
    Built to W3C XHTML 1.0 specifications for maximum browser 
    
    and platform compatibilty. Hand coded html plus 
    
    javascript. Small brochure site with custom introduction 
    
    page, content pages and contact page.</p>
      </div>
    
    
    <div id="design">
    <p>designdesigndesigndesigndesi
    gndesigndesigndesign
    designdesigndesigndesi
    gndesigndesigndesigndesigndes
    igndesigndesigndesignd
    esi
    gndesigndesigndesigndesignd
    esigndesigndesigndesignd
    esigndesig
    ndesign
    designdesigndesigndesignd
    gndesigndesigndesigndesign
    designdesigndes
    igndesigndesigndesigndesi
    gndesigndesignd
    esigndesigndesigndesi
    gn
    designdesi
    gndesigndesigndesigndesignde
    signdesigndesigndesign
    designdesigndesignde
    signdesigndesigndesigndes
    igndesigndesigndesign</p>
    </div>
    
    <div id="services">
    <p> services services services  services services services 
    
    services services services services services services 
    
    services services services services services v v v 
    
    services services services services services services 
    
    services v v services services services services services 
    
    v services services services services services v services 
    
    services.
    </div>
    
    
    <div id="portfolio">
    <p> THIS IS THE PORTFOLIO PAGE </p>
    </div>
       </div>
    
    
    
    
       <div id = "rightBar">
    	<p>Local racehorse owner based in Windmill Hill, 
    
    East Sussex. Sells 	shares in each 	of his horses. 
    
    Share owners get access to parade ring, winners 	
    
    enclosure etc 	plus stable visits and more.
    
    	Built to W3C XHTML 1.0 </p>
       </div>
      </div>
     
    </body>
    </html>
    Last edited by wyn; 12-06-2006 at 12:18 AM.

  • #2
    wyn
    wyn is offline
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    still having problems:(

    sorry to be a pain has anybody had any luck? if you don't know what i am asking for help with please leave a message asking for any more details or specfic bits


  •  

    Posting Permissions

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