How would code this in css and html? Should I do it with absolute? Or float it somehow? Any Ideas?
I would do it using css positioning while keeping in mind good markup. So basically, make the code reflect that the <h1> is the big east conference and each of the teams be list items.
Like this:
<h1>The Big East</h1>
<ul>
<li>Team 1</li>
<li>Team 2</li>
...
</ul>
This way the code makes sense to screen readers and is most SEO compliant.
Now, as far as how to then arrange the images, you can do it completely in CSS. So for the h1 you just do something like this:
h1{background-image:url(images/bigeast.png);text-indent:-9999px;display:block;overflow:hidden;}
The indent just sends the text outside of the h1 so it can't be seen while keeping the good markup intact. Just do the same with all of the li's and you'll have all of your images in place. Then simply set all of the positions on the elements to absolute and position them on the page with something like left:238px; and top:20px;
I know it seems like a pain, but it's really not all that hard, especially if you use firebug.
Make sense?
Related
I have tried without success to make a dropdown list without the content are getting pushed down under the dropdown, i can't get it to work, i have tried with float and display wont work :s
Anyone have any suggestions?
It really doesn't seem like you have come a long way at all, so I'd be hesitant to just write a long answer to explain how dropdowns work, and instead suggest that you look up tutorials. You are probably going to need to use javascript to make the dropdown "clickable" to open and close it.
But I'll try to start you off in the right direction!
To avoid making the dropdown move other elements, it needs to have the css attribute "position:absolute;" and the parent element (the element the menu is inside) has to have the attribute "position:relative;"
<style>
.menuButton{
position:relative;
}
.dropDown{
position:absolute;
bottom:0;
}
</style>
<div class="menuButton">
<p>Click me!</p>
<div class="dropDown">
<ul>
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
</div>
Though further, I'd suggest you use javascript to toggle the ".dropDown" class' attribute "display:none" on and off. You will most likely learn better by googling, because I dont think I have teach you, and people are probably not going to give you a lot of help here on such a basic question
(navigation layout picture)
I have the navigation-layout of tabs and sub-tabs, which i want to make accessible via text-reader/lynx. It consists of the main pages "Startseite", "Über", "Interessant", "Orte", as well as the sub-pages "Linköping", "München" and "Baustelle". The logical structure would thus be:
Startseite
Über
Interessant
Linköping
München
Baustelle
Orte
But since I use a layout of several div-tags, it only yields this in lynx:
Startseite
Über
Interessant
Linköping
München
Baustelle
Orte
The questions (or solutions I don't know how to implement yet) now are:
(1) how do I improve my layout to make it accessible via text-reader/lynx
... or
(2) how do I adjust a layout of unorderd lists and sub-lists (see code) too look like my current tabbed navigation-layout?
<nav>
<ul id="mainpages">
<li>Startseite</li>
<li>Über</li>
<li>Interessant
<ul id="sub1">
<li>Linköping</li>
<li>München</li>
<li>Baustelle</li>
</ul>
</li>
<li>Orte</li>
</ul>
</nav>
keep in mind that my main tasks is making it text-reader/lynx accessible. I though of using a layout like this, since it is easily styled with #some_ul_id {display: inline-block}:
<nav>
<ul id="mainpages">
<li>Startseite</li>
<li>Über</li>
<li>Interessant</li>
<li>Orte</li>
</ul>
<ul id="sub1">
<li>Linköping</li>
<li>München</li>
<li>Baustelle</li>
</ul>
</nav>
My third question is:
(3) Is this good practice? Should I do it?
It is the easiest way, though solution (2) would be nicer, since it is more logical.
From an accessibility perspective, the way to markup the solution so that it semantically represents what you are trying to achieve is to use the WAI-ARIA menubar, menu and the various menuitem roles. You should also use the aria-haspopup="true" attribute to show sub-menus and the aria-expanded attribute to track when the menu is expanded. In order to achieve the semantic markup of the hierarchy, you will want to have hierarchical lists as this is the easiest way to represent the hierarchy in an understandable way.
Here is a link to a full dynamic ARIA menu example http://dylanb.github.io/bower_components/a11yfy/examples/menu.html
You will need to ensure that each menu item is keyboard focusable using an href attribute on an anchor tag will do this for you as long as you look for the 'click' event and don't do anything funky with mousedown/mouseup etc.
One way to achieve this could be to absolutely position the sub-menu – of course that requires that you know beforehand that there’ll be enough space, so that items don’t go over multiple lines (resp. you have an alternative at hand for smaller screens via media queries).
So you would position the outer ul (or the nav itself) relative, and then on :hover over a main menu item you make the sub-ul visible, that is positioned absolutely in such a way that it comes to lay underneath the line of main menu items – like this: http://jsfiddle.net/0rpyLqtn/
Other slight variations are easily imaginable; if you don’t want “blank space” underneath the single line of main menu items, you could f.e. give that ul a border-bottom instead of a margin-bottom, and have the border color of it visible at all times, like this: http://jsfiddle.net/0rpyLqtn/1/
Since you have accessibility in mind, you might also want to pay attention to how this kind of menu behaves on devices that do not have a “mouse” as input device. Getting such a menu to be accessible via keyboard can be tricky, and on touchscreens a menu based on :hover might not work that well either. Anyhow, such issues have been discussed on the net already, so with a little research you should be able to find solutions/workarounds for these issues as well.
I just realised that hiding text is a bad attempt from a thread I just made,
As a sidenote, Google does not like
hidden text, and if you have a lot of
it, it will consider it deceptive
coding. One is probably fine, but
you'd be better off using the alt
attribute on the image tag.
But I sometimes need to use images for navigation link list such as the one below, so I use css image background on <a> tags and hide the actual text in the html using <span>,
<div id="header" class="align-center">
<ul id="menu-header">
<li id="menu-header-home"><span>Home</span></li>
<li id="menu-header-portfolio"><span>Portfolio</span></li>
<li id="menu-header-profile"><span>Profile</span></li>
<li id="menu-header-newsletter"><span>Newsletter</span></li>
<li id="menu-header-blog"><span>Blog</span></li>
<li id="menu-header-shop"><span>Shop</span></li>
</ul>
</div>
is it seriously lack of semantic and 'it will consider it deceptive coding.' as I have used many many hiding text due to replacing text with images?
what should I do instead if I have to use an image for a button and images for navigation link list?
thanks.
Hiding the text also means it'll be missed by some screen readers.
A better way to do this would be either to use text-indent to position the text way off screen, use absolute positioning on the spans to also position them way off-screen, or simply make them visibility: hidden.
something driver me crazy here
i have a big HTML template which i can't post but the problem is that when i write ul tag like this everything works find
<ul><li>something</li><li>something</li><li>something</li></ul>
but when i write it like this i got +4 pixel i don't know from where
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
when i use the second method i'm sure that i have no extra space somewhere but i think it's from the "enter" between them
Any solution? css maybe
::Extra info
i found that the problem comes from closing and starting li tag this worked out
<ul>
<li>
something
</li><li>
something
</li><li>
something
</li>
</ul>
any idea ?
You are probably noticing such gap because you are using CSS to make an horizontal menu; when making <li> inline elements white space between them is not ignored.
i would start by using a reset CSS like this one
I don't know what cause the problem, but you can solve it using CSS. Write a style for li element and specify the proper margin.
What you're noticing is the 'feature' of (x)html collapsing whitespace into a single space. Most of the time this isn't too much of a problem, but for a horizontal menu it's an irritation.
There are two options available to deal with this (in addition to your first example):
<ul>
<li>something</li
><li>something</li
><li>something</li>
</ul>
(Note that the first two </li> tags aren't closed until the following line.)
<ul>
<li>something</li><!-- hiding the whitespace
--><li>something</li><!-- hiding the whitespace again
--><li>something</li>
</ul>
Of the two options I prefer the first, it doesn't throw up any errors, validating quite happily under xhtml 1.0 strict. It's not an ideal situation, but it's slightly better than trying to put a whole list into a single line of (x)html.
I have a horizontal menu consisting of <li> elements with display: inline.
The elements are supposed to be next to each other seamlessly.
In the source code, I would like to have each li on one line for easier debugging:
<li class="item1 first"> ... </li>
<li class="item2"> ... </li>
...
However, if I add a \n after each element, the menu items have a gap between each other. I gather this is the intended behaviour, but is there any way to turn it off using a clever "white-space" setting or something?
Edit: I can't use float, this is in a CMS with the option to center the list items.
You can avoid the rendering issues but keep the code maintainable like this:
<ul
><li>item 1</li
><li>item 2</li
><li>item 3</li
></ul>
It removes the whitespace but it's still easy to edit the items in a text editor, provided your CMS doesn't mess with the markup you enter!
Do you have the ability to edit the CSS? If so, you could try adjusting the padding/margins on the <li> element. It does seem to be a lot of effort of readability.
Depending on what browser you are using you can get the HTML Tidy http://users.skynet.be/mgueury/mozilla/, which gives you the option to Tidy up your source, which might be useful enough for debugging
CSS+float is your friend.
HTML is whitespace independent - so adding line breaks should have no effect. Some browser's rendering engines don't quite get this right however.
What you probably want to do is add
float: left;
to your li tags to get them next to each other.