Below is my source code for my homepage of my portfolio website. I'm am trying to center everything on this page and I have have been testing this in Safari, IE8 and Firefox. If I do not float the menu, it's proportions change drastically in IE8. Does anyone have suggestions for a centered layout in these browsers or see conflicting issues in my code?
.nav {
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav ul {
text-align: center;
padding: 0;
margin: 0;
float: left;
clear: right;
list-style: none;
overflow: hidden;
}
nav li {
float: left;
clear: right;
margin: 2 2px 0 2;
padding: 6px;
display: inline-block;
border: inset;
border-width: 2px 2px 2px 2px;
border-color: red;
border-radius: 8px;
background: red;
}
nav li a {
padding: 0 14px;
}
nav li:hover {
color: white;
opacity: 0.4;
filter: alpha(opacity=100);
}
.vs {
float: left;
clear: left;
}
a {
text-decoration: none;
border-bottom: none;
color: white;
}
p a:hover {
text-decoration: none;
color: red;
}
html {
font-family: sans;
color: white;
padding: 10px 460px;
background-color: 63737e;
}
.video {
width: 100%;
}
.sri {
float: left;
clear: left;
}
hr {
color: red;
border-style: dotted;
}
#content h1 {
text-decoration: underline;
}
p {
word-spacing: normal;
text-align: left;
width: 100%;
}
.ribbon {
float: right;
}
.design {
margin-left: auto;
margin-right: auto;
width: 70%;
}
.design2 {
position: relative;
right: 0;
bottom: 0;
}
.footer img {
margin-left: auto;
margin-right: auto;
width: 70%;
}
.background {
margin: 0px;
padding: 0px;
border-style: solid;
border-width: 100px;
border-color: 2f363b;
background-color: 2f363b;
border-radius: 7px 7px 7px 10px;
}
<!DOC TYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1">
<script src="http://ift.tt/1xDNnh9"></script>
<title>vslateart.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="background" />
<header>
<div class="nav" />
<nav>
<ul>
<li><a href="http://ift.tt/1A6Wu9U">Home</a>
</li>
<li><a href="http://ift.tt/1LbZgMX">Logos</a>
</li>
<li><a href="http://ift.tt/1A6Wu9W">Clothing & Apparel</a>
</li>
<li><a href="http://ift.tt/1LbZgN1">Miscellaneous Art</a>
</li>
<li><a href="http://ift.tt/1A6Wsij">3D Design</a>
</li>
<li><a href="http://ift.tt/1LbZgN5">Bio</a>
</li>
<li><a href="http://ift.tt/1A6Wua0">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
<br>
<div class="vs" />
<img src="http://ift.tt/1LbZjs8 Logo.png" width="100" height="100" alt="VS Logo">
</div>
<br>
<br>
<div class="intro" />
<h1>Welcome to VS Art!</h1>
</div>
<p>Vincent Slate is a graphic artist in Phoenix, Arizona who specializes in logo design, web design,
<br>clothing and merchandise design and 3D visual design. Proficient in Adobe Photoshop, Illustrator, 3ds Max
<br>and many other software programs, Vincent's creative approach to the world of digital art has no limits. <a href="http://ift.tt/1LbZgN5">READ MORE...</a>
</p>
<h1>Services</h1>
<div class="video" />
<object type="application/x-shockwave-flash" data="http://www.vslateart.com/video/homepage-services0.swf" width="1000" height="600">
<param name="movie" value="http://www.vslateart.com/video/homepage-services0.swf" />
</object>
</div>
<br>
<br>
<div class="sri" />
<img src="http://ift.tt/1A6Wua4" width="1000" height="250" alt="SRI Logo">
</div>
<p><strong>Starkweather Roofing, Inc. Logo:</strong> This logo was designed for Starkweather Roofing, one of the leading commercial roofing companies in Phoenix, Arizona. This logo was displayed on a banner at Chase Field, Home of the Arizona Diamondbacks
in 2013! For more information on Starkweather Roofing, Please visit: <em><a href="http://ift.tt/1LbZjse">Starkweather Roofing Official Website</a>
</em>
<hr>
<br>
<h1>Official Trail of Painted Ponies Artist</h1>
<br>
<div class="design" />
<a class="fancybox" rel="group" href="http://ift.tt/1LbZjIw">
<img src="http://ift.tt/1LbZjIw" width="500" height="500" alt="The Nights Watch">
</a>
</div>
<div class="design2" />
<a class="fancybox" rel="group" href="http://ift.tt/1A6Wuaa">
<img src="http://ift.tt/1LbZh3t" width="475" height="250" alt="The Nights Watch-Process">
</a>
<a class="fancybox" rel="group" href="http://ift.tt/1A6Wsir">
<img src="http://ift.tt/1A6Wsit" width="475" height="250" alt="The Nights Watch-Back">
</a>
</div>
<br>
<p>Vincent Slate became an Official <em>The Trail of Painted Ponies</em> Artist with his design, <em>"The Night's Watch."</em> This "Painted Pony" design won Third Place in the online voting for the <em>Magical Art Competition</em>, hosted by The Trail of
Painted Ponies. It was then specifically selected to be made into a figurine.
<em>"The Night's Watch"</em> will be crafted into a figurine and released in Fall 2015, available on shelves near you! For more information on <em>The Trail of Painted Ponies</em> and their design competitions, please click on the following link:
<em><a href="http://ift.tt/1AGH9gR">The Trail of Painted Ponies Official Website</a></p></em>
<div class="ribbon" />
<img src="http://ift.tt/1LbZjIG" width="80" height="125" />
<div>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ift.tt/J5OMPW"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
<footer>
<a href="http://ift.tt/1A6WsyN" />
<img src="http://ift.tt/1A6Wuqy" width="80" height="80" />
</a>
<a href="http://ift.tt/1A6WuqA">
<img src="http://ift.tt/1A6WuqC" width="80" height="80" />
</a>
</footer>
</div>
</html>
– vslateart 31 mins ago
Aucun commentaire:
Enregistrer un commentaire