-
Div is acting up
I've coded a layout, there's just one problem.
Click on of the "Main Link" buttons, then watch the box on the far right move down. How can I stop that? www.blackwalls.net/ih
Here is the code:
HTML Code:
<!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=utf-8" />
<title>HabboSpeaker</title>
<style type="text/css">
body {
margin: 0;
font-family: "Trebuchet MS";
font-size: 12px;
color: #ababaa;
background-image: url(images/bg.gif);
}
body a:link {
font-family: "Trebuchet MS";
font-size: 12px;
color: #ababaa;
text-decoration: none;
}
body a:hover {
font-family: "Trebuchet MS";
font-size: 12px;
color: #ababaa;
text-decoration: none;
font-weight: bold;
}
body a:visited {
font-family: "Trebuchet MS";
font-size: 12px;
color: #ababaa;
text-decoration: none;
}
#text {
margin-left: 7px;
margin-right: 7px;
}
#banner {
background-image: url(images/banner.gif);
height: 153px;
width: 794px;
}
#content_wrapper {
width: 929px;
margin-top: 38px;
overflow: hidden;
clear: both;
}
#nav_wrapper {
width: 200px;
float: left;
margin-right: 33px;
overflow: hidden;
clear: both;
}
#nav_top {
background-image: url(images/nav_top.gif);
width: 200px;
height: 35px;
}
#nav_mid {
background-image: url(images/nav_mid.gif);
width: 200px;
}
#nav_bot {
background-image: url(images/nav_bottom.gif);
width: 200px;
height: 10px;
}
#main_wrapper {
width: 459px;
margin-right: 33px;
float: left;
}
#main_top {
background-image: url(images/main_top.gif);
width: 459px;
height: 35px;
}
#main_mid {
background-image: url(images/main_mid.gif);
width: 459px;
}
#main_bot {
background-image: url(images/main_bottom.gif);
width: 459px;
height: 10px;
}
#ln_wrapper {
width: 200px;
float: right;
}
#ln_top {
background-image: url(images/ln_top.gif);
width: 200px;
height: 35px;
}
#ln_mid {
background-image: url(images/ln_mid.gif);
width: 200px;
}
#ln_bot {
background-image: url(images/ln_bottom.gif);
height: 10px;
width: 200px;
}
#rstats_wrapper {
overflow: hidden;
width: 200px;
float: right;
overflow: hidden;
clear: both;
}
#rstats_top {
background-image: url(images/rstat_top.gif);
width: 200px;
height: 35px;
}
#rstats_mid {
background-image: url(images/rstat_mid.gif);
width: 200px;
}
#rstats_bot {
background-image: url(images/rstat_bottom.gif);
width: 200px;
height: 10px;
}
#footer_wrapper {
margin: 0;
width: 100%;
height: 128px;
position: absolute;
bottom: 0px;
overflow: hidden;
clear: both;
}
#footer_horizontal {
background-image: url(images/footer_horizontal.gif);
height: 128px;
width: 100%;
position: absolute;
bottom: 0px;
overflow: hidden;
clear: both;
}
#copyright_box {
background-color: #dadad3;
border: 1px solid #bebebb;
width: 455px;
height: 78px;
color: #bebebb;
margin-top: 25px;
}
.menutitle{
cursor:pointer;
color:#ababaa;
padding:2px;
font-weight:bold;
overflow: hidden;
clear: both;
}
.submenu{
overflow: hidden;
clear: both;
}
</style>
<script type="text/javascript">
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
</script>
</head>
<body>
<div align="center">
<div id="banner"></div>
</div>
<div align="center">
<div id="content_wrapper">
<div id="nav_wrapper">
<div id="nav_top"></div>
<div id="nav_mid"><div align="left"><div id="text"><div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')">Main Link</div>
<span class="submenu" id="sub1">
- <a href="index.php?page=home">limk 1</a><br>
- <a href="index.php?page=home">link 3</a><br>
- <a href="index.php?page=home">link 4</a>
</span>
<div class="menutitle" onclick="SwitchMenu('sub2')">Main Link</div>
<span class="submenu" id="sub2">
- <a href="index.php?page=home">limk 1</a><br>
- <a href="index.php?page=home">link 2</a><br>
- <a href="index.php?page=home">link 3</a><br>
- <a href="index.php?page=home">link 4</a>
</span>
</div></div></div></div>
<div id="nav_bot"></div>
</div>
<div id="main_wrapper">
<div id="main_top"></div>
<div id="main_mid"><div align="left"><div id="text">kai. </div></div></div>
<div id="main_bot"></div>
</div>
<div id="ln_wrapper">
<div id="ln_top"></div>
<div id="ln_mid"><div align="left"><div id="text">lnpls</div></div></div>
<div id="ln_bot"></div>
</div>
<div id="rstats_wrapper">
<div id="rstats_top"></div>
<div id="rstats_mid"><div align="left"><div id="text">radiopls</div></div></div>
<div id="rstats_bot"></div>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer_horizontal">
<div align="center">
<div style="width:683px;">
<div style="margin-right:20px;float:left;"><img src="images/footer_habbo_left.gif" /></div><div id="copyright_box">Add your copyright here.</div><div style="margin-left:20px;float:right;"><img src="images/footer_habbo_right.gif" /></div>
</div>
</div>
</div>
</div>
</body>
</html>
Edited by Aflux (Forum Moderator) - Moved from 'Web Designing & Development'. Please post in the correct section.
-
cba to look through code but i think it is a table problem your putting divs in the wrong place rendering the far right box, pushing down as a table doesn't work like that. if not tell me and i will look through your source code.
-
Also it appears that ln_top.gif is not transparent on the left side where as rstat_top.gif is.
I haven't looked though the code but try float: right; on the funky div.
-
I know the top isn't transparent.
I have a float on it.
-
Thats alot of code, why not put the css in a seperate file, and the js and then include it in with echo's btw it's nice to see you using dynamicdrive and keeping the copyright in the code, alot of people take it out, good work..
