SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Portland, OR
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Header: 100% width+left text+right image, alignment?

    Hello,

    This is my first no-tables design and I'm not very far at all but I have read a lot of tutorials and information on it.. so be gentle.

    I'm trying to make a header to a page which has a background repeating image, left-aligned text and right aligned image (to sit in the upper right corner of the page). The image is as tall as the header so that isn't a biggie but the text then sits in the upper left corner of the page. I want it to sit either centered or at the bottom of the header. I've tried using the vertical-align parts in many different combinations, using text-bottom, bottom, middle, etc but nothing seems to work. Here's the bare code I've got so far:


    CSS:

    #banner{
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: url(images/topbg.gif);
    font: 16px;
    font-weight: bold;
    }

    #banner img{
    float:right;
    }

    HTML:

    <div id="banner">
    <img src="/images/logout_off.gif" />
    Login
    </div>


    Any ideas?
    Thanks in advance!

  2. #2
    SitePoint Member yojonesy's Avatar
    Join Date
    Sep 2003
    Location
    Prince George, BC, Canada
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey there,

    if i'm reading this right, this is one of those things that CSS isn't too great at. it's one of those arguments the layout table folks keep pointing at (and rightly so i guess).

    anyway, try this. wrap your text (in this case "Login") in some kind of block-level element (a <p>) tag would do, and add some margins/padding to it. here's a quick example:

    xhtml:

    <div id="banner">
    <img src="/images/logout_off.gif" />
    <p>Login</p>
    </div>

    css:

    #banner p {
    margin-top: 20px; /* adjust as needed */
    }

    if this is way off, post a URL we can look at. most of the time that puts it all together.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If the text is to just be a few words that aren't going to wrap then simply set the height of the header to the height of the image and set the line-height to the same size as well.

    Code:
    #banner{
    width: 100%;
    margin: 0;
    padding: 0;
    background:#fff url(images/topbg.gif);
    font: 16px;
    font-weight: bold;
    height:100px;/*image height*/
    line-height:100px;/*image height*/
    }
    Vertical-align only works on inline elements on the same line and as a float is block level then it doesn't apply.

    Paul


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
  •