Thread: Aligning DIVs

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    3
    Rep 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.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    300
    Rep Power
    9
    Do you have a live example?

    NM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    3
    Rep Power
    0
    Originally Posted by Nanomech
    Do you have a live example?

    NM.
    Actually I just figured it out, thanks. Just needed more sleep as it turns out.

IMN logo majestic logo threadwatch logo seochat tools logo