Troubles with bullets deleting and keeping the same structure

Question

I saw in a previous post that the solution to prevent those annoying bullets to show up in our beautifull HTML was adding this: list-style-type: none; in our CSS. It looks this way right now

Okay, but the problem is the following: I am using: display: list-item; and if I add that css code it changes to this

As you can see it gets all messed up. Any possible way to prevent all that mess or removing bullets without that happening? And keeping the same structure, 5 columns in a row with the same size, and allowing some of those to be "double data" (left floated and right floated)

    <!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet"
    href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="plantilla.css">
<script src="plantilla.js"></script>
<head>
<title>Plantilla</title>
</head>
<body>
    <input type="text" id="input" class="input" value="" autofocus />
    <div id="main" class="main">
        <div id="header">Main</div>
        <div id="global1" class="global">
            Global1
            <div id="small11" class="small">
                <div class="izq">asdfasdf asdfasdfasdf</div>
                <div class="der">1234</div>
            </div>
            <div id="small12" class="small">aaaa</div>
            <div id="small13" class="small">ssss</div>
            <div id="small14" class="small">ddd</div>
            <div id="small15" class="small">ffff</div>
        </div>
        <div id="global2" class="global">
            Global2
            <div id="small21" class="small">abcdef</div>
            <div id="small22" class="small">fedcba</div>
            <div id="small23" class="small">facbde</div>
            <div id="small24" class="small">decfab</div>
            <div id="small25" class="small">bacfed</div>
        </div>
        <div id="global3" class="global">
            Global3
            <div id="small31" class="small">eeeeee</div>
            <div id="small32" class="small">eabdc</div>
            <div id="small33" class="small">bcdae</div>
            <div id="small34" class="small">dcbea</div>
            <div id="small35" class="small">eadcb</div>
        </div>
        <div id="global4" class="global">
            Global4
            <div id="small41" class="small">decab</div>
            <div id="small42" class="small">baced</div>
            <div id="small43" class="small">becad</div>
            <div id="small44" class="small">daceb</div>
            <div id="small45" class="small">cedab</div>
        </div>
        <div id="global5" class="global">
            Global5
            <div id="small51" class="small">cadeb</div>
            <div id="small52" class="small">cadeb</div>
            <div id="small53" class="small">cedab</div>
            <div id="small54" class="small">eadcb</div>
            <div id="small55" class="small">aebdc</div>
        </div>
    </div>
</body>
</html>




body{
text-align: center;
    font-family: helvetica;
}
div {
    margin: 1px;
}
#main {

}
#input {
    width: 10%;
    padding: 1px;
    margin: auto;
}
.global{
    width: 18%;
    float: left;
    border: 1px solid #a1a1a1;
    border-radius: 5px;
}
.small{
    border: 1px solid #AA0000;
    border-radius: 0px;
    margin: 2px;
    display: list-item;
}
#header {
    text-align:left;
    clear: both;
    font-size: 22px;
}
ul
{
    list-style-type: none;
}
.izq { float: left; }
.der { float: right; }

You guys are harsh. Suggest changes, then give the OP a few minutes to update before spam-down-voting. Geesh. @Roucher, they're asking if you can post the HTML/CSS of your code in your question. — Dave, Jan 28 '16 at 15:08
Try setting your LI to display: block; that would probably force it back into position. — Scopestyle, Jan 28 '16 at 15:10
@Roucher I can't see what's "messed up" about the second screenshot -- it looks like a near perfect replica of the first, but with the bullets removed (there also appears to be an empty element at the top of the Global1 box, but that's it). What would you like to be different? — Hayden Schiff, Jan 28 '16 at 15:11
@oxguy3 If you pay attention there is like an empty square and then it joins with the inferior div — Roucher, Jan 28 '16 at 15:13
last comment was also for @DanielBeck but i cant mention both in a unique comment — Roucher, Jan 28 '16 at 15:14
Cannot reproduce...no bullets seen http://codepen.io/Paulie-D/pen/QyrrqK — Paulie_D, Jan 28 '16 at 15:14
@Paulie_D No, there are no bullets, but in "Global1" as you can see both divs get into the second one. And the first one is empty. — Roucher, Jan 28 '16 at 15:16
That has nothing to do with the bullets (*which is the title of the question*)...it's because you didn't clear the floats in 'small11. — Paulie_D, Jan 28 '16 at 15:18
If you can say what you mean by "clear the floats" it would be great. Criticizing is easy, teaching not so easy though, but is way more appreciated it. Seems like there is a huge amount of snob community here who just care about +1 or -1. Keep downvoting everything, im just learning. You like it or not. Cheers — Roucher, Jan 28 '16 at 15:40

score 1 · Answer 1 · edited May 23 '17 at 12:15

This issue has nothing to do with the the bullets or display:list-item and the "messed up" layout is caused the the #small11 element collapsing as it only contains floated elements.

All that is required is a "clearfix" of which there are several.

body {
  text-align: center;
  font-family: helvetica;
}
div {
  margin: 1px;
}
#main {} #input {
  width: 10%;
  padding: 1px;
  margin: auto;
}
.global {
  width: 50%;
  /* for this demo */
  float: left;
  border: 1px solid #a1a1a1;
  border-radius: 5px;
}
.small {
  border: 1px solid #AA0000;
  border-radius: 0px;
  margin: 2px;
  display: list-item;
  list-style-type: none;
  overflow: hidden;
  /* cleafix */
}
#header {
  text-align: left;
  clear: both;
  font-size: 22px;
}
.izq {
  float: left;
}
.der {
  float: right;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="main" class="main">
  <div id="global1" class="global">
    Global1
    <div id="small11" class="small">
      <div class="izq">asdfasdf asdfasdfasdf</div>
      <div class="der">1234</div>
    </div>
    <div id="small12" class="small">aaaa</div>
    <div id="small13" class="small">ssss</div>
    <div id="small14" class="small">ddd</div>
    <div id="small15" class="small">ffff</div>
  </div>
</div>

I also realized after that: my code is now like posted in the original post. — Roucher, Jan 28 '16 at 15:28
Changing the code after answers have been posted isn't encouraged here. In fact, it's frowned on as it may invalidate answers....don't do that. — Paulie_D, Jan 28 '16 at 15:30
CAN'T EDIT: Anyways I want all of the 5 Globals to go in the same row, so your option isn't valid. Well, the code is back to the original one. — Roucher, Jan 28 '16 at 15:35
Then you need to ask a NEW question. with a correct title. :>) — Paulie_D, Jan 28 '16 at 15:37

Troubles with bullets deleting and keeping the same structure

1 Answers1