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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts

    problem with css / responsive design

    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?

    Code:
    #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:

    Code:
    #mh_logo, #mh_logo a {background:none; height:0;}
    ..it doesn't do anything.

    Any help is appreciated. - Thanks!

    John
    Attached Thumbnails Attached Thumbnails problem with css / responsive design-fpo.jpg  

  • #2
    New Coder
    Join Date
    Feb 2013
    Posts
    28
    Thanks
    6
    Thanked 1 Time in 1 Post
    I don't know if this is the solution, but perhaps try setting position-top, rather than margin-top?

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.



    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    Position:absolute

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

  • Users who have thanked waxdoc for this post:

    johndove (02-14-2013)

  • #6
    New to the CF scene
    Join Date
    Feb 2013
    Location
    NY
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    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?.

  • Users who have thanked payling for this post:

    johndove (02-14-2013)

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 -
    Code:
    #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.
    Code:
     .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:
    Code:
    #ez-home-bottom-container {
    	position:absolute;
      top: 409px;
      left: 0;
    	}
    Last edited by Excavator; 02-14-2013 at 05:23 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    johndove (02-14-2013)

  • #8
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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:

    Code:
    #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
    Attached Thumbnails Attached Thumbnails problem with css / responsive design-01.jpg  

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by johndove View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by johndove View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    johndove (02-14-2013)

  • #12
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thank you!


  •  

    Posting Permissions

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