I am working on a site/mockup for someone and I have finish it and was testing to make sure it works across several browsers. It works fine in Chrome and Opera, but I was surprised to see that in Safari, every thing is messed up. I don't even know what is wrong, it just looks weird. The website is here: http://addisonbean.com/site/. Also, when I uploaded to my server, the heading in the footer that says "Find Us" got moved down, and to the left, even in Chrome.
I'd appreciate any help. Here is the source anyone who wants that:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WEARWELL</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div id="sub-header">
<div class="top">
<div id="sub-top">
<input type="text" placeholder="Search by keyword or product number">
<span id="search" class="red-gradient">
<input type="submit" value="">
</span>
<ul class="red-gradient" id="top-nav">
<li>Language</li>
<li id="arrow"></li>
<li>Where to Buy</li>
<li>Login</li>
<li>0 Items in RFQ Cart</li>
</ul>
</div>
<span class="clearfix"></span>
</div>
<nav id="pages">
<h1></h1>
<ul>
<li>Products</li>
<li id="current">Resources</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<h2 id="page-title">Resources</h2>
</div>
<span class="clearfix"></span>
</header>
<section>
<div id="current-page">Home > <b>Resources</b></div>
<h3>Lorem Ispum Dolor</h3>
<nav id="links">
<li>Wearwell Warrenty PDF</li>
<li>Maintenance & Upkeep Guide</li>
<li>Chemical Resistance Guide</li>
<li>Installation Guide</li>
<li>2013 PDF Catalog</li>
<li>Frequently Asked Questions</li>
<span class="clearfix"></span>
</nav>
<h3>Amet Lacinia Nec Hendrer</h3>
<p id="info">Aenean rhoncus, urna quis faucibus cursus, nunc leo rhoncus velit, vitae aliquam justo lectus eu nunc. Ut elit massa, commodo eget blandit eu, consectetur quis neque. Fusce consectetur libero quis velit mattis dignissim. Sed nibh dui, lacinia nec hendrer vitae turpis.</p>
</section>
<h3 id="bottom">
We develop working surfaces for industrial athletes
</h3>
<footer>
<div id="footer-center">
<table>
<tbody>
<tr>
<th>Products</th>
<th>Resources</th>
<th>About Us</th>
</tr>
<tr>
<td>ErgoDeck</td>
<td>Warranty</td>
<td>Capabilities</td>
</tr>
<tr>
<td>Rejuvenator</td>
<td>Maintenance Guide</td>
<td>News</td>
</tr>
<tr>
<td>Diamond Plate</td>
<td>Chemical Resistance Guide</td>
<td>Innovation</td>
</tr>
<tr>
<td>Grit Shield</td>
<td>Installation Guide</td>
<td>Request a Demo</td>
</tr>
<tr>
<td>Rover</td>
<td>Download Catalog</td>
<td>Request A Site Survey</td>
</tr>
<tr>
<td>Invision</td>
<td>Videos</td>
<td>Contact Us</td>
</tr>
<tr>
<td>Fit Kits</td>
<td></td>
<td>Terms and Conditions</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Legal</td>
</tr>
</tbody>
</table>
<aside>
<span id="line">
<img src="img/line.png" alt="">
</span>
<span id="content">
<h4>Find Us</h4>
<p class="footer-info">
Wearwell Inc.
</p>
<p class="footer-info">
199 Threet Industrial Road <br>
Smyrna, Tennessee 37167
</p>
<p class="footer-info">
Email: floors#wearwell.com
</p>
<div id="icons">
</div>
</span>
</aside>
<span class="clearfix"></span>
</div>
</footer>
</body>
</html>
css/style.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
font-family: helvetica;
background: url('../img/bg.jpg');
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
*:first-child+html .clearfix { zoom: 1; }
.red-gradient {
background: #c33221;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjMzMyMjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOGUyNDE4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #c33221 0%, #8e2418 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c33221), color-stop(100%,#8e2418));
background: -webkit-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: -o-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: -ms-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: radial-gradient(ellipse at center, #c33221 0%,#8e2418 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c33221', endColorstr='#8e2418',GradientType=1 );
color: white;
display: inline-block;
}
header {
background: url('../img/header.jpg');
color: white;
-webkit-box-shadow: 2px 0 6px black;
-moz-box-shadow: 2px 0 6px black;
box-shadow: 2px 0 6px black;
}
#sub-header {
width: 1200px;
margin: 0 auto;
}
.top {
position: relative;
right: 0;
padding-bottom: 20px;
font-size: 12px;
font-weight: 200;
}
.top input[type=text] {
margin: 0 1px 0 0;
border: none;
padding: 12px;
height: 28px;
width: 230px;
background: rgba(255, 255, 255, .7);
float: left;
}
.top input[type=text]::-webkit-input-placeholder {
color: black;
}
.top input[type=text]::-ms-input-placeholder {
color: black;
}
.top input[type=text]::-moz-placeholder {
color: black;
}
span#search {
width: 28px;
height: 28px;
padding: 12px;
float: left;
margin-right: 5px;
}
.top input[type=submit] {
border: none;
background: url('../img/search.png') 50% 50% no-repeat;
width: 15px;
height: 15px;
padding: 0px;
float: left;
position: relative;
top: -7.5px;
left: -7.5px;
}
#top-nav {
height: 28px;
list-style: none;
padding: 0;
margin: 0;
}
#sub-top {
float: right;
}
#top-nav li {
list-style: none; /* for IE8 */
display: inline-block;
height: 28px;
float: left;
padding: 8px;
border-left: 1px solid black;
}
#top-nav li:first-child {
border: none;
}
#arrow {
background: url('../img/nav-arrow.png') 50% 50% no-repeat;
width: 28px;
margin: 0;
}
nav#pages {
background: rgba(0, 0, 0, .8);
height: 64px;
margin-bottom: 80px;
}
nav#pages h1 {
background: url('../img/logo.png') 50% 50% no-repeat;
width: 340px;
height: inherit;
margin: 0;
display: inline-block;
}
nav#pages ul {
list-style: none;
text-transform: uppercase;
float: right;
padding: 0;
margin: 0;
height: inherit;
display: inline-block;
}
nav#pages li {
list-style: none; /* for IE8 */
display: inline-block;
padding: 20px;
height: inherit;
line-height: 34px;
}
nav#pages li#current {
background: #cc3423;
}
#page-title {
float: right;
background: rgba(0, 0, 0, .8);
text-align: left;
padding: 30px;
padding-left: 40px;
padding-right: 375px;
text-transform: uppercase;
margin: 75px 0;
}
section {
background: white;
width: 1220px;
margin: 0 auto;
padding: 15px 25px 100px;
-webkit-box-shadow: 0 3px 10px #555;
-moz-box-shadow: 0 3px 10px #555;
box-shadow: 0 3px 10px #555;
}
#current-page {
font-size: 12px;
}
section h3 {
text-transform: uppercase;
margin: 25px 15px 10px;
}
nav#links {
list-style: none;
margin: 0 auto;
width: 1170px;
color: #eb6852;
font-weight: bold;
font-size: 20px;
text-transform: uppercase;
}
nav#links li {
background: #eaeaea;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjRiNGI0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #eaeaea 0%, #b4b4b4 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#eaeaea), color-stop(100%,#b4b4b4));
background: -webkit-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
background: -o-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
background: -ms-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
background: radial-gradient(ellipse at center, #eaeaea 0%,#b4b4b4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#b4b4b4',GradientType=1 );
line-height: 75px;
width: 382px;
margin: 4px;
text-align: center;
float: left;
height: 75px;
}
nav#links li:nth-child(5) {
background: #c33221;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjMzMyMjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOGUyNDE4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #c33221 0%, #8e2418 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c33221), color-stop(100%,#8e2418));
background: -webkit-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: -o-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: -ms-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: radial-gradient(ellipse at center, #c33221 0%,#8e2418 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c33221', endColorstr='#8e2418',GradientType=1 );
color: white;
}
#info {
margin-left: 15px;
}
h3#bottom {
text-align: center;
color: #4d4d4d;
font-size: 40px;
font-weight: 200;
}
footer {
background: url('../img/footer.jpg');
color: white;
}
#footer-center {
margin: 0 auto;
padding: 30px 0;
width: 809px;
}
footer table {
float: left;
}
footer tr {
text-align: right;
}
footer td {
padding: 4px;
padding-left: 30px;
padding-right: none;
font-size: 15px;
}
footer th {
text-transform: uppercase;
padding: 7px;
padding-left: 30px;
padding-right: none;
}
aside {
float: left;
}
#line {
margin: 0 35px;
display: inline-block;
float: left;
}
aside #content {
float: left;
}
aside h4 {
text-transform: uppercase;
margin: 7px;
}
aside p.footer-info {
margin: 7px;
font-size: 15px;
line-height: 20px;
}
aside p.footer-info a {
color: #cc3524;
text-decoration: none;
}
#icons a {
height: 34px;
width: 37px;
display: inline-block;
background-repeat: no-repeat;
}
#icons a:nth-child(1) {
background-image: url('../img/icons/fb.png');
}
#icons a:nth-child(2) {
background-image: url('../img/icons/google.png');
}
#icons a:nth-child(3) {
background-image: url('../img/icons/twitter.png');
}
#icons a:nth-child(4) {
background-image: url('../img/icons/youtube.png');
}
#icons a:nth-child(5) {
background-image: url('../img/icons/in.png');
}
Try fixing these errors from W3C Validator, clear browser cache and try again in Safari.
Your CSS needs some cleaning up as well.
Related
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.
when i use css + html and sent email to gmail, the css not appear . When i run in local just /localhost/text.html the css appear. I stagnant with this.
The Question is:
How can the code below appear in Gmail?.
i have the code like this (HTML + CSS):
<!DOCTYPE HTML> <html>
<head>
<!-- <htm><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></htm> -->
<title>Email notification</title>
<style> * {
box-sizing: border-box; } .btn {background: #ffb300; background-image: -webkit-linear-gradient(top, #ffb300, #2980b9); background-image: -moz-linear-gradient(top, #ffb300, #2980b9); background-image: -ms-linear-gradient(top, #ffb300, #2980b9); background-image: -o-linear-gradient(top, #ffb300, #2980b9); background-image: linear-gradient(to bottom, #ffb300, #2980b9); -webkit-border-radius: 7; -moz-border-radius: 7; border-radius: 7px; font-family: Georgia; color: #ffffff; font-size: 15px; background: #ffb300; padding: 10px 20px 10px 20px; text-decoration: none;} .btn:hover { background: #cf9204; background-image: -webkit-linear-gradient(top, #cf9204, #cf9204); background-image: -moz-linear-gradient(top, #cf9204, #cf9204); background-image: -ms-linear-gradient(top, #cf9204, #cf9204); background-image: -o-linear-gradient(top, #cf9204, #cf9204); background-image: linear-gradient(to bottom, #cf9204, #cf9204); text-decoration: none;} #header {
box-sizing: border-box;
width: 80%;
height: 80px;
margin: 0 auto;
padding: 0px;
color: #fff;
text-align: center;
background-color: #000;
font-family: Open Sans,Arial,sans-serif;
border-radius: 10px 10px 0px 0px;
}
#footer {
width: 80%;margin: 0 auto;clear: both;text-align: center;padding: 20px 0;font-family: Verdena;background-color: #000; color: #838779;
border-radius: 0px 0px 10px 10px;
line-height: 1.5em;
}
#outer {
box-sizing: border-box;
border-right-style: solid;
border-left-style: solid;
clear:both;
padding-top: 0px;
width: 80%;
margin: 0 auto;
margin-top: 0;
text-align: center;
overflow: auto;
}
#inner {
box-sizing: border-box;
width: 100%;
float: left;
padding: 0;
background-color: #fff;
font-family: Open Sans,Arial,sans-serif;
font-size: 14px;font-weight: normal;
line-height: 2.0em;
color: #323330;
margin-top: 0;
text-align: center;
}
/*a {
color: #FFBA08;
}*/
</style>
<title>Email notification</title>
</head>
<body>
<div id="header">
<img height="60" width="220" src="" alt="" title="">
</div>
<div id="outer">
<div id="inner">
<h1> Text 1 </h1>
<p> Text 2 </p>
<p> Text 3 </p>
<p> <a class="btn btn-warning" href="#"> Activation your account </a> <p>
<p> Tetxt 5 </p>
</div>
<div style="clear: both;"></div>
</div>
<div id="footer">
Text 5
</div>
</body>
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/
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/