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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unaccounted space

    Hi,

    I have been working on a site layout, but there appears (in all browsers) a gap between two divs, but why there is I don't know!!

    It is driving me nuts! I know I have done something really simply stupid!!

    There should not be a gap between header and strapline... They should butt up against each other..

    http://www.synaxissolutions.co.uk/test/fin/test.html

    Many thanks in advance

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there wood1e2,

    and a warm welcome to these forums.

    your unwanted space is the result of these two highlighted attributes...
    Code:
    
    #strapline {	
    	width: 100%;
    	height: 190px;
    	margin: 0 auto;
    	background-image:url(images/strapline_bg.jpg);	
    }
    #strapline_content {
    	width: 960px;
    	height: 190px;
    	margin: 0 auto;
    }
    
    Last edited by coothead; 09-15-2011 at 10:12 AM.

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    Many thanks

    I have removed the highlighted lines but all that does is shrink the div Strapline to the high of the text 'Insert Something here'

    Not move the div strapline to right up against the div header.

    Any other ideas It is driving me mad!! lol

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there wood1e2,

    I am sorry that my suggestion did not suit your requirements, but I was not sure which space you wanted to remove.

    If it is the white space then that is the result of these highlighted attributes...
    Code:
    
    #header {
    	width: 100%;
    	height: 100px;
    	margin: 0 auto;
    	background-image:url(images/header_bg.jpg);
    	background-position: bottom;		
     }
    #header_content {	
    	width: 960px;
    	height: 100px;
    	margin: 0 auto;
     }
    
    coothead

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    The white space is absolutely fine, as is the space with the wording 'Insert Content here'

    It is the space/gap between those two divs. there should be no gap

    Cheers

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there

    Now that you have defined unwanted space, add the highlighted attribute here...
    Code:
    
    #strapline_content h1 {
       margin:0;
       text-align:center;
       color: #FFFFFF;
    }
    
    ...to remove the default margin that the h+ elements possess.

    coothead

  • #7
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh of course I completely forgot the margin in H1 !!!!

    Many thanks for your help

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    I just knew that, together, we would get the pesky little bugger.

  • #9
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can't see the wood for the trees sometimes

    Thanks


  •  

    Posting Permissions

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