#1
  1. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,703
    Rep Power
    67

    Ok, so here is a design idea - (CSS?)


    Ok, this may be asking too much, but I have this design idea - http://tmh.netdbs.com/turnkey2.jpg But insofar as laying it out with CSS, I just am not sure where to begin breaking it apart and creating various divs so to speak, the main white area is where I will lay out various <P> tags and won't have a problem with that, but it is getting started that challenges me. I'd appreciate some feedback on how to approach this. TOm
    Today the world, tomorrow the universe...
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Stratford-upon-Avon, UK
    Posts
    66
    Rep Power
    12
    Hi

    It could be done quite easily. First, break the image you have into:

    1. The key, with a white background. Set this in the body style as a background image no repeating.

    2. The top banner (without the key). You could set this as the background of the header div, with the div having the same blue color as the banner. No need for this to be longer than the end of the 's' at the right.

    3. The sidebar background (no buttons). Only the top white bit, the blue and the bottom white bit. Make the background green as per the bottom of the side bar.

    Now, as to the body text area, you have three choices as to where to start the text.

    A. Below the top banner and to the right of the key. Then do you wrap around the key to align more with the sidebar?
    B. Below and to the right of the key, leaving tons of whitespace above and to the left.
    C. Below the key, but next to the sidebar, leaving a lot of space above.

    I would go for A and use the first line(s) for the page title.

    What do you think? I guess I could knock something up in an hour if you wanted? Let me know.




    Trevor
    "Good artists copy, great artists steal." Pablo Picasso
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,703
    Rep Power
    67
    Trevor, thanks for the offer, let me give it a go as that would be the best way for me learn, right? Thanks man. Tom
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Stratford-upon-Avon, UK
    Posts
    66
    Rep Power
    12
    Hi

    yeh, no probs.

    It was so like another page I had done, so I already did it.

    So, if you don't want to see it, don't go here (i will take this off after a week):

    http://207.44.137.103/turnkey.html




    Trevor
    Last edited by clevatreva; January 24th, 2004 at 04:48 PM.
    "Good artists copy, great artists steal." Pablo Picasso
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    You might dig into this Max Design article.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,703
    Rep Power
    67
    Thanks Gary. That site is great. Trevor, that link you put up is a 404. If it is still available, I would be insterested in studying it. Tom
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Stratford-upon-Avon, UK
    Posts
    66
    Rep Power
    12
    Whoops

    <brain style:"speed: goslow">doh</brain>


    I've edited the post and put the correct ip address in!



    Trevor
    "Good artists copy, great artists steal." Pablo Picasso
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,703
    Rep Power
    67
    Hey Trevor, whats with the .png images, are they widely supported enough to know use them, and is there an advantage such a file size???
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,703
    Rep Power
    67
    Trevor, also, the site is not laid out properly in Netscape 7.1 Do you not consider this in your programming... Not that you should, mind you... Tom
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Stratford-upon-Avon, UK
    Posts
    66
    Rep Power
    12
    Hi

    I haven't had time to check out NN7, but it doesn't surprise me!

    png is supported by all modern browsers. Your images were low in color count, so a compressed format like this works fine.

    png is, except for really simple files, often better than gif (which is the subject of patent problems anyway). jpg is good too, but better for complex images. I am sure a better discussion could be had on this.

    I will download NN7.1 and look into it.




    Trevor
    "Good artists copy, great artists steal." Pablo Picasso
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Stratford-upon-Avon, UK
    Posts
    66
    Rep Power
    12
    Hi

    I've uploaded a revised version!

    A design change to add a footer for copyright. I wanted to do this to see if this would stay in the right place. Note that the menubar div is positoned 100px down fom the top. The bottomcenter div has a margin-top of that same 100px plus 17px for spacing.

    Navigator had a problem with the margin-top on the button text. IE correctly used this to space it down from the top edge of the button image, but navigator put the margin above the image! I used padding-top instead for this one dimension and both render the same.

    Navigator has a real problem with background colors in columns. You will see two non-breaking spaces which do not really do anything, and are not needed by IE, but Navigator will not render correctly without them.

    You asked about png vs jpg. IE cannot render a png correctly (it substitutes colors incorrectly I found) unless it is a 16.7m color png, which renders this choice useless as jpeg with a compression factor of just 1 will compress much better. Well done Microsoft. I see IE can't render alpha layers either for a png.

    The sliced jpegs still saved about 40kb compared to a full page background.

    I have also checked the code with Opera 7. Also looks OK.

    BTW. When downloading Opera 7, I got the version with Java. Aaagghh.

    How can Sun seriously distribute this rubbish? Running java locks my system up. Getting it off took ages and many lockups. Checked for other user comments on the net t find many similar remarks. Java v1.4.2.02 (I think that was it). I used to have 1.4.1 a while ago and that was fine. Roll on v1.4.3 or 1.5 or whatever.





    Trevor
    "Good artists copy, great artists steal." Pablo Picasso

IMN logo majestic logo threadwatch logo seochat tools logo