Thanks everyone for taking the time to read this.
I have styled my navigation bar and a few other things on my website using lists. For example...
<ul>
<li id="n1"></li>
<li id="n2"></li>
<li id="n3"></li>
<li id="n4"></li>
<li id="n5"></li>
<li id="n6"></li>
<li id="n7"></li>
</ul>
It works perfectly, but when it loads, it kind of like breathes. It starts off shrunken in a little bit, and then expands to its properly place after a second. I do not know what is causing this problem, and I don't think it's due to the way I styled the list, as I will show.
This is the website with the problem.
http://beaconrecords.com/
here is a test link that doesn't have the problem.
http://beaconrecords.com/wp-content/themes/br/test.php
I personally don't see this as being all that problematic, however, I feel that cutting up the 'lightning' spacers into two images is and it's likely that resolving that issue will also fix your other one. I would extend the images in each li to include a spacer (or even better, use the word image as a background for the links and use the spacer as a background for all but the last {or first} list item).
Right now the lightning bolts are not appearing correctly for me (in Chrome) and this would be a way to ensure that.
Test your site at Google PageSpeed: https://developers.google.com/speed/pagespeed/insights#url=http_3A_2F_2Fbeaconrecords.com&mobile=false - maybe you find some thing you could improve. In my opinion your site i generally slow loading on my 1M connection.
Related
(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 am in the process of developing a site for a uni project, and I have built an automatically changing slider while only using css (it is a requirement of this project that I don't use anything else). The problem I'm experiencing is that when the slides change, the left margin begins to add up, and I can't figure out why.
I have tried making a page with just the html and css necessary for the slider to work and it works properly there, but not when incorporated into my main css page.
Any pointers would be appreciated!
The site this can be seen on is http://www.darkmatter-designs.com/
As you can see you have some margin between the images, which makes their widths effectively bigger a little bit. I see you applied a reset in your css, so this is probably coming from the white space in your html. A quick fix would be to put all the li and img on a single line with no spaces or carriage returns between them, like so:
<ul id="css-slider"><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_108.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_62.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_59.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_66.jpg" alt="slider"></li></ul>
I know, it's weird.
I can't figure out what the problem is.. The css is really messy, there is a lot of useless or overwritten properties.. You have to optimize it..
But somehow I found a workaround : set the width of the #css-slider to 864px.. It's not really a proper solution but it works anyway..
I have been working on this for the past 4 hours. Tried literally everything but I can't replicate this navigation bar.
This navigation bar has a HTML like this;
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
#for($i = 0; $i <= 2; $i++) <!-- below loops 3 times for testing purposes -->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
//Styling goes here.
</a>
<ul class="dropdown-menu">
<li>Sublink</li>
</ul>
</li>
#endfor
</ul>
</div><!-- /.nav-collapse -->
It works like this:
li tag has transparent, circle background on itself. (e.g <li class="blue"> has blue circle)
Transparent house icons being placed on those circle backgrounds. (They need to be centered on circle, probably requires some margin hacking?)
Konut is a menu name, meaning House (type doesn't matter, I tried using h4 and span)
Numbers below is the amount of total listings. (which is basically a span)
I rewrote my navigation bar like 10 times. Tried block level image div, inline-block divs, margin hacks, relative positioning, absolute positioning, using box models... I'm really about to rip my hair.
The live version can be found here (I can't understand much from their styling)
Can anyone give me a JsFiddle example or tell me what I should be doing? Or is my HTML markup problematic?
Thank you.
Ps. I use Bootstrap 3, if it matters.
Without seeing your code, here's what you should do:
You need to make a right spritesheet. Note how the distance of elements in the original ones is just like the height of the navbar. It's not mandatory, but it fixes vertical positioning/cropping issues that might arise.
Like you sait:
li tag has transparent, circle background on itself. background-position derived from class
Transparent house icons being placed on those circle backgrounds. background-position + padding
Konut is a menu name, meaning House nothing special here
Numbers below is the amount of total listings. also nothing special here, just be careful to position it properly
This is just a list of things you need to know for this. I'll expand my answer once I see what have you done so far.
Of course, if you prefer not to use a spritesheet, but separate images, that's fine too. The only difference would be that you'd specify your background images by their URLs, while the site you gave us is specifying them by their spritesheet position.
i'm starting to learn, a bit on my own, to create a website. Now i have a problem i can't fix. I searched already on the internet but it doesn't work for me.
My navigation disappears when i hover. In some pages it only disappears when i hover my last link and other pages like this one: it disappears by the second link.
i'm starting to get a little hopeless to find a solution. That's why i ask for help!
Remove the html from your css/navigatie.css stylesheet
It is the last line and looks like the following.
/* we need to associate the JavaScript with our main ul*/
<ul id="nav">
You have random <tr> and <td> tags in your html that should be removed at lines 92, 93, 155 and 156 as there is no table declared.
Line 140 an <ol> looks like it was closed with </ul>
In the comments I mentioned that the spacing was your issue and you wanted clarification so here goes. Your navigation has nested lists, links, and images. For whatever reason they all have different heights. All I had to do to fix the problem was to make the nested li have a fixed height of 23px and the problem went away.
Honestly, I would redo the navigation. I can't see a good reason why you have a class called menu being applied to every ul and li in the navigation. It should be really easy to change the heights of the different elements but the way that the navigation is set up I think you're going to have a rough time.
I generally use a manual process:
Look at the page, figure out the semantic elements, and build the HTML
Slice up the images I think I'll need
Start writing CSS
Tweak and repeat different steps as necessary
Got a better approach, or a tool?
I have a fairly natural way of coding. The key is to treat the page like a document or an article. If you think of it like this the following becomes logically clear:
The page title is a top level heading
Whether you make the site title or actual page title the h1 is up to you - personally I'd make About Us the h1 rather than Stack Overflow.
The navigation is a table of contents, and thus an ordered list - you may as well use an ol over a ul.
Section headers are h2, sections within those sections are h3s etc. Stack them up.
Use blockquotes and quotes where possible. Don't just surround it with ".
Don't use b and i. Use strong and em. This is because HTML is structural rather than presentational markup. Strong and emphasis tags should be used where you'd put emphasis on the word.
<label> your form elements.
Use <acronym>s and <abbr>s where possible, but only in the first instance.
The easiest: always, always give your images some alternate text.
There's lots of HTML tags you could use that you probably haven't - address for postal addresses, screen code output. Have a look at HTML Dog for some, it's my favourite reference.
That's just a few pointers, I'm sure I could think of more.
Oh, and if you want a challenge write your XHTML first, then write the CSS. When CSS-ing you aren't allowed to touch the HTML. It's actually harder than you think (but I've found it's made me quicker).
Well, when I build a website I tend to try and forget about the design completely while writing the HTML. I do this so I won't end up with any design-specific markup and so I can focus on the semantic meaning of the elements.
Some pointers how to markup things:
menu - use the UL (unordered list) element, since that's exactly what a menu is. an unordered list of choices. example:
<ul id="menu">
<li id="home">Home</li>
<li id="about">About</li>
</ul>
if you'd like an horizontal menu you could do this:
#menu li {
display: block;
float: left;
}
Logo - use a H1 (heading) element for the logo instead of an image.Example:
<div id="header">
<h1>My website</h1>
</div>
And the CSS (same technique can be applied to the menu above if you would like a menu with graphical items):
#header h1 {
display: block;
text-indent: -9999em;
width: 200px;
height: 100px;
background: transparent url(images/logo.png) no-repeat;
}
IDs and classes - use IDs to identify elements that you only have one instance of. Use class for identifying elements that you got several instances of.
Use a textual browser (for instance, lynx). If it makes sense to navigate in this way, you've done good when it comes to accessibility.
I hope this helps :)
I essentially do the same thing Jon does, but here are a few other ideas:
Use Guides in Photoshop (and lock to them). Figure out all of your dimensions for each box/ region ahead of time.
Collect all of your dimensions and color hex values into an info file (I use a txt file) that you can easily reference. This will reduce your alt-tab tax and selecting colors in Photoshop multiple times.
After all my Guides are in place, I slice out the entire website into my images folder, starting with photos and grouped elements, and ending with the various background tiles/images, should they exist. (Tip: Use ctrl-click on the layer preview to select that layer's content).
Notes on using Photoshop:
Use Guides or the Grid.
Use the Notes feature for any pertinent information
Always use Layer Groups for similar elements. We need to be able to turn entire regions off in one click. Put all 'header' content in one Layer Group.
Always name your layers.
You can put each page template in one PSD file and use nested Layer Groups to organize them. This way we don't have to setup all of our guides and notes for each page template on a site.
No shortcuts :) but everybody works slightly differently.
This tutorial that popped up in my feedreader yesterday shows the process from start to finish and might help people who have never done it before but as you are an old hand it's just about streamlining your own methods.
EDIT:
The listapart link certainly is more automated for 'flat' designs where both imageready and fireworks have had pretty good support from day one and it's got better and more semantic with every release but if you have a more complex design it's the twiddly bits that make the design what it is and these have to be done by hand.
I just thought it was worth pointing out that in addition to the excellent advice you've had so far I'd recommend getting a printed version of the design, using a red pen to mark up all the block elements on the design you think you can spot and sitting down with the designer for half an hour and talking through how they envisioned their design working for the use cases that don't fit the static design.
What happens when more text is put in the navigation?
Is this width fixed or fluid?
Is this content pane to the right fixed height or fluid? If it's fluid why did you put a background on it that can't be repeated?
You have a border extending down the page that breaks two otherwise connected elements. Visually it makes sense, but semantically I not can't just use an li to house both those elements. What do you think is more important?
It'll also help you spot potential problems that you might otherwise not have realised were going to be issues until your elbow deep in css.
Not only does it make your job easier after a few times doing it your designer will get a much stronger sense of what is involved in marking up their work - some designers have real trouble comprehending why something they think looks visually very simple will take a few days of css tweaking to make work.
Some of the designers i know, usually uses Illustrator to make the design elements.
This page shows how to do it a little more automated.
Also, get to know the "Layer Comps" feature. I use this for changing button states.
Create layer comps for normal, hover, and active.
In each of these, set up the effects/color overlays and visible layers which belong with that state.
Save for web: go to a different folder for each state, unless it's easier to rename each slice (otherwise your hover button slices will overwrite your regular slices).