+ Post New Thread
Results 1 to 9 of 9
Web Development Thread, <ul> side by side in Coding and Web Development; Me again! I've used an accordion menu jscript thing to show important notices on a page, which lays it out ...
  1. #1

    MK-2's Avatar
    Join Date
    Oct 2006
    Location
    Nottingham
    Posts
    3,237
    Thank Post
    149
    Thanked 581 Times in 307 Posts
    Blog Entries
    8
    Rep Power
    200

    <ul> side by side

    Me again!

    I've used an accordion menu jscript thing to show important notices on a page, which lays it out in an <ul>. thing is i want two, side by side, but every time i try using float:left things get mixed up. i've included the whole bit that displays one menu and the css, but what i want is two individually controlled menus

    HTML Code:
    <ul class="acc" id="acc">
    <li>
    <h3><center>Important Notices (click here to show/hide)</center></h3>
    <div class="acc-section">
    <div class="acc-content">
    <?php include "rss/urgentnotices.php"; ?>
    </div>
    </div>
    </li>
    </ul>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript">
    var parentAccordion=new TINY.accordion.slider("parentAccordion");
    parentAccordion.init("acc","h3",0,0);
    
    </script>
    and the css that accompanies it

    PHP Code:
    #acc {
    width:457px
    list-
    style:none
    color:[URL=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=033]#033[/URL] 
    margin:0 auto 40px
    }

    #acc h3 {
    width:443px
    border:1px solid [URL=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=6f9387]#6f9387[/URL] 
    padding:6px 6px 8px
    font-weight:bold
    margin-top:5px
    cursor:pointer
    background:url(images/header.jpg)
    }

    #acc h3:hover {
    background:url(images/header_over.jpg)
    }

    #acc .acc-section {
    overflow:hidden
    background:#fff
    }

    #acc .acc-content {
    width:425px
    padding:15px
    border:1px solid [URL=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=9ac1c9]#9ac1c9[/URL] 
    border-top:none
    background:#fff

    is it possible to have them both on the same line, but centred (so the two will not align from the left but from the centre yet the text in them is still normally aligned?

    as an addition, i have a footer.php (and footer in css) that keeps rising up if i use float:left on the menus. but they seem to be fixed by using clear:both in css for the footer, is that the correct method?

  2. #2

    MK-2's Avatar
    Join Date
    Oct 2006
    Location
    Nottingham
    Posts
    3,237
    Thank Post
    149
    Thanked 581 Times in 307 Posts
    Blog Entries
    8
    Rep Power
    200
    oh and as an extra addition, you cant just do an extra <li> as it needs to be a totally separate <ul> to create a new menu from

  3. #3
    bmdixon's Avatar
    Join Date
    Apr 2008
    Location
    Birmingham
    Posts
    259
    Thank Post
    44
    Thanked 58 Times in 39 Posts
    Rep Power
    23
    Quick and nasty but this seems to work...
    HTML Code:
    <html>
    <head>
    <style type="text/css">
    ul {
    display: inline;
    list-style-type: none;
    }
    
    #menu1 {
    float: left;
    }
    
    #menu2 {
    float: right;
    }
    
    #menudiv {
    clear:both;
    }
    
    </style>
    </head>
    <body>
    <div id="menudiv">
    <ul id="menu1"><li>This is a menu</li></ul>
    <ul id="menu2"><li>this is a separate menu</li></ul>
    <div>
    </body>
    </html>

  4. #4

    sonofsanta's Avatar
    Join Date
    Dec 2009
    Location
    Lincolnshire, UK
    Posts
    5,375
    Thank Post
    957
    Thanked 1,630 Times in 1,103 Posts
    Blog Entries
    47
    Rep Power
    711
    I can't quite make sense of the code - you really, really shouldn't be nesting tags inside an <li> tag like that, as far as I can tell you're trying to replicate a <dl> Definition List - but the easiest way of getting floats to work is to use a <hr> before and a <hr> after the floated items, with style="clear: both; visibility: hidden; padding: 0; margin: 0;" - that'll create an invisible break above and below so that other elements don't get confused by the two floating items.

    Alternative is to contain the two UL's inside a DIV, as they will float inside the DIV and not have an impact on items outside that element.

    Hope some of that makes sense!

  5. #5

    MK-2's Avatar
    Join Date
    Oct 2006
    Location
    Nottingham
    Posts
    3,237
    Thank Post
    149
    Thanked 581 Times in 307 Posts
    Blog Entries
    8
    Rep Power
    200
    this uses an accordion menu jscript file and that is how they have it laid out, i didnt create any of that myself, it was taken from their example one so i have to lay it out like that using <ul><li><div> etc as that is what the jscript file is looking for unfortunately

  6. #6

    sonofsanta's Avatar
    Join Date
    Dec 2009
    Location
    Lincolnshire, UK
    Posts
    5,375
    Thank Post
    957
    Thanked 1,630 Times in 1,103 Posts
    Blog Entries
    47
    Rep Power
    711
    Alas, nevermind then.

    If you can wrap it in a container div then, that'd be the most elegant way of doing it, something along the lines of...

    Code:
    <div class="floatContainer">
      <ul class="acc">
        [gubbins here]
      </ul>
      <ul class="acc">
        [gubbins here]
      </ul>
    </div>
    with the CSS
    Code:
    ul.acc {
      float: left;
      width: 48%;}
    As far as I can remember, that should be enough to do the trick. You may still need some of the clearing <hr> tags mentioned earlier. If it doesn't work, try using position: relative; in the DIV styling as well, which shouldn't affect the layout but may force the floats to work differently (I think that used to work).

    My CSS is a bit rusty these days I fear, but hopefully that works!

  7. Thanks to sonofsanta from:

    MK-2 (7th July 2011)

  8. #7

    MK-2's Avatar
    Join Date
    Oct 2006
    Location
    Nottingham
    Posts
    3,237
    Thank Post
    149
    Thanked 581 Times in 307 Posts
    Blog Entries
    8
    Rep Power
    200
    i went with the overall div doing float as you suggested. thanks

  9. #8
    comedydave's Avatar
    Join Date
    Sep 2007
    Location
    Gloucestershire, UK
    Posts
    154
    Thank Post
    9
    Thanked 9 Times in 9 Posts
    Rep Power
    16
    The overall div may have been a bit overkill. As essentially you are using a block element to wrap an inline element.
    Try using "display:block;" on the ul itself to make the ul act like a div. This should help cut down on your markup

  10. #9

    sonofsanta's Avatar
    Join Date
    Dec 2009
    Location
    Lincolnshire, UK
    Posts
    5,375
    Thank Post
    957
    Thanked 1,630 Times in 1,103 Posts
    Blog Entries
    47
    Rep Power
    711
    Quote Originally Posted by comedydave View Post
    The overall div may have been a bit overkill. As essentially you are using a block element to wrap an inline element.
    Try using "display:block;" on the ul itself to make the ul act like a div. This should help cut down on your markup
    <ul> defaults to display: block; anyway. Source: Default style sheet for HTML 4



SHARE:
+ Post New Thread

Similar Threads

  1. Running ABTutor and NSS side by side?
    By LizaM in forum Network and Classroom Management
    Replies: 2
    Last Post: 3rd November 2009, 06:10 PM
  2. [MS Office - 2007] Office 2003/2007 side-by-side problems with Outlook 2007
    By Bruce123 in forum Office Software
    Replies: 2
    Last Post: 19th September 2009, 08:01 PM
  3. Crossing Over To The Other Side....
    By tech_guy in forum Mac
    Replies: 12
    Last Post: 27th September 2008, 08:23 PM
  4. Going over to the dark side
    By StewartKnight in forum General Chat
    Replies: 13
    Last Post: 2nd May 2008, 01:52 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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