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
I am doing this for work and they use IE 6.0 (urgh!)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;}
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)


LinkBack URL
About LinkBacks

Reply With Quote