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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Aligning elements on different lines in an inline list

    Hello,

    I have an inline list (with background images as "bullets"), which I use as a menu.

    Because of the length of each list item, they end up displayed like this:

    Code:
    >> item 1    >>item 2
    >> item 3        >> item 4
    How can I do if I want to have items 2 and 4 aligned automatically? I've googled a lot already, I'm not even sure it's doable.
    If I use float:left;display:block instead of display:inline, can it help me?

    Thanks for your help!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello mister eko,
    It shouldn't be too difficult. Give each li a width with text-align: left;
    Code:
    #menu li {
    	float: left;/*may or may not need the float*/
    	width: 147px;
    	height: 21px;
    }
    To be any more specific we'd need a look at your code.
    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

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I feel stupid now. Why didn't I think of that? Thanks

    Can you explain me a few things?
    - why float:left might or might not be necessary
    - I don't need display:block besides float:left?
    - can display:inline do the same thing instead? (EDIT: apparently not)

    Here's my code:

    Code:
    ul {
    margin:0;
    padding:5px;
    }
    
    li {
    float:left;
    display:block; /* left if for now, used to be inline before I use float:left */
    width:300px; /* followed your recommendation*
    padding:0px 4em 0px 15px; /* padding-left is for the bullet */
    background: url(images/bullet.gif) center left no-repeat;
    }
    Last edited by mister eko; 02-06-2007 at 11:59 AM.


  •  

    Posting Permissions

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