I created a box in css and put text inside of the box. I would like it to be a list. However, when I try to use it messes up the formatting of the entire page. I also tried the solution here: CSS list-style-type not working, but that didn't work either. My original code is below. My question is, is it the list- style or the box that I created that might be giving me the problem?
<p class = "total" style= "background-color: #C6C29E;opacity:.9;height:2000px;width:500px;float:left;color:black;text-shadow: 4px 0px #aaa;list-style-type:circle;">
<li>Text</li><br>
<li>Text<br></li>
</p>
Thanks
To create a list, you have to wrap your li items in either a ul or a ol:
<ul class="total" style="list-style-type:circle;">
<li>Text</li>
<li>Text</li>
</ul>
I agree with Joseph. It's a bad idea wrapping a <p> tag around an <li> element and using <br> tags this way. You should use CSS to style the content rather than using the <br> tags to do it for you.
If you're wanting to just add list items into its own self expanding box does this help at all or is this not quite what you mean?
<ul class="my-list">
<li>text</li>
<li>text</li>
</ul>
ul.my-list {
background: red;
padding: 20px;
float: left;
}
Related
I have a simple list that displays fine in a single column. I have "text-decoration: none" set for the list items. When I add column-count: 2, the second column displays bullets. Any suggestions for a fix?
I believe you are looking for this:
list-style-type:none;
That is, as long as you don't want any bullet points on your <li>.
Example:
<style>
/* code to make <li> horizontal horizontal */
/* code to remove bullet points from all <li> inside of <ul> tags*/
ul > li { list-style-type: none; }
</style>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Or you may use the <table> and achieve this as well. Here is a link that may be of interest regarding tables.
https://www.w3schools.com/html/html_tables.asp
My page has a fixed header.
When a user does not pass form validation on form submission I display a list of errors above the form each with a link to the form element that produced the error.
However when I click the link to the anchor the element is hidden by the fixed header.
I have seen a number of css solutions that use pseudo class :before to fix this problem, however this cannot be applied to an input element.
Is there an alternative css based solution or am I forced to create a JS work around?
Thanks in advance
The container that has all the error messages you can set the padding-top equal to the height of your header. Then it will off-set the list. You will have to play around with the px to get it to look properly. It's not a perfect solution but it's an easy one.
Here's a quick example as you don't have any of your code provided:
HTML
<div id="header">
Fixed Header
</div>
<div id="error">
<ul>
<li>Error One</li>
<li>Error Two</li>
<li>Error Three</li>
</ul>
</div>
CSS
#header {
background-color: #ccc;
position: fixed;
height: 50px;
width: 100%;
}
#error {
padding-top: 50px;
}
Here it is in jsfiddle form. Hopefully I understood the problem correctly.
So I read the solutions regarding making the spacing go away when using inline-block as opposed to floats: display: inline-block extra margin and http://css-tricks.com/fighting-the-space-between-inline-block-elements/.
So if you're using haml and want to put the closing tag on the same line as the next opening tag, is there is a solution besides switching to ERB?
(and no, I don't want to mess with a css property of the parent container and have to override that in all the child elements).
This breaks (has spacing between the anchors).
So is it true that in spite of the recommendations to do such layouts using inline-block as opposed to floats, it seems that floats are still the way to go, especially when using haml?
CSS
nav a {
display: inline-block;
padding: 5px;
background: red;
}
HTML
<nav>
One
Two
Three
</nav>
Workaround (css-tricks one):
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
or
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
another one:
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
I found the answer: http://haml.info/docs/yardoc/file.REFERENCE.html#whitespace_removal__and_
(this is a super useful article on the topic: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/)
Here's a codepen to experiment: http://cdpn.io/Bjblr
And this worked:
Here's the html if the anchor text is on the same line (same result, but harder to read source html:
I am using the <ul><li> list tag within which I have 3 tags like sos:
<ul id="reg-lists" >
<li class="one">
<select>...</select>
</li>
<li class="two">
<select>...</select>
</li>
<li class="three">
<select>...</select>
</li>
</ul>
I have the proper css to make the list horizontal:
#the-form li {
display:inline !important;
list-style-type: none;
padding-right: 10px;
}
I does'nt seem to work though and am not sure why. Horizontal rule seems to apply well until you put the combos. Would appreciate your help. Thanks
It works fine for me -- see this JSFiddle -- the list items are displayed horizontally, at least they are when I look at it in Firefox.
If you're seeing something else in another browser, please let us know.
If this is case, the solution may be to use display:inline-block instead of display:inline.
inline-block is similar to inline, but allows the element to contain block type elements, which are not allowed by the normal display:inline style.
Hope that helps.
You need to give your <ul> a set width which is equal to the width of all the combined <li>'s and then set your <li>'s to float:left;
Story short I have widgets sidebar. I style it like this:
.widgets ul {padding: 10px}
Now one of the ULs inside widgets I want to avoid padding from it, but keeping all other ULs use default padding of 10px.
So i tried to give class to children UL which I want no padding on like this
.tabs {padding:0}
I tried ul.tabs, and .widgets ul.tabs nothing seems to take effect. It still receives padding 10px. And I can't afford to do custom padding for every UL inside the widgets.
Can you please tell me what I am missing ?
The html is pretty basic.
<ul class="widgets">
<li><h2>Widget title 1</h2>
<ul>
....my widget content
</ul>
</li>
<li><h2>Custom widget 1</h2>
<ul class="tabs">
...this one I want to have padding:0..
</ul>
</li>
</ul>
Thats the html basic framework. I set padding:10px to any ul in PARENT widgets ul but I want specific custom widget to have its own custom styles, I can't do it :( in this case ul class=tabs
The "C" in CSS stands for "cascading". Learn about the cascade and you will see that your second rule is less specific than the first, so the first wins.
In general, the rule with more class selectors wins, and #ids trump most stuff.
To answer your question, adding specificity will do it.
.widgets ul.tabs {padding:0}
(assuming the .tabs is indeed on the ul like you said.)
A more specific CSS selector should override a less specific one. So your experiment with using .widgets ul.tabs should work. Is it possible that when you tested that, your browser had cached an earlier version, or some such?
Here's my sample HTML page. First I tried it the way you had it; it didn't work (as it shouldn't). Then I changed it to what is here, and it worked (in Firefox).
<html>
<style>
.widgets ul {padding: 10px}
.widgets ul.tabs {padding:0}
</style>
<ul class="widgets">
<li><h2>Widget title 1</h2>
<ul>
....my widget content
</ul>
</li>
<li><h2>Custom widget 1</h2>
<ul class="tabs">
...this one I want to have padding:0..
</ul>
</li>
</ul>
</html>
example of what dman is talking about, with your code:
http://jsfiddle.net/SebastianPataneMasuelli/8WRam/
( i think you might have missed the 's' in .widgets )