I am using HTML Tidy to output pretty HTML source and as a final encoding check.
However it is taking a very simple list such as:
<ul id="navigation">
<li>Summary</li>
<li>Upload</li>
<li>Accounts</li>
</ul>
and converting it to this monstrosity:
<ul id="navigation">
<li style="list-style: none">
</li>
<li id="active">Summary
</li>
<li style="list-style: none">
</li>
<li>Upload
</li>
<li style="list-style: none">
</li>
<li>Accounts
</li>
</ul>
How do I gracefully tell it to leave my list alone?
I have searched these configuration options, however I often find they are not named intuitively or explained properly.
It's actually trying to correct your markup to make it conform to standards, your <li> tags should be around the <a> tags, not the other way around, maybe if you fix up that then it won't try to add extra items to the list.
You can remove the style part though, just modify your css to have:
ul.navigation li
{
list-style: none;
}
The only answer: give it valid markup to start with. The only legal child element of a ul is an li. An a element cannot be a child of a ul.
<ul id="navigation">
<li>Summary</li>
<li>Upload</li>
<li>Accounts</li>
</ul>
If you want the whole li to be clickable, style the a element as display: block:
#navigation li a {
display: block;
}
Your list is invalid markup; an ul element may only contain li elements. Tidy is actually applying the most sensible general approach to fixing such broken markup: it turns any non-li content to an li element for which the list bullter is suppressed.
So manually change markup like
<li>Summary</li>
to
<li>Summary</li>
which is probably what you want. This may require changes to CSS or JavaScript code, if they expect the current markup.
Move your <a> tags into <li>-s:
<li>Summary</li>
Related
I need to add a space in between some of the items in a nav list but not sure how. Some help would be appreciated.
Here is the HTML
<nav>
<ul>
<li>Home Page</li>
<li>Running Class</li>
<li>Cycling Class</li>
<li>Swimming Class</li>
<li>Coaches</li>
<li>Active.com</li>
<li>Runner's World</li>
<li>endomondo.com</li>
<li>Strava</li>
<li>Bicycling Magazine</li>
<li>VeloNews</li>
<li>Bicycle Tutor</li>
<li>Swim Smooth</li>
<li>Swimming World</li>
<li>USA Swimming</li>
<li>triathlon.org</li>
<li>usatriathlon.org</li>
<li>Texas Triathlons</li>
<li>CapTex Triathlon</li>
<li>Triathlon Calendar</li>
<li>Triathlete.com</li>
<li>Trifuel.com</li>
</ul>
</nav>
I need to put a space between the 5th and 6th line and between the 15th and 16th. Not sure how to do it in the CCS.
This can be achieved in CSS3 by using the nth-child
nav ul li:nth-child(6), nav ul li:nth-child(16)
{
margin-top: 5px;
}
Give 5th & 15th an ID ...
Then write in CSS Codes :
<style>
nav ul li.one {margin-bottom:25px;}
nav ul li.two {margin-top:25px;}
</style>
In HTML:
<li class="one">Coaches</li>
<li class="two">Active.com</li>
do the same with 15 and 16
In the <li> put a margin like so <li style="margin-top: 20px">. That will give you extra spacing above. You can change top to bottom/left/right and the pixels for customizing.
try to add padding/margin to those li tags
<li style="padding-right:3px">Coaches</li>
<li style="padding-left:3px">Active.com</li>
EDIT: Add a class to those li elements you want space around. Do this like so:
<li class="space">
Then You could add padding or margins to the CSS file or between
<style></style>
tags in the html document.
.space { margin: 10px; }
.space { padding: 10px; }
There is a good reason why you want exactly add some space to this positions, so:
To avoid to modify CSS file each time an entry is added
Add some :nth-child is not a good solution. If tomorrow you add a new item, your space will not be in the correct place.
To Avoid a semantic meaning confusion
Add some <li> </li> is not a good solution too because a <li> (list item) must contain same semantic thing (in <ol> (ordered list) or <ul> (unordered list) each item are the same purpose, else use <div> insteed). If there is some « empty » item, this is not a list item anymore. For example, if you list link from a database, create empty item just for « design » is not good, because this force you to add some « empty data ».
To allow Semantic and Design to fit
You do first define « why this item need more space », « why this item is different » ? For example: « because this item is a very important item » so tag item as important (or others).
After that, just apply your specific CSS for .important item on your list for example.
/**
* List all link to navigate into website.
* #component .main-navigation
*/
.main-navigation {}
/**
* Set an item as important in a list of item.
* #pattern .important
* #partof .main-navigation
* #example <ul>
* <li class="important">This is important</li>
* <li>This is less important</li>
* </ul>
*/
.main-navigation .important {
margin-bottom: 10px;
}
<nav class="main-navigation">
<ul>
<li>Home Page</li>
<li>Running Class</li>
<li>Cycling Class</li>
<li>Swimming Class</li>
<li class="important">Coaches</li>
<li>Active.com</li>
<li>Runner's World</li>
<li>endomondo.com</li>
<li>Strava</li>
<li>Bicycling Magazine</li>
<li>VeloNews</li>
<li>Bicycle Tutor</li>
<li>Swim Smooth</li>
<li>Swimming World</li>
<li class="important">USA Swimming</li>
<li>triathlon.org</li>
<li>usatriathlon.org</li>
<li>Texas Triathlons</li>
<li>CapTex Triathlon</li>
<li>Triathlon Calendar</li>
<li>Triathlete.com</li>
<li>Trifuel.com</li>
</ul>
</nav>
Name the .important class as you want but not .space for example, because if tomorrow you want change the design not with space but with color differenciation, your class will not be correctly named. But an item important will always be important. If it's not the case anymore, just « untag » it by removing class.
If tomorrow or later you want add some link between your existing link, no change in CSS will be needed.
I am trying to debug my footer but I keep getting bugs like
(Element h4 not allowed as child of element ul in this context)
Can anyone explain.
I cant place the HTML because for some reason it does not work.
Probably because there are some mistakes in the code.
Link to my website is
http://www.timberlife.nl
And then inspect element at the footer of the page.
<ul>
<h4 class="footerr">SUPPORT</h4>
<br>
CONTACT
<br>
FAQ
<br>
DISCLAIMER
<br>
</ul>
It starts with this.
<h6 class="text-white copy-text">
Many thanks!
Daan
According to HTML5 spec, you can't have header tags as children within a <ul></ul>, you should populate it with <li></li>, then insert your content within each list like so:
<ul>
<li><h4 class="footerr">SUPPORT</h4></li>
<li>CONTACT</li>
<li>FAQ</li>
<li>DISCLAIMER</li>
</ul>
I also noticed you have wrapped entire blocks of content within header tags, try to avoid that as it also leads to invalid html. Use divs rather.
Reference: w3.org ul element
The error is thrown because your list structure is invalid. All content must be wrapped in li tags.
<ul>
<li><h4 class="footerr">SUPPORT</h4></li>
<li>CONTACT</li>
<li>FAQ</li>
<li>DISCLAIMER</li>
</ul>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
Also, you should use a CSS file (or at least an embedded style tag) rather than inline styles:
<style>
ul li a {color: white;}
</style>
If you want to use any heading tag within ul then you should place it within li tag because any list inside ul or ol tags can be made only by li tag.
so please try this
<li><h4 class="footerr">SUPPORT</h4> </li>
This Should work
Consider my html as follows:
<ul id="menu">
<li class="highlighted" id="first_item">Home</li>
<li class="non_selected_tabs">Join</li>
<li class="non_selected_tabs">Fixtures</li>
<li class="non_selected_tabs">Our Club</li>
<li class="non_selected_tabs">History</li>
<li id="hover" class="non_selected_tabs">Club Gear</li>
</li>
</ul>
My lists are styled as tabs, and I have my anchors as their parents so that when a user hovers over a tab it becomes selectable
My issue is that I was hoping to use a:hover, or the other anchor properties to change the background colour of my list item...is this possible using CSS?
I can't get it to work so I'm thinking I may have to use some JavsScript?
Wrapping the <li>'s in <a> is improper HTML and may not render properly in all browsers. A better solution would be to set the display property of the anchor to display:inline-block. Then you will be able to set the width and height of the anchor to the width and height of the li's. This way you can also use the hover property of the anchors.
<ul id="menu">
<li class="highlighted" id="first_item">Home</li>
<li class="non_selected_tabs">Join</li>
<li class="non_selected_tabs">Fixtures</li>
<li class="non_selected_tabs">Our Club</li>
<li class="non_selected_tabs">History</li>
<li id="hover" class="non_selected_tabs">Club Gear</li>
</ul>
#menu li a
{
display: inline-block;
width: 100%;
height: 100%;
}
#menu li a:hover
{
background-color:red;
}
The direct children of a ul element should only ever be list items elements, not an a.
You could either use :hover on the li element it's self, this works in browsers that aren't IE, maybe even IE8 and up..
Or you could style the a to take up the entire space area of the li, and style the li to be inline, so not to display as a typical list.
You can use :hover on other elements, not just anchors.
I have a group of images which each have their own links. I want the images to be in a list (<ul><li> .. etc) and have each item have a different background-image.
Would I run into any issues with something like this?
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
<li class="4"></li>
<li class="5"></li>
<li class="6"></li>
</ul>
You would do better to write it like this
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
</ul>
Then you could add the background-image to either the a or the li.
However, you would style the as as display:block and give them the same height and width of the li. That way the background-image would show and the entire li would be clickable.
It is not valid HTML because the only thing allowed in an <ul> element is <li>s.
It's not valid HTML.
<!ELEMENT UL - - (LI)+ -- unordered list -->
I have a css sprite navigation bar where the li's are wrapped in a href tags for linking...
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
It works fine for me in Safari, Chrome, Opera & IE - but the links aren't active in Firefox, and when I look at the code in Firebug, Firefox renders the a href and li tags as separate lines:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
Any tips? Thanks!
li elements are the only elements that can be children of ol or ul. Your HTML is invalid at the moment.
Please wrap the lis around the as.
You'll want to style up the a inside the li making it's width and height 100%, here's some other suggestions:
http://doctype.com/make-li-clickable-target-url
Why not just put the anchor tags inside the LI elements? That's how it's usually done.
<ul> doesn't support <a> as a child, your html is not properly formatted, try this instead:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
You need to put a's inside li's, and then display: block; in your CSS, this will make the whole li a link instead of just the text, which I think is what you're probably trying to achieve?
That way you then add padding etc to your <a> tag to make the link blocks bigger. This will solve the FF issue:
CSS:
#header ul li a {
display: block;
padding: 10px;
}
HTML:
<div id="header">
<ul>
<li id="supplements-link">Supps link</li>
<li id="tutorials-link">Tuts link</li>
<li id="blog-link">Blog link</li>
</ul>
</div>