Having issues with alignments and some images showing up

Aanga · 02-23-2011, 05:53 PM

On my site, I'm currently trying to make this one page look like this:

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)

Code:

@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

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

Excavator · 02-23-2011, 06:07 PM

Hello Aanga,
Are you wanting to put text next to that "some sort of cool pic"? You would want to float that image if that's the case.

Have a look at a float tutorial here.

Aanga · 02-23-2011, 10:50 PM

Thank you! I will read through that and see if I can fix it.