Posted 6 months ago #
I have this div that I am displaying between each menu link. The div is not part of the list. But this guy said to put it inside the li tags even thought it isnt a list item. And i want it separate.
Id ask him but he closed my thread, opened it to respond then closed it before i could ask him why. (Plus I didn't do i his way so he got a little mad)
So if something isnt part of a list and isnt a list item why put it inside of li tags?
Posted 6 months ago #
Sometimes unordered lists are used to structure all-sorts of things on a webpage, like all of the Christmas products of a shopping website. In that example, you'd use the unordered list to structure your products and for product, you'd use a new list item (<li>). You might want to have an image of the product, a title and description; therefore you'll need to structure that further by using some-sort of block elements within the list item.
E.g
<ul>
<li>
<div>
<h4>A Toy Firetruck</h4>
<p>Some description of that firetruck.</p>
</div>
<div>
<img src="images/an-image-of-the-firetruck.png" />
</div>
</li>
</ul>If you don't put the <div> outside of list item, but within the unordered list. Otherwise you'll have invalid HTML and you run into all sorts of formatting, validation, accessibility and search-engine-optimization (SEO) problems.
E.g ;
<ul>
<li>
<div>
<h4>A Toy Firetruck</h4>
<p>Some description of that firetruck.</p>
</div>
</li>
<div>
<img src="images/an-image-of-the-firetruck.png" />
</div>
</ul>If you're using a list for your navigation, you shouldn't really have anything other than text in there. Other <div> elements that don't contain text, but are used for aesthetics, are going to compromise accessibility and SEO.
Posted 6 months ago #
So why have something in an li if it isnt a list item though? If I have something like a grep (|) between each link why put that in the li? As long as it is in the ul what does it actually matter?
Posted 6 months ago #
I'm with Andrew.
What exactly is that div meant for? Surely we can get around what you want in an elegant manner if you explain a little more about the menu you would like.
Posted 6 months ago #
It is just an example to get what I am asking.
Say.. You have a menu right.
link1 link2 link3
Say you want to have a grep, dash, backslash, whatever between ech link
lin1 - link2 - link3
Say you want each dash to be evenly spaced with more than one space. So instead of using
over and over.. you create a div with a padding left and right. Let's say for example 6px each.
#space {
padding: 0 6px 0 6px;
color: #00f;
}So your menu looks like
link1 <div id="space">-</div> link2 <div id="space">-</div> link3
What is the point of having the div inside of the li tags? Like
<li><div id="space">-</div>link1</li>
Especially if it is all ready in an unordered list?
Say it isn't even a div. Say it is
<li>- link</li>
Why does the dash need to be inside of the li?
What if each li has an a meta class? So every time you hover the list item the dash shows the hover effect also?
Where as if it were outside the li it wouldnt have the hover effect?
My pint isnt to build a specific menu. It is to find out why it is better to have things inside of li tags.
Posted 6 months ago #
Ok.
1) You're correct. You shouldn't be using li tags for empty content.
2) You're wrong. You shouldn't be placing divs in between li tags.
From the top of my head, try styling for instance using a :afterselector:
li:after
{
content:"-";
padding-left: 10px;
}And don't forget:
li:last-child
{
content: " ";
}
Posted 6 months ago #
Because that's how HTML works - everything inside a list ( ul or ol tags) must also be inside li tags. Those are HTML rules -- if you ignore them, your page will have errors and may have problems.
Posted 6 months ago #
or, another example with no selectors:
li
{
border-right: 1px solid #000;
}
li:last-child
{
border:none;
}
Posted 6 months ago #
WPyogi, don't need to be so harsh, he was actually right not wanting to misuse tags with empty content. He knew that couldn't be logical, but didn't know another way to do it.
Posted 6 months ago #
I know i'm getting annoying, but I still don't see why. If you have
<ul>
<li>link1</li>
</ul>Why must the dash, backslash, or whatever piece of text or code be in the li if there is a ul surrounding it all any way?
Aren't there cases where putting things inside of the li tag is a bad idea? You couldn't possibly always want things as a part of the li itself?
I understand it is a prerequisite and or syntax issue.. But there has to be some instance where putting things in the li are bad.
I understand the border-right takes away unnecessary text for greps, but what if a person wants another piece of text. using borders to replace things cant always work.
So it is always a bad idea to use text to separate links? One little - or \ can cause SEO problems? You wouldn't think your link text is what people would be searching through.
Posted 6 months ago #
Ok, I gave you TWO possible, very elegant, totally working answers.
Instead your insist in doing a nasty hack by placing divs where there shouldn't be. I can only give you the link to the w3c specifications so that you can study HTML for yourself:
http://www.w3.org/TR/html-markup/ul.html
Good luck with that.
Posted 6 months ago #
Yes you gave me examples, but you didn't really answer my question. I'm not trying to be annoying.. No need to get "nasty."
Both of your examples don't cover text between links. I asked you if text between links was a bad idea, but I guess you overlooked that question?
People don't always want a border between links. They may want something else. Should this go in the li tag? Why or why not?
I get that if it is in a ul it should be in an li. .i just didn't understand exactly why..
Now I'm confused at your examples because they didn't really address my confusion ya know?
Yes, you can use a border-right to separate links. ut what about text? it is ever a good idea? If so is there an "elegant" way to do it?
Of course you could use a border to give the the same look as a grep. But that still excludes all kinds of characters. Is there or isn't there an "elegant" way for those also? Or are those ALWAYS a bad idea?
Even this site uses greps between links examine the element at the bottom of this page. Each link has a grep between it.
Posted 6 months ago #
Posted 6 months ago #
I tried to solve your problem. The answer to your question is "there are rules". You don't want to accept it as an answer and thus all the fuss so I prompted you with a link to the "creators of the rules".
Have you had a look at my first example??
li:after
{
content:"-";
padding-left: 10px;
}
li:last-child
{
content: " ";
}Try to subsitute the '-' in the content property for anything else, whatever string of characters and see what happens. --> imagination (have a look at: http://www.w3schools.com/cssref/sel_after.asp)
Rules say you cannot place ANY TYPE of content outside an li when inside a ul tag. Period.
Now, do you want to learn ways to achieve what you want to accomplish or do you want to keep moaning?
Posted 6 months ago #
ClaytonJames, that's not his concern. It is actually much dummer. He wants to understand why can't he put divs OUTSIDE li tags INSIDE ul tags.
Posted 6 months ago #
I'm not moaning. I wasn't understanding, and I hadn't seen that example. I must have scrolled past it. I don't see how asking a question to something is considered "moaning?" You're the one griping and crying because i didn't understand. you have the problem not me.. Bea you're literally the only one complaining and fussing. Why are you people so bitter? No one made you answer..
Knowledge doesn't simply appear in our heads..
It is much dummer? I'm not like you I can't simply be told what something does and when i ask how it works just accepting the answer "it just does" or "it's just that way" There is always a rhyme or a reason..
Posted 6 months ago #
You read how I asked for your problem when you hadn't explain it correctly, didn't you?
I was interested in helping you out, and I even told WPyogi to calm down, but you've been consistently asking the same question even though you were being answered ("it's how HTML works").
I get that you may not understand something, but if you start backfiring against those who try to help you, they will turn against you.
No one made me answer, but I did, and it is a good answer as I've been already down this track and back several times. So you should be grateful instead of annoying (citing: "No one made you answer").
As for the menu at the bottom of this page that you commented on before, it is actually not well done. It is not a list with li tags and this is a wrong SEO idea.
Posted 6 months ago #
Ok, here's a long answer... also applicable to "why should we follow rules".
HTML has it's rules. You must know them to code in this markup language.
Browsers are created following these public rules or specifications.
What happens if you don't follow them in your web pages?
Yeah, your page will have structure errors and will probably not show up properly.
These structure errors could also develop into SEO errors.
Which means: learn your rules or fail.
And there's little more to it. Why tags are designed the way they are is something to discuss in other forums, not here.
I hope this answer finally pleases you.
Cheers.
Posted 6 months ago #
So you should be grateful instead of annoying
Yup'. That's a real showstopper for me too.
@dddddrrrrr
Grab some Basic HTML and CSS tutorials form Google. There are tons of great guides all over the web. Spend some time looking at the structure of HTML and learning how and why the order of things are such that they are.
There really is some basic rules to be adhered to. It's pretty much like any programming language. While rules can be broken, it may not always be a good idea to make them up as you go along.
Knowledge doesn't simply appear in our heads..
...I'm not like you I can't simply be told what something does and when i ask how it works just accepting the answer "it just does" or "it's just that way" There is always a rhyme or a reason..
There is a mountain of truth to that. Everyone learns at their own pace, and not everyone "gets it" as soon as others do. Seriously, the answers you're looking for are going to come from reading about HTML and looking at the work that others have already done. The more you learn, the more things will start to make sense.
Posted 6 months ago #
So you should be grateful instead of annoying
Yeah that is a real show stopper for me too.
Posted 6 months ago #
I'm closing this post until everyone can calm down.
Everyone has bad days, but try not to wrestle with bears unless you have to :) It's okay to walk away.
This topic has been closed to new replies.
