SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Title banner for top of page

    Hello, I'm new here. I'm a beginner-intermediate web site developer who is learning more and more with practice. My design philosophy is "less is more" with a commitment to accessibility, while also seeking to create an attractive site with color and style. I'm using HTML 4.01 transitional for structure only, with an external style sheet.

    I'm not sure how to search for this particular question and I hope I'm not asking something that's already been covered a dozen times.

    I'm creating a photo album at work and I need a little assistance designing the title banner with the ideas I have in mind to work correctly in all browsers. The photos on each page are simply presented in rows using a list of <img> elements which are defined on the style sheet. I'd like the site to be flexible width so that the photos move to fill the width or wrap to the next line as the user resizes the browser.

    So here's where I need a little help to point the way:

    I'd like to use a few images for the title banner as follows:
    • A simple background image

    • Images of two small faces on top of the main background image, so that one face stays on the left edge and the other stays on the right as the user resizes the browser. I'm guessing they need to either float in the left and right edges, or be absolutely positioned in the box.

    • A graphical text image the serves as the site title "Company Photo Album" to remain centered as the page is resized.


    Is this achievable using simple, clean CSS without hacks?

    If anyone can point me to the basics, I think I can take it from there.

    Thanks,
    Yenny (Jen)

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that is the basic layout. The right and left images would sit near the bottom corners, while the text graphic would have a transparency background and appear to float on the background image.

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why would the text graphic float on the background image?

  5. #5
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I added the text as a graphic layer to the background image, I had trouble (at least that's what it seems to me -- perhaps it's just normal) positioning the background so that the text is centered.

    I tried including the background in the <h1> tag but one of the browsers (IE 6, I think), didn't properly render it while FF had no trouble with it.

    So, I thought that if I put the text image inside a <p> tag and center that on the page, that might work.

    I have not tried everything yet, and I didn't bring my work home with me this weekend.

  6. #6
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not 100&#37; I understod you correctly but: http://frederikvig.com/test/sitepoint/photo-album2.html

  7. #7
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically, that's it -- but the text is a golden-yellow graphic on a transparent background (imagine the text on yours turned to gold and without the white background -- just yellow on the blue background).

    Sorry if I am not making myself clear. What I'm asking about might be very elementary.

  8. #8
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you are all set then?
    Here is also a little walk through on transparent pngs: http://www.photoshoplab.com/fun-with...ng-images.html. Otherwise just use a transparent gif.

  9. #9
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It just occurred to me that I need to view the source to see the CSS you used in your sample. I think the heat (100+ here) is getting to me. Thank you! I'll give it a try.

    I would not want the additional text between the H1 tags, just the image itself. Do I need to provide the text though, and then set the size to 0 so it won't show?

    Thanks again!

  10. #10
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can remove the text and replace it with <img src="yourtransparentimage.png" alt="description" /> or you can remove the text with this line of css: text-indent: -9999em; (on the #wrapper h1). That way search engines will still be able to see it. Or you can replace the <h1>-tags with a div instead and give it the height and width of your image and use margin: 0 auto; to center it.

  11. #11
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much.

    Search engines aren't an issue because this is an internal site, linked from another internal site which is password protected and accessible only by employees with an account to that page. However, I appreciate your tip for future reference.

    OK then, I'll give this a try!

    Thanks so much!
    Yenny


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
  •