4 replies [Last post]
werkzeug
Offline
newbie
Australia
Last seen: 11 years 47 weeks ago
Australia
Timezone: GMT+10
Joined: 2011-01-08
Posts: 3
Points: 4

Hello Forum Members. I am new here and hope you all have had a good Christmas break. I live in Queensland Australia where we are plagued by huge floods. I want to learn how to add three images across the bottom of the page. Unfortunately it is done in inline CSS and need to keep it that way because of the database connected to it. Can you help?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
 
 
<meta http-equiv="Content-Language" content="en-us">
 
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<!-- 
     This Website was created by Rolf Vaessen
//-->
<title>Adventist-Radio-Australia</title>
 
<style type="text/css">
.textstyle0 {font-family:Arial;font-weight:bold;font-style:normal;font-size:14pt;text-decoration:none;color:#ffffff;}
.textstyle1 {font-family:Arial;font-weight:bold;font-style:normal;font-size:12pt;text-decoration:none;color:#2f2d2e;}
.textstyle2 {font-family:Arial;font-weight:normal;font-style:normal;font-size:12pt;text-decoration:none;color:#2f2d2e;}
.textstyle3 {font-family:Arial;font-weight:normal;font-style:normal;font-size:10pt;text-decoration:none;color:#2f2d2e;}
.textstyle4 {font-family:Arial;font-weight:bold;font-style:normal;font-size:10pt;text-decoration:none;color:#2f2d2e;}
.textstyle5 {font-family:Arial;font-weight:normal;font-style:italic;font-size:8pt;text-decoration:none;color:#4b4a4b;}
</style>
 
<style type="text/css">
div.Object1513 { position:absolute; top:0px; left:0px; z-index:0; }
div.Object1513 table { width: auto; }
div.Object1514 { position:absolute; top:101px; left:89px; z-index:1; }
div.Object1514 table { width: auto; }
div.Object1515 { position:absolute; top:185px; left:460px; z-index:2; }
div.Object1515 table { width: auto; }
div.Object1516 { position:absolute; top:186px; left:89px; z-index:3; }
div.Object1516 table { width: auto; }
div.Object1517 { position:absolute; top:238px; left:89px; z-index:4; }
div.Object1517 table { width: auto; }
div.Object1518 { position:absolute; top:291px; left:89px; z-index:5; }
div.Object1518 table { width: auto; }
div.Object1519 { position:absolute; top:344px; left:89px; z-index:6; }
div.Object1519 table { width: auto; }
div.Object1520 { position:absolute; top:397px; left:89px; z-index:7; }
div.Object1520 table { width: auto; }
div.Object1521 { position:absolute; top:449px; left:89px; z-index:8; background: #FFF; height: 620px; }
div.Object1521 table { width: auto; }
div.Object1522 { position:absolute; top:687px; left:107px; z-index:9; }
div.Object1522 table { width: auto; }
div.Object1523 { position:absolute; top:687px; left:335px; z-index:10; }
div.Object1523 table { width: auto; }
div.Object1524 { position:absolute; top:687px; left:559px; z-index:11; }
div.Object1524 table { width: auto; }
div.Object1525 { position:absolute; top:687px; left:787px; z-index:12; }
div.Object1525 table { width: auto; }
div.Object1526 { position:absolute; top:1067px; left:89px; z-index:13; }
div.Object1526 table { width: auto; }
div.Object1527 { position:absolute; top:101px; left:864px; z-index:14; }
div.Object1527 table { width: auto; }
div.Object1528 { position:absolute; top:101px; left:712px; z-index:15; }
div.Object1528 table { width: auto; }
div.Object1529 { position:absolute; top:101px; left:561px; z-index:16; }
div.Object1529 table { width: auto; }
div.Object1530 { position:absolute; top:101px; left:410px; z-index:17; }
div.Object1530 table { width: auto; }
div.Object1531 { position:absolute; top:132px; left:106px; z-index:18; }
div.Object1531 table { width: auto; }
div.Object1532 { position:absolute; top:474px; left:104px; z-index:19; }
div.Object1532 table { width: auto; }
div.Object1533 { position:absolute; top:474px; left:565px; z-index:20; }
div.Object1533 table { width: auto; }
div.Object1534 { position:absolute; top:709px; left:108px; z-index:21; }
div.Object1534 table { width: auto; }
div.Object1535 { position:absolute; top:709px; left:336px; z-index:22; }
div.Object1535 table { width: auto; }
div.Object1536 { position:absolute; top:709px; left:560px; z-index:23; }
div.Object1536 table { width: auto; }
div.Object1537 { position:absolute; top:709px; left:788px; z-index:24; }
div.Object1537 table { width: auto; }
div.Object1538 { position:absolute; top:1082px; left:107px; z-index:25; }
div.Object1538 table { width: auto; }
div#radio_search { position:absolute; top:830px; left:107px; z-index:26; width: 410px; 
									 padding: 10px; background-color: #780514; color: #FFF; }
div#radio_search h3 { padding: 0; margin: 0;}
div#radio_search p { padding: 3px 0; margin: 0;}
</style>
 
 
<!-- centering -->
<style type="text/css">
body {
 margin: 0px;
 padding : 0px;
 text-align: center;
 height: 100%;
 width: 100%;
 background-color: #780513;
}
 
 
a:link {
 color: #365dd9;
}
 
 
a:visited  {
 color: #365dd9;
}
 
</style>
<!-- --------- -->
 
 
 
<!-- centering -->
<style type="text/css">
#container { position:relative; margin: 0px auto 0 auto; height: 100%; width:1100px; text-align:left; padding-left:0px;}
</style>
 
 
<!-- centering -->
<!-- --------- -->
 
</head>
 
<body  >
 
 
<!-- centering -->
<div id="container">
<!-- --------- -->
 
<table style="height:1100px;" width="1100" border=0 cellspacing=0 cellpadding=0>
<tr>
<td>
<br>
</td>
</tr>
</table>
 
<div class="Object1513">
	<img style="border:none;" src="files/IMG_0.jpg"  alt="" width=1055 height=800></div>
 
<div class="Object1514">
	<img style="border:none;" src="files/IMG_1.jpg"  alt="" width=927 height=84></div>
 
<div class="Object1515">
	<img style="border:none;" src="files/IMG_2.jpg"  alt="" width=555 height=264></div>
 
<div class="Object1516"><a href="http://www.come2jesus.info" >
	<img style="border:none;" src="files/IMG_3.jpg"  alt="" width=373 height=53></a></div>
 
<div class="Object1517"><a href="" >
	<img style="border:none;" src="files/IMG_4.jpg"  alt="" width=373 height=53></a></div>
 
<div class="Object1518"><a href="http://www.come2jesus.com.au" >
	<img style="border:none;" src="files/IMG_5.jpg"  alt="" width=373 height=53></a></div>
 
<div class="Object1519"><a href="http://www.rolfvaessen.com" >
	<img style="border:none;" src="files/IMG_6.jpg"  alt="" width=373 height=53></a></div>
 
<div class="Object1520"><a href="http://www.rolfvaessen.com" >
	<img style="border:none;" src="files/IMG_7.jpg"  alt="" width=373 height=53></a></div>
 
<div class="Object1521">
	<img style="border:none;" src="files/IMG_8.jpg"  alt="" width=926 height=544></div>
 
<div class="Object1522">
	<img style="border:none;" src="files/IMG_9.jpg"  alt="" width=204 height=4></div>
 
<div class="Object1523">
	<img style="border:none;" src="files/IMG_9.jpg"  alt="" width=204 height=4></div>
 
<div class="Object1524">
	<img style="border:none;" src="files/IMG_9.jpg"  alt="" width=204 height=4></div>
 
<div class="Object1525">
	<img style="border:none;" src="files/IMG_9.jpg"  alt="" width=204 height=4></div>
 
<div class="Object1526">
	<img style="border:none;" src="files/IMG_13.jpg"  alt="" width=926 height=46></div>
 
<div class="Object1527"><a href="contact.html" >
	<img style="border:none;" src="files/IMG_14.jpg"  alt="" width=152 height=84></a></div>
 
<div class="Object1528"><a href="services.html" >
	<img style="border:none;" src="files/IMG_15.jpg"  alt="" width=152 height=84></a></div>
 
<div class="Object1529"><a href="about.html" >
	<img style="border:none;" src="files/IMG_16.jpg"  alt="" width=152 height=84></a></div>
 
<div class="Object1530"><a href="index.php" >
	<img style="border:none;" src="files/IMG_17.jpg"  alt="" width=152 height=67></a></div>
 
<div class="Object1531"><table border=0 cellspacing=0 cellpadding=0><tr><td valign="top" align="left"><div class="text-align:left;margin-left:0px;text-indent:0px;"><span class="textstyle0">Adventist Radio Australia<br>
</span></div></td></tr></table></div>
 
<div id="radio_search">
	<h3>Find Adventist Radio Near You</h3>
		<form action="index.php#radio_search" method="post">
		<div>
			<label for="postcode">Enter Postcode: </label>
			<input type="text" name="postcode" id="postcode" value="" />
			<input type="submit" name="search" value="Search" />
		</div>
	</form>
</div>
 
<div class="Object1532"><table border=0 cellspacing=0 cellpadding=0><tr><td valign="top" align="left"><div class="text-align:left;margin-left:0px;text-indent:0px;"><span class="textstyle1">This website was created by Rolf Vaessen to offer all <br>
Australians to find our Christian FM Radio station in any <br>
part of Australia.<br>
 <br>
</span><span class="textstyle2"> </span><span class="textstyle1">Our Radio stations are found all over Australia including <br>
Tasmania and providing you with clean listening. <br>
<br>
Our programs include health segments, children and <br>
youth stories as well as powerful Gospel preaching.<br>
We do not provide any entertainment.<br>
</span></div></td></tr></table></div>
 
<div class="Object1533"><table border=0 cellspacing=0 cellpadding=0><tr><td valign="top" align="left"><div class="text-align:left;margin-left:0px;text-indent:0px;"><span class="textstyle2"> </span><span class="textstyle1">Just enter into the search window provided, <br>
the postal code to find the desired frequency. You may have <br>
a friend or relative in a certain town and want him/her to <br>
listen in, then this is the place to come to and find it <br>
<br>
Another reason this site was created, is, that whenever a <br>
broadcast fails, you can contact us to have the Radio <br>
reset as storms and voltage surges can cause it to fail.<br>
Please find in the &#34;CONTACT&#34; page technicians in <br>
different states that look after our equipment.<br>
<br>
</span><span class="textstyle2">P</span></div></td></tr></table></div>
 
<div class="Object1534"><table border=0 cellspacing=0 cellpadding=0><tr><td valign="top" align="left"><div class="text-align:left;margin-left:0px;text-indent:0px;"><span class="textstyle3">Our Christ and Gospel centered <br>
messages are life changing and <br>
has stood the test of time. <br>
<br>
Rest assured that God loves us <br>
sinners, but hates the sin that <br>
separates us from Him.</span><span class="textstyle2"> <br>
</span></div></td></tr></table></div>
 
<div class="Object1535"><table border=0 cellspacing=0 cellpadding=0><tr><td valign="top" align="left"><div class="text-align:left;margin-left:0px;text-indent:0px;"><span class="textstyle3">The New Testament strongly <br>
urges us: </span><span class="textstyle4">&#34;Be ye doers of the <br>
word and not hearers only.&#34;</span><span class="textstyle3"> <br>
<br>
	<br>
</span></div></td></tr></table></div>
 
<div class="Object1536"><table border=0 cellspacing=0 cellpadding=0><tr><td valign="top" align="left"><div class="text-align:left;margin-left:0px;text-indent:0px;"><span class="textstyle3">L</span></div></td></tr></table></div>
 
 
 
 
 
 
 
 
<div class="Object1537" style="position: absolute; left: 591px; top: 750px; width: 399px; height: 186px"><table border=0 cellspacing=0 cellpadding=0><tr><td valign="top" align="left"><div class="text-align:left;margin-left:0px;text-indent:0px;">
	<span class="textstyle3"><b><font size="3">Here is a tribute to our late
	Pastor Walter Sragg. In 1971 he estabilshed Adventist World Radio. He 
	was a speaker for the "Voice Of Prophecy" and director of the Radio-TV
	department of the Australasian division. "There is hope for a tree, if it
	is cut down, it will sprout again, and its new shoots will not fail."Job 14:7</font></b><br>
	</span></div></td></tr></table></div>
 
<div class="Object1538"><table border=0 cellspacing=0 cellpadding=0><tr><td valign="top" align="left"><div class="text-align:left;margin-left:0px;text-indent:0px;">
	<span class="textstyle5">Copyrights ADVENTIST-RADIO-AUSTRALIA<br>
	</span></div></td></tr></table></div>
</div>
<!-- --------- -->
 
 
 
</body>
</html>

Connor
Connor's picture
Offline
Regular
Last seen: 11 years 42 weeks ago
Timezone: GMT-5
Joined: 2010-11-26
Posts: 20
Points: 31

My answer

If you want the images at the bottom of the page then put the <img /> at the bottom of your html.

<html>
<head>
<title>pics</title>
<style type="text/css">
div#center{width:608px; margin:auto;}
img{display:inline; height:200px; width:200px;}
</style>
</head>
 
<body>
<div id="center">
	<img src="http://www.greendiary.com/images/floods-in-australia_246.jpg" />
	<img src="http://www.trendsupdater.com/wp-content/uploads/2011/01/australia-floods.jpg" />
	<img src="http://www.independent.co.uk/multimedia/archive/00177/australia-flood-REU_177221t.jpg" />
</div>
</body>
</html>

If you don't want the pics centered then just take out the <div></div> tags and the css that goes with them. In the img css the height and width properties set all the images to the same size.

There are so many things to learn and so little time.

werkzeug
Offline
newbie
Australia
Last seen: 11 years 47 weeks ago
Australia
Timezone: GMT+10
Joined: 2011-01-08
Posts: 3
Points: 4

Beginners CSS Questions,positioning,

Thank you Connor. Is there a bracket missing before title and must I put this in? How does the browser recognize the pics? You notice that the objects all have numbers. Instead of the http://, can you guide me with more details what to put there? TIA

Connor
Connor's picture
Offline
Regular
Last seen: 11 years 42 weeks ago
Timezone: GMT-5
Joined: 2010-11-26
Posts: 20
Points: 31

werkzeug wrote: Thank you

werkzeug wrote:

Thank you Connor. Is there a bracket missing before title and must I put this in? How does the browser recognize the pics? You notice that the objects all have numbers. Instead of the http://, can you guide me with more details what to put there? TIA

Oh do you mean the doctype tag? Yes you should always put this in your markup. I just got a little lazy and didn't type one. If you don't declare a doctype some things may not display properly. For more on this check out:
http://www.w3schools.com/tags/tag_DOCTYPE.asp

Now for images... Images are displayed on a website by linking to the image file. Say I have a website saved in a folder and an image also in that folder that I wanted to put on the website. In my HTML I would put <img src="picture.png" />

If the pic was in say my documents it would be <img src="c:/users/connor/my documents/picture.png" />. For more on images check out:
http://w3schools.com/html/html_images.asp

And if you want to learn more CSS check out the CSS tut on w3schools.

There are so many things to learn and so little time.

werkzeug
Offline
newbie
Australia
Last seen: 11 years 47 weeks ago
Australia
Timezone: GMT+10
Joined: 2011-01-08
Posts: 3
Points: 4

CSS internal

Thanks again Connor. Are you the only Poster here? I do not think that your suggestion is helping me as all the items are numbered. Your answer sounded so good but when I applied it, it messed up my page. Thanks for trying.