I have a html code like this
<ul>
<li>Text</li><br>
<li>Text</li><br>
</ul>
What I want,a line break after each li element, can be accomplished using this code. But the problem is when I go to W3C for html5 validation, it shows the error Element br not allowed as child of element ul in this context.
So I understand that br cannot be used as child element of ul. What I want to know that is there any other way to get the same result as above? If it can be done in css, I am ok with it.
Thanks in advance.
By default, <li> elements are display: list-item which will cause them to generate a block box, so you will get a break after them. Set the display property back to list-item to restore them.
If actually mean that you want a margin, rather than a simple line break, then use the CSS margin property to set one.
You can use the margin-botton in css
ul li {
margin-bottom: 20px; // As per your requirement
}
HTML
<ul>
<li class="one">Text</li>
<li class="one">Text</li>
</ul>
CSS
<style>
.one
{
line-height: 40px;
}
</style>
Related
I have the following html markup:
First Link / Second Link / Third Link
I want it to display as:
First Link / Second Link / Third Link
But what I get is:
First Link
/
Second Link
/
Third Link
And links can be clickable in any place of the their row. How can I fix it?
I tried "display: block;", but it didn't help.
Regular anchor Tags are inline elements. You have to check if in your CSS, you already assign anchors globally to a block element. a { display: block;}
For fast fix:
Wrap your code anchor line (Breadcrumbs) in a container and assign with a unique id or class Name. Then you can assign only for this line the anchors to a inline element.
a {
display: block;
}
.anchor-regular a {
display: inline;
}
test block test block
<div class="anchor-regular">
First Link / Second Link / Third Link
</div>
HTML anchor tags (a) behave like you want by default. What you are getting means that somewhere in your code, there is a display:block, display:flex or display:grid applied on a elements. You could overwrite this with a display:inline, like so:
a{
display:inline;
}
First Link / Second Link / Third Link
The <a> element is not supposed to be used like you are doing here. <a> is an inline element - which means that it goes with the "flow" of other elements and it does not have a width and height of its own. In other words, it's supposed to be used like a "wrapper" around other elements.
So instead of this:
<a>I'm a link</a>
This is a better idea:
<p><a>I'm a link</a></p>
and then in your styling, you actually style the <p> tag and not the <a>.
In your case, you have a group of links(a breadcrumb, by the looks of it) which you want to represent using links. So you could do something like this:
<ul class="mybreadcrumb">
<li class="breadcrumb-item"><a>First</a></li>
<li class="breadcrumb-item"><a>Second</a></li>
<li class="breadcrumb-item"><a>Third</a></li>
</ul>
And then in your CSS:
ul.mybreadcrumb {
list-style: none;
}
ul.mybreadcrumb li {
display: inline-block;
}
ul.mybreadcrumb li+li:before {
content: ' / ';
}
That + is a sibling selector - so it'll add a / before the second and onward li element.
The a tag is by default a full line, similar to the p tag. If you want to make the a tag only affect its content, do this:
a {
width: fit-content;
}
My current issue is that my list at the top of my website is a little too small. I am trying to make the text the size of .
I would so something like this
<li style="color:black;font-size:30px">Example </li>
But my list is an href and this will not work.
<ul>
<li>How Does it Work?</li>
<li>FAQ</li>
<li>Discord Server</li>
</ul>
</div>
So im unsure on what to do, any help would be great.
You need to select that a tag
Use this in css:
ul li > a {
font-size: 30px;
}
this means it will select every a element which is a child of li.
You should use a CSS file whenever possible. You could also use a style tag. But the following in your html file.
<style>
ul li,
ul li a {
color:black;
font-size:30px;
}
</style>
Try <style>li a {color:black;font-size:30px;}</style>.
This targets all <a> elements that are inside a <li> and applies the styles on them.
This will style all the anchor tags inside an unordered list:
ul a{font-size:30px;}
I am creating a horizontal list. Here is my html:
<ul class="deals">
<li>test</li>
<li>fads</li>
<li>asdf</li>
</ul>
And here is the css:
ul.deals {
list-style-type: none;
}
ul.deals li {
display: inline;
padding: 10px 20px;
}
If I add a div inside of the list, then it does not show horizontally anymore. Here is the new html:
<ul class="deals">
<li>
<div>test</div>
</li>
<li>
<div>fads</div>
</li>
<li>
<div>asdf</div>
</li>
</ul>
What about the div changes the output? Also, how would I fix this?
As already mentioned, divs are block level elements.
What are you trying to achieve by nesting a div? If you don't need a dimensional container just use a <span> rather than using a <div> styled with display: inline. Reason: spans are inline by nature and won't need additional css to make them so.
If you want a dimensional container while still retaining your horizontal structure you can use either a <span> or <div> as long as you assign display: inline-block
Even better, style the list item itself with display: inline-block. That way you don't need the nested DOM element.
As gillesc said, DIV tags are block level. Try the following dubious code in your css
ul.deals div {display: inline}
You could possibly use inline-block instead
I've been trying to get this horizontal navigation sorted for the past few hours now and nothing is working. I've tried reset.css stylesheets, *{padding: 0; margin: 0) etc. and I still have gaps inbetween my image links.
You see, the navigation is made up of an unordered list of image links displayed inline, but there are gaps in between each image, left, right, top and bottom and I can't see why. It's the same in all browsers.
Here is a link to the page, and so source: Beansheaf Temporary
Link to css: http://pentathlongb-yorkshire.co.uk/tomsmith/Beansheaf/styles/fund2.css
The rest of the site is obviously still not done, it's just the navigation I'm worried about right now.
To avoid floating the navigation lis, you've got -at least- two options to remove the spaces between inline elements.
<ul>
<li><img src="../hotel.jpg" /></li
><li><img src="../foodDrink.jpg" /></li
><li><img src="../meetingsConferences.jpg" /></li>
</ul>
Note that the closing </li> tag is closed on the subsequent line (except for the last one), which is valid and maintains readability (for me, at least).
The other option is slightly messier
<ul>
<li><img src="../hotel.jpg" /></li><!--
--><li><img src="../foodDrink.jpg" /></li><!--
--><li><img src="../meetingsConferences.jpg" /></li>
</ul>
And just uses html comments <!-- ... --> to comment-out the spaces that would otherwise be collapsed into a single space.
I do wish there was some way of specifying (for example):
ul li img {whitespace: none-between; }
Another approach, avoiding floats, is to set the font-size on the container to 0, and then re-set it back up for the LIs, like this:
#mainNav
{ font-size: 0}
#mainNav li
{
display: inline;
list-style-type: none;
font-size: 1em
}
the gap below images links is due to the image being aligned with base text line by default, you can solve it simply declaring
li img {
vertical-align:bottom;
}
magic!
Try removing all spaces and line-breaks between the li elements.
Because you are displaying them inline, spaces in the HTML will act as if they were a space in inline text and cause a gap to be left when rendering.
Add
#mainNav li {
float:left;
}
to your CSS.
It is because a new line in an HTML document will be interpreted as a space in the printed content. Since all of your 'li' elements are on new lines, it is adding a space between each of them. Make sure you display them as block elements and float them to the left so they run evenly together.
You can float the list elements, then the white space doesn't interfer:
#mainNav li
{
float: left;
list-style-type: none;
}
I use the line-height attribute on the li tag to fix this.
ul li { line-height:0; }
Best solution to this comes from http://www.cssplay.co.uk/menus/centered.html. And quoting:
All we need to do is enclose the ul tag in an outer container that has a width of 100% and overflow set to hidden.
The <ul> tag is then styled with a relative position and floated left with a left position of 50%.
Finally the <li> tag is also styled with a relative position, floated left but this time with a right position of 50%.
...and that as they say is all that is needed.
if you are using xslt to show these element, you should make the following:
<xsl:template match=".//text()">
<xsl:value-of select="normalize-space(.)" />
</xsl:template>
My web-app framework renders form errors for each field in an unordered list <UL> immediately following the invalid field. My problem is that I haven't been able to style things so that the error(s) are listed on the same line with the form field. A line break is instead rendered before the <UL>.
This is the html that I'm trying to style, showing a server-determined invalid field:
<p>
<label for="id_email">Email</label>
<input id="id_email" type="text" name="email" />
<span class='field_required'> *</span>
<ul class="errorlist"><li>This field is required.</li></ul>
</p>
How can I prevent a line-break between the 'field_required' span displaying an asterisk for each required field and the 'errorlist' that is rendered if the form doesn't validate (on the server)?
Currently I am styling:
span.field_required {color:red; display:inline;}
ul.errorlist {list-style-type: none; display:inline;}
ul.errorlist li {display: inline; color:red; }
UPDATE:
Thanks for everyone's help to date!
I have control of the HTML out, although my framework (django) defaults to giving errors as a <UL>. As per the great suggestions I have tried wrapping the list in it's own styled <p> and <span>. Wrapping the list in a <span> now works in Firefox 3.0, but not in Safari 4.0.
When I inspect the element in Safari it seems that the paragraph is being closed immediately before the <UL>, even though this is not how the HTML source looks.
Have I stumbled on a cross-browser bug? (Nope. See below!)
FINAL SOLUTION: Thanks for all the help. Here is how I finally fixed the problem:
Replaced the <p> tags around the label-field-error combo with a <div> styled with clear:both;. Thanks to jennyfofenny for pointing out that the W3C spec prohibits a block (in my case the list) inside a <p> - and thus wins the answer tick. This is why Safari was automagically closing my paragraph before the list, although Firefox let it slide.
I then style my list thus:
ul.errorlist {list-style-type: none; display:inline; margin-left: 0; padding-left: 0;}
ul.errorlist li {display: inline; color:red; font-size: 0.8em; margin-left: 0px; padding-left: 10px;}
What about setting the p tag to display: inline as well? Is that an option?
p { display: inline; }
As for the p tag issue... I don't believe the W3C specifications allow an unordered list tag within a paragraph tag. From http://www.w3.org/TR/html401/struct/text.html#h-9.3.1:
The P element represents a paragraph. It cannot contain block-level elements (including P itself).
ul.errorlist { display: inline; margin: 0; }
Just one last bit:
ul.errorlist {
display: inline;
list-style-type: none;
}
Do you just want to eliminate the space between the paragraph and the list?
If so, use:
ul.errorlist {
margin-top:0;
}
Then add "margin-bottom:0;" to the paragraph (or just put the errorlist inside the p tags).
If you also want the list to display on a single line, use display:inline as the others suggested.
If you can't change the html then your problem is that the ul has no element around it that you can style.
If you use javascript, if you can know when an error happens, then you can add a <p> or <span> around the <ul> and then style that so that it will be inline.
This link shows, about 1/2 way down, using the <p> tag for this purpose.
http://www.alistapart.com/articles/taminglists/
If you are just trying to do this in css I believe you will be out of luck. You may ask if they can put a enclosing tag around the error list so you are able to style it.