Skip navigation
Currently Being Moderated

Newbie Here....Placing two logo side by side and a caption below the second one

May 8, 2013 4:03 AM

Hi,

 

It's been just few days learning to buid a site using css. I want to add two logos (png format) in my header div side by side and add a caption below the second logo which is on right and also I'd like to position the second logo bit lower than the first logo.

 

Here's the style for the div #header I have created

 

#header {

          width: 980px;

          height: 181px;

          margin: 0 auto;

          margin-left:20px;

          padding-left:15px;

          background: url(images/img02.jpg) no-repeat left top;

}

 

 

Should I created two more div for the two logos and what about the caption.

 

I want the result something like thistest.gif

 
Replies
  • Currently Being Moderated
    May 8, 2013 4:42 AM   in reply to jonahmanos

    Use a float to place your image and with additional CSS you can add your caption.

    See this

    http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2013 5:37 AM   in reply to jonahmanos

    I do it like below:

     

    <div id="logoWrapper">

    <div id="logoLeft">First Logo</div><!-- end logoLeft -->

    <div id="logoRight">Second logo plus caption

    <p>Caption goes here</p>

    </div><!-- end logoRight -->

    </div><!-- end logoWrapper -->

     

    CSS:

     

    #logoWrapper {

    width: 330px; /* adjust to accomodate width of both logos */

    overflow: hidden;

    }

    #logoLeft {

    float: left:

    width: 70px; /*adjust width to suit*/

    }

    #logoRight {

    float: left:

    width: 250px; /*adjust width to suit*/

    }

    #logoRight p {

    text-align: right;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2013 9:36 AM   in reply to jonahmanos

    Use text-align center:

     

    #logoRight p {

    text-align: center;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2013 10:52 AM   in reply to jonahmanos

    You could also use abolute positioning. Make sure to add "position:relative;" to the header. Then you can place your images "exactly" where you want them within the header div. Just adjust the width and height to match the logos' dimentions, and play with the "left" & "top" elements to make sure they're sitting right where you want them.

     

    css

     

    #header {

    position: relative;    

    width: 980px;

    height: 181px; }

     

    #logo1 {

    position: absolute;

    left: 20px; top: 20px;

    width:100px; height:100px;

    background: url(image1.jpg) #000 center top;

    }

    #logo2 {

    position: absolute;

    left: 100px; top: 20px;

    width:100px; height:100px;

    background: url(image2.jpg) #000 center top;

    }

    #logo2-caption {

    position: absolute;

    left: 100px; top: 120px;

    text-align:center;

    width:100px;

    }

     

    html

     

    <div id="header">

     

    <div id="logo1"></div>

    <div id="logo2"></div>

    <div id="logo2-caption">Caption Text</div>

     

    </div>

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2013 11:56 AM   in reply to watermeat

    You could also use abolute positioning.

    Oh pleeeeeeeeze don't tell a new person to use APDivs for something as simple as this.  Positioning is rarely if ever required.

     

    EXAMPLE:

    http://alt-web.com/sandbox/Logo-with-headings.html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 9, 2013 10:53 AM   in reply to Nancy O.

    My aplogies.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points