I usually do like this if I want to objects on the same row:
<ul class="list-inline">
<li>
<label>Name:</label>
</li>
<li>
<p>John</p>
</li>
</ul>
The other way I know is to use row and columns. Alot of code for a simple thing. Is there something built in for this?
Something like:
<div class="some-neat-bootstrap-class">
<label>Name:</label>
<p>John</p>
</div>
Can't find any in the docs.
You can display both of those elements inline.
.some-neat-bootstrap-class label,
some-neat-bootstrap-class p {
display:inline;
}
Related
I've never worked with CSS before (I am a WordPress user). But I think I'm very close, but cannot figure out what I'm doing wrong.
So, I have this list <li> item that I want to hide. I tried using the n'th child, but that did not work, as the order of the list can change depending on if the field is filled or not. So, I need to use a data selector. I tried this:
.atbd_listing_data_list {
li[data-value="Breed : "]
visibility: hidden;}
But that did not work. This is the code where it's coming from:
<div class="atbd_listing_data_list">
<ul>
<li>Pedigree: Fly x Hors la loi II x Concorde</li>
<li>Competition height: </li>
<li>Age Category: </li>
<li>Age: 15</li>
<li>Color: </li>
<li>Height: </li>
<li>Studbook: </li>
<li>Gender: </li>
<li>Breed: </li>
<li>
<p><span class="la la-clock-o"></span>October 25, 2020
</p>
</li>
</ul>
</div>
I simply want to hide the Breed and Age Category fields, but I have been trying for a couple of hours now without success.
Anybody wants to teach me some CSS and how to handle this :) ? I think I'm almost there, must be a small error that I'm making.
Kind regards,
Collin
This answer assumes you are not capable of editing the files generating or template of the list.
Well, to be fair, these CSS rules are more "hacking" your way into a result instead of actual fixing a problem. But I can understand where you are coming from. There should be another way to solve the problem without hiding the data.
You are on the right path, :nth-child selectors is great for hiding something for a "static list" (nth-child count from a current point, if this list is shorter, other data will hide instead).
The [data-value="breed"] will only work when <li data-value="breed"> is the element. It's not a "data contains value" kind of selector.
.atbd_listing_data_list ul li:nth-child(3),
.atbd_listing_data_list ul li:nth-child(9) {
display: none;
}
<div class="atbd_listing_data_list">
<ul>
<li>Pedigree: Fly x Hors la loi II x Concorde</li>
<li>Competition height: </li>
<li>Age Category: </li>
<li>Age: 15</li>
<li>Color: </li>
<li>Height: </li>
<li>Studbook: </li>
<li>Gender: </li>
<li>Breed: </li>
<li>
<p><span class="la la-clock-o"></span>October 25, 2020
</p>
</li>
</ul>
</div>
You have to add the data attribute to the li you want to hide then select it as shown in example.
li[data-value="hide"] {
display: none;
}
<div class="atbd_listing_data_list">
<ul>
<li>Pedigree: Fly x Hors la loi II x Concorde</li>
<li>Competition height: </li>
<li>Age Category: </li>
<li>Age: 15</li>
<li>Color: </li>
<li>Height: </li>
<li>Studbook: </li>
<li>Gender: </li>
<li data-value="hide">Breed: </li>
<li>
<p><span class="la la-clock-o"></span>October 25, 2020
</p>
</li>
</ul>
</div>
I have the following example where the last doesn't seem to work when using :last-child. In my code, you can see when I refer to the last element using the class "aa" it is showing the "+ Add"
&.aa {}
But if I comment out
&.aa{}
and set it to
&:last-child{}
the "+ Add" on the last is not showing up. Am I missing something?
This is because you have a typo in your HTML structure.
So your current structure is like this:
<ul>
<li class="item">
<div>
Tom Hanks
<br /> Jenny Hanks
</div>
</li>
<li class="item active">
<div>
Henry Fonda
<br /> Valarie White
</div>
</li>
<li class="aa">
</li>
<ul>
As we can see you didn't close the ul element properly, so the last child of it will not consider as:
<li class="aa">
</li>
and it will ignore this element as last-child, so &:last-child won't work as expected.
All you need to do is to close your elements properly.
So it should be something like this:
<ul>
<!--> ul inner elements <-->
</ul>
Live demo: codepen.io
I am new to BEM and working on a sample template:
HTML
<header class="header">
<div class="header__branding">
<h1>Site branding</h1>
</div>
<div class="header__menu">
<nav class="main-menu">
<ul class="main-menu list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</nav>
</div>
</header>
<footer class="footer">
<div class="footer__links">
<ul class="???? list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</div>
</footer>
CSS
.main-menu .list{
// styles here
}
.list__item{
// styles here
}
.list__item-link{
// styles here
}
.list__item-link--active{
// styles here
}
So my questions is, what is the best way to name lists and how best to organize the CSS? I got stuck in the footer, I added a ???? if someone can help me think of a better name for the footer links?
I am finding it hard to wrap my head around BEM, but I should not nest more than one element at a time right?
Think about BEM as reusable component that can be placed many times on site in different places.
In this case you don't need any more class in only 'list'. Both in header and footer.
If you need any modification you could use somethig like: 'list list--wider' or so. And this second class change only width of element.
And one more: list__item-link is wrong. Parent is 'list__item' so this should be named 'list__item__link' BUT you also could name it just 'anchor' or 'link' and you will be able reuse them all around site on <a> elements.
I'm creating a sidenav that has some major links that lead to a list of lesser links. A few of the lesser links are listed after the major links. Should I:
format the html like
<ul id="whatever">
<li id="child">
</li>
<li id="descendent">
</li>
</ul>
and use a ul id child selector;
or format the html like
<ul>
<li class="major">
</li>
<li class="minor">
</li>
</ul>
and use a li class selector;
or format the html like
<div class="left nav-major">
<ul>
<li>
</li>
</div>
<div class="left nav-minor">
<li>
</li>
</ul>
</div>
and use div selectors;
or do something else?
If I should do something else, what should it be?
Obviously, I'm trying to optimized load time.
CSS doesnt' really affect load time aside from how large your CSS file is.
In your examples, the first and second are exactly the same in terms of the HTML structure.
The 3rd example is not valid markup.
If you want to optimize load time, use the least amount of markup and CSS as you can.
That said, don't go overboard. There's a pragmatic middle-ground as you want to keep the markup semantic and human readable to make it maintainable.
Since a navigation list is typically a list of links, lists seem appropriate:
<ul>
<li>Main level link
<ul>
<li>Child level link</li>
</ul>
</li>
</ul>
And there'd be no need for classes, as you could reference the levels in your css as:
.navigation li {style main level links}
.navigation li li {style secondary level links}
i have this page.
Press "Registrate".
Is there any way to align vertically each field with the error message without giving a left margin?
Regards
Javi
You will need to move your error message elements into their corresponding <li class="form_1"> elements. Then, assign float: left; to each error message element.
Putting everything into list-items will be tricky. You could change this:
<li class="form_1_errores">
<ul class="error_list">
<li>Debes escribir tu e-mail</li>
</ul>
</li>
<li class="form_1">
<label for="register_password">Contraseña</label>
</li>
<li class="form_1">
<input type="password" name="register[password]"
id="register_password"></input>
</li>
To This:
<li class="form_1">
<label for="register_password">Contraseña</label>
<input type="password" name="register[password]"
id="register_password"></input>
<ul class="error_list">
<li>Debes escribir tu e-mail</li>
</ul>
</li>
.form_1 label, .form_1 input, .form_1 ul{
float: left;
}
Instead of assign a margin-left to each individual item, give the margin to the containing block. #formulario_registro seems like the best candidate.
Also as I suggested in your other post: There is nothing wrong with layouting forms like this with a table.