PDA

View Full Version : Div is acting up


loserWILL
23-01-2008, 09:47 PM
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 (http://www.blackwalls.net/ih)

Here is the 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(off set, 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.
Hypertext
23-01-2008, 09:52 PM
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.
Florx
23-01-2008, 10:06 PM
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.
loserWILL
23-01-2008, 10:13 PM
I know the top isn't transparent.

I have a float on it.
Ini
23-01-2008, 10:17 PM
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..

Want to hide these adverts? Register an account for free!