Results 1 to 2 of 2

Thread: css drop shadows + where to use ID & Class

  1. #1
    Join Date
    Feb 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default css drop shadows + where to use ID & Class

    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:
    Code:
    <!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:
    Code:
    *{
    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;
    }
    */
    Last edited by mikee.jk; 02-21-2008 at 04:53 AM.

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    this is the second time I will tell you...
    when you post computer code, please use [code][/code] tags
    those tags format the text in a way that is easier for us to view and debug your code.


    also is this site live on the web somewhere? its alot easier for us to debug an image problem if we can look at the site as it appears live in multiple browsers.


    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?
    that is correct.. to apply a style to multiple elements you may use a class
    Code:
    <__element__ class="__class__">stuff</__element__>
    and to apply that to a CSS style
    Code:
    element.class {
         property: value;
    }

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •