Creating space between Side Buttons - css

I'm trying to create a space down the left hand side of my page for social media buttons, my problem is the buttons will not spread apart to where there is a large enough gap between buttons.
enter image description here
body {
background: darkgrey;
background-image:url('../https://www.dropbox.com/home?preview=city.jpg');
font-family: arial;
}
#wrapper {
width: 800px;
margin: 100px auto 0 auto;
padding-bottom: 20px;
}
#header {
width: 800;
height: auto;
margin: 0;
background: transparent;
}
.logo{
text-align: center;
}
#tabs{
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li{
float: left;
margin: 0 .5em 0 0;
}
#tabs a{
position: relative;
background: #ddd;
background-image: linear-gradient(to bottom, #ccc, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0,0,0,.4);
}
#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
background: #fff;
}
#tabs a:focus{
outline: 0;
}
#tabs a::after{
content:'';
position:absolute;
z-index: 1;
top: 0;
right: -.5em;
bottom: 0;
width: 1em;
background: #ddd;
background-image: linear-gradient(to bottom, #ccc, #ddd);
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
transform: skew(10deg);
border-radius: 0 5px 0 0;
}
#tabs #current a,
#tabs #current a::after{
background: #fff;
z-index: 3;
}
#content
{
background: #fff;
padding: 2em;
height: 520px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
p {text-align:left;
line-height:120%;
margin-right: 2cm;
letter-spacing: 0px;
}
#icons {
position: absolute;
top: 86px;
left: -90px;
z-index: 3;
}
table {border: solid darkgrey thin;
}
}
footer {
display: inline-block;
width:800px;
text-align: left;
margin-top: 250px;
}
footer ul {list-style-type: none;
text-align: center;
float: left;
}
footer li {display:inline;
margin-left: 20px;
}
footer a:link{
text-decoration: none;
}
footer p {
float:right;
}
.menu {
word-spacing: 10px;
}

Related

css deformed submenu second option and z-index

I'm creating a submenu for my website but it needs some little fixes.
First, I can't make the z-index work, is displayed under the content div, in the live example I removed all z-index, and righ now, I really have no idea how this works :(
Second, in the submenu from second option, the box is more large than the first one. I'm trying to fix it but I don't see where the problem is.
/* Sub-menu */
#main-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#main-nav ul li {
float: none;
display: block;
/* box shadow */
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .4);
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#main-nav ul li:last-child {
box-shadow: none;
}
#main-nav ul a {
color: #fff;
background: #474747;
display: block;
white-space: nowrap;
}
#main-nav ul a:hover {
/* gradient */
background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a);
background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);
background-image: linear-gradient(-90deg, #cdcdcd, #797979);
}
#main-nav ul li:first-child a {
/* rounded corner */
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
#main-nav ul li:last-child a {
/* rounded corner */
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
}
#main-nav ul li:first-child a:after {
content:'';
position: absolute;
left: 30px;
top: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #fafafa;
}
#main-nav:after {
visibility: hidden;
display: block;
font-size: 0;
content:" ";
clear: both;
height: 0;
}
Here's a live example: http://jsfiddle.net/y59kjsLn/1/
Thanks in advance!
Edit: add more css
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }
Chan this cause the z-index problem?
Edit2: Add the html code
Hmmm maybe has something to do with...
<div id="content">
<article class="post clearfix">
<?php
if(array_key_exists($matches[1], $includes)) {
$content = include($includes[$matches[1]]);
} else header("Location: /home");
?>
</article>
</div>
This is just behind the menu.
#content CSS code:
#content {
opacity: 0.8;
background: #fff;
margin: 30px 0 30px;
padding: 20px 35px;
width: 600px;
float: left;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
#content .error {
color: red;
text-align: center;
}
#content .note {
font-size: 80%;
text-align: center;
}
#content p {
margin-top: 30px;
}
h2.post-title {
margin-top: 15px;
background: #888;
border-radius: 5px;
padding: 0px 5px ;
border-top: 1px solid #889;
border-bottom: 1px solid #889;
text-align: center;
}
h2.post-title a {
color: #FFFFFF;
font-size: 0.9em;
text-shadow: 1px 1px 2px #333333;
}
.post {
margin-bottom: 20px;
}
.post-title {
margin: 0 0 5px;
padding: 0;
font: bold 26px/120% Arial, Helvetica, sans-serif;
}
.post-title a {
text-decoration: none;
color: #000;
}
.post-meta {
margin: 0 0 10px;
font-size: 90%;
}
figure.post-imagen img {
float: left;
margin: 5px;
max-width: 260px;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }
Js Fiddle
removed the margin which was affecting the sub menu
#main-nav li:first-child {
margin-left: 10px;
}
edit
Remove and Add
#content
opacity: 0.8; /* removed */
background: rgba(255, 255, 255, 0.55); /* added */
}

Equal Spacing in Navbar

I've made a "Sticky Navbar using CSS and HTML5 and I have 4 links to place on the navbar but I can't get them to space themselves Equally now before you say this is a duplicate and all, but first of all none of the solutions worked for me and second, I have a logo in the middle of the navbar... Some help Please!heres my website: catsonfire.tk
<style>
article {
margin: auto;
height:auto;
padding-bottom:10px;
}
header {
margin: auto;
width: 100%;
position: relative;
top: 16px;
height: 60px;
}
footer {
background-color: wheat;
align-content: center;
margin: auto;
width:100%
}
nav {
position: relative;
width: 100%;
}
#header_container ul {
margin: 0;
padding: 0px;
list-style-type: none;
text-align: center;
}
#main {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#header_container ul li {
display: inline;
width: 25%;
margin:0;
padding:0;
}
#header_container ul li a {
text-decoration: none;
padding: 39px;
color: #fff;
padding: 12px 0 13px 0;
}
#header_container ul li a:hover {
color: #000;
background-color: rgba(0, 0, 0, 0.7);
box-shadow: 1px 1px 1px inset;
-moz-box-shadow: 1px 1px 1px inset;
-webkit-box-shadow: 1px 1px 1px inset;
}
#big {
background: rgba(0, 0, 0, 0.5);
top: 0px;
left: 0px;
right: 0px;
margin: 0px;
width: 100%;
position: absolute;
height: 105px;
}
#header_container {
left: 0;
position: fixed;
width: 100%;
top: 0;
z-index:1000;
height:150px
}
#header {
line-height: 60px;
margin: 0 auto;
}
</style>
Home
About
Your site shows two links, but some thoughts:
#big ul{
display:block;
}
#big li {
display:block;
width:25%;
float:left;
text-align:center;
}
#big li a{
display:inline-block;
}
Makes the li element 1/4th of the width of its parent ul, then centers each a element in those. Add your styles as you want it to look.

How to solve internet Explorer 7 css menu bug

I have an Internet Explorer 7 css issue with my navigation menu.
The links are getting pushed out of line in Internet Explorer.
I think I have a padding problem, any help would be great!!!
http://jsfiddle.net/558pA/
body {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
font-size: 62.5%;
text-rendering: optimizeLegibility;
background: #fff;
}
li {
list-style: none;
}
a:link, a:visited {
color: #4083a9;
outline: none;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #205f82;
}
.green-btn {
background: #4cc44a;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#header {
width: 100%;
height: 50px;
background: #333;
background: rgba(47, 47, 47, 0.98);
z-index: 9997;
}
#header-inner {
position: relative;
margin: 0 auto;
padding: 0 12px;
max-width: 970px;
}
#logo {
float: left;
padding: 0px 20px 0 0;
}
#logo a {
display: block;
width: 82px;
height: 50px;
background-repeat: no-repeat;
background-position: 0 50%;
background-image: url(../img/assets/chartego-logo.png);
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
#logo img {
height: 0;
}
#logo a:hover {
opacity: .6;
}
#nav {
margin: 0 0px 0 20px;
color: #777;
padding:0px;
float:right;
}
#nav>li {
float: right;
font-size: 1.25em;
line-height: 1;
}
#nav>li>a {
display: block;
height: 50px;
padding: 0 20px;
line-height: 50px;
text-decoration: none;
color: #999;
}
#nav>li#user-profile {
float: right;
}
#nav>li img {
float: right;
position: relative;
top:13px;
}
#nav li ul.tabs {
width: 180px;
padding: 0 0 10px 0;
background: #333;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
z-index: 999;
position: absolute;
right: 0px;
}
#nav li ul.tabs li a {
display: block;
padding: 5px 15px;
font-size: 12px;
font-weight: normal;
line-height: 2;
color: #999;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.tabs li a:hover {
color: #ddd;
background: rgba(255, 255, 255, 0.1);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#nav li ul.tabs li {
clear: left;
margin: 0;
width: 100%;
}
#nav li#user-profile ul.tabs li:first-child a {
font-weight: bold;
}
#toggle-nav {
display: none;
}
#nav li#user-profile span.profile-name {
display: none;
}
#chart-btn {
background: #4cc44a;
color: white;
padding: 10px 20px;
margin-top: 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-right: 20px;
}
#chart-btn a {
color: white !important;
}
/* =============================================================================
NAVIGATION MEDIA MAX 800PX
========================================================================== */
#media screen and (max-width: 800px) {
#header {
position: fixed;
height: 40px;
}
#toggle-nav {
position: absolute;
top: 0;
left: 0px;
display: block;
width: 48px;
height: 40px;
text-indent: -9999px;
background-repeat: no-repeat;
background-position: 15px 50%;
background-image: url(../img/assets/icon-hamburger.png);
opacity: .5;
}
#logo a {
display: block;
height: 40px;
margin: 0 auto 0 auto;
}
#logo {
float: none;
padding-right: 0;
text-align: left;
}
#nav {
float: left;
width: 100%;
margin: 0 0 10px 0;
text-align: left;
}
#nav li {
position: relative;
float: none;
margin-right: 0;
text-align: left;
font-size: 12px;
background: rgba(47, 47, 47, 0.98);
}
#nav li ul.tabs {
display: block;
position: static;
float: none;
width: 100%;
left: 0;
margin: 0;
padding: 0;
background: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.tabs li a {
padding: 15px;
font-size: 12px;
font-weight: normal;
line-height: 1;
text-transform: none;
}
#nav li#user-profile {
float: none;
}
#nav li#user-profile img {
float: left;
margin: 0 8px 0 0;
}
#nav li#user-profile span.profile-name {
display: inline;
}
#nav li a:hover {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #fff;
}
#nav li ul.tabs li a:hover {
color: #999;
background: none;
}
#nav li#user-profile ul.tabs li:first-child {
display: none;
}
#header-inner {
width: auto;
padding: 0;
}
#nav li a {
height: auto;
padding: 15px;
font-size: 14px;
font-weight: bold;
line-height: 1;
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: #fff;
}
#nav>li img {
top:0px;
}
#chart-btn {
background:none;
color: white;
padding: 10px 20px;
margin-top: 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-right: 20px;
}
#chart-btn a {
color: white !important;
}
}

CSS hover over wide

Current my mouse pointer if there is point out of the red colour box it still doing the hover function, but what i need is i only need the hover in red colour box, it out of the box it will hide the menu.
This is the my source from JSfiddle http://jsfiddle.net/KECN7/
This is my html source code
<ul id="menu">
<li>
<ul>
<li>Logout</li>
<li>Account Settings</li>
<li>Terms & Policies</li>
</ul>
</li>
</ul>
this is css source code
#menu{
/*width: 50%;*/
margin: 0;
padding: 10px 0 0 0;
list-style: none;
position: absolute;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a{
color: #fafafa;
}
*html #menu li a:hover{ /* IE6 */
color: #fafafa;
}
#menu li:hover > ul{
display: block;
z-index: 99;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 10px 0 25px 0;
/*width: 50px;*/
padding: 0;
display: none;
position: absolute;
top: 20px;
right: 10px;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a{
padding: 15px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 100px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}
#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
a.btn-function {
background-image: url(../ovolo/img/btn_function.png);
background-color: red;
background-size: 27px;
background-repeat: no-repeat;
display: block;
position: relative;
margin: 0px 5px 0 90px;
float: left;
}
The problem is you are applying the red box to the a element, but taking action on the (larger) li parent element.
You can change your selector to (Fiddle):
#menu li a:hover + ul, #menu li a + ul:hover{
display: block;
z-index: 99;
}
This is not a perfect fix because of the dead space between the a and the ul though, the best option would be to make the a take up the entire space of the li.

CSS ribbon menu causing gap between content and header

I am not sure how to remove the large gap between my header and the beginning of the slideshow. pivotalpixels.com/colusa_fair/ I believe that the problem is something to do with the ribbon navigation but after trying tons of different things I do not know how to move the content up without the recent news moving up to right underneath the navigation bar, which needs to be under the slideshow as it currently is.
css is below
Thanks I appreciate any help!
#charset "utf-8";
/* CSS Document */
body {
margin:0px;
padding:0px;
background-color:#c4c0be;
background-image:url(../images/bluewoodbkgd.jpg);
margin:0px; padding:0px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#7f7d78;
font-size:13px;
line-height:19px;
}
h1{}
h2 {
margin:0px 0px 10px 0px;
font-size:36px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
font-weight: bold;
}
h3{font-size:16px; color: #142b4e; font-weight: bold;}
small {
color:#595856;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
}
a {
color:#007de2;
text-decoration:none;
}
a:hover { text-decoration:underline; }
p { margin: 0px 0px 15px 0px; }
#main {
min-height: 500px;
}
#footer {
color:white;
}
.container {
width:994px;
margin:0 auto;
}
#header {
padding-top:10px;
margin: 0;
}
#logo h1 {
margin:0px;
display:block;
text-indent:-9999px;
}
/* Fix up IE6 PNG Support */
img, #logo { behavior: url(scripts/iepngfix.htc); }
#logo {
position: absolute;
top:-25px;
background-image:url(../images/logo_colusa.png);
background-repeat:no-repeat;
margin: 0 0 0 25px;
width:240px;
height:147px;
}
#navigation_container {
width: 994px;
margin: 0;
}
ul#menu{
margin: 0;
top:10px;
position: absolute;
left: 300px;
}
ul#menu li {
list-style: none;
float: left;
display: inline;
}
ul#menu li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
text-decoration: none;
margin: 0 10px 0 0;
color:#FFF;
font: 18px/27px 'ArvoRegular', Arial, sans-serif;
line-height: 28px;
}
ul#menu li a.active, ul#menu li a:hover {
color:#5a8c35;
text-decoration: underline;
margin-top: 2px;
}
.rectangle {
background: #142b4e;
height: 52px;
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: 35px 0 0 0;
}
.l-triangle-top {
border-color: #142b4e transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: 0px;
left: -50px;
}
.l-triangle-bottom {
border-color: transparent transparent #142b4e;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: -49px;
left: -150px;
}
.r-triangle-top {
border-color: #142b4e transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
right: -45px;
top: -50px;
}
.r-triangle-bottom {
border-color: transparent transparent #142b4e;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
top: -100px;
right: -145px;
}
#sec_navigation_container {
width: 600px;
margin: 0 0 0 255px;
}
ul#menu_sec{
margin: 0;
top:10px;
position: absolute;
left: 110px;
}
ul#menu_sec li {
list-style: none;
float: left;
display: inline;
}
ul#menu_sec li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
text-decoration: none;
margin: 0 10px 0 0;
color:#FFF;
font: 18px/27px 'ArvoRegular', Arial, sans-serif;
line-height: 28px;
}
ul#menu_sec li a.active, ul#menu_sec li a:hover {
color:#ce6536;
text-decoration: underline;
margin-top: 2px;
}
.rectangle_mainsec {
background: #ce6536;
height: 52px;
position: relative;
z-index: 500; /* the stack order: foreground */
margin: 0;
}
.l-triangle-top-sec {
border-color: #ce6536 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: 0px;
left: -50px;
}
.l-triangle-bottom-sec {
border-color: transparent transparent #ce6536;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: -49px;
left: -150px;
}
.r-triangle-top-sec {
border-color: #ce6536 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
right: -125px;
top: -53px;
}
.r-triangle-bottom-sec {
border-color: transparent transparent #ce6536;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
top: -100px;
right: -225px;
}
/*
Block-Styles
*/
.block {
margin-bottom:20px;
}
.block_inside {
padding:0 20px;
}
.image_block {
border:1px solid #557f9d;
background-color:#ffffff;
padding:5px;
float:left;
}
.image_block img {
border:1px solid #b5b5b5;
}
#block_slideshow{
overflow: hidden;
width: 100%;
}
.upcoming_events {
float:left;
width:315px;
height: 325px;
margin-left:30px;
padding: 10px;
border: 1px solid #557f9d;
background-color:#ffffff;
}
.upcoming_events h2, #event_items h2{
position: relative;
width: 90%;
font: 24px/27px 'DancingScriptOTRegular', Arial, sans-serif;
padding: 6px 20px 6px 30px;
margin: 4px 10px 10px -31px;
color: #fff;
background-color: #5a8c35;
text-shadow: 0px 1px 2px #7c7c7c;
-webkit-box-shadow: 0px 2px 2px 0px #295e04;
-moz-box-shadow: 0px 2px 2px 0px #295e04;
box-shadow: 0px 2px 1px 0px #295e04;
border: 1px solid #295e04;
}
.upcoming_events h2:before, #event_items h2:before
{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -2px;
top: 0px;
border-style: solid;
border-width:20px;
border-color: transparent #fff transparent transparent;
}
.upcoming_events h2:after, #event_items h2:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #295e04 #295e04 transparent transparent;
}
.block_content{ padding: 10px;}
#block_recent{overflow:auto;
margin-bottom:20px; }
#event_items {
width:560px;
margin-right:25px;
margin-left: 20px;
float:left;
padding: 10px;
border: 1px solid #557f9d;
background-color:#ffffff;
}
#countdown {
float:right;
width:332px;
height: 175px;
margin-right: 20px;
margin-bottom:20px;
background-image: url(../images/countdown.png);
background-repeat:no-repeat;
}
#block_right {
float:right;
width:332px;
height: 175px;
margin-right: 20px;
margin-bottom: 20px;
background-image: url(../images/countdown.png);
background-repeat:no-repeat;
}
.mini_event_item {
width: 48%;
margin: 5px 0px 10px 10px;
float: left;
}
.date{color: #5a8c35; font-weight: bold;}
.mini_event_item .block_inside {
padding:25px 30px 15px 30px;
}
.mini_event_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }
#sponsors{margin: 10px 0px; padding: 10px; height: 95px; background-color: #142b4e; }
.sponsor_item,footer_item{float: left; margin-right: 10px; padding: 10px; height: 70px; background-color: #ffffff; border: 1px solid #000;}
#footer {
font: 18px/27px 'ArvoRegular', Arial, sans-serif;
}
.footer_column {
float:left;
width:300px;
margin-right:10px;
}
#footer .long {
width:670px;
}
#footer h3 {
color:#fff;
text-shadow: 1px 1px 1px #000;
}
#footer h4{
font-size: 16px;
text-shadow: 1px 1px 1px #000;
}
#footer p{ font-size: 12px;
}
ul.industry_links{
padding: 10px;
display: inline;
}
ul.industry_links li {
float:left;
list-style:none;
text-align: center;
}
ul.industry_links li a{
display:block;
width: 135px;
height: 79px;
margin-right: 10px;
padding: 10px;
background-color: #ffffff;
border: 1px solid #039;
text-align: center;
}
.footer_column ul li, .footer_column ul {
list-style:none;
margin:0px;
padding:0px;
font-size: 12px;
}
The r-triangle-top-sec and r-triangle-bottom-sec elements that generate the "ribbon" effect are using the "CSS Triangle Trick" which requires a large border size (50px in this case).
This is causing a lot of extra height due to the invisible border rendering.
One quick fix is to position:absolute these elements.
First, make the container position:relative so the child elements will use it as a positioning reference point
#sec_navigation_container{
position:relative /* Add */
/*...*/
}
Add this to r-triange-top-sec
position: absolute;
top: 0;
right: -50px;
Add this to r-triange-bottom-sec
position: absolute;
top: -50px;
right: -50px;
That should get rid of some of that spacing. Applying this idea to the upper "ribbon" might help as well.
UPDATE
Turns out, the exact same code can be used for the blue ribbon as well. Rinse/repeate the above code but for #navigation_container, l-triangle-top and l-triangle-bottom.
That will move your "slideshow" content flush to the navigation.
You can then add some margin to your #header element such as:
margin-bottom:2em;
to push that "slideshow" back down to a desired separation. (adjust the valid as desired)
note I just eyeballed the placement of the ribbon. Please adjust top/right position as needed for your design
I hope that helps!

Resources