Our project usually has a professional web developer that handles this sort of thing. But ours left, and we're still looking, so this weirdness falls to me. We have a situation where a list of lines under a node has to affect the parent node's look.
<span class="feedback">
<ul>
<li class="info">Just an info message</li>
<li class="error">This is an error</li>
</ul>
</span>
In the above, if all the li's are not error, we want one look, but if there's even ONE error, we want a different look. Is that something CSS can do? if so, how? Is there something I can do on feedback that makes it show one way under no errors, and a different way if there are?
Appending class has-errors to span.feedback on the back-end is not an option? If you have control over what comes from the back-end I'd try to do something like such approach instead (it's somehow simpler):
<span class="feedback has-errors">
<ul>
<li class="info">Just an info message</li>
<li class="error">This is an error</li>
</ul>
</span>
Otherwise, as far as I know, it's not possible to accomplish precisely what you're asking only through CSS. But if you use JS, you could also make it happen (far from ideal), IMO.
Related
What would the most relevant HTML tags be for a numbered progress bar such as:
(1) Step 1: do something
(2) Step 2: do something else
(3) Step 3: complete
I considered using an <ol> but in this case, the '1', '2', '3', will need styling.
Also to indicate which step the user is currently on.
As you've already decided, an ordered list is the most semantic way to show a progress bar. Unfortunately there isn't a specific HTML element or attribute for "current step" or anything similar (I wish I knew why!). So you'll need to make something yourself. The simplest way I've used before is to use an image of the step number with an alt attribute, e.g.
<li><img src='step1.png' alt='Step 1: Current step'>Do something</li>
But you could use visually-hidden text instead. The image would need to be visually distinct from the other steps so that colour-blind users are informed as well.
Probably nothing more semantic currently than:
<ol>
<li class='currentStep'>
<span>1</span>
<span>do something</span>
</li>
<li>
<span>2</span>
<span>do something else</span>
</li>
</ol>
Semantically I agree with the use of ol but I believe you can achieve the desired effect with a bit of css and use of data-attributes
The markup would look something like this
<ul>
<li data-step="1">Do something</li>
</ul>
Here's a sample of the implementation: http://jsbin.com/gifisireku/edit?html,css,output
The benefit of using this is you can have clean and accessible markup which is great for SEO as well ;)
It is such that I have a menu where there is a border in the page you're into, just currently the whole time on the index page, but if I click onto the news as it should be less.
I have tried so many ways but none of them works, think a little that you can do it with something GET?
This means that it must move to find the page you are on, and view page not in the menu so it should not be there.
there are border in Home, how can I do so that, for example, I go into the info then border under the info and not the front, what should I do there?
<div class="pi-header-block pi-pull-right">
<ul class="pi-simple-menu pi-has-hover-border pi-full-height pi-hidden-sm">
<li class="pi-has-dropdown active"><span>Forside</span></li>
<li class="pi-has-dropdown"><span>Info</span></li>
<li class="pi-has-dropdown"><span>Nyhed</span></li>
<li class="pi-has-dropdown"><span>Team</span></li>
<li class="pi-has-dropdown"><span>Kontakt</span></li>
<li class="pi-has-dropdown"><span>Opret bruger</span></li>
</ul>
</div>
Ses image HER
Here you can see how my menu appears when I click on the info.
The answer is as simple as this: see the pi-has-dropdown active part. If you don't want it, just remove it. If you want it in other pages, add it to each page, for example in Info, like this:
<div class="pi-header-block pi-pull-right">
<ul class="pi-simple-menu pi-has-hover-border pi-full-height pi-hidden-sm">
<li class="pi-has-dropdown"><span>Forside</span></li>
<li class="pi-has-dropdown active"><span>Info</span></li>
<li class="pi-has-dropdown"><span>Nyhed</span></li>
<li class="pi-has-dropdown"><span>Team</span></li>
<li class="pi-has-dropdown"><span>Kontakt</span></li>
<li class="pi-has-dropdown"><span>Opret bruger</span></li>
</ul>
</div>
. You usually do this with the help of a CMS or some JS/Jquery coding, but you could totally hard code it on each page if you want. This way, you need to copy this snippet of code on each page, only changing the active class keeping in mind in which page are you. As simple as that
Im writing a markup and have a doubt at this part:
And here is my markup:
<ul class="primaryContacts">
<li><address>Phone: <em class="headerPhone">1.800.corp</em></address></li>
<li><address>Email: <em class="headerEmail">office#corpora.com</em></address></li>
<li><address>Follow Us: </address></li>
</ul>
Have I used tags address and em in right way or maybe there are more semantic ones? And maybe some other mistakes.. Thanks everyone for help.
[Edit]:
According to the answers I've written this:
<ul class="primaryContacts">
<li>Phone: <span class="headerPhone">1.800.corp</span></li>
<li>Email: <span class="headerEmail">office#corpora.com</span></li>
<li>Follow Us: </li>
</ul>
This contact information is really not mine and as I understand address have nothing to do here. Also I've changed em's on span's. Thanks for help.
I think you're using <address> the wrong way. Based on what you can read from the specs, a better way to have your code is to have the <address> as parent. Moreover, the <em> is to specify stress emphasis and this is not the case. So you should get rid of it. However, if you want it so style differently, you can use a <span> element to have your CSS hook:
<address>
<ul class="primaryContacts">
<li>Phone: <span class="headerPhone">1.800.corp</span></li>
<li>Email: <span class="headerEmail">office#corpora.com</span></li>
<li>Follow Us: </li>
</ul>
</address>
The address element is defined as providing contact information about the author of the document. This does not look like such contact information. However, hardly any software uses address elements in any particular way, apart from some default styling (e.g., italic font) in some browsers.
The em element is subject to many interpretations, and HTML5 drafts make things even more messy. In practice, it does not matter much. The use of em makes the font italic by default. That’s about it. There are rumors about search engines giving em elements larger relative weight within a page. It’s questionable whether this would be useful here.
I'm currently trying to come up with a good and accessible way to format a status indicator which should be rendered within a set of wizard-like pages on a website. The website should provide a multipage form with a status indicator on top of it as demonstrated in the wireframe below:
Given the new progress-tag in HTML my first thought was to do something like this:
<progress value="2" max="3">
<ul>
<li>Beginning</li>
<li class="now">Right now</li>
<li>End</li>
</ul>
</progress>
... but since <progress> only accepts phrasing content using a list is not really an option. So right now I would probably go with something like this, integratinng the ARIA progressbar-role:
<ul aria-role="progressbar" aria-valuenow="2" aria-valuemin="1" aria-valuemax="3" aria-describedby="state2" aria-valuetext="Right now">
<li id="state1">Beginning</li>
<li id="state2" class="now">Right now</li>
<li id="state3">End</li>
</ul>
But again, I'm not really sure if the progressbar role can be applied in such a way to a list.
Another problem is, that <progress> is rendered as progress bar in Opera, for instance, so >progress> itself is probably not really a viable solution altogether :-(
Can anyone perhaps recommend an accessible status bar that does not only rely on using a single image?
Current solution
For now I will go with following markup:
<section class="progress">
<h1 class="supportive">Your current progress</h1>
<ol>
<li><span class="supportive">Completed step:</span> Login</li>
<li class="now"><span class="supportive">Current step:</span> Right now</li>
<li><span class="supportive">Future step:</span> End</li>
</ol>
</section>
All elements of the class "supportive" will be positioned off-screen. IMO this way we should have a nice compromise of semantic markup (the state succession is in my opinion really an ordered list ;-)) and accessibility thanks to the additional header and status text for each step.
According to whatwg, you're not supposed to assign progressbar role to <ul> elements.
I'd just ditch <ul> and describe progress using (surprise) phrasing content:
<section role="status">
<h2>Task Progress</h2>
<p>You're now at <progress value=2 max=3>"Right now" step</progress>.
</section>
Update: You're right, progress doesn't suit here, it's more like an interactive form widget. I should've checked first, before taking it from your first example. But anyway, the point is there's no need to use a list (even more so, unordered list), when you can just describe what's going on in plain text. In the case that the list of past and future steps is necessary, I'd just add two more paragraphs, one before the status (‘You've completed the "Beginning" step’), and one after (‘Next step will be the "End" step’).
However, I admit that this isn't a complete answer to your question.
Also, I'd say some aria attributes look redundant to me. For example, aria-valuetext perhaps would make more sense in the context of interactive widget, when there's no other human-friendly description of its state. Though I may be wrong here.
As it's valid markup, I have done the following;
<div class="list">
Link 1
Link 2
</div>
My question is, does it have to be written as this;
<ul class="list">
<li>Login to Broker Site</li>
<li>Register</li>
</ul>
what are the + and - of doing one than the other? And are these both correct according to semantic web?
Thanks.
It totally depends on the greater context, but seeing as it seems to be a navigational sub-menu, a ul is indeed the most semantically correct element to use.
The clue is in the class name you chose.
As you see it as a list then use a list. This is a lot more semantic and is helpful for screen readers, which will then treat the contents as a list of links.