I could able to get progress bar with below code, but couldn't find solution how to add a small circle on the progress bar ?
HTML
<progress max="100" value="75"></progress>
CSS
progress {
width: 90%;
display: block; /* default: inline-block */
padding: 3px;
border: 0 none;
background: rgb(215, 211, 211);
border-radius: 14px;
}
progress::-moz-progress-bar {
border-radius: 12px;
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}
progress::-webkit-progress-bar {
background: transparent;
}
progress::-webkit-progress-value {
border-radius: 12px;
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}
Add a second background using a radial-gradient
progress {
width: 90%;
display: block; /* default: inline-block */
margin-bottom:1em;
padding: 3px;
border: 0 none;
background: rgb(215, 211, 211);
border-radius: 14px;
}
progress::-moz-progress-bar {
border-radius: 12px;
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}
progress::-webkit-progress-bar {
background: transparent;
}
progress::-webkit-progress-value {
border-radius: 12px;
background: radial-gradient(4px at 97%,white,white 4px,transparent),linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%))
;
}
<progress max="100" value="75"></progress>
<progress max="100" value="50"></progress>
<progress max="100" value="25"></progress>
I have no idea how to add a circle at the end of the progress element, but it is possible to do it with the div element
CSS:
.first{
width: 90%;
display: block; /* default: inline-block */
padding: 3px;
border: 0 none;
background: rgb(215, 211, 211);
border-radius: 14px;
}
.second{
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
border-radius: 14px;
height: 10px;
width: 75%;
}
.third{
width: 10px;
background: linear-gradient(to right, hsl(0, 0%, 100%), hsl(0, 0%, 99%));
border-radius: 60px;
height: 8px;
width: 8px;
margin: 1px;
margin-right: 1px !important;
float: right;
margin-right: 0px;
color: white;
}
HTML:
<div class="first">
<div class="second">
<div class="third">.</div>
</div>
</div>
I'm beginner class coder and I'm trying to create white circle inside the button using the unicode (Change to white color), but I really don't know how to increase the unicode size and place it center inside the button.
If you have any other options to put circle inside button, please help me out (It doesn't have to be unicode and putting unicode was the only way I can think of).
What I actually want to do is when the circle is aligned right, it is active status, but when the circle is aligned left, it will be changed to deactive status. I'm struggling with this.
Thank you.
.notification {
display: flex;
}
.push-title {
font-size: 1.15rem;
}
.push-active {
margin-left: 20%;
color: #8A8A8A;
}
.btn-active {
margin-left: 3%;
background: #FF512F;
background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: linear-gradient(bottom right, #FF512F, #DD2476);
-webkit-border-radius: 60;
-moz-border-radius: 60;
border-radius: 60px;
padding: 1px 24px 1px 24px;
text-decoration: none;
}
<div class="notification">
<div class="push-title">Push Notifications</div>
<div class="push-active">Active</div>
•
</div>
css
.notification {
display: flex;
}
.push-title {
font-size: 1.15rem;
}
.push-active {
margin-left: 20%;
color: #8A8A8A;
}
.btn-active {
margin: 0 auto;
background: #FF512F;
background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: linear-gradient(bottom right, #FF512F, #DD2476);
-webkit-border-radius: 60;
-moz-border-radius: 60;
border-radius: 60px;
padding: 1px 24px 1px 24px;
text-decoration: none;
color:white;
height:30px;
font-size:60px;
line-height:28px;
}
HTML
<div class="notification">
<div class="push-title">Push Notifications</div>
<div class="push-active">Active</div>
•
</div>
if you use bootstrap , i recommened this for you
http://bootsnipp.com/snippets/x8pBm
You could use a span or div and style it to be the circle. This can be done in many ways. Just a sample below. Hope it puts you in the right direction
.notification {
display: flex;
}
.push-title {
font-size: 1.15rem;
}
.push-active {
margin-left: 20%;
color: #8A8A8A;
}
.btn-active {
margin-left: 3%;
background: #FF512F;
background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: linear-gradient(bottom right, #FF512F, #DD2476);
-webkit-border-radius: 60;
-moz-border-radius: 60;
border-radius: 60px;
padding: 0 10px;
text-decoration: none;
display: flex;
align-items: center;
width: 38px;
height: 22px;
justify-content: flex-start;
}
.btn-active span {
display: block;
padding: 5px;
background: green;
border-radius: 50%;
}
<div class="notification">
<div class="push-title">Push Notifications</div>
<div class="push-active">Active</div>
<span></span>
</div>
You can use a pseudo element on a checkbox and toggle the status based on whether it's selected or not.
input {
display: none;
}
label {
width: 1.5em;
height: 1em;
background: red;
border-radius: .5em;
display: inline-block;
overflow: auto;
position: relative;
text-indent: 9999px;
cursor: pointer;
}
label:after {
content: '';
width: .5em;
height: .5em;
background: black;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-100%,-50%);
transition: transform .25s, background .15s;
}
input:checked + label:after {
transform: translate(0%,-50%);
background: white;
}
<input id="checkbox" type="checkbox"><label for="checkbox">active</label>
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/
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.
So I'm working on a layout and have completed the header. When I started working on the body content, I kept running into the issue where the header would overlap the body unless I set a top margin of the body wrapper to something huge (300+px) even then it can overlap when the screen is small. I think I have screwed up the positioning somewhere but I can't seem to figure out how to overcome this.
My HTML:
<body>
<div id="pageWrapper">
<div id="mainHeader">
<div id="mainNav">
<div id="navContent">
<div class="mainLogo"></div>
<div style="display: inline-block;">
<ul>
<li><img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/dashboard.png" />Dashboard</li>
<li><img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/patient.png" />Patients</li>
<li><img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/devices.png" />Devices</li>
<li><img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/account.png" />Account</li>
<li><img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/support.png" />Support</li>
</ul>
</div>
<div class="lvpLogo"><strong>LifeView</strong> Portal</div>
</div>
</div>
<div id="subNav">
<span class="loginName">Doctor Brian Town</span>
</div>
</div>
<div id="bodWrap">
<div class="statWrap"><div class="titleWrap"><span>Chronic Disease Summary</span></div>
<img src="http://lifeview.michiganweb.org/img/icons/support.png" /><img src="img/icons/account.png" /><img src="http://lifeview.michiganweb.org/img/icons/devices.png" /><img src="http://lifeview.michiganweb.org/img/icons/patient.png" />
</div>
<div class="statWrap"><div class="titleWrap"><span>Vital Summary</span></div>
</div>
<div class="statWrap"><div class="titleWrap"><span>Alerts</span></div>
</div>
</div>
</div>
</body>
My CSS:
#charset "utf-8";
body {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 14px;
}
.pageWrapper {
width: 100%;
position: fixed;
}
.mainLogo {
background:url(http://lifeview.michiganweb.org/img/home_02.png) no-repeat left;
height: 77px;
width: 300px;
display: inline-block;
margin-left: 26px;
margin-right: 30px;
float: left;
}
#mainHeader {
position: absolute;
left: 0;
top: 0;
width: 100%;
overflow: hidden;
border: 1px;
}
#mainNav {
/*height: 109px;*/
width: 100%;
float: left;
left: 0px;
margin: 0px;
padding: 0px;
color: #FFFFFF;
/*background:url(http://lifeview.michiganweb.org/img/home_01.jpg) repeat-x scroll top;*/
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #0e448e 0%, #2b2c2e 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #0e448e 0%, #2b2c2e 100%);
/* Opera */
background-image: -o-linear-gradient(top, #0e448e 0%, #2b2c2e 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0e448e), color-stop(1, #2b2c2e));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #0e448e 0%, #2b2c2e 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #0e448e 0%, #2b2c2e 100%);
}
#navContent {
padding-top: 20px;
}
#mainNav #navContent ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
#mainNav #navContent li {
float: left;
}
#mainNav #navContent li a {
display: inline-block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FFF;
border-right: 1px solid #ccc;
}
#mainNav #navContent li:first-child a {
border-left: 1px solid #ccc;
}
#mainNav #navContent li a:hover {
color: #23afff;
}
#mainNav #navContent h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 24px;
margin-bottom: 2px;
}
.lvpLogo {
margin: auto auto auto auto;
display: inline-block;
word-spacing: 20px;
vertical-align: top;
float: right;
padding-right: 80px;
}
.lvpLogo strong {
font-family: Verdana, Geneva, sans-serif;
font-size: 36px;
margin-bottom: 2px;
}
.navIcons {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1px;
height: 35px;
width: 35px;
}
#subNav {
overflow: hidden;
height: 40px;
width: 100%;
margin: 0px;
padding: 0px;
color: #000000;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #cccccc 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #cccccc 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #cccccc 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #cccccc));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #cccccc 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #cccccc 100%);
}
.loginName {
float: right;
margin-right: 120px;
color: #000000;
font-weight: bold;
line-height: 40px;
margin-bottom: 2px;
}
#bodWrap {
width: 100%;
left: 0px;
padding: 0px;
color: #000000;
}
.statWrap {
margin: 10px auto auto auto;
border: 2px solid #000;
border-radius: 19px;
width: 80%;
background-color: #eee;
}
.titleWrap {
postion: absolute;
background-color: #00639c;
top: 0;
height: 30px;
border-radius: 30px;
}
.titleWrap span {
color: #FFFFFF;
font-weight: bold;
margin: auto auto auto 33px;
line-height: 30px;
}
JSfiddle:
http://jsfiddle.net/Artsen/tKdqh/
Test Environment:
http://lifeview.michiganweb.org/
I updated your jsfiddle, please see here: updated code
Basically I changed the position:absolute; to a position:relative; for the mainHeader div
Remove position:absolute only from #mainHeader css
DEMO HERE
http://jsfiddle.net/tKdqh/2/