Hello all,
I am looking for a little bit of help with the following: -
HTML
Code:
<html>
<head>
<link href="lynxguide.css" rel="stylesheet" type="text/css" />
<title>
Online LYNX Guide Test
</title>
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "XP";
}
else {
ele.style.display = "block";
text.innerHTML = "XP";
}
}
</script>
<script language="javascript">
function toggle2() {
var ele = document.getElementById("toggleText2");
var text = document.getElementById("displayText1");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "VISTA";
}
else {
ele.style.display = "block";
text.innerHTML = "VISTA";
}
}
</script>
</head>
<body>
<form method="post" action="javascript:toggle();">
<input name="url" type="hidden" value="XP Guide">
<input type="submit" value="XP">
</form>
<form method="post" action="javascript:toggle2();">
<input name="url" type="hidden" value="Vista Guide">
<input type="submit" value="Vista" width="70px">
</form>
<br />
<br />
<div id="toggleText" style="display: none"><h1>XP</h1>
</div>
<div id="toggleText2" style="display: none"><h1>VISTA</h1>
</div>
</body>
</html>
CSS
Code:
body { background-color: #FFFFCC;
text-align:center;
}
#container {
width:90%;
height:70%;
background-color: #FFFFCC;
}
#testnav {
width:10%;
height:20%;
background-color: #336666;
padding:2px;
margin:auto;
}
#toggleText {
width:10%;
height:5%;
background-color: #999966;
align:right;
}
#toggleText2 {
width:10%;
height:5%;
background-color: #999966;
align:right;
}
#toggleText3 {
width:10%;
height:5%;
background-color: #999966;
align:right;
}
A:link {text-decoration: none; color:#000000;}
A:visited {text-decoration: none; color:#000000;}
A:active {text-decoration: none; color:#000000;}
A:hover {text-decoration: none; color:#000000;}
I am doing this for work and they use IE 6.0 (urgh!)
While I can generally align things fine with FireFox and later version's of IE, I am having trouble with the above.
I want the two button's plus one more to be on the same line, not one beneath the other.
On top of that, at the moment when I click "XP" it open's, I then have to click "XP" again to close it, however I want it so that if I click "XP" and it has opened then I click "Vista" the "XP" bit closes and the "Vista" one open's.
Sorry for being cheeky with a third question as well, at the moment when I click XP and it opens then I click Vista, the Vista one drop's below the XP, I would like it so that, when I click XP, then Vista, XP closes and Vista open's in the same position.
I haven't used JavaScript before so I have just taken my example of the Internet.
I am still working on the general styling however I want to make sure that the website/ button's function correctly before I complete the styling and such.
Sorry if I haven't explained myself very well, any questions just ask.
P.S: - Yes the colours do suck. But they have to match our intranet although those colours aren't quite there yet.
Cheers in advanced.
Disturbedguy (Anthony)