I'm trying to learn how to make my own Tumblr theme following their documentation http://www.tumblr.com/docs/en/custom_themes.
There is a number (or {PostID} as the documentation describes it) on each post that I don't want.
I think it has something to do with the <ol id="post"> ... </ol> around the posts but if I remove it or change it to <div class="posts"> ... </div> it just turns into bullet points.
Does anyone know how to remove the numbers or bullet points completely?
There's a few bits here and there that are a little more advanced than you need to delve into right now but the most of it is basic HTML.
You can change the templates but unfortunately the post ID has to stay ..it's built in.
You can find more info here; https://webapps.stackexchange.com/questions/28049/changing-messy-tumblr-url
Good luck with the template.
When you changed ol to div, did you change the children, too?
The ol element is a list which contains li elements, which are list items, and typically displayed as bullet points.
If you want to remove the display of the ol, use CSS. For example: ol#post li {list-style-type: none;}.
If you want to change the HTML element (e.g., from ol to div), make sure that you also change the li elements (e.g., also to div).
If you want to remove the post ID (which is displayed somewhere on your site), edit your theme and remove {PostID}.
Related
Currently my code looks like this:
<div class="carouselTypo">
<p class="carouselTypo__p" data-target="#active1">A</p>
<p class="carouselTypo__p" data-target="#active2">B</p>
<p class="carouselTypo__p" data-target="#active3">C</p>
</div>
The same code could also be written like this:
<ul class="carouselTypo">
<li class="carouselTypo__p" data-target="#active1">A</li>
<li class="carouselTypo__p" data-target="#active2">B</li>
<li class="carouselTypo__p" data-target="#active3">C</li>
</ul>
Now I'm wondering, which one is better or correct? Or does it not matter?
Actually if you remove the default css I don't think it does matter in this case.
but you should always prefer to use the element that represents your elements prototype,
because sometimes the browser has different behavior for different elements.
for example lets take the the anchor tag.
you can make it in tow ways:
create a button which opens the href
create an anchor tag with href
if you remove the default css the look the same but they don't,
because the browser has other way to deal with anchor tag, for example with anchor tag if you hover the anchor you will see in the bottom the url address:, or you will be able to shift-click which opens the link in a new tab.
<button onclick="document.location.href = 'https://stackoverflow.com';">
hover / shift-click doesn't work
</button>
hover / shift-click works
maybe you can make the shift-click yourself for example, but there are more different can't be done by you, for example accessibility service / extensions will probably react different with other tags.
So if you are making a list of something I recommend you to use the ul Although I don't see any different in non style behavior. (but again, for example maybe there is an extension which collects lists data and it won't work on the div method.)
The functional advantage is that divs mean little on their own, whereas ul lis explicitly mean "this is an un/ordered list of items."
The term "semantics" refers to the way that you use the inherent meaning of existing structures to create explicit meaning. HTML is comprised of tags that mean certain things by themselves. And there are established rules/guidelines/ways to use them so that your published HTML document conveys what you want it to mean.
If you list something in your document, then add an ordered list (UL) or an unordered list (OL). On the other hand, the page division (DIV) element is used to create a specific & separate piece of content.
The div element "divides." When you look at a page, there are specific parts like a content body, the footer, a header, navigation, menus, forms, etc. And you can use div tags to create these divisions. Often, the page parts correspond with a visual layout, so using explicit page divisions (DIVs) to cut up your layout in CSS is a natural fit. This way the div tags become structural.
If you misuse or overuse the div tag, it can create unintended meaning & code bloat.
To confuse matters: Google uses h3 and div to "divide" their listed search results. ul > li > h3 + div
So when you turn off all styles (Shift+Cmd/Crtl+S in Firefox w/ WebDeveloper toolbar), the divs should go away, and stack naturally. Your naked HTML should still render a nice page with a clear hierarchy: top to bottom, most important content first, and lists with bullets & numbers for listed items. And it's a good idea to add a link near the top (for non-visual users) that allows you to skip down to main content, important forms, or the main headings (like a table of contents).
Finally, keep in mind that you are building a document. Without all the visual effects, it should still be a cogent document.
It will affect your code readability. If you use ul and li, your code is more readable.
I want to:
Display a series of links, each on a new line
Maintain the links' variable width and text-wrapping ability
Constrain the mouse-hover area of each link to its actual content
Keep the links inside of the content flow
The best solution I can think of is
<div>
Text
</div>
<div>
Text
</div>
, but I don't like adding the non-semantic <div>. I tried using a { float: left; clear: both } , but that took the links out of the content flow. To my knowledge, I can't use a pseudo-selector such as :outer-wrapper. Is there a better solution, or are <div> wrappers the best solution?
*I thought of using <ul><li><a>, but I only have one or two links per page, and it doesn't seem resonable to add <ul><li> in place of <div> just to avoid a <div>
This is largely an opinion-based and philosophy issue, a source of endless and useless debates over “semantic markup”, itself a semantically vague concept. But to turn the question to something more constructive, I would ask what it really matters which markup you use. What does it imply in non-CSS rendering, or when assistive software is used?
From this viewpoint, ul is OK if the default rendering, with bullets, is acceptable. Otherwise, use div, or use br between links. Do not try to use just a with styling, since then the links would by default run together, appearing as inline text with no separator.
Options could be:
(to wrap them on their content)
display:table, to stack them.
display:inline-block or,
float:left to have them on a line.
For the markup, you can wrap <a> into a <nav> tag. and add a role attribut to distinguished it from or for main-navigation.
http://www.w3.org/TR/wai-aria/roles#landmark_roles
Notes: If nav unneccessary any other tag could be used , such as footer or paragraph.
More here : http://www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element
Thx all
It seems like what you want to put on a page, semantically, is a list of links. So use just that.
ul > li > a { /*whatever you want*/ }
You might consider wrapping the list in a nav, or you could forget the ul altogether and have just
nav > a { display: block; }
Also, don't think all divss are non-semantic. Yes, they don't have a specific meaning, but the spec says they represent their contents. A really great use for a div would be for grouping elements together that have the same theme or function. In your case, I wouldn't have a div that contains just one a, because you'd be right about the div serving as bloat.
Hi I have about six months experience in web development.
I have the following observation,
I use <div> tags a lot, it gives me the ability to position the elements, to archive the elements,
and it seems I can use <div> tags to do everything, simply playing with its display property.
I've never had to use <ul> or <li> elements in combination, except for horizontal menu navigation, and I am not sure why you can't do it with <div> elements, but it seems to be the 'convention' for achieving a horizontal menu.
Did I miss something? Are there some properties that <li> elements have that are better or more useful than <div> elements?
Please don't restrict this question to only horizontal menu list; I want to know any scenario where you would use a <li> over something else.
Yes, you can do anything (more or less) strictly with div tags (with exceptions, like forms and inputs, and images, and what not). But that's not the point.
First, specific tags have default css applied to them. li's have bullets, for example. You can change these, but in many situations, it's just easier to use the tag that has the style you're looking for.
But the most important reason is what's called "semantic markup", which is the concept that which element you use corresponds to a semantic meaning. li means it's a list of items, so even if you have no CSS applied (such as when a screen reader reads a page aloud for blind person) then it still has meaning.
The only reason to use one tag over another is semantics. The purpose of HTML syntax is to provide meaning to the content that is being rendered.
A <ul> element is an unordered list. It means the content is a collection of items where order is unimportant.
A <div> element is simply a structural element with no semantics associated with it. You could certainly use <div> elements to create the styles typically associated with <ul> elements, but it would mean losing the inherent semantics of the original element.
If you wanted to maintain the original semantics with <div> elements, you could use the list role:
<div role="list">
<div role="listitem">...content...</div>
<div role="listitem">...content...</div>
<div role="listitem">...content...</div>
</div>
However, the WAI-ARIA roles model isn't very well supported, so you'd be better off using the basic markup of:
<ul>
<li>...content...</li>
<li>...content...</li>
<li>...content...</li>
</ul>
HTML tags should help to explain the intent of the layout. When you use div for everything, it says nothing about the content. ul/li makes it clear that you have a list of related items.
This was the motivation for the addition of many new tags in HTML5: to make the layout have more semantics, that make it more understandable to humans maintaining the code, and to screen readers. So yes, you can make a page look the way you want with only div's, but it will be harder to understand.
Now depends your needs you can use any tag for example if you want to create a custom select is not ok to use div because is more useful to use ul li, check this example: http://jsfiddle.net/RwtHn/1152/
Now if you want to determine a section in which you want to add different paragaphs, pics or other static elements is more that ok to use divs. Check this for ul li : http://www.w3.org/TR/html401/struct/lists.html andthis for divs: http://www.w3.org/wiki/HTML/Elements/div . Is not a rule when to use what to use but it an help you in web development if you are codding well.
Cheers.
I've difficulties to set up css rules of tags containing text inside li tag. Anything inside li becomes anormaly smaller. To make it readable, I need to make it bigger in an important scale (for instance, from .8em to 1.1 em). Unfortunately, the new text's size doesn't always match the one before it was put inside the anchor tag.
What I want is to be able to restore the previous settings as before I place the tag containing the text inside the li tag. Is there a trick to do that? Let's say, for font-size = 12px, do I need to make it, for instance, 15px to go back to 12px?
EDIT
Actually, a tag is not causing me trouble, but it's rather li tag which shrinks all the put inside. So, I've edited the above post by replacing all the a tag by li tag. I'm sorry for that. Anyway; while I thought I've run into an issue, after reading article suggested by S. Jones, I'm aware of the inheritence property on some tags.
Here's the issue. Let's say, I have
<a href = "somewhere">Somewhere<a>
a { font-size: 12px;}
After I put the above tag inside a li tag
<li><a href = "somewhere">Somewhere<a></li>
a { font-size: ???;}
After reading S. Jones article, I wonder if I need to disable inheritence or use IMPORTANT!!!
Thanks for helping
It sounds like you've got cascading and inheritance issues with your CSS.
You might want to look through the following:
Cascading Order and Inheritance in CSS
CSS Structure and Rules
There are several ways that you could fix your issue, but I can't say sure without seeing your CSS and HTML. If you could post some sample HTML along with your CSS file which illustrates your issue - several people here on SO will be able to recommend solutions.
Debug Recommendation: If you're not currently using it, you might want to look at installing the Firebug plugin for Firefox. It's a great tool for inspecting your page. You can highlight specific areas, and Firebug will show you which HTML elements and CSS classes are responsible for the layout.
UPDATE: Thanks, that's much more clear. Check your CSS file for any styling being applied to your list elements (li, ol, ul). You'll either need to remove some styling from these elements, or define font-size specifically for a elements nested within li.
For Example: li a {font-size:12px;} which will set the font size for a elements, only when they are nested within li elements.
Cheers.
I'm new to HTML. When I started reading documentation about lists, I've noticed that everywhere an <ul>, <li> structure is used, even for creating very simple lists.
But for me it's most comfortable to use only <a> elements with CSS:
display: block;
/* and/or */
float: left;
So, why use <ul>, <li> instead of just <a>?
Thanks a lot.
Because structurally they're the most appropriate elements for that purpose. Also helps screen reader users in terms of properly dictating the elements of a page.
Remember that HTML is for markup/content ( what IS this text? a paragraph? wrap it in a p tag ), CSS is for styling, JS is for behaviour.
You can have thousands of anchors on your web page, but what if you want to style anchors nested within listed items differently from other anchors?
<ul>
<li>blah</li>
</ul>
sfl
If you had done things properly, your css would be trivial to implement
a { }
ul li a { }
Otherwise you'd have to throw classes around anchors and it would be messy and unstructural.
In regards to the SEO - I believe that in the past semantically marked up code didn't have much bearing but nowadays with specs like RDF, HTML 5 elements the web is getting more and more semantic, so it's only beneficial to be as semantic as you can be.
In 2010, Google specified three forms
of structured metadata that their
systems will use to find structured
semantic content within webpages. Such
information, when related to reviews,
people profiles, business listings,
and events will be used by Google to
enhance the 'snippet', or short piece
of quoted text that is shown when the
page appears in search listings.
Google specifies that that data may be
given using microdata, microformats or
RDFa.[13] Microdata is specified
inside itemtype and itemprop
attributes added to existing HTML
elements; microformat keywords are
added inside class attributes as
discussed above; and RDFa relies on
rel, typeof and property attributes
added to existing elements.[14]
Because your markup is supposed to be semantic rather than just for display purposes.
Anyone, or anything, that reads your document can immediately tell that a section marked-up with <ul><li>...</li></ul> tags is a list.
CSS doesn't describe what something is, only how it should be rendered. Ideally, you should mark-up your document to describe what each part is, and then use CSS to render those parts appropriately.
Because UL, LI and OL are the HTML elements created with the specific purpose of being lists. By using the proper markup you are adding more information to your content, any automated tool that sees your code will know that those are lists and be able to act accordingly.
If you want links inside a list item, you can put an A element nested inside the LI:
<ul>
<li>Example</li>
</ul>
For those not convinced enough by semantics, I think its fair to also mention that using a list tag can be extended nicely to include second level navigation. Then add in some css (and some javascript for the sake of IE) and bosh... you have superfish menus.