Hey all, I am having an issue with this and I do not know how I am supposed to do this, I want to create three <div>'s and they all have a different background color, and are located on the bottom of the screen.
In those <div>'s there would be text and a picture of whats going on with the troop (scout website) and it would get updated often. Now I need to put three of them in there of a width of 297 x 171px. I cant align it vertically with the slide show and the info bar that is right on top and then I can fit them all horizontally on the page but in PS they fit so i know I can do it just how. Here is the code:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="index.css" type="text/css" rel="stylesheet"/>
<title>1 DH im. Stefana Czarnieckiego "Zapraszamy do naszego szeregu" | Dom </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js"></script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [378, 408], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["pictures/Picture 001.jpg"],
["pictures/Picture 008.jpg"],
["pictures/Picture 017.jpg"],
["pictures/Picture 027.jpg"]
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
<style type="text/css">
.style1 {
padding-left:25px;
padding-top:20px;
text-align: right;
}
.style2 {
float:right;
width:457px;
height:432px;
}
</style>
</head>
<body>
<div id="main">
<a href="index.html">
<img id="dh" alt="1DH_im_Stefana_Czarnieckiego" src="images/header.png"/></a><a href="http://zhpzlot2010.org/"><img id="zlot" alt="Zlot2010" src="images/zlot.png"/></a><a href="http://www.zhp.us/"><img id="chicago" alt="60" src="images/60.png"/></a><a href="http://www.harcerzewchicago.org/"><img id="warta" alt="warta" src="images/warta.png"/></a>
<div id="text">
<a href="signup.html">
<img id="first" alt="Zapisz_Się" src="images/zs.jpg"/></a><a href="leaders.html"><img alt="Opiekunowie" src="images/opiek.jpg"/></a><a href="calender.html"><img alt="kalendarz" src="images/kalendarz.jpg"/></a><a href="images.html"><img alt="zdjęcia" src="images/zdjecia.jpg"/></a><a href="news.html"><img alt="wiadomości" src="images/wiadomosci.jpg"/></a><a href="warta.html"><img alt="Informacja_o_Hufcu" src="images/warta.jpg"/></a><a href="meeting.html"><img alt="miejsce_spotakań" src="images/meeting.jpg"/></a><a href="forms.html"><img alt="Formularze" src="images/forms.jpg"/></a><a href="contact.php"><img alt="Kontakt" src="images/contact.jpg"/></a>
<div id="writing" class="style2">
<p>Text</p>
</div>
<div id="blank" class="style1"><div id="fadeshow1"></div></div>
<div id="news_rss">
<img alt="Informacja_o_przyszłych_zbiórkach_lub_imprezach,_wiadomości" src="images/bar.jpg"/>
<div id="sbox">
<p>text</p>
</div>
</div>
</div>
</div>
</body>
</html>
here is the css :
HTML Code:
body {
background-image: url(images/background.jpg);
text-align:center;
}
img {
border: 0
}
div#main{
background-image: url(images/MainBody_BG.jpg);
width: 992px;
height: 909px;
margin: 0 auto;
}
div#text{
background-image: url(images/black2Grey.jpg);
background-repeat:repeat-x;
padding-top:10px;
margin: 0 auto;
width:964px;
height:794px;
}
div#sbox {
width:297px;
height:171px;
background-image: url(images/sbox.jpg);
}
img#zlot{
padding-right:47px;
padding-bottom:19px;
}
img#chicago{
padding-bottom:8px;
}
img#warta{
padding-left:47px;
padding-right:20px;
padding-bottom:9px;
}
img#dh{
padding-right:15px;
}
and here is the website, on the bottom you will see what I am talking about.
http://www.chicagoaviation.org/1dh/index.html
any help would be great!
11-07-2009, 08:23 PM
aligning <div>'s three in a row and horizontaly
Linear Mode
