31 users online (0 members and 31 guests)  


  Results 1 to 5 of 5

Related

  1. Replies: 1
  2. Image to Text Rollover    Forum: Website Scripts Forum
    Replies: 0
  3. Aligning Text in Tables    Forum: HTML Forum
    Replies: 5
  4. how to change text dynamically with image?    Forum: Website Scripts Forum
    Replies: 0
  5. image map to text    Forum: HTML Forum
    Replies: 2
  1. #1
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Question Aligning Text to an image ...

    I'm new to CSS, so I don't even know if what I'm trying to do is the best way, or even possible ...
    I've got about 5 logos, all of which are identical apart from a line of text along the bottom.
    What I thought of doing was to have the logo as a background image, and the text as normal text, so what I tried to do is to have a fixed height/width DIV - which works fine for the image - but I need to fix the text to the bottom of the box.

    Any help on sticking the text to the bottom would be greatly appreciated!

  2. #2
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: Aligning Text to an image ...

    Oh yeah - the code I've got so far is:
    Code:
    <html>
    <head>
    
    <style>
    .logo {
    width: 128px;
    height: 128px;
    border-width: 2px;
    background-image: url(circle.jpg);
    position: absolute;
    font: bold 12px/.99 "Verdana"; text-align: center; vertical-align: text-botttom;
    }
    </style>
    </head>
    <body>
    <div class="logo">Logo Text</div>
    </body>
    </html>
    In case that makes it any clearer!

  3. #3
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Aligning Text to an image ...

    Hi there DeadMeatGF,

    and a warm welcome to these forums.

    Here is one method....
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>text positioning within div</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    <!--
    .logo {
         width: 128px;
         line-height:20px;   /*note that line height plus padding-top=your original height value*/
         padding-top:108px;
         border:2px solid #000;
         background-image: url(circle.jpg);
         font-family:verdana,sans-serif;
         font-size:12px;
         font-weight:bold;
         text-align: center; 
     }
    -->
    </style>
    
    </head>
    <body>
    
    <div class="logo">Logo Text</div>
    
    </body>
    </html>
    
    ..note that absolute positioning is not required.

  4. #4
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Talking Re: Aligning Text to an image ...

    Quote Originally Posted by coothead
    ..note that absolute positioning is not required.
    Thanks for that, I shall try it out forthwith!

    One further question,
    when you say that absolute positioning is not required, do you mean just that, or will absoloute positioning break it?
    The reason I ask is because the absolute positioning is there to place the logos on the page - I have two per page, one top left, and one top right.

  5. #5
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Aligning Text to an image ...

    Hi there DeadMeatGF,
    when you say that absolute positioning is not required, do you mean just that, or will absoloute positioning break it?
    I am sorry about that.
    What I should have said was that the method was not dependent on absolute positioning.



Tags for this Thread