• Locked
2 replies [Last post]
Tue, 2010-12-14 22:45
Bizurko
Bizurko's picture
Offline
newbie
Colerain
Last seen: 12 years 7 weeks ago
Colerain
Timezone: GMT-5
Joined: 2010-12-14
Posts: 2
Points: 3

Hi, I'm fairly new to css, and I have a question about alignments. I want to take side-banners and put them on the right and left side of my website. I am currently using an external cascading style sheet. I looked at tutorials, but all of the tutorials I've seen are for css within the html document. I currently have the left banner, but the right banner wont show. I was wondering if anyone could help me to put both banners up at once, both aligned to the sides. This is the code i have so far:

External CSS:

.right
{
float:right;
}
 
body{
background-color: #330000;
background-image: url('pictures/untitled.bmp'); 
background-repeat: repeat-y;
height:100%;
width:100%;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
 
#contentbox
{
 
	background:#292421;
	height:1000px;
	width:1000px;
	position:absolute;
	top: 150px;
	left: 300px;
 
}
#header
{
	background-color:#330000; 
	background-image:url(pictures/header.gif);
	position:fixed;
	left:500px;
	width:650px;
	height:110px;
	background-repeat:no-repeat;
 
}
#banner
{
	background-color:#330000;
	background-image:url(pictures/banner.bmp);
	position:absolute;
	float:right;
	height:100%;
	background-repeat:repeat-y;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>
Holiday Website
</title
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
</div>
  <div id="bar">
  </div>
    <div id="contentbox">
    </div>
       <div id="banner">
	   <div class="right">
	   </div>
       </div>
</body>
</html>

Top
Tags:
Tue, 2010-12-14 22:53
#1
Bizurko
Bizurko's picture
Offline
newbie
Colerain
Last seen: 12 years 7 weeks ago
Colerain
Timezone: GMT-5
Joined: 2010-12-14
Posts: 2
Points: 3

About untitled

The untitled.bmp is the banner.bmp flipped, just so there isn't any confusion.

Top
Tue, 2010-12-14 23:55
#2
regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 7 years 39 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

Well I can tell you for a

Well I can tell you for a start that you should not be using position absolute or fixed if you are new to css.
What you are looking for is a 3 column layout. You can look at the following site, where the layout html and css is already done for you.
http://layouts.ironmyers.com/
All you have to do is add your own content and images.

P.S. Unless you provide a link to your site, we have no idea what your pictures look like Cool

http://regiadecor.com

Top
  • Locked