RE: [WSG] How to centre a group of floated images
Russ, I don't know why you haven't been beatified already. Has someone
written off to the Pope about the miracles you perform here?
I understand your advice, and I've corrected the .strip issue, and it works
brilliantly. I'm not going to implement the rest, because although I'm
certain it all works, it's not worth the effort for me. This was simply a
practice exercise, and at the same time give the listeners to my radio show
a way to have a look at what I'm doing for the next couple of weeks while
they have no program from me. It's low importance in other words.
I understand the part about height and width. However the page is dynamic
and to put those values in, I'd have to amend the database and this app
doesn't warrant the time to do that. I'll go with whatever bad results I
get from not having them, and remember to add the height and width next
time I do one of these.
The heading's done the way it is, as an image, because that was the best
way I knew to get the effect I wanted before I found you people. Also it's
not worth re-doing the image and text etc just for accessibility and for
search engines, even though I understand your point perfectly. It's a good
point and I'm going to do it your way in any other pages I do.
In short, I'm stopping work on this page now, even though there are other
things that could be done to make it work perfectly. I'll live with any
errors that show up because of invalid code etc, but learn the lessons for
next time.
This list is fantastic and has saved me so many hours. I put together a
basic site this afternoon in an hour that I reckon would have cost me at
least 4 hours last October. At that sort of saving of time, I can afford
to either:
[1] cut my price to as low as a quarter of what it is now and still be ok
financially, OR
[2] take on 2-3 times as much work and expect to get it done with no extra
person-power, OR
[3] burden myself with banking the same cash for less work, OR
[4] spend more time in my workshop building model warships (see
http://modelwarship.com - another conversion project coming up!)
THANK YOU!!
Cheers
Mike Kear
-Original Message-
From: russ weakley [mailto:[EMAIL PROTECTED]
Sent: Wednesday, 7 January 2004 3:18 PM
To: Web Standards Group
Subject: Re: [WSG] How to centre a group of floated images
Michael,
Looking good. Forgive the long rave here...
1. There are still validation issues with your page. There are XHTML breaks
instead of HTML breaks. So, should be , and the same for metadata
- remove the end backslash, as this is causing items below to show up as
invalid.
http://validator.w3.org/check?uri=http://afpwebworks.com/beach/index.cfm
2. The thumbnail images do not have a width or height. This is an issue for
two reasons (and feel free to disagree/abuse me here):
a. Some browsers do not allocate space for the image and so they will not
move on to redraw the page while the image is loading. You can sometimes get
funny rendering issues till the page is loaded. Unless it is dynamic, it may
be better to put width and height attributes into the image elements.
b. If the user has images turned off (as I did when I first hit your page)
and there is no width or height allocated for the image, the alt tag is used
to define the width and height of the image - meaning that the entire page
breaks in Win/IE5, 5.5 and 6 (plus possibly other browsers).
3. It may be worth adding some sort of image replacement heading in the top
of the document as there is no heading on the page - the "Holiday at
Tabourie is only accessible via the image - bad for accessibility reasons -
Google and screen readers have no info on what the page is about. As Mark
Stanton keeps telling us, the h1 - h6 are used by Google a lot so it is
always worthwhile.
You could replace the header with an , and choose your favourite image
replacement option from here:
http://www.mezzoblue.com/tests/revised-image-replacement/
4. To get around the mystery gap in Win/IE5, 5.5 and 6 add a simple
declaration to ".strip" which will close up the gap completely.
.strip { font-size: 1px; }
Why does this work? Win/IE5, 5.5 and 6 add a carriage return inside divs. It
is not noticeable unless the div is very small - like your strip div
(anything under about 13px high). By setting the font size to 1px the
carriage return becomes tiny and the gap disappears. Gotta love IE!
I wrote an article on this a while ago. It explains the issue, but it does
not include the 1px solution (I'll amend the article soon):
http://www.maxdesign.com.au/presentation/mystery/
HTH
Russ
*
The discussion list for http://webstandardsgroup.org/
*
[WSG] AudioSite template - almost there ...
Title: AudioSite template - almost there ... Almost there, but before I spread this design throughout my site, can I ask a few more questions. I've checked validation but the problems come from a few things for which there may be better alternatives - suggestions most welcome. Some of this I cobbled from other sites and while it works, there may be better ways of doing things. http://universalhead.com/clients/jands/audio.html CSS at: http://universalhead.com/clients/jands/css/jands.css On the page: - the search field is just a placeholder for the moment - I use a bit of _javascript_ to create image rollovers. This causes Validation problems. Is there a better way to do these rollovers? - I get a bunch of these, which I don't understand: Line 65, column 150: document type does not allow element "h2" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag ...t="75" alt="Shure" class="logo" />ShureBrief summary of produ - in IE 5 and Opera 6 on the Mac, I get two problems: - a bit of whitespace to the left of the square icon link images - the bit of text and the search field under the navigation don't line up the same way as in all browsers I've fiddled with these problems but have come up out of my depth. VERY much appreciate help with this folks - I'm gunning towards the best coded site I've every made and the help here is absolutely invaluable. Free beers for those passing by my studio in Stanmore! Cheers Peter -- peter gifford universal head design that works visit 7/43 bridge road stanmore nsw 2048 australia call (+612) 9517 1466 fax (+612) 9565 4747 email [EMAIL PROTECTED] site www.universalhead.com
[WSG] An amazing resource site
You may have seen this on Zeldman, but this site has the biggest set of resources I have seen - try these two pages: Accessibility: http://www.d.umn.edu/itss/support/Training/Online/webdesign/accessibility.ht ml CSS: http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html Thanks Russ * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] How to centre a group of floated images
Michael,
Looking good. Forgive the long rave here...
1. There are still validation issues with your page. There are XHTML breaks
instead of HTML breaks. So, should be , and the same for metadata
- remove the end backslash, as this is causing items below to show up as
invalid.
http://validator.w3.org/check?uri=http://afpwebworks.com/beach/index.cfm
2. The thumbnail images do not have a width or height. This is an issue for
two reasons (and feel free to disagree/abuse me here):
a. Some browsers do not allocate space for the image and so they will not
move on to redraw the page while the image is loading. You can sometimes get
funny rendering issues till the page is loaded. Unless it is dynamic, it may
be better to put width and height attributes into the image elements.
b. If the user has images turned off (as I did when I first hit your page)
and there is no width or height allocated for the image, the alt tag is used
to define the width and height of the image - meaning that the entire page
breaks in Win/IE5, 5.5 and 6 (plus possibly other browsers).
3. It may be worth adding some sort of image replacement heading in the top
of the document as there is no heading on the page - the "Holiday at
Tabourie is only accessible via the image - bad for accessibility reasons -
Google and screen readers have no info on what the page is about. As Mark
Stanton keeps telling us, the h1 - h6 are used by Google a lot so it is
always worthwhile.
You could replace the header with an , and choose your favourite image
replacement option from here:
http://www.mezzoblue.com/tests/revised-image-replacement/
4. To get around the mystery gap in Win/IE5, 5.5 and 6 add a simple
declaration to ".strip" which will close up the gap completely.
.strip { font-size: 1px; }
Why does this work? Win/IE5, 5.5 and 6 add a carriage return inside divs. It
is not noticeable unless the div is very small - like your strip div
(anything under about 13px high). By setting the font size to 1px the
carriage return becomes tiny and the gap disappears. Gotta love IE!
I wrote an article on this a while ago. It explains the issue, but it does
not include the 1px solution (I'll amend the article soon):
http://www.maxdesign.com.au/presentation/mystery/
HTH
Russ
>
> Michael -
>
> Looks like a case of the mystery white space, where IE adds about 4
> pixels of whitespace to a div. I've had the same problem. When is a
> pixel not a pixel? When you see it in IE
>
> Why don't you add the strip bg images to the red bg image and have one
> div instead of three?
>
> HTH
> James
>
>
> Michael Kear wrote:
>
>> G'day Russ,
>>
>> Thanks a lot for the help.
>>
>> I've done what you suggest and it's looking much better. I don't
>> understand why in IE6 the bars at the top don't touch, while they do in NN7
>> and Opera7.
>>
>> If yo have a look at http://afpwebworks.com/beach/index.cfm in IE, you can
>> see the top grey bar doesn't touch the red pattern, while the bottom one
>> does. But in NN and Opera they touch, how they're supposed to.
>>
>> (The images in the footer are done with an include from the rest of the site
>> so that's why they're done differently.)
>>
>> Cheers
>> Mike Kear
>>
>>
>>
*
The discussion list for http://webstandardsgroup.org/
*
RE: [WSG] back again but with no tables
Title: RE: [WSG] back again but with no
tables
Tim
I love you and want to have your babies, and I mean that most
sincerely.
You just solved all my problems in one succinct fell swoop.
Brilliant. There's no way I would have stumbled on those
solutions.
I'm learning, I know I'm learning, but there's SO much to
remember ...!
Thanks mate,
Peter
The
floating item in the html appears below the thing you want to float
over:
you need
to move the #sidecolumn above #maincolumn in the
html.
I think
russ has something that explains it better, as always
=)
Also in
#wrapper reset text-align:left;
this
should stop it centering the middle column
#wrapper
{
text-align: left;
}
(just add
it on to the other stuff)
also in
the #sidecolumn, you have a but you have to remove the
default margins/padding otherwise it pushes the box too
big.
try
#sidecolumn ul {
margin: 0;
padding: 0;
}
And one
last thing, you forgot the starting { on the html>#maincolumn /* be
nice to opera */
so put
that on, and it should be sweet
--
peter gifford
universal head
design that works
visit 7/43 bridge road
stanmore nsw
2048
australia
call (+612) 9517 1466
fax (+612) 9565 4747
email [EMAIL PROTECTED]
site www.universalhead.com
RE: [WSG] How to centre a group of floated images
Maybe try putting all four div's on one line, this has worked for me in IE on various occasions. ChrisB > I've done what you suggest and it's looking much better. I don't > understand why in IE6 the bars at the top don't touch, while they do in NN7 > and Opera7. > * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] back again but with no tables
Title: Message
The
floating item in the html appears below the thing you want to float
over:
you
need to move the #sidecolumn above #maincolumn in the html.
I
think russ has something that explains it better, as always
=)
Also
in #wrapper reset text-align:left;
this
should stop it centering the middle column
#wrapper {
text-align: left;
}
(just
add it on to the other stuff)
also
in the #sidecolumn, you have a but you have to remove the default
margins/padding otherwise it pushes the box too big.
try
#sidecolumn ul {
margin: 0;
padding: 0;
}
And
one last thing, you forgot the starting { on the html>#maincolumn /* be nice
to opera */
so put
that on, and it should be sweet
hope
that works out.
Tim Hill
Computer Associates
Graphic Artist
tel: +612 9937
0792
fax: +612 9937 0546
[EMAIL PROTECTED]
-Original Message-From: Universal Head
[mailto:[EMAIL PROTECTED] Sent: Wednesday, January 07, 2004
12:38 PMTo: [EMAIL PROTECTED]Subject: [WSG] back
again but with no tables
Hi
Back with this site and I've removed those pesky tables and added the
right Doctype so perhaps I can impose on someone to explain why I can't get
this layout to work! I think I've done all the right things but the right hand
column refuses to float comfortably beside the left one. They are both within
a container div.
Page is here:
http://universalhead.com/clients/jands/audio.html
CSS is here:
http://universalhead.com/clients/jands/css/jands.css
As Dr Smith said, "oh the pain, the pain!" And as the fly with the human
head said: "Heeelp me "--
peter gifforduniversal
head design that
worksvisit 7/43 bridge
road stanmore nsw
2048
australiacall (+612) 9517
1466fax (+612) 9565
4747email
[EMAIL PROTECTED]site
www.universalhead.com
Re: [WSG] How to centre a group of floated images
Michael - Looks like a case of the mystery white space, where IE adds about 4 pixels of whitespace to a div. I've had the same problem. When is a pixel not a pixel? When you see it in IE Why don't you add the strip bg images to the red bg image and have one div instead of three? HTH James Michael Kear wrote: G'day Russ, Thanks a lot for the help. I've done what you suggest and it's looking much better. I don't understand why in IE6 the bars at the top don't touch, while they do in NN7 and Opera7. If yo have a look at http://afpwebworks.com/beach/index.cfm in IE, you can see the top grey bar doesn't touch the red pattern, while the bottom one does. But in NN and Opera they touch, how they're supposed to. (The images in the footer are done with an include from the rest of the site so that's why they're done differently.) Cheers Mike Kear * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] How to centre a group of floated images
G'day Russ, Thanks a lot for the help. I've done what you suggest and it's looking much better. I don't understand why in IE6 the bars at the top don't touch, while they do in NN7 and Opera7. If yo have a look at http://afpwebworks.com/beach/index.cfm in IE, you can see the top grey bar doesn't touch the red pattern, while the bottom one does. But in NN and Opera they touch, how they're supposed to. (The images in the footer are done with an include from the rest of the site so that's why they're done differently.) Cheers Mike Kear -Original Message- From: russ weakley [mailto:[EMAIL PROTECTED] Sent: Wednesday, 7 January 2004 8:54 AM To: Web Standards Group Subject: Re: [WSG] How to centre a group of floated images Mike, Thanks for the wrap on floatutorial. :) The layout you have done has a number of errors including missing alt tags and background images applied to the element. I used to do these myself before I saw the light. Now CSS can do it for you more easily. This layout is very simple, so why not take the opportunity to move it to full CSS instead of tables. Here is an example - the containers are styled quickly to match up with your basic layout: http://www.maxdesign.com.au/jobs/floatcenter.htm Two notes: 1. The centering of the yellow container will not work in Win/IE5 or IE5.5. I don¹t think this is a major deal as it degrades gracefully. However, if you really wanted to, you could add more containers to work around the problem. 2. The system I have used is to build the layout in simple divs with strong colour. The aim would be to do it fast like this and then test across a wide variety of browsers - before you get stuck into the fine detail of styling the content of the page. This method is what I will be talking about at the next Sydney WSG meeting - "Coloured boxes - the process of building a CSS layout" HTH Russ * The discussion list for http://webstandardsgroup.org/ *
[WSG] back again but with no tables
Title: back again but with no tables Hi Back with this site and I've removed those pesky tables and added the right Doctype so perhaps I can impose on someone to explain why I can't get this layout to work! I think I've done all the right things but the right hand column refuses to float comfortably beside the left one. They are both within a container div. Page is here: http://universalhead.com/clients/jands/audio.html CSS is here: http://universalhead.com/clients/jands/css/jands.css As Dr Smith said, "oh the pain, the pain!" And as the fly with the human head said: "Heeelp me " -- peter gifford universal head design that works visit 7/43 bridge road stanmore nsw 2048 australia call (+612) 9517 1466 fax (+612) 9565 4747 email [EMAIL PROTECTED] site www.universalhead.com
Re: [WSG] How to centre a group of floated images
Mike, Thanks for the wrap on floatutorial. :) The layout you have done has a number of errors including missing alt tags and background images applied to the element. I used to do these myself before I saw the light. Now CSS can do it for you more easily. This layout is very simple, so why not take the opportunity to move it to full CSS instead of tables. Here is an example - the containers are styled quickly to match up with your basic layout: http://www.maxdesign.com.au/jobs/floatcenter.htm Two notes: 1. The centering of the yellow container will not work in Win/IE5 or IE5.5. I don¹t think this is a major deal as it degrades gracefully. However, if you really wanted to, you could add more containers to work around the problem. 2. The system I have used is to build the layout in simple divs with strong colour. The aim would be to do it fast like this and then test across a wide variety of browsers - before you get stuck into the fine detail of styling the content of the page. This method is what I will be talking about at the next Sydney WSG meeting - "Coloured boxes - the process of building a CSS layout" HTH Russ > > I've made a small photo gallery for the fun of it, to experiment a little > with the lessons in Russ's excellent Floatorial Tutorial. (and if you > haven't already checked it out, you should - it's at > http://css.maxdesign.com.au/floatutorial/index.htm > > Anyway, I'm having trouble figuring out how to centre the groups of three > images across the page. They're floated left, so they're aligning against > the left, as you'd expect. But how can I take the whole group of images and > move them to the centre of the page? > > The gallery is at http://afpwebworks.com/beach/index.cfm and the style > sheet is at http://afpwebworks.com/beach/styles/beachstyle.css > > > Incidentally, this method of doing the gallery is FAR simpler to code than > the way I've been doing this kind of thing until now. Another good reason > to be interested in CSS and compliance. > > > > Cheers > Mike Kear > Windsor, NSW, Australia > AFP Webworks > http://afpwebworks.com > > > > > * > The discussion list for http://webstandardsgroup.org/ > * * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] how would I do this?
Thankyou for the excellent advice Russ and Mark, much appreciated! I went for setting the height in this case, but the other options were very educational. I'll be sure to post the completed site for your comments (when it's valid that is!). cheers Peter -- peter gifford universal head design that works visit 7/43 bridge road stanmore nsw 2048 australia call(+612) 9517 1466 fax (+612) 9565 4747 email [EMAIL PROTECTED] sitewww.universalhead.com * The discussion list for http://webstandardsgroup.org/ *
[WSG] How to centre a group of floated images
I've made a small photo gallery for the fun of it, to experiment a little with the lessons in Russ's excellent Floatorial Tutorial. (and if you haven't already checked it out, you should - it's at http://css.maxdesign.com.au/floatutorial/index.htm Anyway, I'm having trouble figuring out how to centre the groups of three images across the page. They're floated left, so they're aligning against the left, as you'd expect. But how can I take the whole group of images and move them to the centre of the page? The gallery is at http://afpwebworks.com/beach/index.cfm and the style sheet is at http://afpwebworks.com/beach/styles/beachstyle.css Incidentally, this method of doing the gallery is FAR simpler to code than the way I've been doing this kind of thing until now. Another good reason to be interested in CSS and compliance. Cheers Mike Kear Windsor, NSW, Australia AFP Webworks http://afpwebworks.com * The discussion list for http://webstandardsgroup.org/ *
[WSG] Web standards debate at Mezzoblue
Dave Shea asks: Support the standards and nothing but the standards, regardless of whether or not browsers get them right? or Support what standards are available given today¹s browser support, and kludge together markup/script/ CSS hacks to overcome deficiencies in implementations? A range of comments here: http://www.mezzoblue.com/archives/2004/01/05/standards/ Russ * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] styling hr tags
I'm just thinking that a "separator" in document structure is redundant -- at a structural level, each section should be contained in its own area, be it a , or whatever enclosing form takes your fancy. Then, with such a structure, visually it is extremely easy to delineate as a hr does: bottom-border or top-border. __ Do you Yahoo!? Yahoo! Hotjobs: Enter the "Signing Bonus" Sweepstakes http://hotjobs.sweepstakes.yahoo.com/signingbonus * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] styling hr tags
I can never understand why tags made it into the XHTML spec, as they are pretty much presentation-only, not structure. is supposed to mean "change of topic" structurewise. cheers, /Anton -- What your lacks, your compensates. * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] how would I do this?
The float and container information was poorly explained. Here is a real example with an explanation: http://www.maxdesign.com.au/jobs/floatsample.htm Russ > The image is set to "float: left" which means it is taken out of normal > flow. Containers (in this case the ) cannot determine the height of a > floated item, so they will close themselves immediately below any elements > that are in normal flow (in this case below the and the ) - leaving > your image poking out the bottom of the container. If the content were > deeper, this may not show, but it will always be the case with floated > items. It is completely normal browser behaviour. Does that make sense? > * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] how would I do this?
Peter,
The image is set to "float: left" which means it is taken out of normal
flow. Containers (in this case the ) cannot determine the height of a
floated item, so they will close themselves immediately below any elements
that are in normal flow (in this case below the and the ) - leaving
your image poking out the bottom of the container. If the content were
deeper, this may not show, but it will always be the case with floated
items. It is completely normal browser behaviour. Does that make sense?
You have a number of choices (none of them great) including:
1. The simplest option is to set a height for the , which will help for
short text, but not if you have text that runs deeper than the thumbnail.
2. As Mark says, you could wrap the content in a and float it right,
leaving the image in normal flow - this will mean the image determines the
height of the . Dangerous option as height of text may break layout if
it is deeper than image.
3. You could set a height for the and then apply each thumbnail image
as a background image to individual 's - you can do this with an
individual class for each thumbnail. You would need to apply your
element around the only in this case. You could then set padding on the
and so that they do not sit over the top of the background image
Again, problems if you have content that runs deeper than the thumbnail. It
could be argued that the images are decorative, and if this option is used,
they will then be removed from the document altogether. If you remove all
CSS you will be left with a clean list (each list item will simply have an
and ). Some would say this is the most semantically correct option -
weird maybe, but semantically correct.
HTH
Russ
> Whoops sorry about that. There's also a:
>
> mg.logo {
> float: left;
> border-right: 1px #b0bcc0 solid;
> }
>
> You guys are quick ...!
> Peter
*
The discussion list for http://webstandardsgroup.org/
*
RE: [WSG] how would I do this?
Ok. Assuming you are *sure* that you text will never be taller than you image (which is always a bit risky) why not put you h2 & p into a div and float that right. Remove the float left from your image and that might fix your problem. By floating your image you are removing it from the page flow (see Russ's floatutorial for more on this http://css.maxdesign.com.au/floatutorial/index.htm) and as such it no longer affects the height of its containing block. By doing what I suggested above you flip it around - no matter how much text you have the box will stay fixed to the height of the image. That's the theory anyway - will be interested to see if it works... Cheers Mark -- Mark Stanton Technical Director Gruden Pty Ltd Tel: 9956 6388 Mob: 0410 458 201 Fax: 9956 8433 http://www.gruden.com * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] how would I do this?
Title: RE: [WSG] how would I do this?
Whoops sorry about that. There's also a:
mg.logo {
float: left;
border-right: 1px #b0bcc0
solid;
}
You guys are quick ...!
Peter
Hey Peter
I think we are missing something
here. What is the style on
class="logo". Is it float:
left?
Cheers
Mark
--
peter gifford
universal head
design that works
visit 7/43 bridge road
stanmore nsw
2048
australia
call (+612) 9517 1466
fax (+612) 9565 4747
email [EMAIL PROTECTED]
site
www.universalhead.com
RE: [WSG] how would I do this?
Hey Peter I think we are missing something here. What is the style on class="logo". Is it float: left? Cheers Mark -- Mark Stanton Technical Director Gruden Pty Ltd Tel: 9956 6388 Mob: 0410 458 201 Fax: 9956 8433 http://www.gruden.com * The discussion list for http://webstandardsgroup.org/ *
