SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    stacking order???

    Frustratingly and annoyingly I followed theme instruction on how to update, I did so and lost everything and now I'm starting from scratch ( I know I didn't back up )
    It is though, a good thing as I am troubleshooting through realising I'm getting much better and still learning lots but I have come to an area I'm really not sure what to do. I think it is to do with the stacking order but I'm not sure how to solve it...

    I added a #arrow-hd and some css to the slider and the home container has pushed right up to the top ( it should be after the slider ) and the projects and designs area is squalshed to the right instead of across the page.

    Is this easy to fix?

    http://www.organicwebdesigns.co.uk/

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    O my, deja vu. Sorry to hear you lost everything.

    The first thing I'd do is remove the float on the #sections div. It isn't needed, and is causing the immediate problem.

  3. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I know!!! Although I'm gutted I am actually enjoying starting from scratch. The first time I did it it was all guess work and I didn't get any of it but now I'm actually getting to understand it.

    So How did you know it was the float. As i understand it so far the float-left for the sections id means for it to stick to the left of the object before right? So what did that mean when it was removed?

    And also how is the home-container stuck up the top there? It should be underneath the green slider...
    Many thanks

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Floating something takes it "out of the flow", so that other elements kind of don't see it any more. That was allowing content below to move up a bit. There's not much point floating unless you need content to wrap around or sit beside an element.

    In terms of how I knew, I didn't really. In the Chrome dev tools (same as Firebug) I just tested a few things, like disabling the float setting. Pretty low tech.

  5. #5
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ahhh ok well thanks very much again, I'll crack on and see how far I can get

    tbc.....................

  6. #6
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ok, if float takes it out of the flow, I have a lot of float: lefts for my slider items but yet taking them out is not fixing the display issue in the slider ( ie the tree should be on the right and the text on the left )
    Is it something to do with the width of the slider right and lefts?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    For float to do anything of much use, you need to set a width also. You need to give a width to those floated divs for them to sit side by side. The divs are full width by default, so unless you restrict the width, they can really float anywhere.

  8. #8
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I've played around with everything a put widths on them all but no difference at all???

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    There are no widths currently set on the boxes inside your slider.

  10. #10
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I can see in firebug ( well chromes ) that slider-left and slider-right are set to 950px but what is confusing me is that I have set the widths but nothing is changing: Here is my code:

    .slider-left { float: left; margin: 20px 25px 0px 25px; width: 472px ! important; height: 209px; overflow: hidden; position: absolute; }
    .slider-left-2 { float: left; width: 472px; /*height: 292px;*/ }
    .slider-right { float: left; margin-right: 35px; margin-top: 26px; width: 330px !important; }

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    For some reason, the browser is not seeing the styles—probably because of an error/typo in the CSS further up. Check out this list:

    http://jigsaw.w3.org/css-validator/v...rning=&lang=en

    E.g.

    This line 'ere (228) don't 'ave no } at end, meanin' it throws things off like:

    Code:
    .slider-link-4 { width: 118px; height: 43px; background-image: url(images/smooth-blue/slider-button-1.gif); position: absolute; z-index: 1; top: -40px; left: 511px; color: #fff !important; font-weight: bold; padding: 10px 0px 0px 50px;}

  12. #12
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Big sigh!!!

    Great, now I know about the css validator too!!! And it seems there were many mistakes but it was the one for slider-4.

    So I see, if things don't change or act as they should, use the validators!!! Another big lesson learnt.
    Much appreciated
    Many thanks

  13. #13
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ------UPDATE------

    Slowly getting there. I'm just having a play around with fonts and css styling but I'm wondering how it is, changing a font style knocks other things off. For example I styled my h1 and body and then I had to place a negative value for the margin of the nav bar. Also after changing some things in the first slider I had to place a negative value for the tree. Do these / can these negatives have any bad effects and how do I know what floats are relative too. I mean what are they floating right or left to?

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    fonts convey default vertical margins to paragraphs and headers, etc. It's often useful to set header v-margins to zero, otherwise their default margin-top can affect the topmost container and push it down from the top of the page.

    Likewise, lists have default v-margins and default h-padding. Same "rule of resets" applies with them, too, especially in the case of a horizontal menu. Make sure the ul margin is set to zero if none is dictated by the design.

    Using negative margins to "fix" mysterious gaps or spaces is usually a bad bandaid. Its better to find the cause of the gap and fix the source, otherwise the problem may appear in another location.


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
  •