...

View Full Version : Changing headers and body contents (newbie question)



wyn
12-05-2006, 11:08 PM
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.

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

wyn
12-09-2006, 06:15 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum