problem with css / responsive design

[johndove]

Hi, please see URL: http://freedom.backstageweb.net

I have two problems:

1. I need to set a negative top margin for the container with the h4's and text below them (see attached fpo.jpg) so that the h4s display in the gray bar. I don't know how to get the whole container to move up (containing all 3 h4s and the text blocks below). Something like this?

#ez-home-bottom-container {
	top-margin:-47px;
	z-index:101;
	position:absolute;
	}

2. (responsive) Shrink the browser down to about 3" wide (for mobile). This all looks good except the gap between the first paragraph and the "no up front costs" block. The culprit here is the height on the #mh_logo div, but when I set the responsive style to:

#mh_logo, #mh_logo a {background:none; height:0;}

..it doesn't do anything.

Any help is appreciated. - Thanks!

John

[iksfcrc]

I don't know if this is the solution, but perhaps try setting position-top, rather than margin-top?

[waxdoc]

See http://www.w3schools.com/cssref/pr_class_position.asp for POSITION property values

static Default. Elements render in order, as they appear in the document flow

absolute The element is positioned relative to its first positioned (not static) ancestor element

fixed The element is positioned relative to the browser window

relative Element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

inherit Value of position property is inherited from parent element

See http://www.w3schools.com/cssref/pr_margin.asp for MARGIN property values

auto The browser calculates a margin Play it »
length Specifies a margin in px, pt, cm, etc. Default value is 0px Play it »
% Specifies a margin in percent of width of containing element
inherit Specifies that margin should be inherited from parent element

[Excavator]

Hello johndove,
iksfcrc is right in suggesting you should use top/right positining instead of negative margin. Learn about http://www.barelyfitz.com/screencast...s/positioning/.

top-margin is invalid anyway, should be margin-top if that's what was really called for here.
See the links about validation in my signature below.



.

[waxdoc]

You do not set MARGIN for absolute positioned element, but specify top: __
left: __ bottom: __ right: __ relative to its first positioned parent (if none, then its relative to browser window) See for instance http://www.w3schools.com/cssref/pr_class_position.asp

h2 { position:absolute; left:100px; top:150px; }

[payling]

To have the h4s appear in the gray bar I'd probably place a div directly above the three columns and set the background to the gray bar. Make h4s inline blocks, give them the width of the three columns below (30% or whatever), stick them in the div with the gray bar and be done with it...

I noticed another issue with your site... Shrinking the browser window below the content width causes "content clipping". The scroll bar shows up, but when I scroll to the right to see content that couldn't fit in the browser window the content is "clipped" (missing). I've verified the problem with Chrome, IE, and my Nexus 7. This could be caused by ab overflow attribute being set to hidden or scroll?.

[Excavator]

I would also recommend not using negative margins at all.
Instead of padding that containing element and then using the negative margins to bring the child back up where you want it... just don't pad #home-hook-wrap in the first place.

Look at these changes -

#home-hook-wrap {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #E8E8E8;
    border-style: solid;
    border-width: 0;
    clear: both;
   /* padding: 20px;*/
}
.ez-home-container-area {
    /*margin: -18px -20px 0;*/


}

If you follow your layout down further, the next conflicting thing you've put in your CSS is a bottom margin that pushes down the very h4's you want up.

 .ez-home-container-area {
    margin: 0 0 20px;
    overflow: hidden;
}

You have also applied .ez-only on that element, no need to float a full-width element.

Once you fix those things, this makes a little more sense:

#ez-home-bottom-container {
	position:absolute;
  top: 409px;
  left: 0;
	}

[johndove]

Thank you guys, all of you, for your responses.

See the url now.

Excavator, following your last reply as best I could, here is EZ css now:

#home-hook-wrap {
    background-color: #fff;
    clear: both;
    padding:0;
}

#ez-home-container-wrap {
    position:relative;
}

#ez-home-top-1 {
	background:url(images/home_photo4.jpg) no-repeat;
	width:970px;
	height:449px;
	top:0;
	left:0;
	position:absolute;
	}

#ez-home-bottom-container {
	position:absolute;
  	top:403px;
  	left: 0;
	}

I've got it mostly straightened out, I just need a property to make the footlogos and footer come down to where they're supposed to be.

Please help me understand this, because I deal with it over and over trying to figure out the constructs of different frameworks. When dealing with nested divs a mile deep (see attached), which one(s) do I need to make changes to when I want to change something inside of it? The one directly above it or the outermost one? Do I need to include the classes as well as the IDs?

Second, why is it bad to set negative margins? This tells me it isn't.

Thanks again,

John

[Excavator]

Originally Posted by johndove

Please help me understand this, because I deal with it over and over trying to figure out the constructs of different frameworks. When dealing with nested divs a mile deep (see attached), which one(s) do I need to make changes to when I want to change something inside of it? The one directly above it or the outermost one? Do I need to include the classes as well as the IDs?

Wow, quite the involved question and I supposed it just matters what you're trying to do. Something that I use a lot is FireBug for FireFox. It can easily show you which element is doing what.

As far as needing the classes and ids, you just need to know what you're adding in there. As in your case, don't just arbitrarily throw .ez-home-container-area on if you don't want that element floated left. You just need to keep track of what you're doing, this is another case where FireBug can help a lot.

Second, why is it bad to set negative margins? This tells me it isn't.

Hmm, I may have mislead you when I said not to use them. What I should have explained was, since you use absolute positioning on that element, why not position it instead of using negative margins. You can use negative margins there, but then there is no need for the positioning.

[johndove]

Can you tell me what properties I need to do to get the footlogos and footer back down where they should be?

Thanks,

John

btw, I do use Firebug, but there are so many nested divs I don't know what I'm looking for.

[Excavator]

Originally Posted by johndove

Can you tell me what properties I need to do to get the footlogos and footer back down where they should be?

Ugh. Now you are learning the pitfalls of absolute positioning.

When you use ap on #ez-home-bottom-container, it is removed from the flow of the document and it's parent #ez-home-container-wrap cannot expand to push your #footlogos down.

---Give #ez-home-container-wrap a height and it will push your footer down.

Better yet, don't use ap on #ez-home-bottom-container and let it's parent expand naturally.

[johndove]

Thank you!