resetting a
list to be vertical

Question

I have created a Tabbed area using a list "" of radio buttons. These now stack horizontally.

I now need to create a list within the content area of the tabbed area. But when I create list, the lists are also horizontal.

Is there a way of targeting a UL within a UL and 'resetting it'? Or maybe I can use a but change the numbers to bullets?

Here is a fiddle link: http://jsfiddle.net/SteveDavies/4Njb6/ Here is some css for the tabbed area

  .tabs input[type=radio] {
      position: absolute;
      top: -9999px;
      left: -9999px;
  }
  .tabs {
    width: 670px;
    float: none;
    list-style: none;
    position: relative; 
    padding: 0;
    margin: 75px auto;

  }
  .tabs li{
    float: left;
  }
  .tabs label {
      display: block;
      padding: 10px 20px;
      border-radius: 0px 0px 0 0;
      color: #ffffff;
      font-size: 16px;
      font-weight: BOLD;
      font-family: helvetica;
      background: #ccc;
      cursor: pointer;
      position: relative;
      top: 3px;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      clear:both;
  }
  .tabs label:hover {
    background: #adafaf;
    top: 0px;
  }

and here is the code in the HTML for one of the tabs:

<div style="clear:both;">       
<ul class="tabs">
<!--      FIND ME TAB      -->
<li>
<input type="radio" checked name="tabs" id="tabfindme">
<label for="tabfindme">FIND ME</label>

<div id="tab-content1" class="findmecontent animated fadeIn"

>

Hope you can help!

Many thanks

Steve

I added the code, let me know once whether it is expected one or not. As far my understanding I created the result. — user1853128, Jun 19 '14 at 11:00

score 0 · Accepted Answer · answered Jun 19 '14 at 10:58

0

I added the css this might help you. I hope this is what you are expecting. Let me know if it is not the expected output.

Css:

.normalul h3 li,.findmecontent div ul li{
    float:none;
}

Fiddle Demo

answered Jun 19 '14 at 10:58

user1853128

1,102
7
19
43

This is great thank you. Can you confirm I understand what you have done with the above? everything that has the normalul ID, that is h3 and an li, AND has the id of find me that is an li in a div in ul - will have no float. – SteveDavies Jun 19 '14 at 12:20
As your html structure is different 1.)ul-->h3-->li, 2.)ul-->li I am just taking the parent class and then looking into the child elements to which we need to apply the styles. I added float none because for tab container you already declared float left else float left is also not required. – user1853128 Jun 19 '14 at 12:31

Jose Paredes · Answer 2 · 2014-06-19T10:58:21.613

-1

add this:

.normalul{ display:inline-block; }

.normalul li { float: left; clear: both; }

??

edited Jun 19 '14 at 10:58

answered Jun 19 '14 at 10:52

Jose Paredes

3,882
3
26
50

resetting a list to be vertical

2 Answers2

resetting a
list to be vertical