Results 1 to 3 of 3

Thread: Can't set margin-top on main content DIV

Threaded View

  1. #1
    Join Date
    Feb 2012

    Can't set margin-top on main content DIV

    Hi all

    I have a page, and it has a floating (fixed) nav bar at the top, which fades to 0.1% opacity when not in use. The nav bar sits at the VERY TOP of the page, but I cannot get the main DIV to have a 50-100px margin between the bottom of the nav bar, and where the main DIV starts; at the moment, the nav bar is ACROSS the main DIV, and not separated by a neat space. Any ideas? I have pasted the code AND attached the source in ZIP:



    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    <html xmlns="" xml:lang="en">
    		<link rel="stylesheet" type="text/css" href="./css/style.css"/>
    	<body id="body">
    		<div id="bar"></div>
    		<div id="wrapper">
    			<div id="main-content">

    * {
    	margin: 0;
    	padding: 0;
    #body {
    	background: url('../img/page-bg-50-pc.jpg') no-repeat center center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    #bar {
    	width: 100%;
    	height: 75px;
    	position: fixed;
    	/* transition for fading */
    	transition: opacity 1.5s ease-in-out;
    	-moz-transition: opacity 1.5s ease-in-out;
    	-webkit-transition: opacity 1.5s ease-in-out;
    	opacity: 0.1;
    	border-bottom: 1px solid #a68114;
    	-webkit-box-shadow: 0px 0px 15px #333;
    	box-shadow: 0px 0px 15px #333;
    	/* Safari 4-5, Chrome 1-9 */
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a68114), to(#40260f));
    	/* Safari 5.1, Chrome 10+ */
    	background: -webkit-linear-gradient(top, #a68114, #40260f);
    	/* Firefox 3.6+ */
    	background: -moz-linear-gradient(top, #a68114, #40260f);
    	/* IE 10 */
    	background: -ms-linear-gradient(top, #a68114, #40260f);
    	/* Opera 11.10+ */
    	background: -o-linear-gradient(top, #a68114, #40260f);
    #bar:hover {
    	opacity: 1;
    	transition: opacity 0.25s ease-in-out;
    	-moz-transition: opacity 0.25s ease-in-out;
    	-webkit-transition: opacity 0.25s ease-in-out;
    #wrapper {
    	margin: 0 auto;
    	width: 750px;
    	height: auto;
    #main-content {
    	height: 2000px;
    	background-color: #f2e9ce;
    	border: 1px solid #a68114;
    	-webkit-box-shadow: 0px 0px 25px #333;
    	box-shadow: 0px 0px 25px #333;
    Attached Files Attached Files


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts