Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post

    Please Approve My Design & Methods?

    I've been busy...

    After having had a lot of trouble with CSS positioning and manipulating the box model, I think I have finally cracked it...

    Please look here: here

    I would love it if some of you experts here could have a quick glance and tell me if I've done this right? No tables, no frames and no messy hacks... just some floating and careful relative positioning.

    (Yes, I have stolen layout ideas and some images from The CSS Zen Garden, with the intention of creating my own background graphics, once I've got the layout right).

    Many thanks

    Ade
    Last edited by Daniel_A_Varney; 07-10-2011 at 06:55 PM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    looks pretty good. some of the widths are off though.

    I wouldn't say the script is correct, but it is a great leap forward.
    Definetly not many unnecessary divs

    overall looks great
    Last edited by Sammy12; 07-10-2011 at 07:09 PM.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    Thanks, mate. Input appreciated. What do you mean by 'widths are off'?

    I agree, it's a huge step forward for me and it has renewed my confidence in this area.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts


    Inspect element will take you far.

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    Is there something wrong with setting the #masthead width to 100%?

    I can use Firebug for inspecting. Just have to download it again...

    Edit:
    Oh, okay, I see what you mean. Maybe I should set it back to the width I started with. Thanks.

    Are those text images (skeletons) coming up stretched in your browser?
    Last edited by Daniel_A_Varney; 07-10-2011 at 11:24 PM.

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I don't actually see the issue. It looks like that because the OP has used relative positioning (slightly unorthodox but valid nevertheless) to effect movement to the left. However, it's worth noting that divs are block-level, and thus inherently take up as much horizontal space as possible.

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    I've just tried to correct the widths...

    I can give those elements their true widths only if I float them left but not the footer. The #footer is already cleared and if floated, destroys the layout.

    Hi Jordan. I'm not sure why you would consider relative positioning unorthodox...? I have tried using just floats and margins and this was the only way I could muster, to get the parents (#columnwrap and #wrapper) to scale vertically when I add content to their child divisions.

    I'm glad this has worked, though while I have obviously used floats correctly, this exercise has left me understanding even less, the whole concept of 'floating'. It's one of the weirdest things I've ever come across.

    Thanks for the feedback - it's very valuable to me!
    Last edited by Daniel_A_Varney; 07-11-2011 at 06:07 PM.


  •  

    Posting Permissions

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