SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Images & Text

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Images & Text

    Images & Text

    I was wondering if you look at the following example how he has his picture on top of an image with some text around it. Now I imagine that the main image is a background image and his picture and text are formatted somehow so that it appears how it does.

    http://shiflett.org/

    Now I have fiddled around in many ways but canít get it to render exactly how he has done on his website.

    This is what I have so far

    CSS

    Code:
    .biography
    {
    background-image:url(images/picture.gif); 
    width: 175px; 
    height: 140px;
    }
    
    .biographyimage
    {
    width: 80px;
    height: 100px;
    }
    HTML

    Code:
    <div class="biography">
    
    <p class="pmenu"><img src="images/simonjohnstone.gif" class="biographyimage" />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
    </div>

    How do I get it so that I can render the words and biographyimage like on the website.


    Cheers for any advice

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK I got bored and built it for you

    Frankly I couldn't be bothered with the little arrow bit in the middle, but the rest is identical..

    All images needed are attached.

    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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Struggling's Biography Box</title>
    <style type="text/css">
    <!--
    .biography {
    width:185px;
    height:127px;
    background:#210 url(biography-bg.png) repeat-x;
    border:1px solid #ccccbb;
    color:#bbaa99;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:0.7em;
    padding:14px 11px 0 11px;
    }
    
    .biography a {
    color:#d60;
    text-decoration:none;
    }
    
    .biography a:hover {
    text-decoration:underline;
    }
    
    .biography-img {
    float:left;
    margin-right:10px;
    }
    -->
    </style>
    </head>
    <body>
    
      <div class="biography">
        <img src="biography-img.png" alt="Struggling" width="81" height="99" class="biography-img" />
        <a href="#" title="Struggling">Struggling</a> is an author and speaker who leads the web application practice at <a href="#" title="SitePoint">SitePoint</a>.
      </div>
    
    </body>
    </html>
    Which will produce this in all browsers:
    Attached Images Attached Images
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank You very much just exactly what I was after.

    Cheers for your time

  4. #4
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem

    Glad I could help.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication


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
  •