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.
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 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;
}
I need a help. I was doing a drop up menu with share icons.
My problem is this: I'd like that when I pass the mouse over the main-share icon in the footer and than go to select another icon (like facebook), the main icon remains selected like as mouse hover, but it don’t works.
<div class="footer large blue">Footer Blue
<div class="pull-right buttons">
<ul>
<li><a class="btn2 large share2 blue" href="#">Share</a>
<ul>
<li><a class="btn large rss" href="#">RSS</a>
</li>
<li><a class="btn large twitter" href="#">Twitter</a>
</li>
<li><a class="btn large plus" href="#">G+</a>
</li>
<li><a class="btn large facebook" href="#">Fb</a>
</li>
</ul>
</li>
<li><a class="btn2 large btt blue" href="#">Back to Top</a>
</li>
</ul>
</div>
I think the problem is that the elements li and a, are two independent tags.
Watch this image to understand it better what am i saying (because i’m not able to explain it better ._.)
http://db.tt/Kujz3Pv4
Here's the code:
http://jsfiddle.net/zPavan/KHWJ4/2/
If there are any problems or have suggestions on the code, I thank you for the advice!
Instead of depending on the hovering of the <a> specifically, make it depend on the list item that contains the entire <ul>:
li:hover > .btn2.blue {
background-color: hsl(197, 59%, 30%);
}
I would suggest giving that specific li a class like .share that you can use as well.
http://jsfiddle.net/ExplosionPIlls/KHWJ4/3/
I think this will do it:
.buttons ul li:hover > a {
background-color: #1f5f79;
}
I want to select all li which not contains a tag in css:
ul.sf-menu li:not(a)
But looks like it is not working.
Need help
<ul class="sf-menu sf-js-enabled sf-shadow">
<li>
<a href="/ ">
</li>
<li> need to select this li because it is not contains a href
A
<ul style="visibility: visible; display: block">
<li>
<a href="/B-1">
</li>
<li>
B-2
</li>
</ul>
</li>
<li>
Two things
1) Your selector doesn't match the question you're asking. It currently selects every LI that is not an Anchor. This should be every LI on the page.
2) What you want can't be done with CSS right now. Your best bet would be to use some JavaScript to do this. For instance, the following jQuery would work.
$("ul.sf-menu li:not(:has(a))").doSomething()
I would like to create a menu with a login form on the right.
<div class="menu">
<div class="q">
<li class="pic"></li >
<li class="pic"></li >
<li class="pic"></li >
</div>
<div class="p">
<form>
<li><input type="text" name="a" class="inp"/></li>
<li><input type="password" name="b" class="inp"/></li>
<li class="pic" style="background-color:red;"></li >
</form>
</div>
Which css properties should I choose, that works on every browser?
Where is it necessary to fix everywhere the width-s?
Should I choose display:block and float:left or setting line-hight and display:inline?
If the window size is too small I don't want the right part to "jump down". Is it a good idea to solve this with min-width?
I made an example here:
http://jsfiddle.net/q3dqv/153/embedded/result/
(Unfortunately id does not work on IE7)
Thanks for help!
First, you should use 'ul' tags for your list and then, try to use display:inline-block to your 'li' to display your float correctly in IE7.