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 11 of 11
  1. #1
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts

    Getting a series of DIV tags to align horizontally?

    I'm trying to get a series of DIV tags to align horizontally, with each DIV being a menu item. What's the best way to do this, if any? For example:

    <div>Menu item 1</div> <div>Menu item 2</div> <div>Menu item 3</div>

    I would use <span>, except I need to define an explicit width for each DIV among a few other things.

    Thanks,
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #2
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    It can be a bit tricky at times, I found it best to float all the divs left and then have a span proceeding them with clear:both style.

    Example -
    Code:
    div.menuitem {
      float: left;
      width: 120px;
    }
    
    span.clearit {
      clear: both;
      height: 1px;
    }
    ...
    <div>
    <div class="menuitem">Menu item</div>
    <div class="menuitem">Menu item</div>
    <div class="menuitem">Menu item</div>
    <div class="menuitem">Menu item</div>
    <span class="clearit">&amp;nbsp;</span>
    </div>
    ...
    That should work, it gets a little fiddly though sometimes ...
    Omnis mico antequam dominus Spookster!

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    since these are successive menu items, maybe it would be more semantic to use a list, then assign each list an ID?

    It's the same approach I'm using here. I used this css to get it to work:
    Code:
    #menu ul
    	{
    	list-style-type:none;
    	padding:0px;
    	margin:0px;
    	}
    
    #menu li	{
    	padding:0px;
    	margin:0px;
    	float:left;
    	}
    I specified padding and margin in both because some browsers would do one and not the other...

    -Rich

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    George, go have a look at listutorial <http://css.maxdesign.com.au/listutorial/index.htm> and listamatic: <http://css.maxdesign.com.au/listamatic/index.htm>

    They cover the thing and have a nice set of outlinks as well.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    I was wondering why you were going to use divs instead of a list, I figured there was a good enough reason for it. They work pretty well.

    Example ( like a million others ) : http://mhtml.ithium.net/class_test.php
    Omnis mico antequam dominus Spookster!

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    [edit reason:duplicate]
    Last edited by liorean; 02-08-2004 at 01:34 AM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts

    [OT] Mithoric v2

    Mhtml:
    In the projects section you get this warning:
    Warning: mysql_result(): date not found in MySQL result index 12 in /home/mhtml/public_html/common/classes/mith_template.php on line 97
    In the resource section:
    Warning: mysql_result(): supplied argument is not a valid MySQL result resource in /home/mhtml/public_html/common/classes/mith_template.php on line 97
    and later in the document
    Template 'templates/projlist.htm' does not exist or insufficient access permissions disallow access

    Articles:
    Not Found
    The requested URL /articles.php was not found on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
    Apache/1.3.29 Server at www.mhtml.ithium.net Port 80

    Spelling error in the news section "[...]to the yaer and month[...]". yaer -> year


    And finally I think you should use a vertical-align: bottom; for your emoticons to make the text flow better.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #8
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    lol, I was just about to fix those errors as I'm planning on making that the release version of my site today, at the moment it's just in development.

    vertical-align: bottom is a good idea though thanks!
    I think I'll post my own thread about this, to keep this one focused on the original problem.
    Omnis mico antequam dominus Spookster!

  • #9
    Moderator
    Join Date
    May 2002
    Location
    Hayward, CA
    Posts
    1,453
    Thanks
    1
    Thanked 21 Times in 19 Posts
    Why not use display:inline?

    Also, if you're worried about an explicit width, try the min-width and max-width properties of CSS.
    "The first step to confirming there is a bug in someone else's work is confirming there are no bugs in your own."
    June 30, 2001
    author, Verbosio prototype XML Editor
    author, JavaScript Developer's Dictionary
    https://alexvincent.us/blog

  • #10
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    The width properties are ignored on inline elements, except IIRC quirks mode in the following browsers: iew, iem and op7.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    and also, presumably, the items want to have padding.

    Float is the way to go I reckon - float:left and clear:none
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


  •  

    Posting Permissions

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