SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning entire <ul> centrally

    LINK

    I've been trying ( for some time ) to get the two <ul>s at the foot of the page to align centrally as with the paragraph beneath them. Try as I might, I have not figured it out yet. I can do it by using a bespoke width on them, but is there a way of actually auto aligning them eg. margin:0px auto; ( which incidentally doesn't work )

    Thank you very much!

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you tried text-align:center;

  3. #3
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes I have, I'm experimenting with a test page right now consisting of a div containing a <ul> and I'm messing about with background colours, floats etc to try and see how it behaves. Its a bit of a mystery.

    text align center works ok when the <li> is not floated, but then it goes to pot when floated.

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm

  5. #5
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, CHECK THIS OUT

    This appears to work fine, so I'm still confused as to why my real page isn't.

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if the li's are displayed inline...you can run them together like this:

    <ul><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul>
    instead of this:

    <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
    Do so will remove the spaces that ie places, which may remove the need to float them. then just using padding/margin to position them.

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry didnt see your current post..

  8. #8
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL

    just as well, I take back what I said about this working correctly, it doesn't. Must have been a glitch in the matrix or something.

    I'm stumped. It seems to be something to do with floats, thanks matey!

    anyone???

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That won't help. Positioning the code like that won't change how the CSS is displaying the lists

    Limepickle, you're along the right lines. The text-center will work but because you're then floating the li's left, it does what you're telling it to do and positions them left.

    Obviously you're using this to position them inline so if you change the float left to display: inline; then it should solve your problem

    Code:
    #footer-nav1 li, #footer-nav2 li {
    	display: inline;
    }

  10. #10
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see.... that works a treat.

    but what about if I want a horizontal 'rolloverbutton'-type list? as in the sitepoint navigation, surely if the <li>s are not block elements I won't be able to assign heights/bg images to them?

    <rubs head>Is there a way round that?</rubs head>

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd probably do that by changing the <a> to a block level element and applying any hover effects to that as this also gets around the problems of IE6 and below not recognising hover's unless they're applied to <a>.

    You can then assign background images and other CSS value to the <a> whilst leaving the <li> as a display inline.

    I'd usually float the <li>'s left as you've done but obviously in this situation where you want them centered it won't work so just switch it for display: inline; in this case

  12. #12
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On top of the great advice others have given you... This site has always helped me for list navigations.

    For example, this menu might be close to what you are trying to accomplish.

    Good luck!

  13. #13
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic advice, Thanks FastlaneOne,csswiz & mhulse!!

    Long live sitepoint and all who sail in her!

  14. #14
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by limepickle View Post
    Long live sitepoint and all who sail in her!
    That just sounds wrong

  15. #15
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I do when creating horizontal lists (non-dropdown mind you) is to set the height and line-height of the list element to be the same (1.5em works well for me), then set the list items to display: inline; and white-space: nowrap; and then float the anchors inside them and give them a height equal to the line-height that was specified in the list container (UL element).

    Getting the list to center from there is a simple matter of setting a width on the list itself, and then using margin: 0 auto; to center it. Just make sure that your list items have enough room to expand when the text is resized by the user so it doesn't break.

  16. #16
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see Dan, you wouldn't have a simple example would you? I'm a bit unclear about the floating of the anchors inside the li's...

  17. #17
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure do.

    HTML Code:
    <ul id="menu">
    	<li><a class="current-page" href="#">Home</a></li>
    	<li><a href="#">Menu Item</a></li>
    	<li><a href="#">Linky Linky Slinky</a></li>
    	<li><a href="#">Link Number 4</a></li>
    	<li><a href="#">Do Not Click Here</a></li>
    	<li><a href="#">La La La La</a></li>
    </ul>
    The CSS was lifted directly from a personal project I'm working on, so you can see what will eventually become production qualitiy code.

    Code CSS:
    * {
    	margin: 0;
    	padding: 0;
    }
     
    #menu {
    	background: #C9C69D;
    	border-bottom: 1px solid #000080;
    	color: inherit;
    	height: 1.5em;
    	line-height: 1.5em;
    	list-style: none;
    }
    	#menu li {
    		display: inline;
    		white-space: nowrap;
    	}
     
    	#menu a {
    		background: #C9C69D;
    		border-right: 1px solid #000080;
    		color: #000;
    		float: left;
    		font-family: arial, helvetica, sans-serif;
    		height: 1.5em;
    		padding: 0 0.5em;
    		text-decoration: none;
    	}
     
    	#menu a.current-page {
    		background: #F5F5DC;
    		color: #000;
    		font-weight: bold;
    		letter-spacing: 2px;
    		position: relative;
    			bottom: -1px;
    	}
     
    	#menu a:hover {
    		background: #E5E5E5;
    		color: #000;
    	}
     
    	#menu a.current-page:hover {
    		background: #F5F5DC;
    		color: #000;
    		text-decoration: underline;
    	}


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
  •