I have created a slated div to use with my navbar, but it messes up the rest of the formatting for the website. The navbar is in the top right and the slanted div is underneath it, but it messes up everything else on the webpage. I've been trying everything to no avail.
http://imgur.com/a/bmv6l
Navbar HTML:
<template name="navbar">
<div class="navbar">
<ul>
<li>Contact</li>
<li>Services</li>
<li>Experience</li>
<li>Home</li>
</ul>
</div>
</template>
Navbar CSS:
.navbar {
position: relative;
display: inline-block;
padding: 0em 0em 1em 10em;
overflow: hidden;
color: #fff;
float: right;
}
.navbar:after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #000;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(45deg);
-ms-transform: skew(45deg);
transform: skew(45deg);
z-index: -1;
}
ul {
list-style-type: none;
margin-left: 100px;
margin: 0;
padding: 0;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 5px;
overflow: hidden;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bolder;
-webkit-font-smoothing: antialiased;
z-index: -1;
}
li {
margin-left: 1em;
margin-right: 2em;
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
-webkit-box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
border: 5px;
border-style: solid;
border-radius: 10px;
border-color: white;
transition: background 0.2s ease,
padding 0.8s linear;
}
li a:hover {
background-color: #111;
}
.active {
border-radius: 8px;
border-color: white;
background-color: #555;
}
"Bobcats Services" Div HTML:
<body>
<div id="nav">
{{> navbar}}
</div>
<div id="center">
<h1>Bobcats Services</h1>
<h2>Everything you need!</h2>
</div>
</body>
"Bobcats Services" Div CSS:
/* CSS declarations go here */
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
/*background-color: #0193ff;*/
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b7ea+0,009ec3+100;Blue+3D+%2315 */
background: rgb(135,224,253); /* Old browsers */
background: -moz-linear-gradient(top, rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
/* Image instead of standard color
background-image: url("images/watch-plane.png");
background-repeat: no-repeat;
background-size: cover;
*/
}
#nav {
}
#center {
width: 30%;
padding-bottom: 2em;
padding-top: 2em;
margin: auto;
margin-top: 2em;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
color: white;
border-style: solid;
border-radius: 5px;
border-color: #008fc8;
font-family: 'Open Sans', sans-serif;
}
When using float, you need to clear, so the folllowing elements to look right. I have added here: https://jsfiddle.net/44x11g34/ an example.
What i had added between the 2 main blocks:
<div class="clear"></div>
and some small css
.clear {
clear: both;
}
Hope this will help you.
I am designing a page, and run into a problem, I can not solve on my own. On zooming out, the items in the header are moving vertically, at 25%, the elements are in completely wrong position.
I am using block display, because i want the menu items to move to the center on zoomout(like on facebook, twitter or here), so inline and inline-block not solving my problem.
Same reason on relative positioning.
Is there another way to achive the same effect instead of relative positioning?
Any ideas how to make it right?
Cheers
Andrew
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen"> </style>
<title>Layout</title>
<link href="../Content/LAYOUT.css" rel="stylesheet" />
</head>
<body>
<div id="menucontainer">
<div id="wrapper">
<a href="HTTP://www.google.com" class="LC">
<p class="L"> </p>
</a>
<a href="http://www.idk.com" class="KC">
<p class="K">Új Kérdés</p>
</a>
<a href="http://www.idk.com" class="EC">
<p class="E">Új Értékelés</p>
</a>
<a href="http://www.idk.com" class="MessageC">
<p class="Message"> </p>
</a>
</div>
</div>
</body>
</html>
CSS:
body { background-color: lightgray;
margin:0 auto;}
#menucontainer {
position: fixed;
width: 100%;
min-height: 45px;
height: 20px;
background: #3f3f3f; /* Old browsers */
background: -moz-linear-gradient(top, #3f3f3f 0%, #000000 91%, #3f3f3f 91%, #33eb31 93%, #33eb31 101%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(91%,#000000), color-stop(91%,#3f3f3f), color-stop(93%,#33eb31), color-stop(101%,#33eb31)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* IE10+ */
background: linear-gradient(to bottom, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#33eb31',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64);
-moz-box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64);
box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64);
font-family: Corbel;
z-index: 2;
display: inline-block; }
#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
z-index: -1;
white-space: nowrap;
height: 30px;
max-height: 30px;
display: block;
padding-top:9px;
padding-bottom:10px; }
.LC {
left: 0%;
min-width: 30px;
top: -20px;
max-width:30px;
width:30px;
display: block;
position:relative;
white-space:nowrap;
height:30px;
min-height:30px;
margin-right:20px;
margin-top:2px; }
.L {
background-image: url(/logo.png);
background-size: 30px 30px;
height: 30px;
width: 30px;
min-width: 30px;
max-width: 30px; }
.KC {
left: 7%;
top: -64px;
display: inline-block;
position: relative;
text-decoration: none;
width:90px;
min-width:90px;
white-space:nowrap;
height:30px; }
.K {
font-family: Arial;
font-weight: bold;
font-size: 1.2em;
color: white;
text-decoration:none; }
.K:link {
text-decoration: none; }
.K:visited {
text-decoration: none; }
.K:hover {
text-decoration: none;
color: #33eb31; }
.K:active {
color: white;
text-decoration: none; }
.EC {
left: 20%;
top: -105px;
display: block;
position: relative;
text-decoration: none;
width:110px;
min-width:110px;
white-space:nowrap;
height:30px; }
.E {
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 1.2em;
color: white;
min-width: 30px; }
.E:link {
text-decoration: none;
}
.E:visited {
text-decoration: none;
}
.E:hover {
text-decoration: none;
color: #33eb31;
}
.E:active {
color: white;
text-decoration: none;
}
I think you might be over complicating this a little bit. you shouldn't need to use position:absolute;. You should use ul li elements for your menu instead. You can set #wrapper to the size of your page and use margin:0px auto to center it.
Let me know if this looks like what you're trying to do: http://jsfiddle.net/gxwxk3zv/
I was just wondering how to align links in a navigation menu in the middle vertically, as I have tried vertical align and it is not working and have searched stack overflow and have found no answers.
Note: the navmenu usually goes the full length of the page and the link are at the top, not in the middle.
Here is the fiddle
Here is the code:
CSS:
* {
padding: 0px;
margin: 0px;
}
.top {
position: fixed;
background-color: red;
border-radius: 10px;
width: 100%;
min-width: 1024px;
height: 100px;
border-radius: 10px;
border: 4px solid white;
}
.left {
position: fixed;
float: left;
margin-top: 5px;
width: 30%;
height: 100%;
background-color: red;
margin-bottom: 10px;
border-radius: 10px;
border: 4px solid white;
}
.menuandtop { bgcolor: yellow; }
.main {
width: 90%;
margin: 0px;
height: 100%;
background-color: pink;
border-radius: 10px;
float: right;
}
a { text-decoration: none; }
.navmenu { list-style-type: none; }
.navmenu li a {
color: #2E2E2E;
font-family: arial;
font-face: arial;
font-weight: bold;
}
ul.navmenu a {
display: block;
text-decoration: none;
}
.navmenu li {
background: rgb(255,50,50);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMzIzMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmNmQ2ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUyJSIgc3RvcC1jb2xvcj0iI2ZmMjgyOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,50,50,1) 0%, rgba(255,109,109,1) 50%, rgba(255,40,40,1) 52%, rgba(255,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,50,50,1)), color-stop(50%, rgba(255,109,109,1)), color-stop(52%, rgba(255,40,40,1)), color-stop(100%, rgba(255,0,0,1)));
background: -webkit-linear-gradient(top, rgba(255,50,50,1) 0%, rgba(255,109,109,1) 50%, rgba(255,40,40,1) 52%, rgba(255,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(255,50,50,1) 0%, rgba(255,109,109,1) 50%, rgba(255,40,40,1) 52%, rgba(255,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(255,50,50,1) 0%, rgba(255,109,109,1) 50%, rgba(255,40,40,1) 52%, rgba(255,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(255,50,50,1) 0%, rgba(255,109,109,1) 50%, rgba(255,40,40,1) 52%, rgba(255,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#ff0000', GradientType=0 );
filter: none;
height: 20%;
text-align: center;
}
.li1 { border-bottom: 1px solid #2E2E2E; }
.li2 { border-top: 1px solid #2E2E2E; }
.li3 {
border-top: 1px solid #2E2E2E;
border-bottom: 1px solid #2E2E2E;
}
HTML:
<body height="1000px" bgcolor="#2E2E2E">
<div class="menuandtop">
<div class="top"> </div>
<br>
<br>
<br>
<br>
<br>
<div class="left">
<ul class="navmenu">
<li class="li1">Home</li>
<li class="li3">Home</li>
<li class="li3">Home</li>
<li class="li3">Home</li>
<li class="li2">Home</li>
</ul>
</div>
</div>
<div class="footer"> </div>
</body>
There are a few way this can be achieved, one way is to create an invisible inline-block element with 100% height which the navigation is vertically aligned to. Change your CSS in the following way:
.left{
position: fixed;
float: left;
margin-top: 5px;
width: 30%;
height: 100%;
background-color: red;
margin-bottom: 10px;
border-radius: 10px;
border: 4px solid white;
font-size: 0;
}
Font size is set to 0 to remove white space.
.left:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
}
The :after pseudo-element is used to create the invisible element.
.navmenu{
display: inline-block;
font-size: 16px;
list-style-type: none;
width: 100%;
}
The menu is then set to be inline-block and the font-size set to offset the zeroed font size in the parent element.
http://jsfiddle.net/D7V7p/
here you are:
http://jsfiddle.net/J7P2c/
just add the following code:
.left {
display:table;
}
.navmenu{
display:table-cell;
vertical-align:middle;
}
Update: updated fiddle,
although on firefox it worked fine, on chrome there seemed to be some kind of error produced by the height of the li, so remove the following:
.navmenu li{
height: 20%;
}
Updated fiddle: http://jsfiddle.net/Vr8cv/1/
While checking over something else on my college’s website, it noticed that zooming in and out of our website’s pages makes a small gap appear between the header and the main content on certain zoom levels. We mostly test for IE compatibility since that’s what a majority of our visitors use, and when I zoom in and out in IE 9, the gap never appears. In the current versions of Firefox, Chrome, Safari, and Opera, the same “moving ” error occurs. It’s not a very bad bug, as it doesn’t affect readability of the site too severely, but it’s something I’d like to eliminate if possible.
What I’ve tried already:
Making the that appears to be moving, “content”, a fixed width
Giving “content” a fixed position Giving the inside “content”, “canvas”, a fixed position
Changing the z-indexes on “content” and “canvas” each
Not setting a position for the header
Removing a of class “clear” between s “ct100_header” and “content” (it just makes the error more extreme)
The site: www.swic.edu
"sw_home.css"
/*============================================================*/
/*==================== Left Column ==========*/
/*==================================================*/
/*========== Ads ==========*/
.ad-content
{
text-align: center;
margin: 20px 0;
padding: 0;
}
.ad-content p
{
text-align:right;
padding-right:15px;
margin-top: -4px;
}
.ad-content img
{
padding: 5px;
background: #fff;
border: 1px solid #417ec1; /* light blue */
width: 180px;
}
.ad-content img:hover, .ad_content img:active
{
border: 1px solid #c2b535; /* light yellow */
}
/*//////////////////// Ads //////////*/
/*////////// Ads //////////*/
/*//////////////////////////////////////////////////*/
/*///////////////////// Left Column //////////*/
/*////////////////////////////////////////////////////////////*/
/*============================================================*/
/*==================== Main Column ==========*/
/*==================================================*/
/*========== Top Row ==========*/
/*////////// Top Row //////////*/
/*//////////////////////////////////////////////////*/
/*==================================================*/
/*========== Announcements ==========*/
.announcements-wrapper
{
margin-top: -4px;
position: relative;
z-index: 1;
}
.announcements-wrapper .announcement
{
}
.announcements-wrapper .announcement-last
{
margin-bottom: 16px;
}
.announcements-wrapper h2
{
font-size: 18px;
border-width: 0px 0px 1px 0px;
border-color: #888;
border-style: solid;
color: #771425;
}
.announcements-wrapper p
{
}
.announcements-wrapper .multicol ul
{
margin-bottom: 0px!important;
}
.announcement-wrapper img
{
}
/*========================================*/
/*===== Count Down Timer =====*/
.countdown-box
{
/* --COMMENT OUT-- to DISPLAY; --UNCOMMENT-- to HIDE*/
/*display:none; visibility:hidden;*/
width: 100%;
border: 1px solid #888;
margin-bottom: 20px;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
behavior: url(/packages/PIE/PIE_uncompressed.htc);
}
.countdown-box a
{
color: #417ec1; /* light blue */
text-decoration: none;
font-weight: 700;
font-size: 12px;
}
.countdown-box .en-event-date
{
font-size: 16px !important;
font-weight: 700;
}
.countdown-box a:visited
{
color: #417ec1; /* light blue */
text-decoration: none;
}
.countdown-box a:hover
{
color: #b5a933; /* triad yellow; */
}
.countdown-box a:active
{
color: #b5a933; /* triad yellow; */
}
/* might need implementing in future */
/*////////// Announcements //////////*/
/*//////////////////////////////////////////////////*/
/*==================================================*/
/*========== Bottom Row ==========*/
/*========================================*/
/*===== Widgets =====*/
.widget
{
padding: 3px;
border: 1px solid #888;
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
-khtml-border-top-left-radius: 4px;
border-top-left-radius: 4px;
border-radius: 4px;
position: relative;
behavior: url(/packages/PIE/PIE_uncompressed.htc);
}
/*===== PollBox =====*/
.widget.poll p
{
border: 1px solid #888;
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
-khtml-border-top-left-radius: 4px;
border-top-left-radius: 4px;
border-radius: 4px;
position: relative;
behavior: url(/packages/PIE/PIE_uncompressed.htc);
background: #aaaaaa url(/css/images/widget-header-bg.png) 50% 50% repeat-x;
line-height: 30px;
font-size: 12px;
color: #193c69; /* dark blue */
text-align: center;
}
.widget.poll ol
{
margin-bottom: 20px;
left: 0;
}
.widget.poll ol li {
font-size: 11px;
line-height: 15px;
}
.widget.poll input[type=submit]
{
/*margin: 0 0 20px 50px;*/
}
/*===== Ektrons Reportchart.css overrides =====*/
/* /punch ektron in face */
.widget.poll table.tblreport *
{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
color: #222;
font-family: Verdana, Sans-Serif;
line-height:20px;
font-size: 12px;
font-weight: normal;
}
.widget.poll table.tblreport
{
border-width: 0;
}
.widget.poll table.tblreport .headreport
{
padding: 0px 3px;
border: 1px solid #888;
background: #aaaaaa url(/css/images/widget-header-bg.png) 50% 50% repeat-x;
font-size: 12px;
height: 30px;
color: #193c69; /* dark blue */
vertical-align: middle;
text-align: center;
}
.widget.poll table.tblreport td
{
padding: 0 10px;
}
.widget.poll table.tblreport .resultbar
{
background: #005daa; /* swic blue; */
}
.widget.poll span.refreshlink
{
margin: 10px 0;
display: block;
}
.widget.poll a.refreshlink
{
color: #417ec1!important; /* light blue */
line-height:20px;
font-size: 12px;
float: right;
margin: -30px 0 0 0;
}
.widget.poll a.refreshlink:hover
{
color: #b5a933!important; /* triad yellow; */
}
/*///// Widgets /////*/
/*////////////////////////////////////////*/
/*////////// Bottom Row //////////*/
/*//////////////////////////////////////////////////*/
/*///////////////////// Main Column //////////*/
/*////////////////////////////////////////////////////////////*/
/*============================================================*/
/*==================== Footer Changes ==========*/
.footer p a
{
font-size: 10px;
}
/*///////////////////// Footer Changes //////////*/
/*////////////////////////////////////////////////////////////*/
"sw_layout.css"
/*////////////////////////////////////////////////////////////*/
/*============================================================*/
/*==================== Header Layout ==========*/
.header {
height: 140px;
position: relative;
z-index: 3;
}
/* because if i use a css3 gradient on the header, it causes z-index issues with the menu because its the relatively positioned object */
.header-bg-wrapper-1 {
width: 100%;
height: 100%;
background: #193c69;
background: -moz-linear-gradient(top, #193c69 0%, #005daa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#193c69), color-stop(100%,#005daa));
background: -webkit-linear-gradient(top, #193c69 0%,#005daa 100%);
background: -o-linear-gradient(top, #193c69 0%,#005daa 100%);
background: -ms-linear-gradient(top, #193c69 0%,#005daa 100%);
background: linear-gradient(to bottom, #193c69 0%,#005daa 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#193c69', endColorstr='#005daa',GradientType=0 );
}
.header p {
color: #fff;
margin: 0;
padding: 0;
}
/*==================== Header Row Layout ==========*/
.header .row-1 {
width: 100%;
height: 100px;
}
.header .row-2 {
width: 100%;
height: 40px;
}
/*==================== Header Row 1 Content ==========*/
.header .swic-logo {
background-color: #fff;
margin: 10px auto;
padding: 2px 0px 5px 5px;
text-align: center;
width: 170px;
}
.header .swic-logo a img {
position: relative;
}
.header h1 {
font-size: 30px;
line-height: 75px;
font-family: Arial;
color: #fff;
margin: 10px 0px 0px -20px;
padding: 0px;
}
.header .header-links-wrapper {
float: right;
}
.header .header-links-wrapper a {
font-size: 14px;
color: #fff;
}
.header .header-links-wrapper a:hover, .header .header-links-wrapper a:active {
color: #DDB042;
}
.header .header-icons-wrapper {
float: right;
margin-top: 35px;
}
/*==================== Header Row 2 Content ==========*/
/* main menu */
.main-menu {
width: 100%;
height: 40px;
font-family: Arial;
}
.main-menu-bg-middle {
background: #111;
width: 100%;
position: absolute;
top: 100px;
left: 0;
height: 40px;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
}
/* search box */
.header .search-wrapper {
position: relative;
height: 38px;
text-align: center;
}
.header .search-wrapper .search-box {
width: 150px;
height: 26px !important;
font-size: 15px;
line-height: 26px;
position: absolute;
right: 40px;
top: 1px;
padding: 0 5px;
margin: 5px 0 0 0;
background: url(http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif) #ffffff no-repeat left 50%;
border: 1px solid #bccdf0;
border-collapse: collapse;
}
.header .search-wrapper .search-box:focus {
background: #fff;
}
.header .search-wrapper .search-button {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
width: 40px;
height: 40px;
border: none;
background: transparent;
background-image: url('/images/layout/paw-button-angled-up.png');
background-repeat: no-repeat;
}
.header .search-wrapper .search-button:hover, .header .search-wrapper .search-button:focus {
background-image: url('/images/layout/paw-button-angled-down.png');
outline: none;
}
.header .search-wrapper .search-button:active {
background-image: url('/images/layout/paw-button-angled-down.png');
outline: none;
}
/*==================== Superfish Menu Styles ==========*/
.sf-menu {
margin: 0; padding: 0;
}
.sf-menu a {
padding: 10px 16px;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #fff;
}
.sf-menu li li a
{
padding: 7px 10px;
}
.sf-menu li {
font-size: 17px;
line-height: 20px;
font-weight: bold;
margin: 0!important; padding: 0!important;
}
.sf-menu li ul{
margin-top: -3px;
background: #444; /* fixes IE7 background not behind li border problem */
width: 12em;
}
.sf-menu li li {
background: #444;
font-size: 15px;
font-weight: normal;
border-bottom: 1px dotted #555;
}
.sf-menu li li li {
background: #555;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #888;
color: #b71f38; /* triad red; */
text-decoration: none;
outline: 0;
}
/*//////////////////// Header Layout ==========*/
/*////////////////////////////////////////////////////////////*/
/*============================================================*/
/*==================== Content Layout ==========*/
/*==================== Wrappers ==========*/
.content {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
}
.canvas {
width: 960px;
position: relative;
margin: 0 auto;
padding: 16px 0;
}
/*==================== Content Title ==========*/
.content-header-wrapper
{
position: relative;
display: block;
width: 100%;
margin-bottom: 16px;
}
.breadcrumbs-wrapper
{
float: left;
width: 84%;
height: 20px;
font-size: 10px;
margin-bottom: 4px;
overflow: hidden; /* i want to truncate really long breadcrumbs */
}
.email-print-wrapper
{
width: 16%;
float: right;
text-align: right;
margin-bottom: 4px;
}
.page-title-wrapper
{
clear: both;
border-bottom: 3px double #777;
}
.page-title-wrapper h1
{
margin: 1px; /* fixes corner redraw glitches that pop up sparatically in some broswers as you scoll, ect */
padding: 4px 4px 4px 4px;
}
/*==================== Side Menu ==========*/
.side-menu-box
{
border: none;
background: none;
padding: 0 5px;
}
.side-menu-box h2
{
background: none;
padding: 0 5px;
color: #771425; /* medium red */
line-height:29px;
border-bottom: 1px solid #888;
margin-bottom: 10px;
font-size: 14px;
}
.side-menu-box ul
{
list-style-type: none;
margin: 0 0 10px 10px!important;
left: 0!important;
}
.side-menu-box ul li a
{
text-decoration: none;
}
.side-menu-box ul li a:hover
{
text-decoration: underline;
}
.ekflexmenu_accessible_menu_startlink, .ekflexmenu_accessible_menu_endlink, .ekflexmenu_accessible_menuitem_selected_message
{
display: none;
}
.ekflexmenu_accessible_menu_start
{
display: none;
}
.side-bar-bg-wrapper{
position: absolute;
top: 0px;
left: 10px;
height: 100%;
width: 220px;
background: #eee;
z-index: -1000;
}
.side-bar-bg-left
{
position: absolute;
top: 0px;
left: 0px;
width: 110px;
height: 100%;
z-index: -999;
background: #eee;
background: -moz-linear-gradient(left, rgba(221,221,221,1) 0%, rgba(238,238,238,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(221,221,221,1)), color-stop(100%,rgba(238,238,238,1)));
background: -webkit-linear-gradient(left, rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);
background: -o-linear-gradient(left, rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);
background: -ms-linear-gradient(left, rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);
background: linear-gradient(left, rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#eeeeee',GradientType=1 );
}
.side-bar-bg-right
{
position: absolute;
top: 0px;
left: 120px;
width: 110px;
height: 100%;
z-index: -999;
background: #eee;
background: -moz-linear-gradient(left, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1)));
background: -webkit-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);
background: -o-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);
background: -ms-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);
background: linear-gradient(left, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=1 );
}
.ekflexmenu_accessible_menu_startlink, .ekflexmenu_accessible_menu_endlink, .ekflexmenu_accessible_menuitem_selected_message
{
display: none;
}
.ekflexmenu_accessible_menu_start
{
display: none;
}
/*//////////////////// Content Layout ==========*/
/*////////////////////////////////////////////////////////////*/
/*============================================================*/
/*==================== Footer Layout ==========*/
.footer {
position: relative;
width: 100%;
background: #005daa;
/*
background: -moz-linear-gradient(top, #005daa 0%, #193c69 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005daa), color-stop(100%,#193c69));
background: -webkit-linear-gradient(top, #005daa 0%,#193c69 100%);
background: -o-linear-gradient(top, #005daa 0%,#193c69 100%);
background: -ms-linear-gradient(top, #005daa 0%,#193c69 100%);
background: linear-gradient(to bottom, #005daa 0%,#193c69 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005daa', endColorstr='#193c69',GradientType=0 );
*/
}
.footer-bar-wrapper {
color: #fff;
font-size: 11px;
font-family: Arial, Sans-Serif;
margin: 0;
padding: 0;
width: 100%;
background: #005daa;
background: -moz-linear-gradient(top, #005daa 0%, #193c69 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005daa), color-stop(100%,#193c69));
background: -webkit-linear-gradient(top, #005daa 0%,#193c69 100%);
background: -o-linear-gradient(top, #005daa 0%,#193c69 100%);
background: -ms-linear-gradient(top, #005daa 0%,#193c69 100%);
background: linear-gradient(to bottom, #005daa 0%,#193c69 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005daa', endColorstr='#193c69',GradientType=0 );
}
.footer .footer-bar-wrapper p {
color: #fff;
font-size: 11px;
margin: 10px 0;
padding: 0;
}
.footer .footer-links a {
color: #fff;
}
.footer .footer-links a:hover {
color: #EAB73A;
}
.footer .copyright {
text-align: right;
}
.footer-campuses-wrapper {
padding-top: 10px;
/*color: #fff;*/
font-size: 11px;
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(221,221,221,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(221,221,221,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 );
}
.footer-campuses-wrapper a:link,
.footer-campuses-wrapper a:visited {
color: #417ec1;
}
.footer-campuses-wrapper a:hover,
.footer-campuses-wrapper a:active {
color: #b5a933;
}
.footer-campuses-wrapper .container_12 {
/*
border-right: 2px solid #ddd;
border-left: 2px solid #ddd;
*/
}
.footer-campuses-wrapper .campus-inner-wrapper {
position: relative;
height: 100%;
width: 100%;
}
.footer-campuses-wrapper .campuses-divider{
/*
position: absolute;
top: 0px;
right: -10px;
height: 100%;
width: 0px;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
*/
}
.footer-campuses-wrapper h2,
.footer-campuses-wrapper address {
display: inline;
}
.footer-campuses-wrapper h2 {
font-size: 10px;
font-family: Verdana, sans-serif;
}
.footer-campuses-wrapper h2 a {
font-size: 10px;
}
.footer-campuses-wrapper address {
font-style: normal;
font-size: 10px;
}
.footer-campuses-wrapper .hlc-logo {
float: right;
height: 80px;
margin-bottom: 10px;
}
.footer-campuses-wrapper .google-map-link {
float: left;
margin-right: 20px;
}
.footer-campuses-wrapper .google-map-link img {
height: 60px;
width: 60px;
}
.footer-bottom-border {
height: 10px;
background: rgb(25,60,105); /* Old browsers */
background: -moz-linear-gradient(top, rgba(25,60,105,1) 0%, rgba(0,93,170,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,60,105,1)), color-stop(100%,rgba(0,93,170,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#193c69', endColorstr='#005daa',GradientType=0 ); /* IE6-9 */
}
/* site toggle button (mobile/desktop) */
.siteToggleButton{
margin-bottom: 0px;
padding-left: 5px;
}
/*//////////////////// Footer Layout ==========*/
/*////////////////////////////////////////////////////////////*/
Looks like the white gap is the menu items wrapping. The text is white so you just can't see them doing it.
Add this style to sw_layout.css
.main-menu {
width: 100%;
height: 40px;
font-family: Arial;
overflow: hidden;
}
While this will get you pointed/repointed in a reasonable direction, the wrapping of menu items in this way could be considered a design limitation, where the content managers need to work within the limitations of their site's design, or the design should change to suite their needs.
If you want, give width: 101%; a try.