Results 1 to 2 of 2

Thread: How would you create this banner?

  1. #1
    Join Date
    Feb 2010
    Posts
    12

    How would you create this banner?

    I'm about ready to use a table to layout my banner in an otherwise table-less layout! You guys are my last hope.
    This hand-coded flexible layout has worked great until I went to change a background color into a repeating graphic. But instead of posting my code and trying to get ideas as to how to fix it, I just wonder how you would approach this seemingly simple problem from the start...
    The question is: If you want a banner with a graphic on the left (logo) a graphic on the far right, and an expandable repeating graphic in the middle, how would you go about it?
    Everything from floats to absolute positioning have failed to do what would be a snap using a table. Save me from backsliding to the dark side!

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    You should be able to do it with two floated divs inside a containing div. Give the container the repeating background and the other two floated left and right.
    CSS
    Code:
    #container { width: 100%; background: url(repeating-graphic.jpg) repeat-x; height: ??px; }
    #left { float: left; width: ??px; height: ??px; background: url(logo.jpg);}
    #right { float: right; width: ??px; height: ??px; background: url(right-graphic.jpg); }
    Code:
    <div id="container">
    <div id="left"></div>
    <div id="right"></div>
    </div>
    It's not very good to have empty divs only with a background so instead of the background-images to #left and #right you should really put img images inside instead.
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Similar Threads

  1. How to create a rotating banner?
    By nina in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 19 Jul 2010, 05:12 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •