...

View Full Version : 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:

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>

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 (http://css.maxdesign.com.au/floatutorial/).

Aanga
02-23-2011, 10:50 PM
Thank you! I will read through that and see if I can fix it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum