Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Problem positioning links

    I've got the main navigation links for the site positioned correctly, but now i'm trying to add some sublinks to a page. I want them positioned to the top right of the content box, but positioning with position:relative is moving the first two links right of the container before i've even done anything. The third link is then on the following line, to the left of the container.

    Adjusting the left margin only seems to be effecting the third link, i can't work out how to get it all on one line and positioned correctly.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link href="styl.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="container">
    
    	<body class="background">
        
    <div id="header">
    	<h1><a href="#">portsmouth christian union</a></h1>
    </div>
    
    <div id="links">
    		<ul id="nav">
    		<li><a href="CU Web.html" class="active">Home</a></li>
    		<li><a href="Us.html">Us</a></li>
    		<li><a href="Get Involved.html">Get Involved</a></li>
    		<li><a href="#">Blog</a></li>
    		<li><a href="International.html">International</a></li>
    		<li><a href="Resources.html">Resources</a></li>
    		<li><a href="Contact.html">Contact</a></li>
    	</ul>
    </div>
    
    <div id="sublinks">
    		<ul id="navi">
            <li><a href="Us.html">Who we are</a></li>
            <li><a href="Us.html">Faq's</a></li>
            <li><a href="Us.html">Events</a></li>
         </ul>	
    </div>
    
    <div id="divider"></div>
    
    
    
    <div id="features">
    <img src="images/big-feature.png" /></div>
    </div>
    
    </div>
    
    <img src="images/footer-bg.png" class="foot">
    </body>
    </html>

    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    
    .background {
            background: url(images/body-bg.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
    
    }
    
    #divider {
    	position:absolute; top: 82px; left: 0px;
    	min-height:2px;
    	min-width:2px;
    	background-size: 100%;
    	background-image:url(images/line-bg.jpg);
    	overflow:hidden;
    	width: 100%;
    }
    
    #container {
    	width: 980px; margin: 0 auto;
    }
    
    h2 {color: #fff;font-size: 20px; text-transform: lowercase; text-decoration: none;
    		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}
    		
    #header h1 a {
    		/*display: block; width: 921px; height: 107px; float: left;
    		background: url(images/logo.jpg); text-indent: -9999px;*/
    		position: absolute;
    		top: -10px;
    		height: 34px; margin: 0 0 0 25px; padding: 12px 0 0 0; 
    		font-size: 43.5px; text-transform: lowercase; color: #fff; text-decoration: none; text-align: center;
    		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
       		font-weight: bold;
    	}
    
    #links ul#nav {
    	position: relative;top:40px;right:20px;
    	}
    		#links ul#nav li {
    			float: left; list-style: none;
    		}
    			#links ul#nav li a {
    				display: block;/* width: 155px; */height: 34px; margin: 0 20px /*word spacing*/	 0 5px; padding: 0px 0 0 0; 
    				font-size: 16px; text-transform: uppercase; color: #fff; text-decoration: none; text-align: center;
    				/*text-shadow: 0 3px 3px #333;*/ font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
       				font-weight: 300;
    
    			}
    				#links ul#nav li a:hover, #header ul#nav li a.active {
    					color: #979d9d;
    			}
    
    #sublinks ul#nav {
    	position: relative;top:80px;
    	}
    		#sublinks ul#nav li {
    			float: left; list-style: none;
    		}
    			#sublinks ul#nav li a {
    				display: block;/* width: 155px; */height: 34px; margin: 0 10px 0 5px; padding: 0px 0 0 0; 
    				font-size: 23px; color: #fff; text-decoration: none; 
    				/*text-shadow: 0 3px 3px #333;*/ font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida 		Grande", sans-serif;
       				font-weight: 300; z-index:0;
    			}
    				#sublinks ul#nav li a:hover, #header ul#nav li a.active {
    					color: #979d9d;
    			}
    
    
    #features {
    	/*	display: block; width: 980px; height: 288px; float: left;
    		background: url(images/feature-1.png);*/
    		position: relative;top:40px;
    		margin-left: 45px;
            filter:alpha(opacity=0);
            -moz-opacity:0.47;
            -khtml-opacity: 0.47;
            opacity: 0.47;
    		z-index:-1;	
    }
    
    #featuretext {
    	position: absolute; top: 80px;
    }
    
    #box {
    		position: relative;top:46px; 
    		margin-left: 45px;
            filter:alpha(opacity=0);
            -moz-opacity:0.6;
            -khtml-opacity: 0.6;
            opacity: 0.6;
    		z-index:-1;	
    }
    
    #box2 {
    		position: relative; top:-224px;
    		margin-left: 349.5px;
            filter:alpha(opacity=0);
            -moz-opacity:0.6;
            -khtml-opacity: 0.6;
            opacity: 0.6;
    		z-index:-1;	
    }
    
    #box3 {
    		position: relative; 
    		margin-left: 652px;
    		margin-top: -495px;
    		filter:alpha(opacity=0);
            -moz-opacity:0.6;
            -khtml-opacity: 0.6;
            opacity: 0.6;
    		z-index:-1;	
    }
    	
    
    .foot{
    /*        background: url(images/footer-bg.png) no-repeat center center fixed;
    */        /* Set rules to fill background */
            min-height: 100%;
            min-width: 1024px;
    
            /* Set up proportionate scaling */
            width: 100%;
            height: auto;
    
            /* Set up positioning */
            position: fixed;
            top: 0;
            left: 0;
    		z-index:-2;
    }
    
    @media screen and (max-width: 1300px) { /* Specific to this particular image */
            foot {
                    left: 50%;
                    margin-left: -650px;   /* 50% */
            }
    }
    }

    Any help would be appreciated!
    Thanks.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Replace #sublinks ul#nav with #sublinks ul#navi and check.
    Last edited by vikram1vicky; 08-02-2011 at 12:01 PM.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Whoops, sorry, the html does actually say nav now. I switched them all to navi in the hope that the error was coming as a result of me using 'nav' in both lists. I forgot to switch the hmtl back from 'navi' when i posted the code up.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by Cobb View Post
    Whoops, sorry, the html does actually say nav now. I switched them all to navi in the hope that the error was coming as a result of me using 'nav' in both lists. I forgot to switch the hmtl back from 'navi' when i posted the code up.

    You have to do corrections in CSS code too

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yeah, it all matches up now, its not that causing it to not work. The CSS code is altering the link properties, so i know its not an error like that. I'm still stuck with the positioning error though.

    Got round it in the end, i created a new div (named navigation) and placed the sublinks into that div. I then gave the sublinks an absolute positioning, and the navigation div has a relative positioning.
    Last edited by Cobb; 08-02-2011 at 11:31 PM.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    you can try to set the container to position: relative; and absolute the links to the top right

    Code:
    .container {
     position: relative;
    }
    
    .container .links {
     position: absolute;
     top: 0; 
     right: 0;
     width: 300px;
     height: 40px;
    }


  •  

    Posting Permissions

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