3 Minor Errors - Layout Coding
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.
