I am on the final straight just working through the odd box idea and trying to take in the more recent discussions regarding floating. The intention is that the boxes will not ever be different heights so does that mean it is not an issue or do you mean in terms of if a user increases the text size drastically and how this will effect the boxes. In saying that I am not even sure what will happen in tahts cenario so maybe I need to check
Once again Thanks!!
Paul,
the IE-clearing-floats issue… if the left boxes are floated left and the right boxes floated right, and the following left boxes have a “clear: left” or a “clear: both” on them, is that a problem for IE? I’m starting to think it might be ok since they’re technically clearing floats above them who are in an opposite direction, not same.
I was thinking
<div class="odd price">
<p>price</p>
</div>
<div class="even testimonials">
<p>testimonials</p>
</div>
<div class="odd clear services">
<p>services</p>
</div>
<div class="even areas">
<p>areas served</p>
</div>
where
.odd, .even {
width: whatever;
min-height: whatever;
pink-border-stuff;
}
.odd {
clear: both;
float: left;
}
.even {
float: right;
}
.prices {
teh background blah blah…
}
.testimonials {
etc…
}
…
Hm well I do have issues when viewing the site: there’s a list that is sitting over some text. So, something’s wrong.
Anyway, code:
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
I have no idea if browsers care about the capitalisation of the first part, but that’s how I’ve always seen it (with capital DOCTYPE). Once I miscopied a doctype where an extra space character came between the “public” and the “-//w3c” part and it threw IE into quirksmode (wow). To be safe I always copy from http://www.w3.org/QA/2002/04/valid-dtd-list.html
So far as I know, the HTML5 doctype is caps-agnostic, but the others, I tink they must be capitalised.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>anna b - mobile hairdresser</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="nav.css" />
Re-arrange this.
In the HTML element, where you have the xmlns attribute, add lang and xml:lang attributes like so:
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
This tells user agents the language of the page (not the site). A screen reader will know which language to use from this: otherwise, it will usually start out in whatever default language the user has set it to, not your page language.
<meta http-equiv=“content-type”
content=“text/html; charset=iso-8859-1” />
Put this first thing after the opening <head> tag. Browsers should start reparsing the page when they hit this, so make sure they redo as little as possible.
(more info: http://www.joelonsoftware.com/articles/Unicode.html)
<link rel=“stylesheet” type=“text/css” href=“style.css” />
<link rel=“stylesheet” type=“text/css” href=“nav.css” />
Each separate stylesheet is a separate request to your server.
The browser stops there, sends a request to your server… waits for 200 OK, starts loading the file, moves on to the second line and stops (it’s still loading the first file though as all the modern browsers I know of will at least do 2 requests at once… some do more), waits for 200 OK and starts loading the file. The browser may wait until the CSS files are fully loaded before moving on.
So when your site is “ready”, make those a single file so there’s only a single request.
<h1>
<img src="images/words.gif" alt="anna b mobile hairdresser logo - multicoloured anna b with mobile hairdressing word cut in half by a pair of scissors" />
</h1>
That amount of alt text is pushing it. They recommend no more than 100 characters.
Also, alt text’s job isn’t to describe the image, but convey what would be lost if the image wasn’t there. In this case, it’s not just a logo but the name of the site. It’s mostly decorated text. So I’d state
“Anna B - Mobile Hairdresser”
in general, you don’t even bother saying it’s a logo. View your site with images off and you’ll see that just the name fits nicely.
If you didn’t have a logo, you’d have
<h1>anna b — mobile hairdresser</h1> right?
There’s also been a WebAIM survey where some screen reader users indicated that they’d rather just hear the name text in that instance and not “logo” link, scroll down to Logos (conversely people did want to know if a photo of something was a photo [url=http://webaim.org/projects/screenreadersurvey2/#images]link). Since you’re not repeating the name again later (as is sometimes done on sites with logos), I’d go as if I didn’t have a logo at all.
Similarly here:
<img src="images/pinkcard.gif" alt="icon stating live in sheffield s35/s6? call 08713021046 to book" />
alt=“Live at Sheffield s35/s6? Call 0871 302 1046 to book”
I have no idea what that means though, so know that must be very region-specific or something.
<div class="clear"></div>
This is an old clearing technique. You definitely don’t need it here: there’s a div called class=“header pink” following that and so long as one of those two classes is always following the floated images, you could have that class do the clearing.
Ok I didn’t look but let’s say they are all “header”
.header {
clear: both;
rest of styles;
}
The separate clearing-div thing was created for situations where there normally wasn’t any content coming later but the authors wanted the floats enclosed in their containers. [url=http://stommepoes.nl/floaties.html]view float-clearing and enclosing methods in a modern browser and IE7 here
<div class="menu">
<ul>
Wrapping divs are common on web pages but know that if you don’t need one, don’t use it (no harm done, just worthless bloat). If I check your CSS styles I see that .menu isn’t doing anything the ul itself couldn’t do:
.header .menu {
width: 1000px; margin: 0 auto; position: relative;
}
.header .menu ul {
list-style-type: none;
}
So you could
<ul class=“menu”>
and then
.header .menu {
width: 1000px; margin: 0 auto; position: relative; list-style-type: none;
}
done.
Later I noticed this:
.header .menu li a {
margin: 17px 0 0 0; float: left; display: block; text-indent: -9999px;
}
First, floating stuff already puts it in block context, so “display: block” here is redundant.
More importantly, anyone surfing without images gets zero text, unless they are also surfing with some AT or with CSS off as well. The negative text indent must die.
If you only cared about Safari you could do all that text styling with CSS alone, but since you care about more browsers, you’ll need to use image replacement and use a better technique than the one you have.
list of popular image replacement techniques and their drawbacks
I rather like Gilder-Levin and use it the most, because I want that if images are off or don’t load for some reason, that there is still useful text for everyone.
This would mean moving your spans around from this:
<li><a href=“index.html” class =“current home”><span>home</span></a></li>
to this
<li><a href=“index.html” class =“current home”>home<span></span></a></li>
You’ve already got spans and you’ve already got separate classes to style each individually, and your image isn’t semi-transparent, so you’re missing all the drawbacks Gilder-Levin has.
You could consider using it for your logo and thingie on the right as well IF you wanted to be able to style the text underneath in all browsers… however those two spots have the disadvantage of text being able to leak out if it got bigger than the image (which could easily happen if a user enlarges text without zooming)… to me this is the real drawback of Gilder-Levin, but I still use it as needed and try to deal with the overflow issues as best I can.
Also, you’ve got :hover styles listed in your #footer… but why no :focus? Most of the time, wherever you state :hover you’ll want :focus too (for links and things). This gives someone keyboarding through the site the same visual feedback as someone going through with a mouse. And lots of devices don’t have mice.
<img src="images/crouching.gif" alt="a serene blue tinted picture of a young woman with blonde hair" class="topleft"/>
What is she saying about the topic? If I’m reading a web page about a hairdresser, this text just comes out of nowhere and distracts me and tells me nothing. Why is the woman there? She’s decoration in my opinion. That means she gets alt=“”, which is valid and ok to do (though because I consider her decoration, I’d also consider moving her to a CSS background instead of an image).
<div class=“list”>
<ul>
this is covering the h2 above it in my browser. Here’s why:
.list ul{
[b] position: absolute;[/b]
top: 110px;
right: 10px;
width: 650px;
font-family: "trebuchet ms", helvetica;
font-size: 105%;
}
Again, you can lose the wrapping div and move that class over to the ul itself. Ul’s are blocks like divs, they’re just limited in what they can have directly inside them. They can have all the styles any other blocks can have.
<div class="boxleft">
<img src="images/paying.jpg" alt="a gold credit card" class="topleft"/>
<div id ="righttextbottom">
<p> <span class="pinktext2" >price</span> </p>
</div> <!-- righttext -->
</div> <!-- boxleft -->
That looks like way too much code, but then, it also looks unfinished. Will there be a list of prices there? Or a link to a price page?
“boxleft” is a terrible name if you later decide to swap “price” with “testimonials”. Why not call the box “prices”?
<div class=“odd box prices”>
<p>price</p>
</div>
That’s actually all you really need. Let CSS do the rest of the work: let “box” class have what all boxes share: the pink border and widths and min-heights, and being floated (you can start with float: left and then override to float: right on .even boxes), .odd and .even setting float directions (and in this case, .odd will likely be clearing too), and .prices being specific to this box (setting credit card image as a background).
You can use a collection of padding, text-align or width-limiting and floating to set the p’s, or line-height to vertically center them OR reduce the height of .box divs and add top-padding to make it up.
Because the credit card image would be a background colour, padding on .prices div won’t “show” because background images are painted on the padding-box (all the area covered by the div not counting borders and margins).
Clearing div again… lose it. Here, it seems you can get these two boxes side by side simply by floating all .odd left and .even right (everything I said about the price box can apply to all the other boxes). They’ll sit evenly next to each other so long as .wrapper is wide enough to let them. .odds can clear: both.
Well, IE (6 and 7) does not like floats clearing floats, though if they are each floating in opposite directions it might work, not sure. Paul likely knows a way around that bug for this situation here.
“Area covered” is popping out of its box in my browser. This may be because I don’t have “leaguegothic” as a font, and you’ve listed no backups for me.
“Here we go…” doesn’t tell me anything… what’s that mean?
Your page doesn’t validate BUT that seems to be partially from your lower case doctype (again, though, I dunno if that’s really a problem or just the validator being a turd) and teh evil goOglez adding in unescaped ampersands in URLs (each & is in turn causing the following = to be called an error) and having <style> tags in the body.
It would prolly be better if the google code dynamically inserted the stylesheets into your <head> rather than requiring that they sit and invalidate your page all day.
I get a scrollbar if I’m under 1174px width… consider letting the page shrink from two cols to one so those without ginormous screens can read it without constant scrolling back and forth.
You can either do that by letting the “How can I get stylish hair…” box shrink in width (and let the text inside just wrap) and letting the floated boxes stack on top of each other (which they would do if .wrapper was too small, so let .wrapper have just a max-width to limit the boxes to 2 in a row)…
or you could try using CSS3 @media queries using min and max width. Those are fun but leave IE6 and 7 behind, so I like the first idea better but media queries are neat when playing with (modern) mobiles and tiny Desktop screens.
Hey Stomme Poes
I am really struggling with my navigation bar, I have got so far as a test but I think the problem is more fundamental in that I am not 100% sure what I am trying to acheive. Two things are confusing me, firstly the nav bar set up by deathshadow is different to mine. Mine does not have a hover state but it changes on each page you arrive at. I don’t fully understand how the changing of the position gives that effect on the site we are looking at, do you know of any links that explain how it works.
It may just be I need to look at it again when I have more time over the weekend, but if you have any thoughts please let me know
Thanks
Also like the screenshot you have shown I haven’t been able to put a background color to show the 920px box. Not sure what is going on any suggestions.
Because the menu has floats, the container is collapsed to a height of 0 (it thinks it is empty… the floats are attached to it at the very top but they are in their own little world so the container does not “see” them) which is why putting a background colour on it shows nothing.
But there are ways to make a container “see” its floated children. Most of the ways are complicated, but our very own Paul O’B discovered that setting the overflow property to anything other than “visible” does the trick: so setting the ul to “overflow: hidden” means that ul now must “deal with” overflow. It can’t do that if it can’t “see” where its children are, so the context changes and now the container “sees” the floats, and encloses them (as it would enclose non-floated children).
http://stommepoes.nl/floaties.html view in a Modern Browser and in IE7 (not sure about 8-in-compatibility-mode) and you’ll see how a float “hangs out” of a container if the container doesn’t “see” it.
Not sure if you got this or not:
[quote]
(remember that that screenshot isn’t affecting the blind with AT or the googles, just sighted users with CSS on)
I am not really sure what this all means [/quote]
I mean that the screenshot is showing what CSS on and images off looks like: mystery-meat-menu. But, google is reading your text and a screen-reader user is reading your text. So I’m not saying the negative text-indent technique is bad for the blind or for search engines: it’s bad for those without images but are sighted with CSS on. And likely confusing to sighted users who use a screen reader (dyslexics and screen magnifyer users). Which is why I’m recommending Gilder-Levin with CSS sprites (that’s not the only option but the one I use most).
Not really following this, is it linked to the menu problem I am originally couldn’t fix above and the reason why I couldn’t work out how to add a background color
Play with overflow on a box containing floats and a background colour or border on it and you’ll see what’s going on.
I use Firebug but this really helped me see the overall layout, thanks
yeah Firebug or Aardvark help show boxes as well. But the background colours let you see a box cross-browser which is more valuable.
Do you mean I should remove the absolute positioning, when I do the text falls below the box, how should I position it?
In general, positioning something is a ham-fisted shove-a-round-peg-in-a-square-hole kind of thing. Even when imitating an image of a web site, you’ll usually be better off using margins and floats and whatnot to position stuff. Once you absolutely position something, it’s out of the flow. So when I view your site and don’t have your narrow font, your (now large) h2 can’t “push” the list down further. And the list can’t push the bottom of the mainbox down further. Instead, start off with it unpositioned (but still styled) and see where it ends up, and then use margins to push it into place. With your container being min-height, this should mean the box may get a little taller. That’s fine. Users with @font-face will see things exactly as you want, users without see a slightly taller box (big whoop).
I am always looking to build my bookmarks of useful websites, forums and tools, are you able to share the name of the forum (is it digital point as I have now added that)
Whoops, I see I mis-spelled Gary’s name : ) Gary Turner, here as gary.turner. He’s also at devshed and CSScreator forums. I wouldn’t generally use digitalpoint for reference: I got started there but back then luckily there was Gary, Dan Schulz, and deathshadow to keep the n00bz in line… mostly though it’s people trading bad code they discovered from other badly-written sites, DHTML.com or w3schools.com. The Javascript section over there is maybe the largest proponent of inline onclick: javascript() junk.
Good idea that is just something that hasn’t sunk in so I need to try and remember it, in fact found this link is useful which seems to cover it dustindiaz.com/css-shorthand/
Dustin’s site should be pretty good.
Sorry about the twigged thing it may be a UK thing or even a regional thing, it means understanding something after initial difficulty. i.e The penny has dropped (may not be a great example), now I get it, I have now caught on.
Oh, you meant grok : ) That’s the geek version of the word. As in
“I don’t quite grok Javascript yet” lawlz it drives me nuts.
I know there are figures to show the percentage of users who use IE or FF and the different versions etc, are there any stats regarding number of users who have javascript turned off or other strange browsers settings as it would be interesting to know how a big an issue it is when considering how to design. Out of interest why do you have javascript turned off, it seems a bit alien to me as I want to see what the person who has designed a site wants me to see.
This is why the existence of “progressive enhancement”. Build what works in markup alone. Style it with CSS and images. Add in Javascript. Make sure you are not using something requiring more than whatever is in all user agents (unless your site dictates otherwise: music sites must have speakers, video sites must have video cards/Flash/HTML5 video, sites demonstrating Javascript must have Javascript, game sites must have some kind of scripting… web applications (not web sites) usually require scripting).
Why turn Javascript off?
-security (not a huge reason for me, but this kind of crap never ends).
-annoyance (this is the big one for me. People set out to use Javascript to annoy the hell out of me with their fading dancing menus and their goofy animations and their slideshows and popup windows and advertisements and other garbage)
-slow (sites with more Javascript take longer to load than sites without… and people overuse setTimeout() for delays on stuff like dropdown menus which drives me nuts)
-testing (bad sites don’t render without Javascript, people cover up crap with Javascript, and of course my own sites I like to default to what I wrote before testing scripts on/off)
That said, plenty of developers don’t know how to write HTML and CSS alone and layer Javascript on top, and plenty more could but don’t care, so for the broken sites I do end up turning on the minimum number of scripts necessary to do whatever I came there to do… the rest I just leave and find their competitor to see if they did it any better.
Sometimes if you’re using a screen reader the site sucks balls until you turn Javascript off: in fact just today on the Orca (screen reader for Gnome) mailing list had a Hungarian programmer asking how to get around a “bug” where his reader kept re-reading the beginning of a site which was “refreshing” all the time… I looked and saw no meta-refreshes or server-side refreshes, but there was a box using Javascript to update and scroll comments, and when the guy turned off Javascript, suddenly he could debug the page. Not sure why a script like that was “refreshing” the page to Orca, but that’s why we developers need to test our pages and our scripts in accessibility technology as much as possible.
When your site is earning money for a client, you can’t afford to turn away potential customers with silly mistakes like that. So far the jQuery plugins I’ve run into break with screen readers: they assume users have a mouse and can see what they’re doing. .slider() is a good example. FilamentGroup have made a more accessible .slider() using ARIA attributes for example. It can be done. People just don’t do it though.
Are there any tutorials that can help with this. I have put the max width on the .wrapper and the main box which now lets it decrease in size but I am unsure how to position the text, if I leave it absolute it goes over the image and if I change it to floating right or left (not sure if this was the right way to approach it) but when the screen decreases the text disappears.
I’d have to look at it again, though when stuff disappears if you have a set height and overflow: hidden on a box, when the inner content drops (floats drop when there’s not enough width for them) it gets hidden so you can’t see it (Firebug can usually highlight it though).
Finally I just wanted to say that I started my learning by reading books and tutorials etc and whilst I am really enjoying producing something creative I am finding it really tough learning everything, there are a lot of new disciplines to get your head around. It is even more difficult to learn when you have no one to turn to for help so I really truly appreciate your advice. I do find it hard that when I study a topic from say a book or a tutorial I feel as though I don’t learn the details in a real life context, yet when I am building my site and obtain some info from the web to overcome a problem I don’t feel as though I am learning and understanding the fundamentals for next time. I am also struggling to understand fully how it all hangs together, or maybe it is just a confidence thing.
I was there. I’m there right now with Javascript: I do the tutorials, I try to write my own stuff and get stumped so easily because it’s hard for me to “see” what’s going on. I was doing HTML/CSS 8 hours a day at work and it was months and months before I really got the basics.
I started really learning with a basic book: Build Your Own Web Site the Right Way Using HMTL and CSS by Ian Lloyd. You’re prolly past that point though.
After that, one more book got me going a bit better with positioning: HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer. The first half of the book is kind of a repeat of Lloyd’s book: and intro to HTML and CSS. But the second half was worthwhile: several PSDs of layouts, some pre-written XHTML, and told “make this XHTML look like this PSD” and shown step by step how they did that. Which was very valuable for me. See if you can find that book at a library. It’s old enough.
Random tutorials here don’t help you master a tool or a language, but trying to do stuff and googling every few lines of code does (slowly), lawlz.
Anyway the reason for the waffle* is that I have an idea for a site that I want to pursue after this. I am thinking about taking the CSS course advertised on here, do you think i would be better putting some time into studying maybe this and a Photoshop book before I start another site or would I be better to plough straight into the site carrying on trying to learn elements as I build it?
I’d forget Photoshop for now, since it’s a whole other thing than this code and CSS. Unless not having small helper images is slowing you down. I ended up learning Gimp first before really learning code, so I already could whip out small whatevers as needed as I learned, but if you’re like me you’ll need hours and hours of just code code code. Starting another site would be fine: it really helps if they are NOT for clients or people who want working stuff on a deadline. That pressure doesn’t help, and it’s bad for your clients (unless they don’t care). Luckily at my work I could start a lot of stuff and later rewrite it and rewrite it and rewrite it (haha). I’m on rewrite of our basic insurance sites #5 I think… this time with an actual new design, and I’m incorporating new stuff I learned from Jakob Nielsen’s Eyetracking Web Usability book and the stuff I’m learning about ARIA-roles. You never stop wanting to refactor code…
and you aren’t always allowed to constantly refactor code but when you can, do it to learn.
Hey Stomme Poes
Have a great break and thanks again for all your help and advice it means a lot.
I need to start writing content and adding things to the other pages anyway so I can always come back to this later if I don’t manage to crack it this weekend. I will have hunt around on google for any further tips regarding it.
Wow that was spooky, how did you do that? 
That sounds quote ominous but I am sure it will be great and very helpful, I noticed what a fabulous job you did on the site in that thread that Stomme Poes pointed me to. However please note I am completely new to all of this, I’m only able to devote a hour or two a day to working on these things and every little things takes a while to make sense, so please be gentle.
Thanks
The left float won’t clear the right float in IE7 and under which will be an issue if the floats are not the same height.
Hey guys I am still working through this some of what I thought were the more easy changes but they sure are taking a while. I’ll post back when done as there are still some bits that I haven’t been able to resolve or work out. I’ll make sure the live site is updated when I do
Non floated boxes should always clear in IE (iirc) but boxes that are floated left and floated right will not clear the opposing float.
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.test {
width:100px;
height:100px;
background:red;
float:left
}
.t2 {
float:right;
clear:both
}
</style>
</head>
<body>
<div class="test">test l</div>
<div class="test t2">test r</div>
</body>
</html>
In IE7 and under the floats are level with each other but good browsers will stagger them down the page.
Good work Mallory (poes) 