Jump to content
MakeWebGames

Html/css template help with content


HUSTLE HARD
 Share

Recommended Posts

this is my html and css can you tell me where am wrong and help me correct it the left content is okay but the main content the right one im having troubling keep the text within the box.

 

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<html>

<head>

<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />

<title> The Game</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

* * * * * * *<div id="container" class="wrap">

<div id="left_menu">

<div class="menu_top"></div>

<div class="menu_bg">

<div class="padding_content">

<div class="username">TEST [10202]</div>

<div class="userpic"><img src="images/default.png"></div>

<div class="money"><div class="padding_money">780,000,102</div> </div>

<div class="crystals"><div class="padding_cry">1001 </div> </div>

<div class="Exp"> <div class="padding_exp">

<img src="images/progress.png" alt="bar" class="bar" style="width: 20px;height:18px;" />

<div style="background: url(images/empty.png) no-repeat; width:123px; height:18px; margin-top:-19px;"></div>

</div>

<div class="text_exp"><center>Level 5 (12%)</center></div>

</div>

<div class="buttons">

<a href="donator.php"><img src="images/donate.png"></a>

<a href="voting.php"><img src="images/vote.png"></a>

</div>

<br />

 

<div class="links">

<script type="text/javascript">

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.className=="submenu") //DynamicDrive.com change

ar.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>

<div id="masterdiv">

 

 

<div class="menutitle" onclick="SwitchMenu('sub1')"><img src="images/home_ico.png">Home Links <div class=buttondown></div></div>

<span class="submenu" id="sub1">

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

<li><a href='#'>Link 5</a></li>

</span>

 

 

 

<br />

 

 

<div class="menutitle" onclick="SwitchMenu('sub2')"> <img src="images/explore_ico.png">Explore Links<div class=buttondown></div></div>

 

<span class="submenu" id="sub2">

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</span>

 

 

<br />

 

 

 

<div class="menutitle" onclick="SwitchMenu('sub3')"> <img src="images/train_ico.png">Task & Train<div class=buttondown></div></div>

 

<span class="submenu" id="sub3">

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</span>

 

 

<br />

 

 

<div class="menutitle" onclick="SwitchMenu('sub4')"><img src="images/game_ico.png"> Game Links<div class=buttondown></div></div>

 

<span class="submenu" id="sub4">

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

</span>

</div>

 

 

<br /><br /><br />

<br /><br /><br />

 

 

</div>

 

 

</div>

</div>

<div class="menu_bot"></div>

</div>

 

 

 

 

</! ------------- //MAIN CONTENT STARTS ------------------>

 

<div id="right_content">

<div class="content_top"></div>

 

<div class="content_bg">

<div class="padding_main">

asssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

 

</div>

</div>

 

 

 

 

<div class="content_bot"></div>

</div>

 

<div class="footer">Copyright 2012 GAME NAME. All rights reserved</div>

 

</div>

</body>

<html>

 

 

THE CSS

 

 

body {

background: #1d0202 url("images/header_body.jpg") no-repeat

top center;

margin:0 auto;

padding:0;

font:13px/16px "Lucida Grande", Arial, Sans-serif;

color:#fff;

}

 

.wrap {

width: 800px;

}

.row {width: 200px;

margin: 0 auto;

 

}

#container {

width: 800px;

margin:0 auto;

 

}

#left_menu {

margin: 280px 0 0 0px;

float:left;

 

}

 

.menu_top {

background: url("images/menu_top.png")no-repeat;

width:181px;

height:26px;

}

 

 

.menu_bg {

background: url("images/menu_bg.png");

width:189px;

}

 

.padding_content {

width: 170%;

margin-right: 80px;

 

}

 

.menu_bot {

background: url("images/menu_bot.png")no-repeat;

width:189px;

height:35px;

}

 

.username {

margin-left: 20px;

font:10px/13px "Lucida Grande", Arial, Sans-serif;

font-weight: bold;

 

}

 

.userpic {

margin-left: 10px;

margin-top: 10px;

}

 

.money {

background: url("images/money_ico.png")no-repeat;

width:12px;

height:19px;

color:#73d217;

font:10px/13px "Lucida Grande", Arial, Sans-serif;

font-weight: bold;

margin-top: 5px;

margin-left: 10px;

}

.padding_money {

margin-left: 20px;

}

 

.crystals {

background: url("images/crystal_ico.png")no-repeat;

color:#f58f8f;

width:12px;

height:19px;

font:10px/13px "Lucida Grande", Arial, Sans-serif;

font-weight: bold;

margin-top: 7px;

margin-left: 13px;

}

.padding_cry {

margin-left: 20px;

}

 

.Exp {

background: url("images/exp_ico.png")no-repeat;

width:23px;

height:22px;

margin-top: 7px;

margin-left: 13px;

}

.padding_exp {

margin-left: 25px;

}

.text_exp

{

width:100px;

font:10px/13px "Lucida Grande", Arial, Sans-serif;

font-weight: bold;

margin-left: 25px;

margin-top: -15px;

}

 

.links {

margin-top: 7px;

margin-left: 10px;

}

 

.buttons {

margin-top: 7px;

margin-left: 13px;

}

 

 

.buttondown {

background: url(images/droparrow.png);

width:25px;

height:26px;

float:right;

margin-top: -10px;

}

 

.menutitle{

cursor:pointer;

color:#5c0b0b;

width:50%;

border-bottom-width: 1.5px;

border-bottom-style: dashed;

border-bottom-color: #1d0202;

text-align:left;

font-weight:bold;

}

 

.submenu{

color:#000000;

width:50%;

float:left;

}

 

li a { padding:5px; display:block;}

li a:hover { background-color:#7b0b0b;}

 

 

#right_content {

margin: 280px 0px 0 0;

float:right;

width: 600px;

 

}

 

.content_top {

background: url("images/content_top.png")no-repeat;

height:25px;

}

 

 

 

.content_bg {

background: url("images/content_bg.png") repeat-y;

min-height: 600px;

}

 

 

.padding_main {

 

white-space: pre-line;

width: 500px;

padding: 10px 0 0 20px;

 

}

 

 

.content_bot {

background: url("images/content_bot.png")no-repeat;

height:25px;

}

 

.footer {

float:right;

 

color:#3b0707;

 

}

 

.spacer {

clear: both;

}

 

Link to comment
Share on other sites

this is my html and css can you tell me where am wrong and help me correct it the left content is okay but the main content the right one im having troubling keep the text within the box.

 

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<html>

<head>

<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />

<title> The Game</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

* * * * * * *<div id="container" class="wrap">

<div id="left_menu">

<div class="menu_top"></div>

<div class="menu_bg">

<div class="padding_content">

<div class="username">TEST [10202]</div>

<div class="userpic"><img src="images/default.png"></div>

<div class="money"><div class="padding_money">780,000,102</div> </div>

<div class="crystals"><div class="padding_cry">1001 </div> </div>

<div class="Exp"> <div class="padding_exp">

<img src="images/progress.png" alt="bar" class="bar" style="width: 20px;height:18px;" />

<div style="background: url(images/empty.png) no-repeat; width:123px; height:18px; margin-top:-19px;"></div>

</div>

<div class="text_exp"><center>Level 5 (12%)</center></div>

</div>

<div class="buttons">

<a href="donator.php"><img src="images/donate.png"></a>

<a href="voting.php"><img src="images/vote.png"></a>

</div>

<br />

 

<div class="links">

<script type="text/javascript">

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.className=="submenu") //DynamicDrive.com change

ar.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>

<div id="masterdiv">

 

 

<div class="menutitle" onclick="SwitchMenu('sub1')"><img src="images/home_ico.png">Home Links <div class=buttondown></div></div>

<span class="submenu" id="sub1">

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

<li><a href='#'>Link 5</a></li>

</span>

 

 

 

<br />

 

 

<div class="menutitle" onclick="SwitchMenu('sub2')"> <img src="images/explore_ico.png">Explore Links<div class=buttondown></div></div>

 

<span class="submenu" id="sub2">

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</span>

 

 

<br />

 

 

 

<div class="menutitle" onclick="SwitchMenu('sub3')"> <img src="images/train_ico.png">Task & Train<div class=buttondown></div></div>

 

<span class="submenu" id="sub3">

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</span>

 

 

<br />

 

 

<div class="menutitle" onclick="SwitchMenu('sub4')"><img src="images/game_ico.png"> Game Links<div class=buttondown></div></div>

 

<span class="submenu" id="sub4">

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

</span>

</div>

 

 

<br /><br /><br />

<br /><br /><br />

 

 

</div>

 

 

</div>

</div>

<div class="menu_bot"></div>

</div>

 

 

 

 

</! ------------- //MAIN CONTENT STARTS ------------------>

 

<div id="right_content">

<div class="content_top"></div>

 

<div class="content_bg">

<div class="padding_main">

asssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

 

</div>

</div>

 

 

 

 

<div class="content_bot"></div>

</div>

 

<div class="footer">Copyright 2012 GAME NAME. All rights reserved</div>

 

</div>

</body>

<html>

 

 

THE CSS

 

 

body {

background: #1d0202 url("images/header_body.jpg") no-repeat

top center;

margin:0 auto;

padding:0;

font:13px/16px "Lucida Grande", Arial, Sans-serif;

color:#fff;

}

 

.wrap {

width: 800px;

}

.row {width: 200px;

margin: 0 auto;

 

}

#container {

width: 800px;

margin:0 auto;

 

}

#left_menu {

margin: 280px 0 0 0px;

float:left;

 

}

 

.menu_top {

background: url("images/menu_top.png")no-repeat;

width:181px;

height:26px;

}

 

 

.menu_bg {

background: url("images/menu_bg.png");

width:189px;

}

 

.padding_content {

width: 170%;

margin-right: 80px;

 

}

 

.menu_bot {

background: url("images/menu_bot.png")no-repeat;

width:189px;

height:35px;

}

 

.username {

margin-left: 20px;

font:10px/13px "Lucida Grande", Arial, Sans-serif;

font-weight: bold;

 

}

 

.userpic {

margin-left: 10px;

margin-top: 10px;

}

 

.money {

background: url("images/money_ico.png")no-repeat;

width:12px;

height:19px;

color:#73d217;

font:10px/13px "Lucida Grande", Arial, Sans-serif;

font-weight: bold;

margin-top: 5px;

margin-left: 10px;

}

.padding_money {

margin-left: 20px;

}

 

.crystals {

background: url("images/crystal_ico.png")no-repeat;

color:#f58f8f;

width:12px;

height:19px;

font:10px/13px "Lucida Grande", Arial, Sans-serif;

font-weight: bold;

margin-top: 7px;

margin-left: 13px;

}

.padding_cry {

margin-left: 20px;

}

 

.Exp {

background: url("images/exp_ico.png")no-repeat;

width:23px;

height:22px;

margin-top: 7px;

margin-left: 13px;

}

.padding_exp {

margin-left: 25px;

}

.text_exp

{

width:100px;

font:10px/13px "Lucida Grande", Arial, Sans-serif;

font-weight: bold;

margin-left: 25px;

margin-top: -15px;

}

 

.links {

margin-top: 7px;

margin-left: 10px;

}

 

.buttons {

margin-top: 7px;

margin-left: 13px;

}

 

 

.buttondown {

background: url(images/droparrow.png);

width:25px;

height:26px;

float:right;

margin-top: -10px;

}

 

.menutitle{

cursor:pointer;

color:#5c0b0b;

width:50%;

border-bottom-width: 1.5px;

border-bottom-style: dashed;

border-bottom-color: #1d0202;

text-align:left;

font-weight:bold;

}

 

.submenu{

color:#000000;

width:50%;

float:left;

}

 

li a { padding:5px; display:block;}

li a:hover { background-color:#7b0b0b;}

 

 

#right_content {

margin: 280px 0px 0 0;

float:right;

width: 600px;

 

}

 

.content_top {

background: url("images/content_top.png")no-repeat;

height:25px;

}

 

 

 

.content_bg {

background: url("images/content_bg.png") repeat-y;

min-height: 600px;

}

 

 

.padding_main {

 

white-space: pre-line;

width: 500px;

padding: 10px 0 0 20px;

 

}

 

 

.content_bot {

background: url("images/content_bot.png")no-repeat;

height:25px;

}

 

.footer {

float:right;

 

color:#3b0707;

 

}

 

.spacer {

clear: both;

}

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...