Re: [WSG] new to css and WSG
Hello Sandra (and hello list too;), I think what I am trying to ask is if I use Frontpage 2003 and make a style sheet. If I want to add tables do I do it with the style sheet and frontpage or just do it in front page. You add the tables to your HTML, as they are content. If you already have table styling in your CSS, the new table will take on that same styling. (I'm not sure about using Frontpage, I don't use it because it fiddles around with the HTML in ways that made me uninstall after using for the first time ;). I understand that you have been working with Frontpage (perhaps in WYSIWYG mode only?) until now and are transitioning to using CSS... which is why I infer that perhaps you may be confused because there are some underlying principles of making webpages with CSS + HTML, that you had no need for up to now -- such as the separation of content/structure (in HTML) and its presentation (in CSS), and how they are brought together. If that is so, I am sure that the kind of questions you are faced with at the moment will vanish pretty quickly once you have introduced yourself to these principles! Since you've been over at westciv already, I can only reccommend taking a look at John's CSS/XHTML-basics courses, a nicely guided and most thorough way to really get into the basic way of thinking about HTML (and CSS). Then come back to the list and ask on ;) HTH Nathalie * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] text and graphic on one line
I use these forsome 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 h1 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 "nbsp" to move it across to the
right is the correct way to do it.
The logo is approx 50 x 48and 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] Roll-Over demo stability
I am trying out rollovers w/o JavaScripts but I notice that in Opera 7, it
flickers.
The below CSS is to give me the flexibility to use image rollovers or for
showing an invisible image upon hovering certain text. This is for my weblog
entries so I do not want to use image background.
.divHover
{
text-align : center;
font-weight : bold;
}
.divHover a:hover
{
background-color : transparent;
}
.divHover a span,
.divHover a:hover span.divHover-before
{
display: none;
padding: 5px;
}
.divHover a:hover span,
.divHover a span.divHover-before
{
display: block;
}
Demo page at http://www.sodesires.com/weblog/archives/11.html
Any comments if this is a correct way or if there are even better way to
achieve the 2 targeted results I want i.e. the flexibility to use image
rollovers or for showing an invisible image upon hovering certain text? How
to fix the Opera flickering issue? It flickers only when I hover over the
image and not the text.
With Regards
Jaime Wong
~~
SODesires Design Team
http://www.sodesires.com
~~
*
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 forsome 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 h1 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 "nbsp" to move it across to the
right is the correct way to do it.
The logo is approx 50 x 48and 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] new to css and WSG
Thank you so much I will do that. Thanks Sandy come and play on the board http://www.artgally.com Come and see the art show http://www.artgally.com/cswart Come and see the poetry show http://www.artgally.com/cswpoetry Come and see the Kid's Art http://theartmania.com Hello Sandra (and hello list too;), If that is so, I am sure that the kind of questions you are faced with at the moment will vanish pretty quickly once you have introduced yourself to these principles! Since you've been over at westciv already, I can only reccommend taking a look at John's CSS/XHTML-basics courses, a nicely guided and most thorough way to really get into the basic way of thinking about HTML (and CSS). Then come back to the list and ask on ;) HTH Nathalie * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
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:
div id=header
img alt=lvs src=Images/star.gif height=50 width=48 /
h1blah blah etc/h1
/div
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 h1 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 nbsp 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
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] opinions on use of css shorthand properties
A good point! By set these values previously, Mark means set these values further up the document tree. For example, if you set font-weight: bold on a container (like a div element), this will be inherited by elements within that container (like content within a p element). In these particular circumstances you would set font-weight: normal on the p element to turn the bold off. However, as Mark says, in most circumstances you would not need to specify font-weight: normal on each element. More on the document tree (critical in coming to terms with CSS) here: http://css.maxdesign.com.au/selectutorial/document_tree.htm Russ One more thing: font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none These are all completely redundant because they are the default values. Unless you have reset these values previously, you don't need to set them to their default values. * The discussion list for http://webstandardsgroup.org/ *
[WSG] Web Content Accessibility Guidelines 2.0 working draft
Web Content Accessibility Guidelines 2.0 - Working Draft Published 11 March 2004 http://www.w3.org/TR/2004/WD-WCAG20-20040311/ * 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
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/ *
[WSG] Overcoming Rejections
What will be the most appropriate way to overcome rejections from clients or bosses when it comes to implementation of site with CSS instead of tables. Rejection such as browser compatibility saying that no worries about that when using tables for layout even when explanations have been given. With Regards Jaime Wong ~~ SODesires Design Team http://www.sodesires.com ~~ * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] text and graphic on one line
Whichlink is that?Top navigation? A friend sent me a screenshot before on his macIE and I know how horrible it is...Irather not look at them lol. I know the contents that is flushed to theextreme right has got to do withfloats 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 thatsite 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!
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
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] Overcoming Rejections
rejections or reservations ? If it's the latter, then any of the various Making a business case for accessibility type articles, extolling the benefits of CSS, plus a reminder that the majority of today's browsers can cope with CSS layouts just fine (except, of course, the boss' wife's Netscape 4.7, and she is often the benchmark). If it's outright rejection...remember that the boss/client is always right. You can't force good things onto them, and in many cases - depending on the audience - a nice hybrid/transitional layout is just fine - and, provided it's valid xhtml, can still be mechanically un-tabled at a later date. Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk http://www.salford.ac.uk -Original Message- From: Jaime Wong [mailto:[EMAIL PROTECTED] Sent: Sat 13/03/2004 23:16 To: WSG - CSS List Cc: Subject: [WSG] Overcoming Rejections What will be the most appropriate way to overcome rejections from clients or bosses when it comes to implementation of site with CSS instead of tables. Rejection such as browser compatibility saying that no worries about that when using tables for layout even when explanations have been given. With Regards Jaime Wong ~~ SODesires Design Team http://www.sodesires.com ~~ * The discussion list for http://webstandardsgroup.org/ * yr,_mjl.
[WSG] small screen rendering tools (plus other useful things)
Hi all A quick troll through the extensionroom at mozdev this lazy sunday afternoon showed up some interesting tools that may be of help when developing/designing/tweaking your next masterpiece: --- SSR (http://disruptive-innovations.com/products/index.html#SSRXPI) quote: Disruptive Innovations is happy to offer you this extension to the Mozilla Application Suite allowing to check if a web site renders well on a cellphone's screen. This addon installs a new menu entry Small Screen Rendering in the View menu. Selecting it toggles on/off the Small Screen Rendering mode. This does not work with pages using framesets. This works quite well but I doubt it emulates various user agent quirks. The results mirror closely some sites I have viewed with a Palm Tungsten. The stylesheet can be found in /chrome/ssr.jar of your installation directory - it basically resizes to 176 px max-width, flattens tables and removes iframes and other uglies. I suppose you could edit this to make one for 160px, one for 320px width and others to attempt an emulation of various devices (such as Russ' famous fridge). Again, it emulates the width, not the various UA quirks. IE view allows you to launch a page into IE from a Mozilla browser, from the context menu. http://extensionroom.mozdev.org/more-info/ieview Web Page documenter http://wpdocumenter.mozdev.org/ Allows you to produce a document containing items found in the current page. Only at v0.0.1 but looks pretty useful for testing purposes - you can output form values, inline styles, img tags and various attributes etc etc. I'll put these up on the site when I have some time. Cheers James * The discussion list for http://webstandardsgroup.org/ *
