SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slightly odd issue with <ul>/<li>

    Hia, I'm trying to make a navbar which looks like the one on this site

    http://www.devdefined.com/

    i have the basic bar but i want to have a seperator (pole) between each link (I have one made as an image), and I'm having a bit of an issue styling the ul li.

    It's probably an easy one..i just cant see it.......long day

    the page is here
    www.ats-heritage.co.uk/Testing/WhiteSails

    cheers

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put the bg-image on the list item, not the anchor and then use appropriate right margin/padding.

  3. #3
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry if im being thick but i cant get that to work either...
    here's what i have so far

    Code CSS:
    #navCentre ul{
    	list-style: none;
    }
    #navCentre li{
    	display:inline;
    	position: relative;
    	float: right;
    	top: 0px;
    	height: 43px;
    }
     
    #navCentre li a{
    	float:left;
    	background: url('Images/Nav/Seperator.png') no-repeat;
    	padding-right: 50px;
    	text-decoration:none;
    }

    is that what you meant or have i gone completely off?

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I meant:

    Code:
    #navCentre ul{ 
        list-style: none;
    } 
    
    #navCentre li{ 
        display:inline;
        position: relative;
        float: right;
        top: 0;
        height: 43px;
        background: url('Images/Nav/Seperator.png') no-repeat;
        padding-right: 50px;
    } 
     
    #navCentre li a{ 
        float:left;
        text-decoration:none;
    }

  5. #5
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers..works beautifully with a few tweaks here and there.

    I managed to make the site horizntally fluid yesterday but couldnt get the vertical fluidity to work properly, are there any problems in my code that would stop this from working?

    I changed #main to height 100% and sorted the margins to make it look good but i couldnt get the #content div to function properly, i had it set to height 100% with margins to keep it where it should be but that wouldnt work..the whole thing just stayed fixed.

    I'm confused

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just had a look at your HTML to see what you've done and have to say, it's badly structured. There's way too many elements, all the purely decorative ones come before all the content but fundamentally, the #left, #centre, #right thing is all wrong - all you need is a single element for your main content area with left & right borders.

  7. #7
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea thats all just for the rounded corners. how would i go about making it all one element and keep the corners looking as they do?

  8. #8
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok on another note

    i have my second menu level in now, but i cant stop the seperator.png (which i want on the first level) appearing at the end of the 2nd level <li>s

    the page is live at the following url
    www.ats-heritage.co.uk/Testing/WhiteSails

    I think it's inheriting it from the first level...how can i stop this?

    cheers
    Last edited by james_littler; Feb 14, 2008 at 07:59.

  9. #9
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorted

  10. #10
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by james_littler View Post
    yea thats all just for the rounded corners.
    Forgetting about the corners for a minute, I already gave you the answer for the main content area:

    all you need is a single element for your main content area with left & right borders


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
  •