3 Minor Errors - Layout Coding [Archive]

View Full Version : 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:
http://i26.tinypic.com/20r5i5d.gif

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:
http://i31.tinypic.com/29fd010.gif

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:
http://i29.tinypic.com/242sz79.gif

Here is my source 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(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"><?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 :P, 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:

<!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(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"><?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;

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 :P

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.

loserWILL

22-01-2008, 01:52 PM

Okay, I've fixedthe radio stat box + the navigation gap. Now, using the switch nav, when you click a link to get more links, the radio box moves down. (if that makes any sense)

loserWILL

22-01-2008, 08:14 PM

I couldn't edit - the footer problem is still about, but the Habbo has moved up closer now.

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