...

View Full Version : Spacing Issue After CSS Ribbon Navigation



Cali1211
07-08-2011, 06:16 AM
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


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

Sammy12
07-08-2011, 06:19 AM
the best solution to these types of problems is to reset your tags



* { 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:



body, html, a, p, div ... {
margin: 0;
padding: 0;
}


make sure you set all the ones you use.

Cali1211
07-08-2011, 06:26 AM
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;
}

Sammy12
07-08-2011, 06:28 AM
k let me take a look, did you upload it ?

take out the overflow: auto;



#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



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

Cali1211
07-08-2011, 06:48 AM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum