SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with nav button not aligning?

    Hi,

    i have a problem with positioning my nav button 'home' correctly in that right now it is position slighly away from the edge from the left showing a white gap. Ideally it should be flushed to the edge. The button was developed in illustrator cs3(web page design) and then copied into photoshop to be saved into a gif file. When i add the css code to place it in my div, navigation, it does not display how i want it. I made a clear print screen of it which can be seen here, http://img4.imageshack.us/f/navbuttonhomenotflush.jpg/, with the actual button in a psd file here given the download link, http://www.fileswap.com/dl/iSggYy2T/...utton.psd.html and for the illustrator file it can be downloaded here, http://www.fileswap.com/dl/ByAOsOol/Homepage.ai.html.

    I 'm not sure if it is to do with my code OR how i have saved it into photoshop which is giving this affect, i'm not sure.

    Here is my css code
    Code CSS:
    #navigation
    {         
        border: 1px solid black;            
        overflow: hidden;
        background: white;       
        /** width: 900px; **/
        height: 50px;
    }
    #navigation ul
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
     
    #navigation li
    {
        font-weight: bold;
        float: left;
        zoom: 1;
        /** background-image: url(./images/button.jpg); **/
        background-repeat: repeat-x;
        height: 44px;
        width: 112px;
        margin-right: 2px;
        margin-left: 2px;
        font-size: 16px;  
        padding: 2px;
     
    }
     
    #navigation li a
    {
        display: block;
        float: left;
    }
     
    #navigation li a span
    {
        display:none;
    }
     
    #navigation li a:hover
    {
        text-decoration:none;
    }
     
    #navigation li a.home
    {
        background: url(./images/Home-Button.gif) no-repeat;
        width:146px;
        height: 50px;
        float: right;
     
    }
    #navigation li a:hover.home
    {
        background: url(./images/Home-Button.gif) no-repeat;
    }
     
    #navigation li a.homecurrent, #navigation li a:hover.homecurrent
    {
                        background:url(images/Home-Button.gif) no-repeat;
                        width:146px;
                        height:50px;
    }

    UPDATE: When i copied the nav button from illustrator into photoshop i as Smart Object.
    Can somebody tell me why this occurs and how to rectify this?
    Thanks
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The first thing I notice is that you have a left margin of 2px applied to the list.

    Code:
    #navigation li
    
    {
    
        font-weight: bold;
    
        float: left;
    
        zoom: 1;
    
        /** background-image: url(./images/button.jpg); **/
    
        background-repeat: repeat-x;
    
        height: 44px;
    
        width: 112px;
    
        margin-right: 2px;
    
        margin-left: 2px;
    
        font-size: 16px;  
    
        padding: 2px;
    
         
    
    }
    Are you talking abut that 2px gap or is there a bigger gap than that? If it's the margin-left then just remove it.

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, i removed the margin-left but it did not work and then i realised that i had to remove or comment the following code

    /*margin-right: 2px; */
    /*margin-left: 2px; */
    /*font-size: 16px; */
    /*padding: 2px; */

    so that it would be flushed to the edge. I should have lookedd at the code more carefully, thanks.


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
  •