Hi guys, I need to have drop shadows for the 3 images(prayer, support, events) with disturbing the bg image i tried a lot but the positioning is wierd!.... also tell me about wer to use ID's & Classes's i found on net that ID is for unique element & class is for Multiple elements... is that correct? please do correct me if u find anything wrong in my code.... My Html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>PEACE BLESSING CHURCH MINISTRIES - HOME</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="style1.css"> </head> <body> <div id="container"> <div id="menu"> <ul> <li><a href="">Contact Us</a></li> <li><a href="">School</a></li> <li><a href="">Social Work</a></li> <li><a href="">Our Ministries</a></li> <li><a href="aboutus.htm">About Us</a></li> <li><a href="index.htm">Home</a></li> </ul> </div> <div class="lefttop"> <div id="inner"> Mike </div> </div> <div id="banner"> banner </div> <div id="leftcontent"> </div> <div class="centercontent"> <div id="para1"> <p>Peace Blessing Church was started in the year 1976 with a vision to reach the people of India with the Word of God. For this, God chose Rev.V.John Selvaraj and at the age of 20 he committed his life for God’s service. When the question arose as to where God wanted him to carry out this mission, God guided our dear pastor to Tindivanam. Tindivanam is a town with a total population of about 4 lakhs people. Amongst this huge population only 0.1% are Christians. The rest belong to various religions and community. Idolatry and superstition are a tradition in this area</p> </div> <div id="para2"> <p> Moreover, Tindivanam has no water body and it is a very dry land. It was not so easy at the beginning to do the Lord’s work here. But He that has called is faithful and He led our dear Pastor. There was no much result at the start. But the Word of God says, “Those who sow in tears shall reap in joy. He who continually goes forth weeping, bearing seed for sowing, shall doubtless come again with rejoicing bringing his sheaves with him†Yes, the tearful prayers did bring much fruit. Thenceforth the Pastor and the believers worked hard to achieve the objective of the church </p> </div> <div class="imgs"> <div id="img1"> <img src="images/img-event.gif" alt="Peace Blessing Church Ministries - Events"/> </div> <div id="img2"> <img src="images/prayer-img.gif" alt="Peace Blessing Church Ministries - Prayer"/> </div> <div id="img3"> <img src="images/support-img.gif" alt="Peace Blessing Church Ministries - Support"/> </div> </div> <div class="txts"> <div id="text1"> Events </div> <div id="text2"> Prayers </div> <div id="text3"> Support </div> </div> </div> <div id="rightcontent"> rightcontent </div> <!--<div id="footer">footer</div>--> </div> </body> </html> CSS: *{ margin:0; padding:0; } #container{ width:780px; border:1px solid #808080; background-color:red; margin:0px auto; } #menu{ height:40px; width:780px; font-family:verdana; font-size:11px; background-color:gray; /*background-image:url('images/content-tmenu.gif');*/ } #menu ul{ width:100%; height:40px; background:black url('images/amenu1.gif') center center; } #menu ul li{ display:inline; } #menu ul li a{ float:right; padding: 13px 19px; text-decoration:none; color:#ffffff; border-right: 1px solid #993366;} #menu ul li a:hover{ padding-top: 15px; padding-bottom:12px; text-decoration:none; color:#ffffff; background:black url('images/amenuhover1.gif') center center; } .lefttop{ float:left; width:217px; height:207px; background-image:url('images/content-topleft.gif'); } .lefttop #inner{ padding:0px; margin:25px; } #banner{ float:left; width:563px; height:207px; background-color:green; background-image:url('images/content-banner.gif'); } #leftcontent{ width:217px; height:454px; background-color:darkgreen; float:left; display:inline; background-image:url('images/content-left.gif'); } .centercontent{ background-colorrange; width:392px; height:454px; float:left; background-image:url('images/content-bg.gif'); } .centercontent #para1{ padding:20px 10px 0px 3px; color:#ffffff; font-family:verdana; font-size:11px; text-align:justify; line-height:130%; text-indent:1cm; } .centercontent #para2{ padding:20px 10px 0px 3px; color:#ffffff; font-family:verdana; font-size:11px; text-align:justify; line-height:130%; text-indent:1cm; } .centercontent .imgs{ padding-left:15px; padding-top:10px; } .centercontent #img1{ margin:20px 240px 0px 3px; } .centercontent #img2{ margin:-65.5px 125px 0px 123px; } .centercontent #img3{ margin:-65.5px 10px 0px 243px; } .centercontent .txts{ color:#ffffff; font-family:verdana; font-size:10px; } .centercontent #text1{ margin:0px 0px 0px 55px; } .centercontent #text2{ margin:-13px 0px 0px 170px; } .centercontent #text3{ margin:-13px 0px 0px 290px; } #rightcontent{ float:left; width:171px; height:454px; background-colorurple; display:inline; background-image:url('images/content-right.gif'); } /* #footer{ background-color:gray; height:25px; clear:both; } */
Blimey, that's a lot of posted code Firstly, essentially the difference between ids and classes is that ids are unique - can only be used once in a page - and classes can be used many times. In this respect you would normally find that gross structural elements such as major page layout components will be 'ids' and minor formatting of text, images and so on will be classes. In this respect you've got a few of your divs the 'wrong' way round, I'd expect 'centercontent' to be an id and the para(s) classes. There's a couple of things that jump out from your code. For one, there doesn't seem to be any need to define individual classes for your paragraphs as para1 and para2 have the same definition. You could simply use one class 'para' for both. You've also got some pretty precise positioning using margins going on. It's usually a good idea to get your 'foundations' built in a more robust manner - such as floats or (keep it quiet) tables where nothing else will do. Using margins for large scale positioning can lead you into complex setups that can be difficult to maintain or adapt. Personally I always try to use margins/padding only for small (say, <10px) adjustments of layout, rather than for on-screen positioning, if you see what I mean. From the look of your code you've got three photos and three bits of text beneath them, and this is a classic example of where a <table> is probably the simplest answer. A lot of CSS purists frown on using tables at all but in reality sometimes they're the best and simplest way to do things. Hope some of this helps. Jon
i hav changed my coding... also used tables instead of margins or padding to position them .... HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="menu"> <ul> <li><a href="">Contact Us</a></li> <li><a href="">School</a></li> <li><a href="">Social Work</a></li> <li><a href="">Our Ministries</a></li> <li><a href="aboutus.htm">About Us</a></li> <li><a href="index.htm">Home</a></li> </ul> </div> <div id="lefttop"> <div class="inner"> Mike </div> </div> <div id="banner"> banner </div> <div id="leftcontent"> </div> <div id="centercontent"> <div class="para1"> <p>Peace Blessing Church was started in the year 1976 with a vision to reach the people of India with the Word of God. For this, God chose Rev.V.John Selvaraj and at the age of 20 he committed his life for God’s service. When the question arose as to where God wanted him to carry out this mission, God guided our dear pastor to Tindivanam. Tindivanam is a town with a total population of about 4 lakhs people. Amongst this huge population only 0.1% are Christians. The rest belong to various religions and community. Idolatry and superstition are a tradition in this area</p> </div> <div class="para2"> <p> Moreover, Tindivanam has no water body and it is a very dry land. It was not so easy at the beginning to do the Lord’s work here. But He that has called is faithful and He led our dear Pastor. There was no much result at the start. But the Word of God says, “Those who sow in tears shall reap in joy. He who continually goes forth weeping, bearing seed for sowing, shall doubtless come again with rejoicing bringing his sheaves with him†Yes, the tearful prayers did bring much fruit. Thenceforth the Pastor and the believers worked hard to achieve the objective of the church </p> </div> <!-- <div class="imgs"> <ul> <li><img src="images/img-event.gif" width="110px" height="61px" alt=""></li> <li><img src="images/prayer-img.gif" width="110px" height="61px" alt=""></li> <li><img src="images/support-img.gif" width="110px" height="61px" alt=""></li> </ul> </div> --> <!-- <div id="img1"> <img src="images/img-event.gif" alt="Peace Blessing Church Ministries - Events"/> </div> <div id="img2"> <img src="images/prayer-img.gif" alt="Peace Blessing Church Ministries - Prayer"/> </div> <div id="img3"> <img src="images/support-img.gif" alt="Peace Blessing Church Ministries - Support"/> </div> --> <!-- <div class="txts"> <div id="text1"> Events </div> <div id="text2"> Prayers </div> <div id="text3"> Support </div> </div>--> <div class="txts"> <table width="392px"> <tr> <td><img src="images/img-event.gif" width="110px" height="61px" alt=""></td> <td><img src="images/prayer-img.gif" width="110px" height="61px" alt=""></td> <td><img src="images/support-img.gif" width="110px" height="61px" alt=""></td> </tr> <tr> <td>Events</td> <td>Prayer</td> <td>Support</td> </tr> </table> <!-- <ul> <li>Events</li> <li>Prayer</li> <li>Support</li> </ul> --> </div> </div> <div id="rightcontent"> rightcontent </div> <!--<div id="footer">footer</div>--> </div> </body> </html> Code (markup): CSS: *{ margin:0; padding:0; } #container{ width:780px; border:1px solid #808080; background-color:red; margin:0px auto; } #menu{ height:40px; width:780px; font-family:verdana; font-size:11px; /*background-image:url('images/content-tmenu.gif');*/ } #menu ul{ width:100%; height:40px; background:black url('images/amenu1.gif') center center; } #menu ul li{ display:inline; } #menu ul li a{ float:right; padding: 13px 19px; text-decoration:none; color:#ffffff; border-right: 1px solid #993366;} #menu ul li a:hover{ padding-top: 15px; padding-bottom:12px; text-decoration:none; color:#ffffff; background:black url('images/amenuhover1.gif') center center; } #lefttop{ float:left; width:217px; height:207px; background-image:url('images/content-topleft.gif'); } #lefttop .inner{ padding:0px; margin:25px; } #banner{ float:left; width:563px; height:207px; background-color:green; background-image:url('images/content-banner.gif'); } #leftcontent{ width:217px; height:454px; background-color:darkgreen; float:left; display:inline; background-image:url('images/content-left.gif'); } #centercontent{ background-color:orange; width:392px; height:454px; float:left; background-image:url('images/content-bg.gif'); } #centercontent .para1{ padding:20px 10px 0px 3px; color:#ffffff; font-family:verdana; font-size:11px; text-align:justify; line-height:130%; text-indent:1cm; } #centercontent .para2{ padding:20px 10px 0px 3px; color:#ffffff; font-family:verdana; font-size:11px; text-align:justify; line-height:130%; text-indent:1cm; } /* #centercontent .imgs ul{ display: block; padding-left:15px; padding-top:15px; margin: 0 0 1em 0; padding: 0; } #centercontent .imgs li{ display: inline; list-style-type: none; margin: 0; padding: 0 0.5em 0 0; } #centercontent .imgs li img{ border:none; } */ #centercontent .txts{ padding-top:20px; } #centercontent .txts td{ color:#ffffff; font-family:verdana; font-size:10px; text-align:center; } /* #centercontent .txts ul{ padding-left:15px; } #centercontent .txts li{ display: inline; list-style-type: none; padding: 0 75px 0 0; } */ /* .centercontent .imgs{ padding-left:15px; padding-top:10px; } .centercontent #img1{ margin:20px 240px 0px 3px; } .centercontent #img2{ margin:-65.5px 125px 0px 123px; } .centercontent #img3{ margin:-65.5px 10px 0px 243px; } */ /* .centercontent .txts{ color:#ffffff; font-family:verdana; font-size:10px; } .centercontent #text1{ margin:0px 0px 0px 55px; } .centercontent #text2{ margin:-13px 0px 0px 170px; } .centercontent #text3{ margin:-13px 0px 0px 290px; } */ #rightcontent{ float:left; width:171px; height:454px; background-color:purple; display:inline; background-image:url('images/content-right.gif'); } /* #footer{ background-color:gray; height:25px; clear:both; } */ Code (markup):
The code you first posted looked pretty good. I guess a church site should have clean and righteous code anyway. Most people do drop-shadows two ways (that I can think of): they either position something with the shadow the same way they would have positioned the image, and then absolutely position the image itself over the dropshadow. This means that the image would have to be a child of whatever held the shadow. The other way is to have multiple little divs. Deathshadow did this in his "one image for all borders" thing: http://battletech.hopto.org/html_tutorials/eightcorners/template.html Your layout doesn't seem to be one of the few that really need a table for anything.