4
\$\begingroup\$

I want to create a small web widget, you can see it at this jsfiddle. Right now it is organized by placing lists within lists and content within those lists. All of this is supposed to sit, as a bar, fixed to the bottom of your window, over the current website. I want to know, is my list set up too cumbersome, and at the same time there a better(more efficient) way to use CSS to create this same layout?

Here's what it looks like: enter image description here

HTML:

<ul class="app_container_T t_ul">
    <li>
        <ul class="menu_T t_ul">
            <li>
                <button class="large_menu_button_T">+</button>
                <button class="large_menu_button_T">T</button>
                <button class="small_menu_button_T options">o</button>
            </li>
        </ul>
    </li>
    <li>
        <ul class="container_element_T t_ul resizableui-widget-content" id="1">
            <li class="content_header_T">
                <button class="t_intect_button close_button_T">-</button>
                <form name="search_form" class="search_form_T">
                    <input type="text" name="search_input" class="search_bar_T"></input>
                    <button class="search_button_T" name="search_button" onclick="add_timeline_element">🔍</button>
                </form>
            </li>
            <li class="content_container_T">
                <button value="Timeline" id="1" class="content_selection_button_T">Timeline</button>
                <button value="Relevent" id="1" class="content_selection_button_T">Relevent</button>
                <button value="Mentions" id="1" class="content_selection_button_T">Mentions</button>
            </li>
        </ul>
    </li>
    <li class="container_T">
        <button class="t_intect_button close_button_T">-</button>
        <textarea class="text_area_T" warp="hard" placeholder="place holder"></textarea>
        <button value="Add Photo" class="composition_button_T photo_button_T"></button>
        <button value="Add Location" class="composition_button_T location_button_T"></button>
        <textarea class="word_count_T"></textarea>
        <button value="Undo: Off" class="composition_button_T Undo_button_T"></button>
        <button value="Submit" class="composition_button_T send_button_T"></button>
    </li>
</ul>

CSS:

  /*------------------------------------------------------------------------------------*/
  /*----Bar---*/
  /*------------------------------------------------------------------------------------*/
  .app_container_T {
      position:fixed;
      bottom: 0px;
      left:0px;
      z-index: 998;
      padding: 0px;
      height: 150px;
      box-sizing: border-box;
  }
  .app_container_T > li {
      /*create a class for them to share itll be faster, like t_ul*/
      display: inline-block;
      height: 100%;
  }
  .t_ul {
      list-style: none;
  }
  .app_container_T * {
      box-sizing: border-box;
      border-radius:5px;
      vertical-align: text-bottom;
  }
  /*------------------------------------------------------------------------------------*/
  /*----Menu---*/
  /*------------------------------------------------------------------------------------*/
  .menu_buffer {
      width: 60px;
  }
  .menu_T {
      background-color:lightblue;
      padding: 0px;
      width:60px;
      height: 100%;
  }
  .large_menu_button_T {
      background: #0016f0;
      color: #ffffff;
      height: 50px;
      width: 50px;
      margin: 3px;
      font-size: 20px;
      border-radius:10px;
  }
  .small_menu_button_T {
      background: #002aa9;
      color: #ffffff;
      height: 20px;
      width: 20px;
      margin: 1px;
      font-size: 12px;
  }
  .options {
      margin-left: 26px;
  }
  /*-------------------------------------------------------------------------------------*/
  /*Selection Element*/
  /*------------------------------------------------------------------------------------*/
  .container_element_T {
      background-color:red;
      padding: 5px;
      height: 100%;
      width: 325px;
  }
  .content_header_T {
      position: relative;
      width: 100%;
      height: 35px;
  }
  .content_header_T > * {
      position: relative;
  }
  .close_button_T {
      width: 20px;
      height: 20px;
      display: inline-block;
      padding: 0;
      margin: 0;
      vertical-align: top
  }
  .search_form_T {
      width: 90%;
      height: 35px;
      display: inline-block;
  }
  .content_title_T {
      width: 90%;
      height: 100%;
      display: inline-block;
  }
  .content_container_T {
      overflow: scroll;
      width: 100%;
      height: 100%;
  }
  .content_selection_button_T {
      font-size: 100%;
      width:100%;
      height: 25%;
  }
  .content_list_T {
      width: 100%;
      height: 100%;
      padding: 2px;
      background: #0c5bd4;
      overflow: auto;
  }
  .t_content {
      width: 100%;
      height: 50%;
      background: #40aeee;
      border: 1px solid #fffeda;
  }
  .t_content_container_image {
      display: block;
      margin: 0;
      float: left;
      height: 100%;
      width: auto;
  }
  .t_content_container_text {
      margin: 0;
      overflow: hidden;
      padding-left: 2px;
      height: 100%;
      width: initial;
  }
  /*-------------------------------------------------------------------------------------*/
  /*Timeline Element*/
  /*------------------------------------------------------------------------------------*/
  .search_bar_T {
      background-color:white;
      box-shadow: rgb(204, 204, 204) 0px 0px 0px 1px inset;
      border: 1px solid rgb(178, 210, 203);
      border-radius: 8px;
      font-size: 12px;
      height: 100%;
      width: 87%;
  }
  .search_button_T {
      cursor: pointer;
      border: 1px;
      background-color: #d4d4d4;
      font-family:'EntypoRegular';
      color: #5f615c;
      font-size: 30px;
      height: 30px;
      width: 30px;
  }
  /*-------------------------------------------------------------------------------------*/
  /*Alt Element*/
  /*------------------------------------------------------------------------------------*/
  .container_T {
      background-color:red;
      padding: 5px;
      height: 150px;
      width: 325px;
  }
  .text_area_T {
      height: 80%;
      width: 90%;
  }
  .composition_button_T {
      margin: 0px 2px;
      height: 20%;
      width: 10%;
  }
  .word_count_T {
      height: 20%;
      width: 10%;
      background: transparent;
      color: #b1b7b6;
      margin: 0px 15%;
  }
\$\endgroup\$
4
\$\begingroup\$

Here's how HTML5Doctor describes <ul> and <li>:

ul

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the list.

li

The li element represents a list item. If its parent element is an ol, ul, or menu element, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

Here's how I describe it:

If it ain't a list, don't use a list

If the layout has no semantic meaning, and the elements are just used for layouting, you should consider <div> instead.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ div is a fairly general tag, and would require a bit of css magic to make it work with jquery's resize. Is there any more specific element instead of div? \$\endgroup\$ – EasilyBaffled Apr 5 '14 at 0:25
  • \$\begingroup\$ @EasilyBaffled Elements fall under 2 categories. There are block elements like <div> and <p>, and inline elements like <a> and <span>. Aside from functional differences, the names merely provide semantic meaning and nothing more. Sectioning and grouping elements generally fall under block elements. \$\endgroup\$ – Joseph Apr 5 '14 at 14:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.