SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 33 of 33
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Can you attach a real size screenshot of the layout you posted in your first post as it will give me something to better work with and see what can be done?

    Is the sidebar on top of the stripy background and what content is to go into the sidebar?

    If I understand correctly then I feel you may need to look into using a min-height:100% wrapper as in the example I posted previously which gives you all the height you need to apply images without needing a fixed height. The middle section looks awkward though and would probably need to be done with a min-height in pixels to get an initial height if the content is short.

    If you can post a full size screenshot then I will see if I can cut it up and insert it into a structure or at least give some better pointers.

  2. #27
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'll do better than that. I'll go ahead and create a subdomain to my dreammakergraphics.com website and upload the files. Then you can look at it live. I'll do it tomorrow if I get a chance. If not tomorrow, I'll have it on Wed.

    Thanks, Paul.
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Ok, just post when its ready to view and I'll take a look.

  4. #29
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's ready. You can view it at: http://www.designjewel.dreammakergraphics.com/

    Of course, this is just a ficticious company, and just an experimental design. I'd like to have some pre-coded sites ready to customize for future clients. Besides, this keeps the creativity juices flowing! I basically like the design very much. I always figure when I create something, if I still like it the next morning, it isn't too bad. I never did a black-and-white design before, and I have been experimenting with the idea of "virtual" columns, fading into the background. The content itself will define the boundries.

    I haven't yet decided if I want a clearly defined footer. I may just leave it as it is. Of course, photos, and copy can be rearranged, resized, repositioned ... any number of things might happen. Right now I'm just interested in getting the "bones" right.
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

  5. #30
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,264
    Mentioned
    246 Post(s)
    Tagged
    1 Thread(s)
    It looks fine in Win 7 (FF 16, IE 8, Chrome) The HTML is OK and the CSS looks fine too. A first suggestion is that instead of using

    Code:
    *{
         margin: 0;
         padding: 0;
    }
    You would use some other kind of reset, like listing all the tags and then apply those rules

    Code:
    html, body, a, p, ul, ol, ul ... {
        margin: 0;
        padding: 0
    }
    It is not because what you've done is wrong but because the second option is known to be faster

  6. #31
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much, and thanks for the suggestion for reset. I didn't know that.
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

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

    That's much better

    You've got the page centred now and everything aligned nicely (apart from IE7 but that's another story).

    Those gradients are a problem but rather than use height you should use min-height instead which will allow you to add more images and text without changing the code. You've done a pretty good job there and taken some of the advice given which is good.

    If I was going to code this then I would cheat a little as I don't like the fact that you need to specify height at all (even a min-height in pixels). I would paint the background in a single image in one go on the outer. The image will be about 5k as opposed to your 1k for both the images but the bigger image won't need to be repainted across the screen like your which can slow browsers down. I never use 1px images as that makes the browsers work to hard and you can see everything being drawn on a heavy site. You can use a 10px wide image and probably not increase the file size or the request time but the browsers will draw it ten times quicker.

    I'd roughly do it like this.

    It needs no heights apart form an initial min-height in percentage which effectively is viewport height so there is no change and no scrollbar when not needed. It also uses the sticky footer approach to keep the footer at the bottom of the viewport (see the css faq in my sig for info on a sticky footer).

    I floated the sidebar in case you needed a footer that spans both columns which you can't do if you have an absolute sidebar. (Your absolute sidebar is fine though as long as you aren't adding any other content in too it.)

    The rest of the page is much the same as the example I gave before. The html could be shortened in places but I like to keep a solid structure that I know will work and not break. I also enclose images in either a div or a p element as an image is an inline element and should be in a block parent. It's like having a span on its own next to a div. It's not invalid (unless its a direct child of the body) but just not semantically correct - although most everyone disagrees with me on this so feel free to ignore me on this point).

    Otherwise its much the same as yours. The sticky footer is a bit complicated but you could lose that if you wanted more simplicity.

    Hope it gives you some ideas anyway.

  8. #33
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much Paul. Now you've taught me something else that should have been obvious; that of the 1px background image making the browser work harder. I was under the misconception that smaller was better, but I can see that isn't necessarily so. Thanks for that tip. That can be changed easily.

    I think sometimes I tend to regress. I have been in the habit in the past of placing images as you suggested (in a div or p element). I don't know why I didn't do it here. Just not thinking, or a brain fart, I suppose, or in too big a hurry to get a couple of images placed to see what the design was going to look like in my browser. The problem with that is that without you pointing it out, I may never have gone back and changed it.

    It will take me a while to study and digest everything you've done, but looking at it quickly just now, I get a pretty clear overview when I see the div elements outlined and view the class and ID's.

    I think you have opened some doors for me, and I thank you very much (also opened my eyes). I'm sure I'll have a few questions after studying what you've done. It looks great!
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/


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
  •