RE: [WSG] First table-free site - part 2
Hi Mary,
I would suggest wrapping the two paragraphs in a division and floating it
right. So something like:
BABTAC -
British Association of Beauty Therapy and Cosmetology
8pp A5 membership application brochure.
BABTAC is a Gloucester-based umbrella organisation for
beauty and holistic therapists.
Etc...
And the CSS:
#descr {
width: px;
float: right;
}
Haven't tested this myself, but it seems logical. Also, I'm slightly
puzzled by the second brochure image which you've wrapped in a paragraph
tag, but you haven't done so for the first. I would consider removing that
as it is unnecessary.
Hope this helps,
Iain
P.S. I notice it's a Gloucester company, is that where you are? It's where
I am, but I often wish I wasn't. ;)
--
Iain Gardiner
http://www.firelightning.com
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Mary Wright
Sent: 20 June 2004 11:41
To: [EMAIL PROTECTED]
Subject: [WSG] First table-free site - part 2
Thanks to the help of other list members, my new website is coming
along nicely, but now I have another question.
See www.zebragraphics.co.uk/newzebra/pages/brochures/babtaca5.html for
a sample page from the portfolio section of the site. I have tried and
failed to come up with a way of putting the caption text to the right
of the BABTAC image, within the content div. For now, I've put the text
beneath the navigation buttons in the sidebar div, but I'm not really
happy with it being there; to the right of the image seems a more
appropriate place.
So, can anyone tell me how/if I can put the text where I want it and,
ideally, continue to have the whole page centred within the browser
window? CSS here: www.zebragraphics.co.uk/styles/main.css
Thanks,
Mary
www.zebragraphics.co.uk
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
RE: [WSG] First table-free site
Please remember, David, you knew nothing of CSS a few years ago. That should have been a PM to Russ or Peter. I find this list stimulating in its diversity of content and skills range; this is a standards group, not MENSA. Mike Pepper Accessible (and still learning) Web Developer www.seowebsitepromotion.com www.gawds.org -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of David Jones Sent: 11 June 2004 17:54 To: [EMAIL PROTECTED] Subject: Re: [WSG] First table-free site Mary Wright wrote: > You know, I wondered if it was something to do with the box model > hack thingy - I'm just not nearly confident enough yet in my CSS > skills (or lack of them) to know what I can safely leave out. > > Thanks, > Mary How do I unsubscribe from this list? I'm getting swathes of uninteresting nonsense. I want out. Ta. * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *
Re: [WSG] First table-free site
You can actually avoid the box model hack completely by specifying
width/height on outer elements (container divs) and specifying
padding/margins on inner elements (h1, p, ul, etc.)
Mary Wright wrote:
You know, I wondered if it was something to do with the box model hack
thingy - I'm just not nearly confident enough yet in my CSS skills (or
lack of them) to know what I can safely leave out.
Thanks,
Mary
On 11 Jun 2004, at 17:15, Nick Gleitzman wrote:
On Saturday, June 12, 2004, at 01:58 AM, Iain Gardiner wrote:
I've had a look at the site and CSS (nice-looking by
the way) and although I am pretty poor at analysing other people's
problems,
I think it might come down to theis rule:
#sidebar-a {
float: left;
width: 100px;
\width: 110px;/* Try removing this line */
w\idth: 100px;/* And this one */
margin: 0;
margin-right: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
}
I assume you want it to be just 100px in width, but in Firefox at
least it
is being rendered as 110px. To my mind this would explain the extra
5px at
either side of the logo. Try without the lines I've indicated above
and see
if that makes a difference.
If Iain's right (and I think he almost is), you should do the same for
the width declarations for div#container as well. Not sure that you've
got the hack right - IE5 can still see the \width declaration with the
leading slash. The w\idth declaration will work for IE5 if the width
needs to be different, but it's not complete See
http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html
for full info on this simplified version of the Box Model hack...
Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
Re: [WSG] First table-free site
Mary Wright wrote: You know, I wondered if it was something to do with the box model hack thingy - I'm just not nearly confident enough yet in my CSS skills (or lack of them) to know what I can safely leave out. Thanks, Mary How do I unsubscribe from this list? I'm getting swathes of uninteresting nonsense. I want out. Ta. * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *
Re: [WSG] First table-free site
You know, I wondered if it was something to do with the box model hack
thingy - I'm just not nearly confident enough yet in my CSS skills (or
lack of them) to know what I can safely leave out.
Thanks,
Mary
On 11 Jun 2004, at 17:15, Nick Gleitzman wrote:
On Saturday, June 12, 2004, at 01:58 AM, Iain Gardiner wrote:
I've had a look at the site and CSS (nice-looking by
the way) and although I am pretty poor at analysing other people's
problems,
I think it might come down to theis rule:
#sidebar-a {
float: left;
width: 100px;
\width: 110px; /* Try removing this line */
w\idth: 100px; /* And this one */
margin: 0;
margin-right: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
}
I assume you want it to be just 100px in width, but in Firefox at
least it
is being rendered as 110px. To my mind this would explain the extra
5px at
either side of the logo. Try without the lines I've indicated above
and see
if that makes a difference.
If Iain's right (and I think he almost is), you should do the same for
the width declarations for div#container as well. Not sure that you've
got the hack right - IE5 can still see the \width declaration with the
leading slash. The w\idth declaration will work for IE5 if the width
needs to be different, but it's not complete See
http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html
for full info on this simplified version of the Box Model hack...
Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
Re: [WSG] First table-free site
Wow! I'm overwhelmed - many thanks to all who responded - my page is
looking good now. Just another 30 or so to do...!
On 11 Jun 2004, at 17:07, Mike Pepper wrote:
Mary,
Firstly, welcome and well done for getting on with table-less design.
Like
the nutty electric zebras :o)
You challenge is to do with padding on the image container. Simply set
that
to 0 --
#banner {
padding: 0;
margin-bottom: 5px;
}
(Incidentally, you don't need to specify what is zero. zero is zero,
so you
won't need 0px, just 0.)
you can also kill the bottom margin if you want a flush fit with the
body.
and then adjust your overall width down by 10px to compensate --
#container {
width: 700px;
\width: 720px;
w\idth: 700px;
...
}
Since the masthead contributes nothing to the accessibility of the
page, you
may want to make it a background image to the banner div by sticking
the
image reference in the CSS using --
#banner {
background: transparent url(../media/webheader.jpg) no-repeat top
right;
padding: 0;
margin-bottom: 5px;
}
Have a good one,
Mike Pepper
Accessible Web Developer
www.seowebsitepromotion.com
www.gawds.org
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Mary Wright
Sent: 11 June 2004 16:08
To: [EMAIL PROTECTED]
Subject: [WSG] First table-free site
I'm new to this list and this is my first post. I'm trying to produce
my first table-free website - tables have been my very dear friends in
the past!
I used the CSS from
http://www.inknoise.com/experimental/layoutomatic.php and it's going
quite well except for one thing - there seems to be an extra 5px
padding above and to the left of the image in the banner div - see
www.zebragraphics.co.uk/newzebra/index.html. CSS is at
www.zebragraphics.co.uk/styles/main.css. This is very much a work in
progress so the links don't work yet, but can anyone tell me where I'm
going wrong? Have checked in FF, Safari and IE5 for Mac, and FF and IE5
for windows - all have same result.
I tried validating the page before I posted this message, but was very
confused by the results - there were 32 instances of: "end tag for
meta ommited, but OMITTAG NO was specified"??? The end tags are
certainly there. I don't know what OMITTAG NO means.
Any help would be much appreciated.
Thanks,
Mary Wright
www.zebragraphics.co.uk
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
Re: [WSG] First table-free site
On Saturday, June 12, 2004, at 01:08 AM, Mary Wright wrote: - there seems to be an extra 5px padding above and to the left of the image in the banner div - Mary - forgot to mention: the overall width of div#container in Safari 1.0.2 is 730px, but you've declared it at 710px - so the extra 'padding' around the banner is actually extra width on the container. Put this together with previous comments from us all and I think you'll crack it. Nick ___ Omnivision. Websight. http://www.omnivision.com.au/ * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *
Re: [WSG] First table-free site
On Saturday, June 12, 2004, at 01:58 AM, Iain Gardiner wrote:
I've had a look at the site and CSS (nice-looking by
the way) and although I am pretty poor at analysing other people's
problems,
I think it might come down to theis rule:
#sidebar-a {
float: left;
width: 100px;
\width: 110px; /* Try removing this line */
w\idth: 100px; /* And this one */
margin: 0;
margin-right: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
}
I assume you want it to be just 100px in width, but in Firefox at
least it
is being rendered as 110px. To my mind this would explain the extra
5px at
either side of the logo. Try without the lines I've indicated above
and see
if that makes a difference.
If Iain's right (and I think he almost is), you should do the same for
the width declarations for div#container as well. Not sure that you've
got the hack right - IE5 can still see the \width declaration with the
leading slash. The w\idth declaration will work for IE5 if the width
needs to be different, but it's not complete See
http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html
for full info on this simplified version of the Box Model hack...
Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
RE: [WSG] First table-free site
Mary,
Firstly, welcome and well done for getting on with table-less design. Like
the nutty electric zebras :o)
You challenge is to do with padding on the image container. Simply set that
to 0 --
#banner {
padding: 0;
margin-bottom: 5px;
}
(Incidentally, you don't need to specify what is zero. zero is zero, so you
won't need 0px, just 0.)
you can also kill the bottom margin if you want a flush fit with the body.
and then adjust your overall width down by 10px to compensate --
#container {
width: 700px;
\width: 720px;
w\idth: 700px;
...
}
Since the masthead contributes nothing to the accessibility of the page, you
may want to make it a background image to the banner div by sticking the
image reference in the CSS using --
#banner {
background: transparent url(../media/webheader.jpg) no-repeat top right;
padding: 0;
margin-bottom: 5px;
}
Have a good one,
Mike Pepper
Accessible Web Developer
www.seowebsitepromotion.com
www.gawds.org
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Mary Wright
Sent: 11 June 2004 16:08
To: [EMAIL PROTECTED]
Subject: [WSG] First table-free site
I'm new to this list and this is my first post. I'm trying to produce
my first table-free website - tables have been my very dear friends in
the past!
I used the CSS from
http://www.inknoise.com/experimental/layoutomatic.php and it's going
quite well except for one thing - there seems to be an extra 5px
padding above and to the left of the image in the banner div - see
www.zebragraphics.co.uk/newzebra/index.html. CSS is at
www.zebragraphics.co.uk/styles/main.css. This is very much a work in
progress so the links don't work yet, but can anyone tell me where I'm
going wrong? Have checked in FF, Safari and IE5 for Mac, and FF and IE5
for windows - all have same result.
I tried validating the page before I posted this message, but was very
confused by the results - there were 32 instances of: "end tag for
meta ommited, but OMITTAG NO was specified"??? The end tags are
certainly there. I don't know what OMITTAG NO means.
Any help would be much appreciated.
Thanks,
Mary Wright
www.zebragraphics.co.uk
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
RE: [WSG] First table-free site
Hi Mary,
Welcome to the group! I've had a look at the site and CSS (nice-looking by
the way) and although I am pretty poor at analysing other people's problems,
I think it might come down to theis rule:
#sidebar-a {
float: left;
width: 100px;
\width: 110px; /* Try removing this line */
w\idth: 100px; /* And this one */
margin: 0;
margin-right: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
}
I assume you want it to be just 100px in width, but in Firefox at least it
is being rendered as 110px. To my mind this would explain the extra 5px at
either side of the logo. Try without the lines I've indicated above and see
if that makes a difference.
Thanks,
Iain
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Mary Wright
Sent: 11 June 2004 16:08
To: [EMAIL PROTECTED]
Subject: [WSG] First table-free site
I'm new to this list and this is my first post. I'm trying to produce
my first table-free website - tables have been my very dear friends in
the past!
I used the CSS from
http://www.inknoise.com/experimental/layoutomatic.php and it's going
quite well except for one thing - there seems to be an extra 5px
padding above and to the left of the image in the banner div - see
www.zebragraphics.co.uk/newzebra/index.html. CSS is at
www.zebragraphics.co.uk/styles/main.css. This is very much a work in
progress so the links don't work yet, but can anyone tell me where I'm
going wrong? Have checked in FF, Safari and IE5 for Mac, and FF and IE5
for windows - all have same result.
I tried validating the page before I posted this message, but was very
confused by the results - there were 32 instances of: "end tag for
meta ommited, but OMITTAG NO was specified"??? The end tags are
certainly there. I don't know what OMITTAG NO means.
Any help would be much appreciated.
Thanks,
Mary Wright
www.zebragraphics.co.uk
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
Re: [WSG] First table-free site
On Saturday, June 12, 2004, at 01:08 AM, Mary Wright wrote: - there seems to be an extra 5px padding above and to the left of the image in the banner div - Hi Mary Looks to me like there's an extra 5px all round the banner img - could it be the padding: 5px declared for the div#banner that's doing it? The 10px padding on the div#container should be enough (I'm assuming the banner img should align L & R with the edges of the grey bar and the blue box). Also, I'm pretty sure (but happy to stand corrected by others on this list) that you can't declare margin: none for img - it should be margin: 0. Nice looking site, though. Hope this helps.., Nick ___ Omnivision. Websight. http://www.omnivision.com.au/ * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *
RE: [WSG] First table-free site
G'day
Your problem with the 5px space around the banner image comes from the CSS:
#banner {
padding: 5px;
(etc)
}
Try setting that padding to 0
Regards
--
Bert Doorn, Better Web Design
www.betterwebdesign.com.au
Fast-loading, user-friendly websites
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
Re: [WSG] First table-free site
> I'm new to this list and this is my first post. I'm trying to produce > my first table-free website - tables have been my very dear friends in > the past! Yes, leaving tables behind gratefuly comes with the knowledge that you've reached a level of CSS knowledge and skill to achieve that. I did mine only a couple of months ago. www.t94xr.net.nz Camz * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *
Re: [WSG] First table-free site
Hi Mary All your meta tags must have a trailing slash because they are considered singleton tags - Marie ~aka~ Vanille ~aka~ Maren Fairhair ~aka~ Empress Sings in the Rain About Certified XHTML Developer - Level 1 Vanille's Place - http://marie-str.com Technicolour Rainbow - http://techrain.ca the FlipSide - http://the-flipside.com > I'm new to this list and this is my first post. I'm trying to produce > my first table-free website - tables have been my very dear friends in > the past! > > I used the CSS from > http://www.inknoise.com/experimental/layoutomatic.php and it's going > quite well except for one thing - there seems to be an extra 5px > padding above and to the left of the image in the banner div - see > www.zebragraphics.co.uk/newzebra/index.html. CSS is at > www.zebragraphics.co.uk/styles/main.css. This is very much a work in > progress so the links don't work yet, but can anyone tell me where I'm > going wrong? Have checked in FF, Safari and IE5 for Mac, and FF and IE5 > for windows - all have same result. > > I tried validating the page before I posted this message, but was very > confused by the results - there were 32 instances of: "end tag for > meta ommited, but OMITTAG NO was specified"??? The end tags are > certainly there. I don't know what OMITTAG NO means. > > Any help would be much appreciated. > > Thanks, > > Mary Wright > www.zebragraphics.co.uk > > * > The discussion list for http://webstandardsgroup.org/ > See http://webstandardsgroup.org/mail/guidelines.cfm > for some hints on posting to the list & getting help > * > * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *
