First time asking a question. I've looked this up exhaustively and I thiiiink I get what my problem is but I don't know how to fix it. I've tried multiple different things to no avail. I am trying to learn html and css and this is my first time hand-writing a site by myself, though I am doing it inside Dreamweaver.
I cannot get either the location nor the social media font awesome icons to become links. The urls are just generic at the moment and I added a border to the left and right floats so I could check they were in the right spot.
I think that what is happening is that the padding for my contentbox or my container are overlapping the footer, but I have changed the z-index and tried removing the padding all together and they still don't seem to work (and then the page doesn't look the way I wanted it) I have been searching for answers to this but, at this point, I think it might be something I specifically messed up or don't understand that is making this happen, so I wanted to reach out to all of you.
Here is my html (I hope this works!):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
</head>
<body>
<!---outer containers-->
<div id="container">
<div id="header">
<div id="logo">
</div>
<nav>
<ul>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="contentbox">
<div id="content">
<div id="frontcontent">
<p>
<img id="sanjapic" src="Images/SanjaPicture.jpg"/>
<h1>Edgy Hair Stylist Serving the Denver Area</h1>
</p>
</div>
</div>
<footer>
<div id="social">
<a href="http://www.facebook.com">
<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>
</a>
<a href="http://www.yelp.com">
<i class="fa fa-yelp fa-2x" aria-hidden="true"></i>
</a>
<a href="http://www.instagram.com">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
</div>
<div id="left">
<p>
<a href="http://www.googlemaps.com"><i class="fa fa-map-marker fa-3x" aria-hidden="true"></i>
Address: 657 Santa Fe Dr, Denver, CO 80204<br>
Phone:(303) 953-9486</a>
</p>
</div>
</footer>
</div>
</div>
</body>
</html>
and here is my css:
#charset "utf-8";
#import url(https://fonts.googleapis.com/css?family=Fjalla+One);
body {
background-image: url(Images/bgLarge.jpg);
background-repeat: no-repeat;
background-size: 100%;
padding: 0;
font-family:'Fjalla One', sans-serif;
font-style: normal;
font-weight: 400;
background-attachment: fixed;
margin:0px;
background-color: #2F2F2F;
}
#container {
width: 100%;
margin: 0 auto;
position: relative;
}
#header {
width: 100%;
height: 100px;
background-image: url(Images/toptent.png);
background-repeat: no-repeat;
position: relative;
background-size: contain;
z-index:50;
}
#logo {
background-image: url(Images/SanjaLogoGray.png);
height: 70px;
background-repeat: no-repeat;
z-index: 100;
width: 100%;
margin: 0 auto;
position:relative;
max-width: 250px;
display:block;
}
#contentbox {
width: 80%;
height:100%;
background-color: #ffffff;
margin: 0 auto;
position: relative;
max-width: 800px;
margin-top: -110px;
padding-top: 100px;
display: block;
z-index: -2000;
-webkit-box-shadow: 0px 5px 15px 10px #2F2F2F;
box-shadow: 0px 5px 15px 10px #2F2F2F;
}
#content {
margin-top: 30px;
padding:2%;
display: block;
}
#about {
position:relative;
margin:0;
left:-70px;
top:-8px;
}
#sanjapic {
height:auto;
width: 80%;
max-width:400px;
margin: 0 auto;
position:relative;
display:block;
padding-top:10px;
}
h1 {
font-size:1.2em;
text-align:center;
margin:0 auto;
}
#frontcontent h1 {
max-width:60%;
height: auto;
width:80%;
}
nav {
width: 80%;
background: #ffffff;
border-right: none;
margin: 0 auto;
max-width:800px;
margin-bottom:10px;
margin-top:10px;
}
nav ul {
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
float: left;
text-align: center;
width: 25%; /* fallback for non-calc() browsers */
width: calc(100% / 4);
box-sizing: border-box;
margin-bottom:20px;
}
nav ul li:first-child {
border-left: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: #000000;
padding:10px;
}
nav ul li a:hover {
display: block;
text-decoration: none;
color: #312847;
border: 2px solid #000000;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 5px #617574;
box-shadow: 2px 2px 5px #617574;
}
nav ul li a:active {
background-color:#7DB4B9
}
footer {
background-color:#333333;
height:80px;
width:100%;
margin:0 auto;
z-index:3000;
position:relative;
height:100%;
}
footer a{
color:#ffffff;
padding:5px;
border:#E9191D thick solid;
display:inline-block;
text-decoration:none;
}
#social {
float:right;
padding:20px;
}
#left {
color:#ffffff;
padding:5px;
border:#E9191D thick solid;
display:inline-block;
font-size:.7em;
}
Your issue is this following statement on #contentbox:
z-index: -2000;
That's definitely something you DON'T want to do. Your bare minimum z-index for visible items should always be 0, and you should work your way up from that.
Also avoid using too big numbers as it's harder to keep tabs.
Update: here's the working version of your code http://jsbin.com/zatogisepo/edit?html,css,output
Related
I'm trying to make a website for my photography hobby. And I want to embed my profile (if possible, but I couldn't find a way.). And now I am trying to embed a few pictures. But when I use the embed code from the Instagram picture itself it won't show, and I only see a gray/white background with the gray Instagram logo.
After edit the website doesn't show up as it does on my computer, the placement is different.
/*Topbar styling*/
div.navbar {
position: absolute;
width: 100%;
height: 40px;
background-color: #cc0000;
}
div.navbar p {
font-family: Trebuchet MS;
font-size: 20px;
margin-top: 5px;
margin-left: 10px;
}
div.menu {
position: absolute;
height: 20px;
width: 20px;
margin-left: 100px;
margin-top: 5px;
color: #fff;
}
div.menu img {
height: 20px;
width: 20px;
}
div.content {
position: absolute;
margin-top: 30px;
margin-left: 20px;
}
/* Body styling for browser */
/* HTML position/height/width */
html {
position: relative;
height: 100%;
width: 100%;
}
/* Body height/margin/width/position thing */
body {
position: absolute;
min-width: 100%;
min-height: 100%;
margin: 0px;
}
<!DOCTYPE html>
<html>
<title>Lodewijks Photography</title>
<head>
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<div class="navbar">
<p>Logo komt hier ergens</p>
</div>
<div class="menu">
<button class="menu"><img src="images/hamburger.png"></button>
</div>
<div class="content">
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/BfWMLw2B-P3/" data-instgrm-version="8" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
<div style="padding:8px;">
<div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:45.83333333333333% 0; text-align:center; width:100%;">
<div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div>
</div>
<p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by Ritchie Lodewijks (#rlodewijksphotography) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2018-02-18T17:39:13+00:00">Feb 18, 2018 at 9:39am PST</time></p>
</div>
</blockquote>
<script async defer src="//www.instagram.com/embed.js"></script>
</div>
</body>
</html>
The problem is caused by the path to the script. Replace
<script async defer src="//www.instagram.com/embed.js"></script>
with
<script async defer src="http://www.instagram.com/embed.js"></script>
I am trying to make a page responsive. It worked out fine with two simple div's for a logo. The logo resizes too. For the menu I want to create the same, only this is a list and I find it hard to center the buttons. I came this far, but it isn't center aligned like I wanted. Only when it's minimum screen size.
#charset"UTF-8";
/* CSS Document */
/*Algemeen*/
#wrapper {
width: 100%;
height: 100%;
margin: 0px auto;
}
header {
padding-bottom: 8%;
width: 100%;
height: auto;
background-color: #88d9ce;
}
#logo {
text-align: center;
padding-top: 10px;
}
#logo img {
min-width: 100px;
max-width: 15%;
height: auto;
}
#menu {
text-align: center;
margin-left: -25px;
width: 100%;
}
ul {
list-style-type: none;
}
li {
float: left;
width: 17%;
height: auto;
margin-right: 3%;
}
li img {
min-width: 60px;
max-width: 50%;
height: auto;
}
<body>
<div id="wrapper">
<header>
<div id="logo">
<img src="http://i61.tinypic.com/13yebnr.jpg" />
</div>
<div id="menu">
<ul>
<li>
<img src="http://i60.tinypic.com/5f0pd4.png" />
</li>
<li>
<img src="http://i59.tinypic.com/2cx6xqs.png" />
</li>
<li>
<img src="http://i58.tinypic.com/veu6o1.png" />
</li>
<li>
<img src="http://i61.tinypic.com/24ebywg.png" />
</li>
<li>
<img src="http://i62.tinypic.com/71r8ut.png" />
</li>
</ul>
</div>
</header>
</div>
</body>
You can use display:inline-block for your li then it centers with text-align:center. The font-size:0px on the ul is to remove the extra spacing that happens. If you have text in that list item, put the font size on that.
DEMO: https://jsbin.com/xudaz/1/
<div id="logo">
<img src="http://placehold.it/300x100/000000/FFFFFF&text=LOGO" />
</div>
<ul id="menu">
<li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=1"/></li>
<li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=2"/></li>
<li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=3"/></li>
<li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=4"/></li>
<li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=5"/></li>
</ul>
CSS:
#logo {
text-align:center;
padding-top:10px;
}
#logo img {
min-width:100px;
max-width:15%;
height:auto;
}
#menu {
list-style-type:none;
padding:0;
font-size:0px;
white-space:nowrap;
min-width:240px;
text-align:center;
width:100%;
max-width:980px;
margin:0 auto;
}
#menu li {
display:inline-block;
box-sizing:border-box;
border:1px solid red;
width:17%;
}
#menu li img {
height:auto;
width:100%;
max-width:60px;
}
Here's an alternate "answer" as it's not using images at all. You will find that images used for navigation, unless they are twice the size, will look fuzzy on high density (retina) devices. Also, sizing down links too small on small viewports is hard to tap on as a finger is kinda fat. This stacks better.
DEMO: https://jsbin.com/fafeya/1/
CSS
body,
html {
background: #88d9ce;
padding: 0;
margin: 0;
}
.logo {
width: 100px;
height: 100px;
background: yellow;
margin: 3% auto;
border-radius: 50%;
box-sizing:border-box;
border:5px solid #000;
}
#nav {
text-align: center
}
#nav a {
background: #9cf2e6;
display: inline-block;
color: #000;
text-decoration: none;
font-size:14px;
font-family:monospace; /* see google fonts too or typekit etc */
padding: 5px 20px 3px;
box-shadow: 4px 4px 0px 0px rgba(50, 50, 50, 0.5);
transform: rotate(2deg) skew(2deg);
margin: 5px 3%;
}
#nav a span {
transform: rotate(-2deg) skew(-2deg);
display: block;
}
#nav a:nth-child(even) {
transform: rotate(-2deg) skew(-2deg)
}
#nav a:nth-child(even) span {
transform: rotate(2deg) skew(2deg)
}
HTML:
<div class="logo"></div>
<nav id="nav">
<span>Link</span>
<span>Link</span>
<span>Link</span>
<span>Link</span>
<span>Link</span>
</nav>
I'm trying to make my header banner stretch / fit to the website's dimensions, however, I am unsure how to make this happen on every browser.
HTML5:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="text_h">
Welcome to KUBE Toy Library!
</span>
<span class="banner_h">
<img src="Images\Top_Banner.jpg" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
positon: relative;
width: 100%;
}
.text_h{
position: absolute;
color: white;
text-align: center;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
If your wondering why this is being created, this is for a school assessment task, and all content is fictious.
Try:
* {margin:0; padding: 0;}
.banner_h {display: block; width: 100%;}
.banner_h img {width:100%}
Check the result out in a fiddle.
I am wondering how to make a liquid(15%,70%,15%) 3 column css layout have dynamic equal height columns where each column matches the height of the longest column dynamically(in other words: according to content in each column, if column 1 is longer than 2 and 3, then columns 2 and 3 should automatically be the same height as column 1) Is there a way to accomplish this, I have looked at the holy grail: http://alistapart.com/article/holygrail and it says that it does not work with equal height columns. I am wondering if I can modify my css code to do exactly that.
CSS Code:
/* Generated by http://www.cssportal.com */
/*#import url("/robotics/css/reset.css");*/
html,body {
background:url(background.jpg') no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
font-family: Verdana, Arial, Helvetica, sans-serif;
/*font-size: 13px;*/
color:#FFFFFF;
text-align:center;
}
ul {
text-align:center;
margin-left: -40px;
}
ul li {
display:block;
font-size:10pt;
padding: 0px 15px 0px 15px;
}
ul li a{
margin: 0 auto;
}
ul li a:link {
color:#fff;
text-decoration:none;
}
ul li a:visited {
color:#fff;
text-decoration:none;
}
ul li a:hover{
color:#fff;
text-decoration:none;
}
ul li a:active{
color:#fff;
text-decoration:none;
}
p {
font-size: 10pt;
padding: 10px;
}
#wrapper {
width: 100%;
min-width: 768px;
/*max-width: 900px;*/
margin: 0 auto;
}
#headerwrap {
width: 100%;
float: left;
margin: 0 auto;
}
#header {
height: 100px;
/*border-radius: 10px;*/
/*border: 1px solid #FFFFFF;*/
margin: 5px;
}
#header img {
width: 70%;
height: 100%;
float:left;
margin-left:15%;
}
#contentliquid {
float: left;
width: 100%;
}
#contentwrap {
margin-left: 15%;
margin-right: 15%;
float:left;
width:70%;
}
#content {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
height: 500px;
}
#leftcolumnwrap {
width: 15%;
margin-left:-100%;
float: left;
}
#leftcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 500px;
}
#rightcolumnwrap {
width: 15%;
margin-left: -15%;
float: left;
}
#rightcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 275px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 100px;
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
}
HTML Page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="page.css">
<title>Sample</title>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
<p>This is the header.</p>
</div>
</div>
<div id="contentliquid"><div id="contentwrap">
<div id="content">
<p>This is the center column. Please make me the same height as everyone else!</p>
</div>
</div></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p>This is the left column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p>This is the right column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
<p>This is the footer.</p>
</div>
</div>
</div>
Is there a way to make all columns the same height dynamically?
You should try using display: table-cell; (this requires a parent element set to display: table; Table cell elements always share the height of their container, and their container (if it's not otherwise set) will always have the height of it's largest child.
Check out this fiddle for an example:
http://jsfiddle.net/kLMtb/
Your html may need a little bit of reformatting as well, I changed a few things in that example, so take a look. Primarily, the center column needs to be put in between the left and right columns in your html.
And take a look at this for an explanation of css table display properties:
http://ajaxian.com/archives/display-table
There are 2 ways I know of to achieve equal height columns.
1) CSS tables
FIDDLE
Markup:
<div id="header">
<p>This is the header.</p>
</div>
<div class="wpr">
<div id="leftcolumn">
<p>This is the left column. Please make me the same height as everyone else!</p>
</div>
<div id="contentliquid">
<p>Some content</p>
</div>
<div id="rightcolumn">
<p>This is the right column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="footer">
<p>This is the footer.</p>
</div>
CSS
#header {
height: 100px;
background: orange;
}
.wpr
{
display:table;
}
#leftcolumn
{
width: 200px;
background: aqua;
display:table-cell;
}
#rightcolumn
{
width: 200px;
background: pink;
display:table-cell;
}
#contentliquid {
background: yellow;
overflow:hidden;
display:table-cell;
}
#footer
{
clear:both;
background: green;
}
2) Faux columns
Requires a background image with repeat-y (Read the above article).
Something like this:
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;
I'm currently coding my design portfolio and have encountered a problem with the layout.
Here is a link to my website so you can see the problem: http://www.mozazdesign.co.cc/
Basically, I want the contact me and the icons below to appear under the header and navigation. I have put them in separate containers but for some reason where ever I place the contact me div the header follows.
Here's the code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>MozazDesign Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div><!--end logo-->
<div id="nav">
<ul id="main_nav">
<li>home</li>
<li>about me</li>
<li>gallery</li>
<li>blog</li>
<li>contact</li>
</ul><!--end main nav-->
</div><!--end nav-->
</div><!--end header-->
<div id="main_content">
<div id="contact">
</div><!--end contact"-->
</div><!--end main content-->
</div><!--end container-->
</body>
body {
padding: 0px;
margin: 0px;
background:url('images/Background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#header {
width: 960px;
}
#logo {
background:url('images/Logo.png') no-repeat;
height: 340px;
width: 524px;
float: left;
margin-left: 0px; <!--check-->
}
#nav {
background:url('images/Nav_Container.png') no-repeat;
width: 435px;
height: 33px;
float: right;
margin-top: 100px;
padding: 0px;}
#main_nav {
padding: 0px;
margin-left: 15px;
margin-top: 5px;
}
#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
}
#main_content {
width: 960px;
margin-top: 250px;
}
#contact {
background: url('images/contact.png');
height: 274px;
width: 295px;
}
I would really appreciate any help! Thanks in advance! :)
One of the problems you had was that your floated elements were not being contained inside the parent element (#header). You can use overflow:auto; on the parent element to contain floated elements inside. But, for a header like this, I usually opt to just position everything absolutely, since the content is not dynamic.
I am not sure if this is exactly what you are looking for, but this CSS will make it look like what you are looking for, I think.
body {
padding: 0px;
margin: 0px;
background:url('Images/background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#header {
height:200px;
position:relative;
}
#logo {
background:url('Images/Logo.png') no-repeat;
height: 340px;
width: 524px;
position:absolute;
}
#nav {
background:url('Images/Nav_Container.png') no-repeat;
width: 435px;
height: 33px;
position:absolute;
right:0;
top:100px;
padding: 0px;
}
#main_nav {
padding: 0px;
margin-left: 15px;
margin-top: 5px;
}
#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
}
#main_content {
}
#contact {
background:url('Images/Contact.png');
height: 274px;
width: 295px;
margin-left:125px;
}
Looks like you need clear: both on your main_content div.
I think an
#header {
overflow:hidden
}
or anything else that clears the floats of div#nav and div#logo should help.
It take 2 steps:
1) Move <div id="contact">...</div><!--end contact"--> into <div id="logo">...</div><!--end logo-->.
2) Change the #contact style to:
background: url("Images/Contact.png") repeat scroll 0 0 transparent;
height: 274px;
top: 200px;
width: 295px;
position: relative;
float: right;
top: 200px;
You need to set position: relative, otherwise it is not working.