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>
Related
I want to create a button bar on top of the page, with div containers that contain images to use them as flat button. My problem is that I cannot get the alignment correctly.
Is there an additional way to highlight the last clicked button, so that you can see which button on the buttonbar is active without using javascript?
Here is my first approach:
<html>
<head>
<title>
</title>
<style>
#top {
position: fixed;
background-color: #AAA;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);
left: 0px;
top: 0px;
width: 100%;
height: 60px;
padding: 0px;
border: thin solid rgba(0,0,0,0.6);
color: #444444;
font-family: Droid sans, Arial, Helvetica, sans-serif;
font-size: 12px;
cursor: pointer;
-webkit-box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
-moz-box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
}
.flatBtn2 {
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.flatBtn2:hover {
background-color: #eee;
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.buttonBar {
float:left;
}
</style>
</head>
<body>
<div id="top">
<div id="selectReiter" style="display:inline" class="buttonBar">
<div id="firstButton" class="flatBtn2" />
<div id="secondButton" class="flatBtn2" />
<div id="thirdButton" class="flatBtn2" />
</div>
</div>
</body>
</html>
#top {
position: fixed;
background-color: #AAA;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);
left: 0px;
top: 0px;
width: 100%;
height: 60px;
padding: 0px;
border: thin solid rgba(0, 0, 0, 0.6);
color: #444444;
font-family: Droid sans, Arial, Helvetica, sans-serif;
font-size: 12px;
cursor: pointer;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
}
.flatBtn2 {
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
background-color: transparent;
border: none;
}
.flatBtn2:hover {
background-color: #eee;
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.flatBtn2:focus {
background-color: #eee;
}
.buttonBar {
float: left;
}
<div id="top">
<div id="selectReiter" style="display:inline" class="buttonBar">
<button id="firstButton" class="flatBtn2" >Button 1</button>
<button id="secondButton" class="flatBtn2" >Button 2</button>
<a id="thirdButton" href="#" class="flatBtn2">A 3</a>
</div>
</div>
First of all if you want to use button, then you should you the <button> tag and add the background image through css. You can also manipulate the states in css, what you are seacrhing for is :focus and :active, so you have two rules for your buttons. The normal button rule with the main background-image and an other rule button:focus, button:active where you can load an other image or do something else.
See fiddle for a working example. I added the needed styles at the end of your css.
Hope this helps!
I'm quite new to CSS and need some help make a mobile edge using CSS.
How can we draw the mobile device edge using CSS? This is what I have tried but unable to do so.
*,
*:after,
*:before {
box-sizing: border-box;
}
.mobile {
background: #E0E0E0;
background-image: -webkit-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -moz-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -ms-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -o-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: linear-gradient(to bottom, #E0E0E0, #AEAEAE);
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 0.5px 0px #fff;
font-family: Courier New;
color: #555555;
width: 20%;
height: 40%;
font-size: 41px;
padding: 10px 20px 10px 20px;
border: solid #616161 1px;
text-decoration: none;
position: absolute;
box-shadow: 0px 2px 2px #555555;
margin: 1px;
outline: #666666 solid 2px
}
.mobile:hover {
text-decoration: none;
}
<div class="mobile"></div>
This is what it should look like :
How do we do that?
I would double up on your box-shadow declaration instead of trying to wrangle outline:
box-shadow: 0px 0px 0px 1px #666666, 0px 2px 2px #555555;
*,
*:after,
*:before {
box-sizing: border-box;
}
.mobile {
background: #E0E0E0;
background-image: -webkit-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -moz-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -ms-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -o-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: linear-gradient(to bottom, #E0E0E0, #AEAEAE);
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 0.5px 0px #fff;
font-family: Courier New;
color: #555555;
width: 20%;
height: 40%;
font-size: 41px;
padding: 10px 20px 10px 20px;
border: solid #616161 1px;
text-decoration: none;
position: absolute;
box-shadow: 0px 0px 0px 1px #666666, 0px 2px 2px #555555;
margin: 1px;
}
.mobile:hover {
text-decoration: none;
}
<div class="mobile"></div>
The 0px 0px 0px 1px #666666 syntax gives the shadow zero blur and a 1px offset, essentially replicating a 1px stroke.
Try this one
*,
*:after,
*:before {
box-sizing: border-box;
}
.mobile {
background: #E0E0E0;
background-image: -webkit-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -moz-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -ms-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -o-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: linear-gradient(to bottom, #E0E0E0, #AEAEAE);
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 0.5px 0px #fff;
font-family: Courier New;
color: #555555;
font-size: 41px;
border: solid #616161 1px;
text-decoration: none;
box-shadow: 0px 1px #555555;
margin: 1px;
display: flex;
}
.mobile:hover {
text-decoration: none;
}
<div style="width: 210px; height: 45px; border: solid #000 1px;" class="mobile">
<div style="width: 210px; height: 45px; border: solid #fff 1px; " class="mobile">
<div style="width: 200px; height: 40px;" class="mobile">
</div>
</div>
</div>
I made a website on my computer but then when I loaded it on my laptop I noticed the sizing was off on everything. However, it still looks fine on my computer. I know this may be a good lesson learned in css, but in the time being do you think any of you could take a look at my css file?
#cool_animate {
border-top: 10px solid gray;
border-bottom: 4px solid gray;
height: 195px;
background: url(images/scape.png) repeat-x;
-webkit-animation: move-city 15s infinite linear;
}
#-webkit-keyframes move-city {
0% { background-position: 0 0;}
100% { background-position: -256px 0;}
}
#boat {
height: 239px;
position: absolute;
top: -10px;
left: 200px;
-webkit-animation: wind 300s infinite linear;
}
#-webkit-keyframes wind {
from { left: 400px}
to { left: 1400px}
}
#-webkit-keyframes cloud {
from { left: 260px}
to { left: 280px}
}
#cloud {
height: 90px;
position: absolute;
top: 28px;
left: 300px;
-webkit-animation: cloud 9s infinite alternate linear;
}
#copter {
height: 90px;
position: absolute;
top: 28px;
left: 1700px;
-webkit-animation: copter 15s infinite alternate linear;
}
#-webkit-keyframes copter {
from { left: 1700px}
to { left: 1600px}
}
header {
font-size: 22px;
color: white;
background: linear-gradient(#C7E2EE, #0099CC);
font-family: 'Lobster', cursive;
box-shadow: 5px 5px 3px 4px gray;
border-radius: 10px; /* this makes it rounded */
padding: 40px 40px;
border: 1px black solid;
border-width: 1px 1px 1px 1px;
border-color: black;
margin: 50px 470px;
margin-bottom:0px;
height: 200px;
}
img.right {
position: relative;
top: -16px;
right: -200px;
}
#inside_p {
display:inline;
}
#cool_nav {
margin: 190px 160px 40px 140px;
font-family: 'Lobster', cursive;
color: black;
position: absolute;
z-index: 7;
left: 0;
width: 204px;
top: 72px;
font-size: 24px;
line-height: 1.2;
}
#facts_nav {
background-color: rgb(211, 211, 211);
margin: 700px 160px 40px 180px;
color: black;
position: absolute;
z-index: 7;
left: 0;
width: 204px;
top: 72px;
font-size: 17px;
line-height: 1.2;
border: 1px black solid;
border-width: 1px 1px 1px 1px;
border-color: black;
border-radius: 10px;
padding: 26px 20px;
}
body {
background: linear-gradient(#69D1FF, white);
}
#cool_nav p {
background-color: #30C722;
border-radius: 7px;
}
#cool_nav p:hover {
background-color: #3DB0E6;
color: #ffffff;
width: 160px;
border-radius: 30px;
}
ul {
list-style-type: none;
}
#example li:hover {
background-color: #82C0DB;
}
#toot li:hover {
background-color: #82C0DB;
}
#intro li:hover {
background-color: #82C0DB;
}
#main_content {
font-size: 0px;
color: black;
background-color: rgb(255, 209, 124);
font-family: 'Lobster', cursive;
border-radius: 10px; /* this makes it rounded */
padding: 1px 40px;
border: .5px black solid;
border-width: 1px 1px 1px 1px;
border-color: black;
margin: 50px 470px;
margin-top:.5px;
margin-bottom: 0;
height: 400px;
}
#cool_div {
font-size: 19px;
color: white;
background-color: rgb(255, 113, 255);
font-family: 'Lobster', cursive;
box-shadow: 5px 5px 3px 4px #999;
border-radius: 10px; /* this makes it rounded */
padding: 1px 40px;
border: .5px black solid;
border-width: 1px 1px 1px 1px;
border-color: black;
margin: 50px 470px;
margin-top: 0px;
height: 200px;
margin-bottom: 0
}
#fun_times:hover {
content: url('images/batman.jpg');
height: 140px;
width: 150px;
}
#cool_footer {
font-size: 22px;
color: white;
background-color: rgb(74, 255, 74);
font-family: 'Lobster', cursive;
box-shadow: 5px 5px 3px 4px #999;
border-radius: 10px; /* this makes it rounded */
padding: 1px 40px;
border: .5px black solid;
border-width: 1px 1px 1px 1px;
border-color: black;
margin: 50px 470px;
margin-top: 0px;
top-margin: 0px;
height: 200px;
}
a:link {
-webkit-transition: .2s;
transition: .2s;
}
a:hover {
color: hsl(209, 100%, 32%);
}
.btn {
-moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
box-shadow:inset 0px 1px 0px 0px #ffe0b5;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);
background-color:#fbb450;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #c97e1c;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:17px;
font-weight:bold;
padding:6px 11px;
text-decoration:none;
text-shadow:0px 1px 0px #8f7f24;
}
.btn:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);
background-color:#f89306;
}
.btn:active {
position:relative;
top:1px;
}
}
not sure if it matters really but here is my html file also
<!DOCTYPE html>
<html>
<!-- this is the start of my head -->
<head>
<title>Rails Tutorial</title>
<!-- js and css sheets -->
<script src="cool.js"></script>
<script src="jquery.js"></script>
<link href="cool.css" rel="stylesheet">
<link href="animate.css" rel="stylesheet">
<!-- my favicon for top of page -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon" title="A super fun rails tutorial">
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<!-- HEADER -->
<div>
<h1 id="cool_animate"></h1>
<img src="images/cool.png" id="boat">
<img src="images/cloud.png" id="cloud">
<img src="images/copter.png" id="copter">
</div>
</head>
<!-- this is the end of my head -->
<body>
<!-- this is the start of my header -->
<header class="animated swing">
<div <div style="width:200px; float:left;">
<img src="images/study.png " width="140" height="120" title="LEARNING IS FUN!">
</div>
<h1 id="cool_h1">Welcome aboard!</h1>
<p>This is a simple tutorial site to help you learn and get more confortable with programming in Rails. I made this for people who are just getting started and are considering learning how to program.</p>
</header>
<!-- this is the end of my header -->
<!-- this is the start of my link nav -->
<nav id="cool_nav" class="animated tada">
<ul>
<li id="toot">
<p>tutorial</p>
<ul>
<li>level one</li>
<li>level two</li>
<li>level three</li>
</ul>
</li>
<li id="intro">
<p>Introduction</p>
<ul>
<li>about Ruby</li>
<li>about Rails</li>
<li>about Erb</li>
</ul>
</li>
<li id="example">
<p>Examples</p>
<ul>
<li>example 1</li>
<li>example 2</li>
<li>example 3</li>
</ul>
</li>
</ul>
</nav>
<!-- this is the end of my nav -->
<!-- this is the start of fun facts nav -->
<nav id="facts_nav">
<code>
<p>what does MVC stand for?</p>
<p>many view controller</p>
<p>model view controller</p>
<p>method via controller</p>
<button>show answer</button>
<div style="display: none">
<p>model view controller</p>
</div>
</code>
</nav>
<script>
$( "button" ).click(function() {
$( "div" ).show( "slow" );
});
</script>
<!-- this is the end of my fun facts nav -->
<!-- this is the start of my main section -->
<section id="main_content" class="animated shake">
<button id="go" class="btn">Table of contents</button>
<div id="block">
<h1>1: Tutorial</h1>
<p>The rails tutorial that I made has 3 levels and each level has its own set of challenges.</p>
<h2>2: Introduction</h2>
<p>this introduction will tell you about ruby a programming language, rails the
platform that is build off of ruby, and about Embedded Ruby in our html.</p>
<h2>3: Examles</h2>
<p>Here I will give you three examples of working rails programs that I built.</p>
</div>
</section>
<!-- this is the end of my main section -->
<script>
$( "#go" ).click(function() {
$( "#block" ).animate({
// width: "70%",
// opacity: 0.4,
marginLeft: "30px",
fontSize: "17px",
borderWidth: "4px"
}, 1500 );
});
</script>
<!-- this is the start of cool div -->
<div id="cool_div">
<div>
<p></p>
</div>
<div <div style="width:200px; float:left;">
<a href="http://cheatermoves.github.io/" id="fun_times">
<img src="images/me.jpg" width="150" height="140">
</a>
</div>
<div style="width:400px; float:left;">
<p class="speech">Click on my photo to view my website or follow me on twitter. Always looking forward to sharing new tweets.</p>
</div>
<div style="width:150px; float:right;">
<a href="https://twitter.com/lanners_cool">
<img src="https://si0.twimg.com/profile_images/2284174758/v65oai7fxn47qv9nectx.png" width="140" height="120">
</a>
</div>
</div>
<!-- this is the end of cool div -->
<!-- this is the start of cool footer -->
<footer id="cool_footer">
<p>Here are some helpful links to help you learn rails</p>
<ul>
<li><small>Hartl tutorial</small</li>
<li><small>Getting started with rails</small></li>
<li><small>Rails Casts intro video</small></li>
</ul>
</footer>
<!-- this is the end of cool footer -->
</body>
</html>
The problem is related to your sizing of elements.
Set your widths and heights to percentages. As well as your "left" and "top". That way, your layout becomes responsive.
Set your font-sizes to ems. For example:
font: 1em helvetica, arial, sans-serif;
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.
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/