SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div Positioning and Layout

    I'm trying to align my nav bar to sit directly above my third div (footer) with the h3 element aligned immediately above the nav div. I've so far got the following code:

    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Pacific FX</title>
    		<link href="css/style.css" rel="stylesheet" type="text/css" />
    	</head>
    	<body>
    		<div id="container">
    			<div id="content">
    			</div> <!-- End Row content -->
    			
    			<div id="nav">
    				<h3>Pacific Fx</h3>
    				<ul>
    					<li><a href="#">Home</a></li>
    					<li><a href="#">About</a></li>
    					<li><a href="#">Reel</a></li>
    					<li><a href="#">Team</a></li>
    					<li><a href="#">Services</a></li>
    					<li><a href="#">Contact</a></li>
    					<li><a href="#">School</a></li>
    				</ul>
    			</div> <!-- End Navigation -->
    			<div class="clearfooter"></div> <!-- Base Divider -->
    		</div> <!-- End container -->
    			<div id="footer">
    			
    			</div> <!-- End Footer -->
    	</body>
    </html>
    Code:
    html, body {
    	height:100%;
    	width:100%;
    	float:left;
    	margin:0 auto;
    	}
    
    #container {
    	background: #444a48; /* Old browsers */
    	background: -moz-linear-gradient(top,  #444a48 0%, #424b48 7%, #454b49 7%, #444d4a 11%, #474d4b 11%, #454e4b 14%, #4a5350 22%, #4b5453 22%, #4b5451 23%, #4d5653 23%, #4c5552 24%, #4d5655 24%, #525b58 31%, #555f5e 35%, #565e60 47%, #596362 57%, #606a69 67%, #66706f 71%, #656f6e 72%, #6d7776 77%, #6c7675 78%, #6e7975 78%, #6f7978 79%, #6e7975 79%, #6f7978 79%, #6f7a76 80%, #707a79 80%, #717b7a 80%, #727d79 82%, #747e7d 82%, #747f7b 83%, #76807f 83%, #848f89 91%, #84908c 91%, #8b9690 94%, #8b9793 94%, #8c9791 95%, #8d9a93 95%, #8f9a94 96%, #929f98 97%, #969f9a 98%, #97a49d 99%, #99a49e 100%, #9aa59f 100%, #cdd2ce 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444a48), color-stop(7%,#424b48), color-stop(7%,#454b49), color-stop(11%,#444d4a), color-stop(11%,#474d4b), color-stop(14%,#454e4b), color-stop(22%,#4a5350), color-stop(22%,#4b5453), color-stop(23%,#4b5451), color-stop(23%,#4d5653), color-stop(24%,#4c5552), color-stop(24%,#4d5655), color-stop(31%,#525b58), color-stop(35%,#555f5e), color-stop(47%,#565e60), color-stop(57%,#596362), color-stop(67%,#606a69), color-stop(71%,#66706f), color-stop(72%,#656f6e), color-stop(77%,#6d7776), color-stop(78%,#6c7675), color-stop(78%,#6e7975), color-stop(79%,#6f7978), color-stop(79%,#6e7975), color-stop(79%,#6f7978), color-stop(80%,#6f7a76), color-stop(80%,#707a79), color-stop(80%,#717b7a), color-stop(82%,#727d79), color-stop(82%,#747e7d), color-stop(83%,#747f7b), color-stop(83%,#76807f), color-stop(91%,#848f89), color-stop(91%,#84908c), color-stop(94%,#8b9690), color-stop(94%,#8b9793), color-stop(95%,#8c9791), color-stop(95%,#8d9a93), color-stop(96%,#8f9a94), color-stop(97%,#929f98), color-stop(98%,#969f9a), color-stop(99%,#97a49d), color-stop(100%,#99a49e), color-stop(100%,#9aa59f), color-stop(100%,#cdd2ce)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top,  #444a48 0%,#424b48 7%,#454b49 7%,#444d4a 11%,#474d4b 11%,#454e4b 14%,#4a5350 22%,#4b5453 22%,#4b5451 23%,#4d5653 23%,#4c5552 24%,#4d5655 24%,#525b58 31%,#555f5e 35%,#565e60 47%,#596362 57%,#606a69 67%,#66706f 71%,#656f6e 72%,#6d7776 77%,#6c7675 78%,#6e7975 78%,#6f7978 79%,#6e7975 79%,#6f7978 79%,#6f7a76 80%,#707a79 80%,#717b7a 80%,#727d79 82%,#747e7d 82%,#747f7b 83%,#76807f 83%,#848f89 91%,#84908c 91%,#8b9690 94%,#8b9793 94%,#8c9791 95%,#8d9a93 95%,#8f9a94 96%,#929f98 97%,#969f9a 98%,#97a49d 99%,#99a49e 100%,#9aa59f 100%,#cdd2ce 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top,  #444a48 0%,#424b48 7%,#454b49 7%,#444d4a 11%,#474d4b 11%,#454e4b 14%,#4a5350 22%,#4b5453 22%,#4b5451 23%,#4d5653 23%,#4c5552 24%,#4d5655 24%,#525b58 31%,#555f5e 35%,#565e60 47%,#596362 57%,#606a69 67%,#66706f 71%,#656f6e 72%,#6d7776 77%,#6c7675 78%,#6e7975 78%,#6f7978 79%,#6e7975 79%,#6f7978 79%,#6f7a76 80%,#707a79 80%,#717b7a 80%,#727d79 82%,#747e7d 82%,#747f7b 83%,#76807f 83%,#848f89 91%,#84908c 91%,#8b9690 94%,#8b9793 94%,#8c9791 95%,#8d9a93 95%,#8f9a94 96%,#929f98 97%,#969f9a 98%,#97a49d 99%,#99a49e 100%,#9aa59f 100%,#cdd2ce 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top,  #444a48 0%,#424b48 7%,#454b49 7%,#444d4a 11%,#474d4b 11%,#454e4b 14%,#4a5350 22%,#4b5453 22%,#4b5451 23%,#4d5653 23%,#4c5552 24%,#4d5655 24%,#525b58 31%,#555f5e 35%,#565e60 47%,#596362 57%,#606a69 67%,#66706f 71%,#656f6e 72%,#6d7776 77%,#6c7675 78%,#6e7975 78%,#6f7978 79%,#6e7975 79%,#6f7978 79%,#6f7a76 80%,#707a79 80%,#717b7a 80%,#727d79 82%,#747e7d 82%,#747f7b 83%,#76807f 83%,#848f89 91%,#84908c 91%,#8b9690 94%,#8b9793 94%,#8c9791 95%,#8d9a93 95%,#8f9a94 96%,#929f98 97%,#969f9a 98%,#97a49d 99%,#99a49e 100%,#9aa59f 100%,#cdd2ce 100%); /* IE10+ */
    	background: linear-gradient(top,  #444a48 0%,#424b48 7%,#454b49 7%,#444d4a 11%,#474d4b 11%,#454e4b 14%,#4a5350 22%,#4b5453 22%,#4b5451 23%,#4d5653 23%,#4c5552 24%,#4d5655 24%,#525b58 31%,#555f5e 35%,#565e60 47%,#596362 57%,#606a69 67%,#66706f 71%,#656f6e 72%,#6d7776 77%,#6c7675 78%,#6e7975 78%,#6f7978 79%,#6e7975 79%,#6f7978 79%,#6f7a76 80%,#707a79 80%,#717b7a 80%,#727d79 82%,#747e7d 82%,#747f7b 83%,#76807f 83%,#848f89 91%,#84908c 91%,#8b9690 94%,#8b9793 94%,#8c9791 95%,#8d9a93 95%,#8f9a94 96%,#929f98 97%,#969f9a 98%,#97a49d 99%,#99a49e 100%,#9aa59f 100%,#cdd2ce 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444a48', endColorstr='#cdd2ce',GradientType=0 ); /* IE6-9 */
    	font-family: Gill Sans, sans-serif;
    	min-height: 100%;
    	margin-bottom: -330px;
    	position: relative;
    	}
    	
    #content	{
    	width:100%;
    	height:600px;
    	}
    	
    /** Pacific Fx Title **/
    h3	{
    	font-family: Gill Sans, sans-serif;
    	color:#a5d8dc;
    	padding:0 11px;
    	font-size:60px;
    	}
    	
    #nav {width: 100%; font-size:20px;}
    #nav ul {margin: 0; padding: 0; float: left; }
    #nav ul li {display: inline;}
    #nav ul li a {float: left; text-decoration: none; color: white; padding: 0px 17px;}
    #navul li a:visited {color: white; }
    #nav ul li a:hover, #navigation ul li .current {color: #fff;}
    
    .clearfooter	{
    		height: 330px;
    		clear:both;
    		}
    	
    #footer		{
    	height:330px;
    	width:100%;
    	position:relative;
    	background-color: #262626;
    	float:left;
    	}
    I just can't seem to get the nav bar and title aligned to that bottom dark grey bar. I've tried suing absolute positioning on the nav style with bottom set to 0 but it disappears off the page. I've searched the net trying to solve my problem but I can't seem to find anything that fixes it thus I'm thinking I have a more fundamental problem with how I've set out my css which I think is centered around my html / body style.
    Anyone able to help me out?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Do you have an image of what you are aiming for? I can't work out what you want from your code and description.

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually managed to crack my problem in the end, spent hours pouring over websites and the books I have but it was so simple and all connected to how I was setting up my containers.
    I've actually managed to get myself to a good position from what I can tell but am now having difficulty with gradients.

    I'm using a website to generate my gradient from an image file I uploaded (sliver of the background image I have aligned to the left. The idea is to create a continuation of the images gradient expanding right but atm I can't get them to align properly.

  4. #4
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Cyndre View Post
    I actually managed to crack my problem in the end, spent hours pouring over websites and the books I have but it was so simple and all connected to how I was setting up my containers.
    I've actually managed to get myself to a good position from what I can tell but am now having difficulty with gradients.

    I'm using a website to generate my gradient from an image file I uploaded (sliver of the background image I have aligned to the left. The idea is to create a continuation of the images gradient expanding right but atm I can't get them to align properly.
    Do you know how to create a repeating background? That can be far easier than creating a gradient and/or trudging through that globbly mess.

    Like this.

    ~TehYoyo


Bookmarks

Posting Permissions

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