Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

How to create this using css only

Its looking crap here but you get the idea. How can I create this layout using only CSS. Dunno why is it inserting so many br tags :S
Start
Date Time


  e.g. 15/1 or Jan 15 e.g. 5pm
End
Date Time
 

e.g. 15/1 or Jan 15 e.g. 5pm

Comments

  • Options
    It's easier if you start with semantic HTML first, break the pieces into an outline with related items together:
    Start

    e.g. 15/1 or Jan 15

    e.g. 5pm
    End

    e.g. 15/1 or Jan 15

    e.g. 5pm

    Stay tuned for the CSS.
  • Options
    All the <BR>s in the above code don't belong... use block comment to get the pure source. The br's apparently shift the positions a bit when viewing directly in the browser.

    Here's the CSS:dl dt { /* Make the start & end date blocks start flush left. */ clear: left; } dl dd { /* Align the date and time inputs side-by-side */ width: 35%; display: inline; float: left; padding: 0 6px } dl dd * { /* Stack all dd contents with equal width: */ display: block; width: 100%; }
  • Options
    edited October 2007
    Thanks Wallphone, I'll have to use li and span cause vanilla theme doesn't use dl tags
  • Options
    You should also take a look at both of these articles over at ALA: http://alistapart.com/articles/prettyaccessibleforms/ http://alistapart.com/articles/makingcompactformsmoreaccessible Both of these articles are great resources for good styling of forms while keeping the markup sound.
This discussion has been closed.