Aligning DIVs

Dev Shed Forums Sponsor:

January 5th, 2013, 01:06 AM

cjohnson51

Registered User

Join Date: Jan 2013

Posts: 3

Time spent in forums: 32 m 14 sec
Reputation Power: 0

Aligning DIVs

I'm attempting to align the DIVs on my site within one wrapper but I've overlooked something and I can't center my header. Any help will be appreciated. I'm probably just tired and missing the obvious problem. Here's my CSS:

Code:

#splash {
	width: 900px;
	align: center;
	text-align: left;
	padding-top: 34px;
	padding-left: 240px;
	height: 100px;
	border:0px solid;
	font: 15px 'DayPosterBlackRegular';
}

#sparksdiv {
	width: 0px;
	height: 0px;	
	padding-left: 400px;
	padding-bottom: 60px;
	padding-right: 100px;
}

.nav {
	width: 900px;
	padding-top: 98px;
	padding-right: 30px;
	margin-left: 350px;
	position: absolute;
	font-size: 15px;   
	line-height: 70%;
	font-family: "DayPosterBlackRegular";
	list-style: none;
	text-align: center;
}

and my HTML:

Code:

<div id="wrapper">
<script src="scripts/center.js"></script>
	
    	<div id="nav">
        
		<ol id="nav-two" class="nav">
	<li><a href="index.php">HOME</a>
		<audio id="beep" preload="auto">
			<source src="sounds/menuclick.mp3"></source>
			<source src="sounds/menuclick.ogg"></source>
		</audio>
	</li>
		<li><a href="design.php">DESIGN</a></li>
		<li><a href="photography.php">PHOTOGRAPHY</a></li>
		<li><a href="about.php">ABOUT</a></li>
		</ol>
		<script src="scripts/beep.js"></script>
	
    		<div id="sparksdiv">
				<video id="neonsparks" width="200" height="300">
       		 	<source src="sfx/sparks.ogv" type="video/ogg" onerror='alert("We are sorry: Your browser does not support any of the video formats available at this time.");'></source>
     			</video>    
     		</div>
		</div>
        
	<div id="splash">
	<audio id="neon-on" preload="auto">
		<source src="sounds/splash.mp3"></source>
		<source src="sounds/splash.ogg"></source>
	</audio>
COREY JOHNSON <a onmouseover="hoverVideo()">Media Design</a>
	<script src="scripts/sparks.js"></script>
	<script src="scripts/neon.js"></script>
	</div>

The header (splash) contains my name and a title that animates sparks when hovering over. This is all to the left and on the same line as my nav menu. The wrapper ends after the body. I want them to all align center with the body and the footer. So far the header and title remain fixed and I can't seem to get everything to center together. Any help would be appreciated.