www.webdeveloper.com
Results 1 to 7 of 7

Thread: How do I do this right? make a website from this .jpeg

Hybrid View

  1. #1
    Join Date
    Jul 2009
    Posts
    77

    Question How do I do this right? make a website from this .jpeg

    Hi everyone,

    I have a .jpeg (attached) of a layout my friend wants me to make for her. I'd like to use CSS where possible (instead of just slicing it up--or is that the best way?).

    See the drop shadow all the way around? There are a few places where it would run into the swirls in the background (preventing me, I think, from using a repeating image there).

    Any suggestions as to how I should attack this? What would be your first steps?

    Thanks for any advice
    Attached Images Attached Images

  2. #2
    Join Date
    Jan 2008
    Location
    Florida
    Posts
    1,227
    You will have to slice some, dice some, edit here and there.. How you run your background depends on how you will lay out your content. You could set the background as fixed and scroll your content within divs or else slice the background to include a fixed TOP div background, a fixed BOTTOM div background and use a repeat for the flowing middle content between.

  3. #3
    Join Date
    Jul 2009
    Posts
    77

    Question

    I'm definitely trying to use a fixed top, fixed bottom, and fluid (repeating) mid section..

    Is this the correct syntax:

    Code:
    <div id="header" style="background-image: url('headerslice.png');">
    </div>
    
    <div id="middle" style="background-image: url('middleslice.png'); background-repeat:repeat-y;">
    </div>
    
    <div id="footer" style="background-image: url('bottomslice.png');">
    </div>
    Last edited by realmuffin; 05-03-2010 at 01:27 PM. Reason: typo

  4. #4
    Join Date
    Jan 2008
    Location
    Florida
    Posts
    1,227
    looks like you're on the right track but you will certainly need more styling.

  5. #5
    Join Date
    Jul 2009
    Posts
    77
    thanks!

    And is this what I would add to make it a fluid layout? So that when stretched wide it will expand the background image size?

    <div id="header" style="background-image: url('headerslice.png'); width:75%; max-width: 1200px">
    </div>

  6. #6
    Join Date
    Jan 2008
    Location
    Florida
    Posts
    1,227
    You would create an outer div container and define it's size. No need to define your other widths, most likely only a height for header and footer

  7. #7
    Join Date
    Jul 2009
    Posts
    77
    hmm, not sure I follow.

    If the image 'headerslice.png' is 800px wide, and sits inside of the header div (no set width), and the header div sits inside of the wrapper div, which is set to a fluid width of 75&#37; and max 1200px. How will the header div ever increase in size when it only has 800px to begin with?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles