Aanga
02-23-2011, 05:53 PM
On my site, I'm currently trying to make this one page look like this:
http://i10.photobucket.com/albums/a112/dak-chan/page-3.png
As you can see on the development page, I'm having issues with that light blue box showing up in the background, and the "text" aligning next to the black box.
http://novuonline.com/development/donate.html
This is the coding that I have, and I'm having trouble figuring out how to fix it (still relatively new to html and css, this is just a fun little practice project)
Any help, advice, or resources would be GREATLY appreciated. Thank you in advance.
stylesheet.css (parts of it are for the index.html page)
@charset "UTF-8";
/* CSS Document */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body {
margin: 0;
padding: 0;
background-color:#2d7ad9;
width:1024px;
}
.header {background-image:url(images/header.png);
background-repeat:no-repeat;
height:290px;
width:1024px;
}
#logo {float:left;
padding-top:10px;
padding-left:10px;
}
#login {float:right;
padding-top:100px;
padding-right:20px;
}
#navbar {background-image:url(images/navbar.png);
height:26px;
width:1024px;
margin-top:-40px;
}
.navtext {color:white;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
float:left;
padding:0 1em;
}
ul.nobullet {
list-style-type: none;
padding-top:5px;
}
.page {width:1024px;
background-image:url(images/down.png);
background-repeat:no-repeat;
margin-top:-2px;
}
.page2{width:1024px;
background-image:url(images/bg2.png);
height:1000px;
margin-top:-2px;
}
#bg2 {background-image:url(images/bg2.png);
}
#donate {bacground-image:url(images/donatebg.png);
background-repeat:no-repeat;
height:606px;
width:964px;
margin: 0.7em 0 0.7em 0.5em;
padding-top:10px;
float:left;
}
#teaserdonate {
margin-left:10px;
float:left;
}
.main {background-image:url(images/whtbg.png);
background-repeat:no-repeat;
height:618px;
width:669px;
margin: 0.7em 0 0.7em 0.5em;
float:left;
}
#story {padding-top:12px;
}
#announcements {width:645px;
height:75px;
padding-top:20px;
padding-left:12px;
}
#text {font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
}
#donatetext1 {font-family:Arial, Helvetica, sans-serif;
font-size:24px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
float:right;
}
#textlink {font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding-top:20px;
padding-left:10px;
}
/* rotator in-page placement */
.rotator {
padding-top:35px;
height:184px;
float:right;
margin: -25px 347px 35px 0px;
}
/* rotator css */
.rotator ul li {
padding-top:20px;
padding-left:0px;
position:absolute;
list-style: none;
}
div.rotator ul li.show {
z-index:500;
}
.sidebox2 {padding-top:15px;
}
#footer {
display: table;
margin: 0 auto;
}
#footer div{
float:left;
width:inherit;
display: block;
}
#footer a{
color:white;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
}
/*
#navbar .nobullet li:hover
{
}
*/
donate.html page
<!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>Novu -- Donate</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="header">
<div id="logo">
<a href="http://www.novuonline.com/index.html"><img src="images/logo.png" border=0 alt="Novu Online" /></a>
</div>
<div id="login">
<!--
Trying to move this to the right side of the page ^^;
-->
<img src="images/loginbg.png" />
</div>
</div>
<div id="navbar">
<ul class="nobullet">
<li><a class="navtext" href="http://www.novuonline.com/index.html">Home</a></li>
<li><a class="navtext" href="http://www.novuonline.com/forums/">Forums</a></li>
<li><a class="navtext" href="http://www.novuonline.com/shops.html">Shops</a></li>
<li><a class="navtext" href="http://www.novuonline.com/donate.html">Donate</a></li>
<li><a class="navtext" href="http://www.novuonline.com/me.html">Me</a></li>
</ul>
</div>
<br clear="all" />
<div class="page2">
<div id="donate">
<div id="teaserdonate">
<img src="images/teaser.png" />
<div id="donatetext1">
TEST TEST TEST
</div>
</div>
</div>
</div>
</body>
</html>
http://i10.photobucket.com/albums/a112/dak-chan/page-3.png
As you can see on the development page, I'm having issues with that light blue box showing up in the background, and the "text" aligning next to the black box.
http://novuonline.com/development/donate.html
This is the coding that I have, and I'm having trouble figuring out how to fix it (still relatively new to html and css, this is just a fun little practice project)
Any help, advice, or resources would be GREATLY appreciated. Thank you in advance.
stylesheet.css (parts of it are for the index.html page)
@charset "UTF-8";
/* CSS Document */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body {
margin: 0;
padding: 0;
background-color:#2d7ad9;
width:1024px;
}
.header {background-image:url(images/header.png);
background-repeat:no-repeat;
height:290px;
width:1024px;
}
#logo {float:left;
padding-top:10px;
padding-left:10px;
}
#login {float:right;
padding-top:100px;
padding-right:20px;
}
#navbar {background-image:url(images/navbar.png);
height:26px;
width:1024px;
margin-top:-40px;
}
.navtext {color:white;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
float:left;
padding:0 1em;
}
ul.nobullet {
list-style-type: none;
padding-top:5px;
}
.page {width:1024px;
background-image:url(images/down.png);
background-repeat:no-repeat;
margin-top:-2px;
}
.page2{width:1024px;
background-image:url(images/bg2.png);
height:1000px;
margin-top:-2px;
}
#bg2 {background-image:url(images/bg2.png);
}
#donate {bacground-image:url(images/donatebg.png);
background-repeat:no-repeat;
height:606px;
width:964px;
margin: 0.7em 0 0.7em 0.5em;
padding-top:10px;
float:left;
}
#teaserdonate {
margin-left:10px;
float:left;
}
.main {background-image:url(images/whtbg.png);
background-repeat:no-repeat;
height:618px;
width:669px;
margin: 0.7em 0 0.7em 0.5em;
float:left;
}
#story {padding-top:12px;
}
#announcements {width:645px;
height:75px;
padding-top:20px;
padding-left:12px;
}
#text {font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
}
#donatetext1 {font-family:Arial, Helvetica, sans-serif;
font-size:24px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
float:right;
}
#textlink {font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding-top:20px;
padding-left:10px;
}
/* rotator in-page placement */
.rotator {
padding-top:35px;
height:184px;
float:right;
margin: -25px 347px 35px 0px;
}
/* rotator css */
.rotator ul li {
padding-top:20px;
padding-left:0px;
position:absolute;
list-style: none;
}
div.rotator ul li.show {
z-index:500;
}
.sidebox2 {padding-top:15px;
}
#footer {
display: table;
margin: 0 auto;
}
#footer div{
float:left;
width:inherit;
display: block;
}
#footer a{
color:white;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
}
/*
#navbar .nobullet li:hover
{
}
*/
donate.html page
<!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>Novu -- Donate</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="header">
<div id="logo">
<a href="http://www.novuonline.com/index.html"><img src="images/logo.png" border=0 alt="Novu Online" /></a>
</div>
<div id="login">
<!--
Trying to move this to the right side of the page ^^;
-->
<img src="images/loginbg.png" />
</div>
</div>
<div id="navbar">
<ul class="nobullet">
<li><a class="navtext" href="http://www.novuonline.com/index.html">Home</a></li>
<li><a class="navtext" href="http://www.novuonline.com/forums/">Forums</a></li>
<li><a class="navtext" href="http://www.novuonline.com/shops.html">Shops</a></li>
<li><a class="navtext" href="http://www.novuonline.com/donate.html">Donate</a></li>
<li><a class="navtext" href="http://www.novuonline.com/me.html">Me</a></li>
</ul>
</div>
<br clear="all" />
<div class="page2">
<div id="donate">
<div id="teaserdonate">
<img src="images/teaser.png" />
<div id="donatetext1">
TEST TEST TEST
</div>
</div>
</div>
</div>
</body>
</html>