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 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Unhappy Spacing Issue After CSS Ribbon Navigation

    This is the first time I have tried a ribbon banner. I finally got it working but now I have a huge gap in between my Ribbon Navigation banner & my next image/text. Any help would be greatly appreciated. Thanks in advance.

    http://www.sdponds.com/Plumber/demo_css_ribbon.html

    Code:
    #navigation_container {
    	margin: 0 auto;
    	width: 900px;	
    }
    
    #navigation li {
            list-style: none;
            display: block;
            float: left;
    		margin: 1em 0.8em;
    }
    
    #navigation li a {
            text-shadow: 0 2px 1px rgba(0,0,0,0.5);
            display: block;
            text-decoration: none;
            color: #f0f0f0;
            font-size: 1.6em;
            margin: 0;
            line-height: 28px;
    }
    
    #navigation li.active a:hover,
    #navigation li a:hover {
            margin-top: 2px;
    }
    
    #navigation li.active {
            font-style: italic;
    }
    
    #navigation li.active a {
    }
    
    .rectangle {
    	
       background: #0081ff;
       height: 62px;
       position: relative;
       -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
      	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
      	box-shadow: 0px 0px 4px  rgba(0,0,0,0.55);
      	
       -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
    	border-radius: 2px;
    	
       z-index: 500; /* the stack order: foreground */
       margin: 3em 0;
    }
    
    .l-triangle-top {
       border-color: #0052b8 transparent transparent;
       border-style:solid;
       border-width:50px;
       height:0px;
       width:0px;
       position: relative;
       float: left;
       top: 1px;
       left: -50px;
    }
    
    .l-triangle-bottom {
       border-color: transparent transparent #0052b8;
       border-style:solid;
       border-width:50px;
       height:0px;
       width:0px;
       position: relative;
       float: left;
       top: -40px;
       left: -150px;
    }
    
    .r-triangle-top {
       border-color: #0052b8 transparent transparent;
       border-style:solid;
       border-width:50px;
       height:0px;
       width:0px;
       position: relative;
            float: right;
            right: -45px;
            top: -107px;
    }
    
    .r-triangle-bottom {
       border-color: transparent transparent #0052b8;
       border-style:solid;
       border-width:50px;
       height:0px;
       width:0px;
       position: relative;
            float: right;
            top: -149px;
            right: -145px;
    }
    
    #header {
    	width:950px;
    	margin:auto;
    	padding-bottom:75px;
    	padding-top:25px;
    }
    
    .header-left {
    	float:left;
    	width:450px;
    }
    
    .header-right {
    	float:left;
    	width:500px;
    	text-align:right;
    	font-size:20px;
    	color:#0052b8;
    	padding-top: 50px;
    }
    
    #container {
    	width:950px;
    	margin:auto;
    	overflow:auto; 
    	font-family:Arial, Helvetica, sans-serif; 
    	padding-bottom:10px;
    	border-bottom:thin;
    	border-bottom-width: 5px;
    	border-bottom-style: solid;
    	border-bottom-color:#eeeeee;
    
    }
    
    .top-left {
    	float:left;
    	width:440px;
    	margin:auto;
    	overflow:auto; 
    }
    
    .top-right {
    	float:left;
    	width:250px;
    	color:#000;
    	margin:auto;
    	overflow:auto; 
    }

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    the best solution to these types of problems is to reset your tags

    Code:
    * { padding: 0; margin: 0; }
    all tags (<div>, <p>) have default paddings and margins, some up to 40px! that's why many web developers reset them to 0, since these tend to be an annoyance. You can either use the * (for all tags), or individually set them:

    Code:
    body, html, a, p, div ... {
     margin: 0;
     padding: 0;
    }
    make sure you set all the ones you use.

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks. I forgot to reset my styles. I applied that & Im still having the same problem though.

    /*Reset Styles*/
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }

    #navigation_container {
    margin: 0 auto;
    width: 900px;

    }

    #navigation li {
    list-style: none;
    display: block;
    float: left;
    margin: 1em 0.8em;
    }

    #navigation li a {
    text-shadow: 0 2px 1px rgba(0,0,0,0.5);
    display: block;
    text-decoration: none;
    color: #f0f0f0;
    font-size: 1.6em;
    margin: 0;
    line-height: 28px;
    }

    #navigation li.active a:hover,
    #navigation li a:hover {
    margin-top: 2px;
    }

    #navigation li.active {
    font-style: italic;
    }

    #navigation li.active a {
    }


    .rectangle {

    background: #0081ff;
    height: 62px;
    position: relative;
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.55);

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;

    z-index: 500; /* the stack order: foreground */
    margin: 3em 0;
    }

    .l-triangle-top {
    border-color: #0052b8 transparent transparent;
    border-style:solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: left;
    top: 1px;
    left: -50px;
    }

    .l-triangle-bottom {
    border-color: transparent transparent #0052b8;
    border-style:solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: left;
    top: -40px;
    left: -150px;
    }


    .r-triangle-top {
    border-color: #0052b8 transparent transparent;
    border-style:solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: right;
    right: -45px;
    top: -107px;
    }

    .r-triangle-bottom {
    border-color: transparent transparent #0052b8;
    border-style:solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: right;
    top: -149px;
    right: -145px;
    }

    #header {
    width:950px;
    margin:auto;
    padding-bottom:75px;
    padding-top:25px;
    }

    .header-left {
    float:left;
    width:450px;
    }

    .header-right {
    float:left;
    width:500px;
    text-align:right;
    font-size:20px;
    color:#0052b8;
    padding-top: 50px;
    }

    #container {
    width:950px;
    margin:auto;
    overflow:auto;
    font-family:Arial, Helvetica, sans-serif;
    padding-bottom:10px;
    border-bottom:thin;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    border-bottom-color:#eeeeee;

    }

    .top-left {
    float:left;
    width:440px;
    margin:auto;
    overflow:auto;
    }

    .top-right {
    float:left;
    width:250px;
    color:#000;
    margin:auto;
    overflow:auto;
    }

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    k let me take a look, did you upload it ?

    take out the overflow: auto;

    Code:
    #container {
    width: 950px;
    margin: auto;
    overflow: auto;
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 10px;
    border-bottom: thin;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    border-bottom-color: #EEE;
    }
    you don't actually need this, an it's actually pushing everything down thanks for responding so fast and uploading

    Code:
    rectangle {
     background: #0081FF;
     height: 62px;
     position: relative;
     -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
     -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px;
     z-index: 500;
      margin: 3em 0;
    }
    This margin is causing the rest of the blank space. You can set it to just margin-top: 3em; if you want to shave more off
    Last edited by Sammy12; 07-08-2011 at 06:34 AM.

  • Users who have thanked Sammy12 for this post:

    Cali1211 (07-08-2011)

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you again. If I take out the "margin: 3em 0;" then it breaks the ribbon. I did take out the overflow:auto from the container & it pretty much fixed the huge gap. I can just change my bottom border to a top on the next container div & be on my way. 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
    •