Re: [WSG] text and graphic on one line PROBLEM SOLVED!
Michael Ahh I see you took you dyslexia medicine. Now you've got it right ;-) Leo * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] text and graphic on one line
Jamie Actually the layout seems to degrade nicely on the elements, and most were presented just fine on the mac. MSIE doesn't play fair no matter what computer you use. The broken link was the only one I found to the sitemap and it was on a page one or two clicks deep. I don't remember which ;-) Leo * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] text and graphic on one line PROBLEM SOLVED!
Okay, yes thanks, I get dyslectic at times. AuntySpam, SLP Coordinator, pspug.org http://www.pspug.org/edu/edu.shtml http://www.pspug.org/edu/slp/assign.shtml http://www.pspug.org/edu/slp/slpparticipants.htm - Original Message - From: "russ weakley" <[EMAIL PROTECTED]> To: "Web Standards Group" <[EMAIL PROTECTED]> Sent: Saturday, March 13, 2004 3:56 PM Subject: Re: [WSG] text and graphic on one line PROBLEM SOLVED! AuntySpam, Apologies, but you have it backwards. An individual ID can appear ONCE only on a page. An individual class can appear as many times as needed on a page. Russ > Or even the other way around perhaps? > > One use on a page : ID > Multiple use : class > > As I understand it, you can only have one selector labelled with any > particular ID on a page, but you can have as many selectors with the same > class as you like. You can have dozens of selectors labelled with IDs > but not two with the same ID. Yes? > > Cheers > Mike Kear > Windsor, NSW, Australia > AFP Webworks > http://afpwebworks.com > > > > -Original Message- > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On > Behalf Of Brewnetty (AuntySpam) > Sent: Sunday, 14 March 2004 9:50 AM > To: [EMAIL PROTECTED] > Subject: Re: [WSG] text and graphic on one line PROBLEM SOLVED! > > This is the way I understand it: > When you want to use any style more than once, you use ID > When you want it to apply to one element only, you use class. > Is that too simplified? > > AuntySpam, SLP Coordinator, pspug.org > > http://www.pspug.org/edu/edu.shtml > http://www.pspug.org/edu/slp/assign.shtml > http://www.pspug.org/edu/slp/slpparticipants.htm * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] text and graphic on one line PROBLEM SOLVED!
AuntySpam, Apologies, but you have it backwards. An individual ID can appear ONCE only on a page. An individual class can appear as many times as needed on a page. Russ > Or even the other way around perhaps? > > One use on a page : ID > Multiple use : class > > As I understand it, you can only have one selector labelled with any > particular ID on a page, but you can have as many selectors with the same > class as you like. You can have dozens of selectors labelled with IDs > but not two with the same ID. Yes? > > Cheers > Mike Kear > Windsor, NSW, Australia > AFP Webworks > http://afpwebworks.com > > > > -Original Message- > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On > Behalf Of Brewnetty (AuntySpam) > Sent: Sunday, 14 March 2004 9:50 AM > To: [EMAIL PROTECTED] > Subject: Re: [WSG] text and graphic on one line PROBLEM SOLVED! > > This is the way I understand it: > When you want to use any style more than once, you use ID > When you want it to apply to one element only, you use class. > Is that too simplified? > > AuntySpam, SLP Coordinator, pspug.org > > http://www.pspug.org/edu/edu.shtml > http://www.pspug.org/edu/slp/assign.shtml > http://www.pspug.org/edu/slp/slpparticipants.htm * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] text and graphic on one line PROBLEM SOLVED!
Or even the other way around perhaps? One use on a page : ID Multiple use : class As I understand it, you can only have one selector labelled with any particular ID on a page, but you can have as many selectors with the same class as you like. You can have dozens of selectors labelled with IDs but not two with the same ID. Yes? Cheers Mike Kear Windsor, NSW, Australia AFP Webworks http://afpwebworks.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Brewnetty (AuntySpam) Sent: Sunday, 14 March 2004 9:50 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] text and graphic on one line PROBLEM SOLVED! This is the way I understand it: When you want to use any style more than once, you use ID When you want it to apply to one element only, you use class. Is that too simplified? AuntySpam, SLP Coordinator, pspug.org http://www.pspug.org/edu/edu.shtml http://www.pspug.org/edu/slp/assign.shtml http://www.pspug.org/edu/slp/slpparticipants.htm * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] text and graphic on one line
Which link is that? Top navigation? A friend sent me a screenshot before on his mac IE and I know how horrible it is...I rather not look at them lol. I know the contents that is flushed to the extreme right has got to do with floats but for the navigation (menu) at the top, I have no idea why it is not showing as inline. With Regards Jaime Wong ~~ SODesires Design Team http://www.sodesires.com ~~ ---Original Message--- From: [EMAIL PROTECTED] Date: 03/14/04 07:01:53 To: [EMAIL PROTECTED] Subject: Re: [WSG] text and graphic on one line Jamie > from someone in this list (sorry I forgot who but he's kind enough to > let me know) told me that site works in Safari for Mac I sent you that message. The link to the sitemap was broken in IE Mac but not in Safari. This probably means that IE is choking on the link's syntax. It's probably not a cross-platform issue. Leo * The discussion list for http://webstandardsgroup.org/ * .
Re: [WSG] text and graphic on one line
Jamie from someone in this list (sorry I forgot who but he's kind enough to let me know) told me that site works in Safari for Mac I sent you that message. The link to the sitemap was broken in IE Mac but not in Safari. This probably means that IE is choking on the link's syntax. It's probably not a cross-platform issue. Leo * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] text and graphic on one line PROBLEM SOLVED!
This is the way I understand it: When you want to use any style more than once, you use ID When you want it to apply to one element only, you use class. Is that too simplified? AuntySpam, SLP Coordinator, pspug.org http://www.pspug.org/edu/edu.shtml http://www.pspug.org/edu/slp/assign.shtml http://www.pspug.org/edu/slp/slpparticipants.htm * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] text and graphic on one line
This site is not compatible with Mac running on IE or NS but feedback from someone in this list (sorry I forgot who but he's kind enough to let me know) told me that site works in Safari for Mac. I have yet to find time to fix the site for Mac IE and NS but will do it soon...will be hard because I have no Mac :/
As for the JS..hmm have no idea why it crashes the browser! Any idea which JS is doing that? I have additional JS for the weblog (movable type JS) while the rest of the site uses a global JS file.
With Regards
Jaime Wong
~~
SODesires Design Team
http://www.sodesires.com
~~
---Original Message---
From: [EMAIL PROTECTED]
Date: 03/14/04 04:09:15
To: [EMAIL PROTECTED]
Subject: Re: [WSG] text and graphic on one line
On Saturday, Mar 13, 2004, at 02:13 US/Pacific, Jaime Wong wrote:
> I use these for some fancy header.
>
> .icon-Gal
> {
> background-image : url(icon_gal.gif);
> background-repeat : no-repeat;
> background-position : 125px;
> padding-top : 1em;
> border-bottom : 1px dotted #448687;
> padding-left : 3px;
> }
>
> You can preview it at this page http://www.sodesires.com/about - the
> headers on the left column.
This page doesn't seem to be loading right on IE running on OSX. The
content is pushed far right leaving the white area empty. I'm assuming
that the white area is reserved for the content?
>
> OR
>
> .blog-EntryDateHeader
> {
> font-family : Verdana, Arial, Helvetica, sans-serif;
> font-size : 1.3em;
> font-weight : bold;
> color: #BBB8A0;
> letter-spacing : 2px;
> text-transform : capitalize;
> padding-left : 50px;
> background-image : url(rule_entries.gif);
> background-repeat : no-repeat;
> background-position : left bottom;
> }
>
> This is the Entry's date header at http://www.sodesires.com/weblog
This page crashes the browser completely while your first _javascript_
library is loading.
>
>
> Hope it helps in giving you more ideas. Not sure if it is a good way
> though because I normally just play around with my css and so happens
> that this works.
>
> With Regards
> Jaime Wong
Re: [WSG] text and graphic on one line PROBLEM SOLVED!
ID's can be applied to many html elements in the same way as classes. Is there any advantage using ID's instead of classes? Yes and no, depending on your needs: http://css.maxdesign.com.au/selectutorial/advanced_idclass.htm Of course, the aim for all web developers is to use as few classes and id's as possible on a page - to keep the code clean and lean. One of the few times when less class actually shows more class, if you know what I mean :) Russ > I also had a look at your examples Russ, I knew you could have ''h1 class'' > but didn't realise you could use "id" that way, thought it was only with > div. So today I have learnt two things. > * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] text and graphic on one line
On Saturday, Mar 13, 2004, at 02:13 US/Pacific, Jaime Wong wrote:
I use these for some fancy header.
.icon-Gal
{
background-image : url(icon_gal.gif);
background-repeat : no-repeat;
background-position : 125px;
padding-top : 1em;
border-bottom : 1px dotted #448687;
padding-left : 3px;
}
You can preview it at this page - the headers on the left column.
This page doesn't seem to be loading right on IE running on OSX. The content is pushed far right leaving the white area empty. I'm assuming that the white area is reserved for the content?
OR
.blog-EntryDateHeader
{
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 1.3em;
font-weight : bold;
color: #BBB8A0;
letter-spacing : 2px;
text-transform : capitalize;
padding-left : 50px;
background-image : url(rule_entries.gif);
background-repeat : no-repeat;
background-position : left bottom;
}
This is the Entry's date header at
This page crashes the browser completely while your first javascript library is loading.
Hope it helps in giving you more ideas. Not sure if it is a good way though because I normally just play around with my css and so happens that this works.
With Regards
Jaime Wong
Re: [WSG] text and graphic on one line PROBLEM SOLVED!
Thank you for your reply Russ, this afternoon I went back and had another
look at it and discovered that I had written float: left instead of right.
Is my face red!!! I must have looked at it a hundred times and didn't really
see it. What I ended up doing was:
blah blah etc
and had a a style set up:
img {
border: 0;
float: right;
padding-top: 5px;
}
I had thought of using background-image but had seen this way somewhere and
thought I would try it.
I also had a look at your examples Russ, I knew you could have ''h1 class''
but didn't realise you could use "id" that way, thought it was only with
div. So today I have learnt two things.
Thanks again for your answer Russ and taking the time to do the samples.
Regards - Maureen
> Maureen,
>
> The main question would be this; do you want the logo to be included on
the
> page as essential content or do you see it as part of the presentation -
if
> it is the latter, then you are probably best off putting it inside the CSS
> rather than on the page.
>
> Once this decision is made, there are many way to achieve the result you
> need. One way would be to place the logo as a background image inside the
> div and align it to the right.
>
> Another way would be to place the logo inside the but wrap it in a
span
> and set the span to float right.
>
> Here are some examples in action for you - the first uses an inline
image -
> the second uses a background image.
> http://www.maxdesign.com.au/jobs/css/maureen/
>
>
> HTH
> Russ
>
>
> > Hi - I have been trying to create a div header with background colour,
> > border etc that has text (3 words) on the left and a logo on the same
line
> > but sitting on the right and I can't seem to get it right. I tried
including
> > the logo inside the h1 tags and this worked except for the position of
the
> > logo and I don't think that using repeated " " to move it across to
the
> > right is the correct way to do it.
> >
> > The logo is approx 50 x 48 and my code for the header is:
> >
> > #header{
> > background-color: #ffd2cd;
> > margin: 20px;
> > height: 60px;
> > border: 1px solid #666;
> > padding: 0 15px 10px 15px;
> > }
> >
> > I would appreciate any help you can give.
> >
> > Regards Maureen
>
> *
> The discussion list for http://webstandardsgroup.org/
> *
>
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] text and graphic on one line
rem_padding-left should be padding-left!
Don't know how rem_padding-left got there.
With Regards
Jaime Wong
~~
SODesires Design Team
http://www.sodesires.com
~~
---Original Message---
From: [EMAIL PROTECTED]
Date: 03/13/04 18:27:31
To: [EMAIL PROTECTED]
Subject: Re: [WSG] text and graphic on one line
I use these for some fancy header.
.icon-Gal { background-image : url(icon_gal.gif); background-repeat : no-repeat; background-position : 125px; padding-top : 1em; border-bottom : 1px dotted #448687; rem_padding-left : 3px; }
You can preview it at this page http://www.sodesires.com/about - the headers on the left column.
OR
.blog-EntryDateHeader { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 1.3em; font-weight : bold; color: #BBB8A0; letter-spacing : 2px; text-transform : capitalize; rem_padding-left : 50px; background-image : url(rule_entries.gif); background-repeat : no-repeat; background-position : left bottom; }
This is the Entry's date header at http://www.sodesires.com/weblog
Hope it helps in giving you more ideas. Not sure if it is a good way though because I normally just play around with my css and so happens that this works.
With Regards
Jaime Wong
~~
SODesires Design Team
http://www.sodesires.com
~~
---Original Message---
From: [EMAIL PROTECTED]
Date: 03/13/04 13:21:02
To: Web Standards Group
Subject: Re: [WSG] text and graphic on one line
Maureen,
The main question would be this; do you want the logo to be included on the
page as essential content or do you see it as part of the presentation - if
it is the latter, then you are probably best off putting it inside the CSS
rather than on the page.
Once this decision is made, there are many way to achieve the result you
need. One way would be to place the logo as a background image inside the
div and align it to the right.
Another way would be to place the logo inside the but wrap it in a span
and set the span to float right.
Here are some examples in action for you - the first uses an inline image -
the second uses a background image.
http://www.maxdesign.com.au/jobs/css/maureen/
HTH
Russ
> Hi - I have been trying to create a div header with background colour,
> border etc that has text (3 words) on the left and a logo on the same line
> but sitting on the right and I can't seem to get it right. I tried including
> the logo inside the h1 tags and this worked except for the position of the
> logo and I don't think that using repeated " " to move it across to the
> right is the correct way to do it.
>
> The logo is approx 50 x 48 and my code for the header is:
>
> #header{
> background-color: #ffd2cd;
> margin: 20px;
> height: 60px;
> border: 1px solid #666;
> padding: 0 15px 10px 15px;
> }
>
> I would appreciate any help you can give.
>
> Regards Maureen
*
The discussion list for http://webstandardsgroup.org/
*
.
Re: [WSG] text and graphic on one line
I use these for some fancy header.
.icon-Gal { background-image : url(icon_gal.gif); background-repeat : no-repeat; background-position : 125px; padding-top : 1em; border-bottom : 1px dotted #448687; padding-left : 3px; }
You can preview it at this page http://www.sodesires.com/about - the headers on the left column.
OR
.blog-EntryDateHeader { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 1.3em; font-weight : bold; color: #BBB8A0; letter-spacing : 2px; text-transform : capitalize; padding-left : 50px; background-image : url(rule_entries.gif); background-repeat : no-repeat; background-position : left bottom; }
This is the Entry's date header at http://www.sodesires.com/weblog
Hope it helps in giving you more ideas. Not sure if it is a good way though because I normally just play around with my css and so happens that this works.
With Regards
Jaime Wong
~~
SODesires Design Team
http://www.sodesires.com
~~
---Original Message---
From: [EMAIL PROTECTED]
Date: 03/13/04 13:21:02
To: Web Standards Group
Subject: Re: [WSG] text and graphic on one line
Maureen,
The main question would be this; do you want the logo to be included on the
page as essential content or do you see it as part of the presentation - if
it is the latter, then you are probably best off putting it inside the CSS
rather than on the page.
Once this decision is made, there are many way to achieve the result you
need. One way would be to place the logo as a background image inside the
div and align it to the right.
Another way would be to place the logo inside the but wrap it in a span
and set the span to float right.
Here are some examples in action for you - the first uses an inline image -
the second uses a background image.
http://www.maxdesign.com.au/jobs/css/maureen/
HTH
Russ
> Hi - I have been trying to create a div header with background colour,
> border etc that has text (3 words) on the left and a logo on the same line
> but sitting on the right and I can't seem to get it right. I tried including
> the logo inside the h1 tags and this worked except for the position of the
> logo and I don't think that using repeated " " to move it across to the
> right is the correct way to do it.
>
> The logo is approx 50 x 48 and my code for the header is:
>
> #header{
> background-color: #ffd2cd;
> margin: 20px;
> height: 60px;
> border: 1px solid #666;
> padding: 0 15px 10px 15px;
> }
>
> I would appreciate any help you can give.
>
> Regards Maureen
*
The discussion list for http://webstandardsgroup.org/
*
.
Re: [WSG] text and graphic on one line
Hi Maureen
How about making the logo a background-image with background-position :
top right; in the box you wish? If the image adds meaning to the page
(i.e requires an alt tag for people browsing without images) then this
is probably not the best thing to do. If the heading/text conveys the
meaning of the logo then you'll be ok when images are turned off /
screen readers are used.
Cheers
James
Maureen Beattie wrote:
Hi - I have been trying to create a div header with background colour,
border etc that has text (3 words) on the left and a logo on the same line
but sitting on the right and I can't seem to get it right. I tried including
the logo inside the h1 tags and this worked except for the position of the
logo and I don't think that using repeated " " to move it across to the
right is the correct way to do it.
The logo is approx 50 x 48 and my code for the header is:
#header{
background-color: #ffd2cd;
margin: 20px;
height: 60px;
border: 1px solid #666;
padding: 0 15px 10px 15px;
}
I would appreciate any help you can give.
Regards Maureen
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] text and graphic on one line
Maureen,
The main question would be this; do you want the logo to be included on the
page as essential content or do you see it as part of the presentation - if
it is the latter, then you are probably best off putting it inside the CSS
rather than on the page.
Once this decision is made, there are many way to achieve the result you
need. One way would be to place the logo as a background image inside the
div and align it to the right.
Another way would be to place the logo inside the but wrap it in a span
and set the span to float right.
Here are some examples in action for you - the first uses an inline image -
the second uses a background image.
http://www.maxdesign.com.au/jobs/css/maureen/
HTH
Russ
> Hi - I have been trying to create a div header with background colour,
> border etc that has text (3 words) on the left and a logo on the same line
> but sitting on the right and I can't seem to get it right. I tried including
> the logo inside the h1 tags and this worked except for the position of the
> logo and I don't think that using repeated " " to move it across to the
> right is the correct way to do it.
>
> The logo is approx 50 x 48 and my code for the header is:
>
> #header{
> background-color: #ffd2cd;
> margin: 20px;
> height: 60px;
> border: 1px solid #666;
> padding: 0 15px 10px 15px;
> }
>
> I would appreciate any help you can give.
>
> Regards Maureen
*
The discussion list for http://webstandardsgroup.org/
*
[WSG] text and graphic on one line
Hi - I have been trying to create a div header with background colour,
border etc that has text (3 words) on the left and a logo on the same line
but sitting on the right and I can't seem to get it right. I tried including
the logo inside the h1 tags and this worked except for the position of the
logo and I don't think that using repeated " " to move it across to the
right is the correct way to do it.
The logo is approx 50 x 48 and my code for the header is:
#header{
background-color: #ffd2cd;
margin: 20px;
height: 60px;
border: 1px solid #666;
padding: 0 15px 10px 15px;
}
I would appreciate any help you can give.
Regards Maureen
*
The discussion list for http://webstandardsgroup.org/
*
