Need to center widgets - css

I have tried: http://www.w3.org/Style/Examples/007/center.en.html. I am a newbie and still learning. Nothing works. Even tried to no avail. It stays to the left!
I am using Cm4all and do the widgets manually in File Manager with Netfirms. They had me:
Log into the control panel with your account username and password.
Click on ‘FileManager’ under ‘Website’.
Click on ‘Settings’.
Check the checkbox ‘Use Richtext Editor’.
Then:
I also called the number you instructed and they said:
centering big groups of content, or centering groups of one specific object on your site can be done with divs and css.
Here are some hyperlinks to instructions/tutorials for common website operations like this.
They gave me three links but can't post the question with the links, says I need at least 10 reputation to post more than 2 links.
Nothing I do will make it leave the left side!!

Related

Breadcrumbs: Abbreviated but still accessible

Above you se a typical breadcrumb.
Sometimes there are to many steps in that breadcrumb, so we have to shorten it by replacing some of the steps in the middle and display three dots instead
When a user clicks on the three dots, the entire breadcrumb is visible.
How would you handle the accessibility issues here?
We would like to show all the steps to our screen reader users so those users can tab trough the entire breadcrumb whiteout ever knowing about those dots.
All other users will only be able to see those tree dots.
We can accomplish this in a few ways:
Use display:none but this will hide the hidden content for all users, including screen readers
We can use the class.sr-only (since we're using Bootstrap) or something similar on those hidden links so only users with screen readers will se the hidden parts of the breadcrumb. This will work, but it will remove the hidden parts breadcrumbs from the tab order.
We can stick to #2 above and add taborder="0" to those hidden links in the breadcrumb, but then we also have to add taborder="0" to every single interaktive element on the entire site and that is NOT an option. :-)
Are there any other ways to include the hidden links in the tab order?
(Sure, one can discuss the UX aspect of abbreviating a breadcrumb, but that's perhaps another topic.)
(Sure, one can discuss the UX aspect of abbreviating a breadcrumb another topic.)
This is perfectly the topic.
Blind person are normal people who like simple things. If you think your breadcrumb is too long, give them the same functionalities :
<button aria-label="view full breadcrumb">...</button>
Breadcrumbs have not been invented for blind people. They are part of one technique in a WCAG AAA guideline which implies that : it's not mandatory, and that it concerns everybody.
If you include hidden links in the tab and speech order, you are sure that your website won't be accessible.
A near-blind person using a screenreader in support of his eyes won't be able to view a link on the screen while it's announced by the screenreader.
A person using a keyboard only system will focus an invisible link which will remove the predictability of the focus order.
Note that for 2/ and 3/ the sr-only does not remove the elements from the tabindex, so this will work as you would expect

Can't edit drupal block

I'm trying to add this block but can't see the content...
I have try to change the input type from filtered html to full and to php but still can't see the content to edit it...
Thank you
See image
Answer to the original question
From the limited details you provided, it "appears" to me that what you are trying to say is something like this: "I want to edit the content of some block, but the block is not shown anywhere (and therefor I cannot edit it either)".
If I'm correctly interpreting your problem, then I'm about sure that you should navigate to admin/structure/block within your site. Then select the TAB (near the top) that corresponds to the Drupal "theme" that you are using. Probably the very first tab to the left is what you need to be looking at. Scroll down to the bottom of that page, towards the set of blocks below "Disabled". There you should then see the block listed that you are looking for. Edit the selection list to the right of it, and select a "region" like left column, 1st column, or whatever other region you want (just NOT disabled). And hit the "save" button near the bottom of that list. Then verify if the block starts to show up.
If this is NOT what you are looking for, then consider editing your question to better explain what your problem really is.
Answer to the extra comment
The comment added to this answer seems to be a completely different question. This is what the coment looks like (slightly reformatted to enhance readability):
... I have a views that shows one post per category at citybet.gr and need to remove the 2 last ones (Μπόμπες and Γκολ - Γκολ). This views is showing like a block but when I tried to edit this block I can't see the content to edit. I just can't find a way to remove the 2 last categories.
Some things to address this:
this "block" (as you call it) is shown because you probably have nothing specified within "Site Information" (within configuration) as the relative path of your homepage. So therefor you use the default, which is relative path "Node", and which shows a list of "teasers" of nodes that have been marked as "promoted to the frontpage".
if you do not want to include any of these teasers of specific nodes (like the 2 nodes you mentioned with Μπόμπες and Γκολ - Γκολ), then for each of these nodes you have to edit them and uncheck the flag that says "promoted" to frontpage. After you do so, those 2 specific nodes will no longer be shown in the list of teasers of nodes promoted to the front page.
Curious to hear if this somehow helps ...
PS: the layout of that ticker-bar near the top of your page is way to long (at the right), and causes a terrible display of your entire site on (at least) my mobile device ... you may want to work on that as well ...

Login page alignment issue on higher resolution

I have designed a login page which includes username textbox, password textbox, login button, remember me link & forgot password link but the last two links are not coming proper on higher resolution, how can I align it?
In case you haven't done it yet, you can wrap the links in a div container and align it properly along with the rest of the form.
But I do agree it'd be easier if you showed us what exactly is going on on a smaller and on higher res. Have you tried different browser? Some of the rendering engines interpret certain elements differently and that might cause you troubles later on too.
Cheers!

how to make a tabbed page, when you have 6-7 pages to load?(css/jquery)

i want to make a css/jquery tabbed for an "Admin panel", so it will all be loaded without the need to refresh.
im going to do it dynamicly but its a small exercise site so i know ill have only 3-4 main "areas" to edit in the panel (the tabs in the top).
the thing is i have other links for each editing area.
is there a way to do it with jquery, without the need of putting all the code in 1 page, in 3-4 divs and make them all invisble except the tabed being choosen(like ive seen in examples)?
in examples i saw all the content in one page, and if adding the top tabs and also the pages of each area(lets say delete, edit etc) its alot of code.
is there a comfortable way of doing it, while being able to make it dynamicly in the future?
edit to answers:
i already made tab from the this tutorial:
http://net.tutsplus.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
the thing is, at first in the admin menu i have like 13-14 html pages(before it becomes php) with different operations.
how would you take 13 pieces of code(they have the layout and the admin+admin menu yet the content is changed) that should be in different files, and make them show up in the same tab?
would you have to split each code to only its div, and then load it someway?
from the tutorial above, they used all of the content in one page and used invisible......
how would you load 13 pieces?
Have a look at the jQuery UI Tab Widget:
you can load the tab content statically or dynamically with AJAX
it uses the jQuery CSS framework
it's easy and full of sample code

Accessible navigation of large information trees

I am developing a public website which is the front end to information about medical conditions.
After the user does a search (questionnaire based) they are presented with the results which are categorised in to sections and sub-sections.
Information items can be assigned to both sections and sub-sections.
At the moment sections are represented by tabs across the top and the screen and sub-sections by links in a sidebar. The links in the sidebar change depending on which section is selected.
The problem is the section names are quite long (several words) and as a result the combined length of the tabs is too wide for a standard screen resolution (1024 x 768). Therefore they wrap and break the page layout. We will also have to add additional tabs in the future.
With this problem in mind and the fact our target audience is quite wide, this is a public medical website, what options are there for presenting this kind of information in a way which is accessible and easy to navigate for an average user.
How long are the subsection names? Will they fit in the space for tabs? You’re likely to get better user performance if you put the section links on the side bar menu and the subsection links in the tabs, rather than the other way around. See http://www.usability.gov/pubs/040106news.html.
The other alternative is to put everything on the side bar menu. Subsection links can appear indented under their section links. You can also consider putting the subsection links in a column of their own to the right of the section column. This makes the section menu stable, but takes a lot of horizontal space that’s perhaps better used for content. In either case, proper attention to visual design will show the current section, subsection, and the link between them.
There shouldn’t be a problem with accessibility as long as you’re using links to navigate to each section/subsection (perhaps generated programmatically for each page based on a database relating links to pages).
Just brainstorming some ideas:
Use combo boxes to allow the user to select the (sub)sections, then display the appropriate information items.
Create separate pages for each section-level and provide a bread-crumb control to show the user where he / she is in the page hierarchy.
Create some sort of fold-out menus that automatically hide when the user reads an information item.
In another question on SO, I came across a link to Quince, perhaps you can find some inspiration there as well.
You could try:
An iPod-style menu (in which subsections are hidden pages that fly in from the right): http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
Or as Daan has said:
Cascading drop-down boxes: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx
The downside with both of these (over a traditional tree view) is that the subsections aren't visible until you choose a section. If your users don't know the name of the subsection they're after, then either of these will be a good fit.
If, on the other hand, they do know the name of the subsection they're after, it's probably better to give them an auto-complete textbox so they can type a few characters and go directly to it.

Resources