Html/css template help with content

lucky3809 · December 1, 2012

Here is a link may help you...

http://css-tricks.com/almanac/properties/w/whitespace/

Edited December 1, 2012 by lucky3809

HUSTLE HARD · December 1, 2012

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;

}

HUSTLE HARD · December 1, 2012

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;

}

KyleMassacre · December 2, 2012

Im really horrible at css but maybe try

[css]

.content_bg {

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

min-height: 600px

word-break: normal;

[/css]

The word-break property seems like it should do the trick in theory

http://www.w3schools.com/cssref/css3_pr_word-break.asp

AnonymousUser · December 3, 2012

or just google a css creator... makes things a lot easier when having to deal with css :D

Hedge · December 3, 2012

try this, it should fix the problem.

.padding_main {
white-space: pre-line;
width: 500px;
padding: 10px 20px 0 20px;
word-wrap: break-word;
}

Sign In

Html/css template help with content

Recommended Posts

lucky3809

Link to comment

Share on other sites

HUSTLE HARD

Link to comment

Share on other sites

HUSTLE HARD

Link to comment

Share on other sites

KyleMassacre

Link to comment

Share on other sites

AnonymousUser

Link to comment

Share on other sites

Hedge

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Hosting

Marketplace