SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    Boston
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css image questions, please help

    hello,
    I am still working on this simple website, www.bc.edu/ops <-- no pictures
    Now, my boss asked me to add two pictures this way www.bc.edu/ops/default1.html <-- this is the web page with the pictures

    but the problem is that whenever you resize the window the pictures and the description of the picture move and get all wrong. I have tryed several solutions to the problem but have not foun the correct one.
    What can I do to fix it?

    This is the css:

    .macpic1
    {
    border: 1px solid #000000;
    margin-bottom: 10px;
    position: relative;
    left: 35px;
    top: 0px;
    }

    .macpic2
    {
    border: 1px solid #000000;
    margin-bottom: 10px;
    position: relative;
    left: 125px;
    top: 0px;
    }

    .picdescription
    {
    display: inline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.78em;
    background-color: #CCCCCC;
    background-position: center center;
    margin-bottom: 30px;
    margin-right: 99px;
    margin-left: 120px;
    padding: 2px;
    margin-top: 4px;
    }


    and this is the html:

    <div align="center"> <img class="macpic1" src="metaelements/computer_room1.jpg" alt="Console Area" />
    <img class="macpic2" src="metaelements/computer_room2.jpg" alt="Machine Room Servers" />
    </div>
    <div>
    <p class="picdescription">Console Area</p>
    <p class="picdescription">Machine Room Servers</p>
    </div>

    Suggestions are welcome.
    Thanks to all.

  2. #2
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would do something like this:
    HTML Code:
    <div class="image">
       <img src="1.jpg" alt="blah" />
       <p>blahblah</p>
    </div>
    <div class="image">
       <img src="2.jpg" alt="blah" />
       <p>blahblah</p>
    </div>
    Code:
    .image {
        float: left;
        width: 49%;    /* to prevent rounding errors */
        margin: 0;
        padding: 0;
        text-align: center;    /* because IE doesn't understand margin:auto */
    }
    
    .image img {
        margin: 1em auto;
        border: 1px solid #000;
    }
    
    .image p {
        margin: 1em;
        font-size: .8em;
    }


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
  •