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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Spacing between divs

    Hello - I would be extremely grateful anyone could spare the time to help me with this little problem. This is my first attempt at hand-coding so please excuse the ugly code and gaps in my knowledge.

    I have the following CSS to control dotted boxes on my web page which are stacked on top of another. I want them to be evenly spaced out with a 30 pixel gap in between but they overlap one another in pretty much every browser. The only way I can get the spaces in is to use <br/> a few times and even that only works in IE7.

    I've tried adding in margin-bottom: and defining the height of coursearea1 but neither have worked. Is there anything obvious that I'm missing? Thanks very much for your time ...

    #coursearea1 {
    position:absolute;
    left:120px;
    width:300px;
    padding:10px 40px 10px 40px;
    background-color: white;
    border:1px dashed #999;
    line-height:17px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:300px;
    }

    body>#Menu {width:300px;}

  • #2
    New Coder sdcomputerz's Avatar
    Join Date
    Feb 2007
    Location
    Hawaii
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You set the "margin-bottom: 30px;". That should do it.
    You can never have nothing, because nothing is still something.
    SD Computerz
    Free Domain Names
    Gaming Lagoon - Buying your game time!

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Of course they are on top of another, and of course a margin doesn’t do anything because you have positioned them absolutely without specifying any position (top/left/right/bottom).

    Show us your entire code (i.e. HTML & CSS) and we can tell you what to do. But I can tell you already that absolute positioning isn’t needed in 90% of all cases.

    And by the way: If you have more than one box called “coursearea” you can’t do that with an ID, you must use a class then.

  • #4
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi both, thanks for your replies.

    VIP Stephan - I know what you mean with the classes and yes, I have got more than 1 box where I have just re-named the ID but just reused the same code each time. That was the only way I could get it to validate. I am a newbie - please forgive the ignorance.

    Here is the HTML:


    <div id="coursearea1">

    <h2>Area 1: Team building</h2>

    <p>You will learn to climb, abseil, mountaineer and cave. Through these activities, you will learn to work as a team, gain confidence and self-sufficiency.</p>
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <div id="coursearea2">
    <h2>Area 2: Practical workshops</h2>
    <p>In the central training rooms you will learn the theory behind the practices. This includes care of equipment, navigation skills and communication skills. All workshops are carried out in a relaxed atmosphere and practical manner.</p>
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <div id="coursearea3">
    <h2>Area 3: Fitness</h2>
    <p>Qualified Fitness Instructors will take you from whatever your starting point to the next level needed for basic training. Fitness sessions are carried out both in the gym and in 'open air'. Sessions include cross-country runs, spinning, swimming, circuits and strength training.</p>

    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <div id="coursearea4">
    <h2>Area 4: Field craft</h2>
    <p>In practical situations, you will learn about living in the outdoors, basic survival, navigation and taking care of yourself and equipment.</p>
    </div>


    And here's the CSS

    #sticker {
    margin: 0px 0px 120px 0px;
    padding: 0px 0px 0px 0px;
    height:150px;
    z-index:2;
    float:right;
    }

    img { border:0px;}

    body {
    height:100%;
    margin: 0px 50px 0px 50px;
    padding:0px;
    font-family:verdana, arial, helvetica, sans-serif;
    color:#333;
    background: url(images/crosshatch.gif);
    background-repeat: repeat-x;
    }

    #whitebg {
    height:100%;
    background:#fff;
    border-left:1px solid #999;
    border-right:1px solid #999;
    z-index:1;
    }

    h1 {
    margin:0px 0px 15px 0px;
    padding:0px;
    font-size:28px;
    line-height:28px;
    font-weight:900;
    color:#00253F;
    }

    h2 {
    margin:0px 0px 15px 0px;
    padding:0px;
    font-size:20px;
    line-height:28px;
    font-weight:900;
    color:#00253F;
    }


    p {
    font:11px/20px verdana, arial, helvetica, sans-serif;
    margin:0px 0px 0px 0px;
    padding:0px;
    }

    #Content>p {
    margin:0px;
    }

    #Content a {
    font:11px/20px verdana, arial, helvetica, sans-serif;
    color:blue;
    text-decoration: underline;
    padding:0px 0px 0px 0px;
    }


    #Content>p+p {
    text-indent:30px;
    }


    p#Footertext {
    font:11px/20px verdana, arial, helvetica, sans-serif;
    margin:0px 0px 0px 50px;
    padding:0px;
    color: white;
    }

    #QPD {
    margin:0px 0px 0px 0px;
    float: left;
    padding: 20px 20px 20px 20px;
    /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
    height:0px; /* 14px + 17px + 2px = 33px */
    border-width:0px 0px;
    z-index:1;
    }

    #Logo {
    margin:0px 0px 0px 0px;
    padding:45px 0px 0px 20px;
    /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
    height:0px; /* 14px + 17px + 2px = 33px */
    border-width:0px 0px;
    background: url(images/header.gif);
    background-repeat: repeat-x;
    z-index:1;
    }

    #Forceslogos {
    margin:0px 0px 0px 0px;
    padding:0px 0px 10px 0px;
    /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
    height:110px; /* 14px + 17px + 2px = 33px */
    border-width:0px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
    background-color:white;
    z-index:0;
    }


    /* ------ NAVIGATION ----- */

    #Header {
    margin:10px 0px 30px 0px;
    text-align:center;
    padding: 10px 0px 10px 0px;
    /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
    height:40px; /* 14px + 17px + 2px = 33px */
    border-style: solid;
    border-color: grey;
    border-width:2px 0px; /* top and bottom borders: 3px; left and right borders: 0px */
    line-height:14px;
    background-color:#000066;
    z-index:1;

    /* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
    Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
    IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
    declaration. The incorrect IE5/Win value is above, while the correct value is
    below. See http://glish.com/css/hacks.asp for details. */
    voice-family: "\"}\"";
    voice-family:inherit;
    height:14px; /* the correct height */
    }
    /* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
    length values to user agents that exhibit the parsing error exploited above yet get
    the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
    a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
    body>#Header {height:14px;}

    ul {
    display: inline;
    }

    li {
    display: inline;
    }


    ul#whoshouldapplyul {
    display: list-item;
    }

    li#whoshouldapplyul {
    display: list-item;
    }

    #Header a {
    color:white;
    font-size:14px;
    text-decoration:none;
    font-weight:500;
    font-family:verdana;
    padding:0px 25px 0px 0px;
    }

    #Header a:link {color:white;}
    #Header a:visited {color:white;}
    #Header a:hover {text-decoration:underline;}

    a#Footernav {
    color:#white;
    font-size:13px;
    text-decoration:none;
    font-weight:500;
    font-family:georgia;
    padding:0px 0px 0px 0px;
    }

    a:link#Footernav {color:white;}
    a:visited#Footernav {color:white;}
    a:hover#Footernav {background-color:#00253F;}

    #Footer {
    margin: 0px 0px 0px 0px;
    padding: 10px 0px 10px 0px;
    /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
    height:25px; /* 14px + 17px + 2px = 33px */
    line-height:11px;
    background: url(images/footer.gif);
    background-repeat: repeat-x;

    /* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
    Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
    IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
    declaration. The incorrect IE5/Win value is above, while the correct value is
    below. See http://glish.com/css/hacks.asp for details. */
    voice-family: "\"}\"";
    voice-family:inherit;
    height:14px; /* the correct height */
    }
    /* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
    length values to user agents that exhibit the parsing error exploited above yet get
    the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
    a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */


    /* ------- MAIN CONTENT ----------- */


    #Content {
    margin:0px 400px 20px 20px;
    padding:10px;
    }

    #SubContent {
    margin:0px 200px 50px 20px;
    padding:10px;
    }

    #SubContentFull {
    margin:0px 20px 50px 20px;
    padding:10px;
    }

    #SubContentAbout {
    margin:0px 260px 250px 20px;
    padding:10px;
    }

    #contact {
    position:absolute;
    left:120px;
    width:250px;
    padding:10px;
    background-color:white;
    border:1px dashed #999;
    line-height:17px;
    /* Again, the ugly brilliant hack. */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:250px;
    }
    /* Again, "be nice to Opera 5". */
    body>#Menu {width:250px;}

    p#contacttext {
    font:14px/20px verdana, arial, helvetica, sans-serif;
    font-weight: bold;
    margin:0px 0px 0px 0px;
    padding:10px;
    color: #000066;
    }

    #benefits {
    position: absolute;
    left: 13%;
    width:550px;
    line-height:17px;
    /* Again, the ugly brilliant hack. */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:550px;
    }
    /* Again, "be nice to Opera 5". */
    body>#Menu {width:550px; }


    #contactform {
    position:absolute;
    left:120px;
    width:350px;
    padding:10px 0px 10px 40px;
    background-color: #CCCCFF;
    border:1px dashed #999;
    line-height:17px;
    /* Again, the ugly brilliant hack. */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:350px;
    }
    /* Again, "be nice to Opera 5". */
    body>#Menu {width:350px;}

    #whoshouldapply {
    position:absolute;
    left:120px;
    width:250px;
    padding:10px 20px 10px 20px;
    background-color: white;
    border:1px dashed #999;
    line-height:17px;
    /* Again, the ugly brilliant hack. */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:250px;
    }
    /* Again, "be nice to Opera 5". */
    body>#Menu {width:250px;}

    #coursearea1 {
    position:absolute;
    left:120px;
    width:300px;
    padding:10px 40px 10px 40px;
    background-color: white;
    border:1px dashed #999;
    line-height:17px;
    /* Again, the ugly brilliant hack. */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:300px;
    }
    /* Again, "be nice to Opera 5". */
    body>#Menu {width:300px;}

    #coursearea2 {
    position:absolute;
    left:120px;
    width:300px;

    padding:10px 40px 10px 40px;
    background-color: white;
    border:1px dashed #999;
    line-height:17px;
    /* Again, the ugly brilliant hack. */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:300px;
    }
    /* Again, "be nice to Opera 5". */
    body>#Menu {width:300px;}

    #coursearea3 {
    position:absolute;
    left:120px;
    width:300px;

    padding:10px 40px 10px 40px;
    background-color: white;
    border:1px dashed #999;
    line-height:17px;
    /* Again, the ugly brilliant hack. */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:300px;
    }
    /* Again, "be nice to Opera 5". */
    body>#Menu {width:300px;}

    #coursearea4 {
    position:absolute;
    left:120px;
    width:300px;

    padding:10px 40px 10px 40px;
    background-color: white;
    border:1px dashed #999;
    line-height:17px;
    /* Again, the ugly brilliant hack. */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:300px;
    }
    /* Again, "be nice to Opera 5". */
    body>#Menu {width:300px;}


    /* -------- RIGHT HAND VIDEO AREA ---------- */

    #google {
    position:absolute;
    top:250px;
    right:70px;
    width:300px;
    padding:00px;
    line-height:17px;
    /* Again, the ugly brilliant hack. */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:300px;
    }
    /* Again, "be nice to Opera 5". */
    body>#Menu {width:300px;}

    #trainingbanner {
    position:absolute;
    top:250px;
    right:70px;
    width:360px;
    padding:00px;
    background: url(images/videocrosshatch.gif);
    background-repeat: repeat-x repeat-y;
    border: 1px solid #FFFFFF;
    line-height:17px;
    /* Again, the ugly brilliant hack. */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:360px;
    }
    /* Again, "be nice to Opera 5". */
    body>#Menu {width:360px;}


    #RightAbout {
    position:absolute;
    top:250px;
    margin-top:50px;
    right:70px;
    width:250px;
    padding:00px;
    line-height:17px;
    /* Again, the ugly brilliant hack. */
    voice-family: "\"}\"";
    voice-family:inherit;
    }
    /* Again, "be nice to Opera 5". */
    body>#Menu {width:250px;}


    p#sidebar {
    left: 0px;
    width: 20px;
    background-image: url(images/crosshatch.gif);
    }

    /* ----------------------- GOOGLE MAPS -------------- */

    #popup {
    background:#EFEFEF;
    border:1px solid #999999;
    margin:0px;
    padding:7px;
    width:270px;
    }

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    So you want those divs spaced evenly across the screen? Then remove those IDs (except if you have specific styling for a specific div) and put a class instead, e.g. class="coursearea". Then in the CSS you would put something like:
    Code:
    .coursearea {
      float: left;
      margin-right: 30px;
      width: 100px;
    }
    However, as I’m typing this I realize that you probably just want them spaced out vertically. A div is a block-level element and as such 100% wide by its nature, and on its own line (putting line break before and after itself). So to have them in the center you would assign a width (e.g. 300px) and center them with margin: auto;. Then, to space them you can put a top and/or bottom margin.

  • #6
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks very much for your help - I really appreciate it.

    I'll try it.

    John


  •  

    Posting Permissions

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