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 9 of 9
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts

    Exclamation trying to position my unordered list correctly, so damn fiddly :)

    Hi All,

    firstly here is my page

    and the list of follow icons is not positioned correctly i want it so that it is always positioned just above the search bar and and ligned up so that the right hand side has the same spacing as the search bar does?

    here is my css code for this page
    Code:
    #header{margin:0 auto; width:982px; height:210px; z-index:1; padding:5px; background-color:#FFFFFF;}
    .selected{background:#0099FF;}
    .list{padding:0;margin:0;list-style:none; z-index:0;}
    .list li a{text-align:left;padding:2px;cursor:pointer;display:block;text-decoration:none;color:#000;}
    
    #header .logo {
    	float:left;
    	width:200px;
    	height:115px;
    	z-index:1;
    }
    #header .search_container {
    	margin-top:74px;
    	height:50px;
    	padding:5px 10px 10px 254px;
    }
    
    #header .main {
    height:40px;
    margin-bottom:10px;
    }
    #loading {
    visibility:hidden;
    padding-left:5px;
    }
    #ajax_response {
    border:1px solid #8789e7;
    background:#fff;
    position:absolute;
    display:none;
    padding:2px 2px;
    top:148px;
    z-index:1;
    color:#000000;
    }
    #follow_nav { list-style: none; margin: 0; width:200px; height:50px; position:absolute; top:10px; right:150px;}
    #follow_nav li { float: right; }
    #follow_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 50px; } 
    
    #facebook { background:url("/images/followIMG.png"); width: 50px; }
    #facebook:hover { background: url(/images/followIMG.png) 0 0  !important; }
    #facebook.active { background: url(/images/followIMG.png) 0 0; }
    #main_nav:hover li a#facebook { background-position: 0; }
    
    #twitter { background:url("/images/followIMG.png") repeat scroll -50px 0 transparent;width:50px; }
    #twitter:hover { background: url(/images/followIMG.png) -50px 0  !important; }
    #twitter.active { background: url(/images/followIMG.png) -50px 0; }
    #main_nav:hover li a#twitter { background-position: -50px; }
    
    #rss { background:url("/images/followIMG.png") repeat scroll -100px 0 transparent; width:50px;}
    #rss:hover { background: url(/images/followIMG.png) -100px 0  !important; }
    #rss.active { background: url(/images/followIMG.png) -100px 0; }
    #main_nav:hover li a#rss { background-position: -100px; }
    
    #contact { background:url("/images/followIMG.png")  repeat scroll -150px 0 transparent; width:50px; }
    #contact:hover { background: url(/images/followIMG.png) -150px 0  !important; }
    #contact.active { background: url(/images/followIMG.png) -150px 0; }
    #main_nav:hover li a#contact { background-position: -150px; }
    
    #header .followus_container{
    padding:10px 7px 10px;
    width:212px;
    float:right;
    overflow:hidden;
    }
    .followus_container .individual_follows{
    float:left;
    padding-right:2px;
    width:50px;
    }
    .taller_new{overflow:auto; background-color:#FFFFFF; padding-top:10px;}
    
    #main_nav { list-style: none; margin: 0; padding: 0; margin-top:10px; height: 55px; background-color:#595959;}
    #main_nav li { float: left; }
    #main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 61px; } 
    
    #home { background:url(/images/menu.jpg); width: 158px; }
    #home:hover { background: url(/images/menu.jpg) -158px 0  !important; }
    #home.active { background: url(/images/menu.jpg) 0 0; }
    
    #dvd {background:url("/images/menu.jpg") repeat scroll -316px 0 transparent;width:158px;}
    #dvd:hover { background: url(/images/menu.jpg) -474px 0  !important; }
    #dvd.active { background: url(/images/menu.jpg) -316px 0; }
    
    #cd {background:url("/images/menu.jpg") repeat scroll -632px 0 transparent;width:158px;}
    #cd:hover { background: url(/images/menu.jpg) -790px 0  !important; }
    #cd.active { background: url(/images/menu.jpg) -632px 0; }
    
    #video {background:url("/images/menu.jpg") repeat scroll -948px 0 transparent; width:158px; }
    #video:hover { background: url(/images/menu.jpg) -1106px 0  !important; }
    #video.active { background: url(/images/menu.jpg) -948px 0; }
    
    #bluray { background:url("/images/menu.jpg") repeat scroll -1264px 0 transparent;width:158px; }
    #bluray:hover { background: url(/images/menu.jpg) -1422px 0  !important; }
    #bluray.active { background: url(/images/menu.jpg) -1264px 0; }
    
    #books { background:url("/images/menu.jpg") repeat scroll -1580px 0 transparent;width:158px; }
    #books:hover { background: url(/images/menu.jpg) -1738px 0  !important; }
    #books.active { background: url(/images/menu.jpg) -1580px 0; }
    and here is my page code
    Code:
    <div id="header">
    <a class="logo" href="/"><img src="/images/kernow_connect.gif" border="0" title="Kernow Connect" alt="Kernow Connect" /></a>
        
    <div class="search_container">   
    <div class="main">
    <input type="text" id="keyword" size="62" value="Search Here..." 
    style="height:30px; padding:10px; font-size:24px; font-family:'Trebuchet MS'; color:#999999;" 
    onfocus="clearMe(this)" onblur="defaultMe(this)"  />
    <img src="/images/loading.gif" id="loading" alt="Loading" title="Loading" width="18" height="18" />
    <div id="ajax_response"></div>
    </div>
    </div>
    
    <ul id="main_nav">
    	<li><a href="/" accesskey="3" id="home" title="Home Page">Kernow Connect Home Page</a></li>
        <li><a href="/dvds.php" accesskey="4" id="dvd" title="DVDs">DVDs</a></li>
        <li><a href="/cds.php" accesskey="6" title="Music CDs" id="cd">Music CDs</a></li>
        <li><a href="/video_games.php" accesskey="7" title="Video Games" id="video">Video Games</a></li>
        <li><a href="/blu-rays.php" accesskey="6" title="Blu-Ray DVDs" id="bluray">Blu-Ray DVDs</a></li>
        <li><a href="/books.php" accesskey="6" title="Books" id="books">Books</a></li>
    </ul> 
        
    <ul id="follow_nav">
    <li><a href="contact.php" accesskey="3" id="contact" title="Contact Kernow Connect">Contact Kernow Connect</a></li>
    <li><a href="" target="_blank" accesskey="3" id="rss" title="Follow Kernow Connect RSS Feeds">Kernow Connect RSS Feeds</a></li>
    <li><a href="http://twitter.com/KernowConnect" target="_blank" accesskey="3" id="twitter" title="Follow Kernow Connect On Twitter">Kernow Connect on Twitter</a></li>
    <li><a href="http://www.facebook.com/home.php?#/pages/Kernow-Connect/54736213543?ref=sgm" target="_blank" accesskey="3" id="facebook" title="Follow Kernow Connect On Facebook">Kernow Connect on Facebook</a></li>
    </ul>
    </div>
    any ideas how to keep this unordered list in the correct position no matter what the browser size is?

    many thanks
    Luke

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello LJackson,
    Some other problems there as well.
    Your logo image is much larger than the 200x115 anchor you have it contained in.

    To make your social icons stay where you want them, make #header relative.

    Try making these changes highlighted in red -
    Code:
    #header {
    	margin:0 auto;
    	width:982px;
    /*height:210px;
    z-index:1;*/
    overflow: auto;
    position: relative;
    	padding:5px;
    	background-color:#FFFFFF;
    }
    #header .logo {
    	float:left;
    width:242px;
    height:150px;
    /*z-index:1;*/
    }
    #header .search_container {
    /*margin-top:74px;*/
    	height: 50px;
    margin: 90px 10px 10px 254px;
    }
    #main_nav { 
    list-style: none; 
    /*margin: 0; 
    margin-top:10px; */
    padding: 0; 
    margin:10px 0 0; 
    height: 55px; 
    background:#595959;
    }
    #follow_nav { 
    list-style: none;
     margin: 0; 
    width:200px;
     height:50px; 
    position:absolute; 
    top:10px; 
    right:10px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    LJackson (12-19-2010)

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    @Excavator

    thanks very much mate, really appreciate ur help!!!

    Luke

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    ok just relised that since doing the above my search results are now appearing in the middle of my search bar and not at the beginning? its adding a left position of 717.5px??? not sure why this is.



    if i remove the position relative from the header then the list appears in the correct place but then my follow icons shoot out the the right

    any ideas how i can get the two of them to work together?
    my page url is in my sig

    many thanks mate

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The dropdown list is now being positioned relative to #header due to that position:relative added to fix your icons. You could either hack the javascript that's setting the left position (which is expecting the dropdown to be positioned relative to the page), or:

    Code:
    .main {
        height: 40px;
        margin-bottom: 10px;
        position: relative;
        width: 300px;
    }
    
    #ajax_response {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #8789E7;
        color: #000000;
        display: none;
        left: 0 !important;
        padding: 2px;
        position: absolute;
        top: 52px;
        z-index: 1;
    }
    Seems to sort it.

  • Users who have thanked SB65 for this post:

    LJackson (12-27-2010)

  • #6
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    hi mate,

    i have tried the above but it doesnt seem to change anything? which is strange!

    it seems to ignore the left 0;?

    many thanks for your help
    Luke
    Last edited by LJackson; 12-27-2010 at 03:50 PM.

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I can't see the left:0 !important at all in your css.

    EDIT: Sorry, caching....you haven't added !important. This is required to override the left setting applied by the js.

  • #8
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    ah i didnt add the important bit because i though that was there for my benifit didnt relise the css used it! oops

    its working a treat now thanks, really appreciate your help mate thanks!!!!!

  • #9
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    one other very small thing, in IE the search box has a 6px gap on the right which is how i want it but in firefox it does not, any idea what is causing that?

    many thanks
    Luke
    Last edited by LJackson; 12-27-2010 at 03:50 PM.


  •  

    Posting Permissions

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