Thread: Positioning

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

    Join Date
    Aug 2010
    Posts
    15
    Rep Power
    0

    Positioning


    Hi guys

    I have an image rotator that runs under the title bar. I cannot get this too centralise to ensave my life. Plus the footer will not stay below any additional div elements.

    How do I centralise the image rotator and make sure the footer bar stays at the bottom?

    Thanks

    Cake

    Code:
    <html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="/Includes/Styles.css" media="screen" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>     
       <script type="text/javascript">
    
    $(function(){
        $('.fadein img:gt(0)').hide();
        setInterval(function(){
          $('.fadein :first-child').fadeOut(1500)
             .next('img').fadeIn(1500)
             .end().appendTo('.fadein');}, 
          8000);
    });
    
    </script>
    
    
    
    
    </head>
    
    
    <body>
    
    
           <div id="rotator" class="fadein">
            <img  src="Includes/Images/Mainrotator/Image2.jpg" class="active"/>
            <img  src="Includes/Images/Mainrotator/Image3.jpg" />
            <img   src="Includes/Images/Mainrotator/Image4.jpg" />
            <img   src="Includes/Images/Mainrotator/Image5.jpg" />
            <img   src="Includes/Images/Mainrotator/Image5.jpg" />
            
        </div>
    i
    	</body>
    <html>
    CSS:

    Code:
    @font-face
    {
    font-family: myFirstFont;
    	src: url('Title.ttf'),
        	 url('Title.eot'); /* IE9+ */
    	
    
    }
    
    @font-face
    {
    	font-family: NavFont;
    	src: url('Nav.ttf'),
    	     url('Nav.eot');	
    	     font-weight:bold;
    	}
    	
    
    
    #head{
    	background-color: #e6e6e6;;
    	background-position:center top;
    	margin-left: auto ;
      margin-right: auto ;
      margin-top: 0;
    	height: 100px;
    	width:1000px;
    	font-family: myFirstFont;
    	font-size: 72px;
    	
    }
    
    
    	
    	nav ul li {
    	float:left;
    	display: block;
    	padding: auto;
    	margin: auto;
    }
    	nav ul li:hover {
    		background: #FFA500;
    		background: linear-gradient(top, #FFA500 0%, #FFA500 40%);
    		background: -moz-linear-gradient(top, #FFA500 0%, #FFA500 40%);
    		background: -webkit-linear-gradient(top, #FFA500 0%,#FFA500 40%);
    		padding: 0;
    	margin: 0;
    	
    	}
    		nav ul li:hover a {
    			color: #fff;
    
    		}
    	
    	nav ul li a {
    		display: block; padding: 25px 44.76px;
    		margin-bottom: 0;
    		color: #FFA500; text-decoration: none;
    	}
    nav ul ul {
    	background: #556B2F; border-radius: 0px; padding: 0; margin:0;
    	position: absolute; 
    	display: none;
    	
    }
    	nav ul ul li {
    		float: none; 
    		position: relative;
    		padding: 0;
    	margin: 0;
    	}
    		nav ul ul li a {
    			padding: 15px 43px;
    			color: #FFA500;
    		}	
    			nav ul ul li a:hover {
    				background: #FFA500;
    			}
    
    	nav ul li:hover > ul {
    		display: block;
    		
    		
    		
    	}
    	nav ul {
    	margin: 0;
    	padding: 0;
    	background: #efefef; 
    	background: linear-gradient(top, #308014 0%, #556B2F 100%);  
    	background: -moz-linear-gradient(top, #308014 0%, #556B2F 100%); 
    	background: -webkit-linear-gradient(top, #308014 0%, #556B2F 100%);
    	background-color: #308014;/*Internet Explorer*/ 
    	box-shadow: 0px 4px 9px rgba(0,0,0,0.15);
    	list-style: none;
    	position fixed;
    	display: inline-table;
    	
    	
    }
    	nav ul:after {
    		content: ""; clear: both; display: block;
    	}
    nav{
    	position: relative;
    	z-index: 100;
    	width:1000px;
    	margin-bottom: -5px;
    margin-left: auto;
    margin-right: auto;
    
    	
    	}
    nav a{
    font-family: NavFont;
    	}
    
    
    .fadein img{
    
    width: 1000px;
    height: 400px;
    margin-left: auto; 
    margin-right: auto;
    position: absolute;
      
    	}
    	
    body{
    	margin-left: auto ;
      margin-right: auto ;
      margin-top: 0;
    	background-color: tan;
    	font:100% normal Arial, Helvetica, sans-serif; 
    form,input,select,textarea{margin:0; padding:0; }
    
    	
    }
    div.box {
    margin:0 auto;
    margin-top: -20px;
    margin-bottom: -20px;
    width:500px;
    position:relative;
    top:5px;
    
    }
    
    div.box h1 { 
    font-size:20px;
    text-transform:uppercase;
    padding:5px 0 5px 5px;
    font-family: NavFont;
    font-family: arial;/*IE8*/
    
    }
    
    div.box label {
    width:100%;
    display: block;
    padding:10px 0 10px 0;
    margin-right: 30px;
    }
    
    div.box label span {
    display: block;
    font-size:18px;
    float:left;
    width:120px;
    text-align:left;
    padding:5px 30px 0 0;
    }
    
    div.box .input_text {
    	padding:10px 10px;
    width:350px;
    font-size: 18px;
    font-family: NavFont;
    font-family: arial;/*IE8*/
    
    }
    
    div.box .message{padding:7px 7px;
    width:350px;
    overflow:hidden;
    height:150px;t
    font-family: Arial;
    font-size: 18px;
    
    }
    
    div.box .button
    {
    margin:0 0 10px 0;
    margin-bottom: 30px;
    padding:4px 7px;
    background-color: #308014;
    color:#FFA500;
    border:0px;
    position: relative;
    top:10px;
    bottom: 10px;
    left:370px;
    width:100px;
    font-family: NavFont, Arial;
    font-size: 14px;
    }
    #Welcome{
    
    background-color: whitesmoke;
    height: auto;
    width: 1000px;
    margin-top: 0;
    	margin-left: auto ;
      margin-right: auto ;
    margin-bottom: 0;
    padding: 0;
    
    
    
    	
    	}
    	
    
    #footer{
    	margin-top: 0;
    	margin-left: auto ;
      margin-right: auto ;
      margin-bottom: 0;
      padding: 0;
    	background: #efefef; 
    	background: linear-gradient(top, #308014 0%, #556B2F 100%);  
    	background: -moz-linear-gradient(top, #308014 0%, #556B2F 100%); 
    	background: -webkit-linear-gradient(top, #308014 0%, #556B2F 100%);
    	background-color: #308014;/*Internet Explorer*/
    	width: 1000px;
    	height:75px;
    	text-align: center;
       font-family: NavFont;
     
    	
    	}
    
    #footer p{
    margin-top: 0;
    padding-top:15px;	
    color: #FFA500;	
    
    	}
    
      .label{
        text-align:right;
      }
      #submit{
        text-align:center;
      }
  2. #2
  3. No Profile Picture
    tom_cos
    Guest
    Devshed Newbie (0 - 499 posts)
    Your 'body' only has the rotator and the letter "i". There is no menu bar or footer. So, you need to post those.

IMN logo majestic logo threadwatch logo seochat tools logo