stacking order???

[hantaah]

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/

[ralph.m]

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.

[hantaah]

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

[ralph.m]

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.

[hantaah]

ahhh ok well thanks very much again, I'll crack on and see how far I can get

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

[hantaah]

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?

[ralph.m]

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.

[hantaah]

I've played around with everything a put widths on them all but no difference at all???

[ralph.m]

There are no widths currently set on the boxes inside your slider.

[hantaah]

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; }

[ralph.m]

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:

.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;}

[hantaah]

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

[hantaah]

------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?

[ronpat]

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.