3 Minor Errors - Layout Coding

loserWILL · 21-01-2008, 11:51 PM

I've just finished coding a layout, ad i've come across three errors.

1. The second 'radio' box doesn't align up to the right. (I want the two red barred images to align straight under each other) Here's an image of my problem:

2. Odd space under my switch nav, in between the end of the middle div and the bottom div. Here's an image of my problem:

3. My bottom image isn't aligning where it's suppose to. The one on the left does, but the right one doesn't. (I want the Habbo in the top hat to be in the same place as the habbo in the santa hat.) Here's an image of my problem:

Here is my source 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>XX</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;
}

#nav_wrapper {
width: 200px;
float: left;
margin-right: 33px;
}

#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 {
width: 200px;
float: right;
margin-top: 20px;
}

#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;
}

#footer_horizontal {
background-image: url(images/footer_horizontal.gif);
height: 128px;
width: 100%;
position: absolute; 
bottom: 0px; 
}

#copyright_box {
background-color: #dadad3;
border: 1px solid #bebebb;
width: 455px;
height: 78px;
color: #bebebb;
margin-top: 25px;
margin-bottom: 25px;
}

.menutitle{
cursor:pointer;
margin-bottom: 5px;
color:#ababaa;
padding:2px;
font-weight:bold;
}

.submenu{
margin-bottom: 0.5em;
}

#copy {
width: 7683px;
}

#imgleft {
float: left;
}

#imgright {
float: right;
}
</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"><?php
$_GET['page'];  
if($page == "home")
{
include('home.php');
}
elseif($page == "news")
{
include('news.php');
}
else
{
include('home.php');
}

?> </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 id="copy">
<div id="imgleft"><img src="images/footer_habbo_left.gif" width="48" height="86" /></div>
<div id="copyright_box">Add your copyright here.</div>
<div id="imgright"><img src="images/footer_habbo_right.gif" width="51" height="98" /></div>
</div>
</div>
</div>
</div>

</body>
</html>

Thanks so much. Oh, and for those who are going to say "You copied an idea from Aflux", I have permission.

Moved by Agesilaus (Forum Super Moderator) from Design and Development: Please post in the correct forum next time.

H0BJ0B · 21-01-2008, 11:55 PM

A guy called brett had the same problem with the space on the nav.
I looked around for a while and I believe the answer came from the image. Check it is cut right to the edge without gaps.
The others, no idea, Sorry.

loserWILL · 21-01-2008, 11:56 PM

What do you mean by 'the image'?

It's okay.

H0BJ0B · 21-01-2008, 11:57 PM

The rounded image at the bottom of the nav and the image connecting to the bottom of the nav.
So whatever image nav_bot is and nav_mid is.

#nav_bot {
background-image: url(images/nav_bottom.gif);
width: 200px;
height: 10px;
}

#nav_mid {
background-image: url(images/nav_mid.gif);
width: 200px;
}

loserWILL · 21-01-2008, 11:59 PM

That's not it - it was fine before I added the switch nav.

kk. · 21-01-2008, 11:59 PM

for the space in the nave, try giving one of the divs: fontsize:0px

for the first one, have you used the same divs for the boxes? hope so

, try code both of them in another div (in the same on) and then float the right

unsure what you mean with other one ignore me if im wrong pls because i didnt know which div belonged to what

loserWILL · 22-01-2008, 12:03 AM

Josh, that didn't work.

Also, here's an updated version of my 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>XX</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;
}

#nav_wrapper {
width: 200px;
float: left;
margin-right: 33px;
}

#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 {
width: 200px;
float: right;
margin-top: 20px;
}

#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;
}

#footer_horizontal {
background-image: url(images/footer_horizontal.gif);
height: 128px;
width: 100%;
position: absolute; 
bottom: 0px; 
}

#copyright_box {
background-color: #dadad3;
border: 1px solid #bebebb;
width: 455px;
height: 78px;
color: #bebebb;
margin-top: 25px;
margin-bottom: 25px;
}

.menutitle{
cursor:pointer;
margin-bottom: 5px;
color:#ababaa;
padding:2px;
font-weight:bold;
}

.submenu{
margin-bottom: 0.5em;
}
</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"><?php
$_GET['page'];  
if($page == "home")
{
include('home.php');
}
elseif($page == "news")
{
include('news.php');
}
else
{
include('home.php');
}

?> </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>

Awfy · 22-01-2008, 08:18 AM

Will, the problem with DIVs are if you have a div within another div it causes Margin issues. So say you had <div id="header"> then inside it <div id="header-inner">. If header-inner has margins and you see it causeing problems with gaps on the outer div you need to add;

Code:

overflow: hidden;

To your outer div's style. As I'm pretty sure the Switch Nav (if from DynamicDrive) has padding or margins. So that should correct it.

For the copyright box problem, simply try making the width: ###px; on the copyright_box style smaller. See if that helps.

I work out the problem with your radio box in a bit

loserWILL · 22-01-2008, 12:35 PM

I add "overflow: hidden;" to the radio stats wrapper (rstat_wrapper)?

Jme · 22-01-2008, 01:13 PM

All of those problems look like it's the overflow if hidden doesn't work then try auto, i'm not sure.

Thread: 3 Minor Errors - Layout Coding

Thread Tools

3 Minor Errors - Layout Coding

Posting Permissions