PDA

View Full Version : Need metatags and css for free?


motorwatchercounter
12-16-2004, 05:58 PM
Hi all,

Those avid forum readers amongst you will know how important it is to get your mega tags right. I have just loaded a meta tag generator on my site. It's free. The direct link (to cut out the bits you aren't interested in) is:
www.motorwatcher.net/tag/index.php Type in what you need, click the generate button, copy the code and paste it into your site between the <head> </head> tags. :lol:

motorwatchercounter
12-18-2004, 12:04 AM
New: Need to generate some CSS? Easy pick, cut and paste? Once again it's free.
http://www.motorwatcher.net/css/css.php :lol:

Proteus
12-18-2004, 12:26 AM
Isn't this something called

* * * * * SPAM ? * * * * *

Oh well... :wink:

motorwatchercounter
12-18-2004, 12:58 AM
Hi Proteus,

I am sorry you feel that way. I admit I am an avid poster on the forum however, I think that this is the first time that I have said that there was something on my site. I thought it would be usefull and free. There is nothing there to buy. I am even providing direct links to save people the bother of navigating and having the "kudos" of bumping up my stats.

If anyone else thinks I am spaming, please let me know and I will remove the thread.

Now a bit of attack & defend.

These may interest you.
http://forum.statcounter.com/phpBB2/viewtopic.php?t=2777
http://forum.statcounter.com/phpBB2/viewtopic.php?t=2816
http://forum.statcounter.com/phpBB2/viewtopic.php?t=2943
http://forum.statcounter.com/phpBB2/viewtopic.php?t=2765
http://forum.statcounter.com/phpBB2/viewtopic.php?t=2728
http://forum.statcounter.com/phpBB2/viewtopic.php?t=2678
http://forum.statcounter.com/phpBB2/viewtopic.php?t=2665
http://forum.statcounter.com/phpBB2/viewtopic.php?t=2558
http://forum.statcounter.com/phpBB2/viewtopic.php?t=2545
http://forum.statcounter.com/phpBB2/viewtopic.php?t=2459
http://forum.statcounter.com/phpBB2/viewtopic.php?t=2430
http://forum.statcounter.com/phpBB2/viewtopic.php?t=2191
http://forum.statcounter.com/phpBB2/viewtopic.php?t=1793
http://forum.statcounter.com/phpBB2/viewtopic.php?t=1834

Couldn't be arsed to look for any more.

http://www.motorwatcher.net/spam.gif :wink:

Nomad
12-18-2004, 01:00 AM
Good idea! but please put them in the right order!

title
charset/charater encoding
css link
then any of the other stuff
keywords
description

The first 3 and the last two being of particular importance. Most of the others are now ignored by browsers but they read in the order I have given above..

~ ;)

edit: & sorry talk about the kettle calling the fire black...I often see direct references to the fix it/review site *coughs* nope I wouldn't consider this spam :)

motorwatchercounter
12-18-2004, 01:12 AM
Hi Nomad,

Thanks for the tag order. I may put a doctype in as an option. Can you point me to a list (yes I know they are W3C).

Cheers

:lol:

Nomad
12-18-2004, 01:28 AM
Yeah - that would be a real bonus! I'll pop over W3C and get them but I have most of them anyway. You can forget the older one's really i.e. pre html 4.0, most are now depreceated to an extent as to be un-usable really.

Maybe we could organise a simple 'Correct Construction of an html/xhtml' document page.

I'll edit back here with the right DTD's :)

edit:
(Ah what the hell - I'll pop em in anyway)

HTML/XHTML DTD's

HTML 2.0
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Interesting here - they dropped the HTML 4.0 DTD, I'll investigate the reason why, anyway, next is 4.01

HTML 4.01 (Strict/Transitional/Frameset)
Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">


XHTML 1.0 (Strict/Transitional/Frameset)

Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 (Strict Only)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


After this you move into a mairade of other types of DTD which are not normally used by WebMasters/Site Builders.

*NOTE* Please ensure you use the correct DTD in relation to the coding of your document. For instance, using xhtml 1.0 Strict with the html 4.01 Transitional coding. This would confuse the Browser because it has been told to read an 'xhtml' document but is given html 4.01 code to read. It then has to try and 'Guess' the coding. The same applys for not using the DTD encoding.

A full list is available here,
W3C List of DTD's (http://www.w3.org/QA/2002/04/valid-dtd-list.html#full)

Of note also is this on that page but I'll paste hear as a resource,



Authoring tools MUST NOT use the following list.

HTML 4.0
http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd
http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd
http://www.w3.org/TR/1998/REC-html40-19980424/frameset.dtd
HTML 4.01
http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd
http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd
http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd
XHTML 1.0
http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd
http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd
http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-frameset.dtd
XHTML 1.1
http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11.dtd



There you go Motorwatch - Hope that helps - Let me know if you need any help and when it's finished please and I'll make a post over at my own place - maybe just use it as a direct resource for my up-coming HTML/XHTML section I have planned. :)

motorwatchercounter
12-18-2004, 01:33 AM
Hi Nomad,

No problems. May need a short desc for the option drop down and then relative full code to keep the W3C police ( :wink: ) and yourself happy.

:lol:

motorwatchercounter
12-18-2004, 02:19 AM
Thanks for the edit Nomad, Just a bit worried that people may choose the wrong one so may have to have a caveat to say, if in doubt, cut it out, to apply to any of the tags. I will get the order shuffled. Was going to do it now but need to make sure all is OK and do it once, properly.

Won't take long so should be there over the weekend. :lol:

JWJ
12-18-2004, 11:02 AM
What perfect timing .... just what I need :D

First off, NO ... I do not consider this to be spam.

Now, I had already decided to use your meta tag generator because I'm absolutely certain that the search engines are not paying as much attention to my site as they could, and I'm sure that poor/missing tags is the reason. Not knowing enough about such things, a generator is heaven sent as far as I'm concerned.

However, I decided to address W3C issues but ran into a brick wall with regards to DOCTYPE. My Frontpage 2003 doesn't insert a DOCTYPE, nor tell me which version of HTML it's using, so I don't know which DTD to use. Any suggestions as to how I find out would be most gratefully received.

As soon as I have that figured, then a generator that also provides a DOCTYPE declaration would be truly amazing, so I say leave the bloody wallpapering. :D

motorwatchercounter
12-18-2004, 11:17 AM
Hi John,

7 rolls to go mate. Sorry but orders are orders.

I should have this up and running this weekend as well. Thanks to Nomad for the types and order I will get the structure right. :lol:

validate using www.w3c.org (I can almost sense Nomad smiling here) Once the doctype has been added just pick the one that they tell you is OK.

JWJ
12-18-2004, 11:29 AM
7 rolls to go mate. Sorry but orders are orders.
I understand .... I'm being dragged off to the shops :cry:
validate using www.w3c.org (I can almost sense Nomad smiling here) Once the doctype has been added just pick the one that they tell you is OK.
Thanks for that, I'll give it a go ....... when I get back :(

Cheers :D

motorwatchercounter
12-18-2004, 11:37 AM
Mine has gone to Lakeside, Thurruck. On the last weekend before Christmas :shock: Probibly won't see her for hours :D or until here purse and cards are maxed out :? .

Saves me a trip :lol: :lol: :lol: :lol:

JWJ
12-18-2004, 12:27 PM
LOL ... lucky you :lol:

Arne
12-18-2004, 02:41 PM
When testing the "CSS converter" I notice an error in the output! :!:
.mystyle {font-size="16"}
In CSS you must set a value for the size, just "16" is not enough in this example. It should be "16" something, like "160%" (procent) "1.6em" or even "16px" is better than "16 nothing" :wink:

motorwatchercounter
12-18-2004, 02:55 PM
Thanks Arne,

What is the best or most popular? I will add this to the Variables.

:lol:

Arne
12-18-2004, 04:55 PM
Thanks Arne,
What is the best or most popular? I will add this to the Variables.
:lol:

First of all, I missed one more error in the output I used as an example. You must change all the equal signs ( = ) to colons ( : ) so the browsers understand the CSS, where the "equal" is not used as in HTML 8)

For the font size percent and "em" is prefered equaly, because the visitor can set the prefered size in the browser if needed. The "px" can be used for other purposes, and "pt" for a separate printer friendly version of the screen page.

As you probably know, in HTML "font size=3" is the default "normal" size. In CSS "100%" and "1em" is the default "normal" size, and gives the same size as size 3 in HTML.

BTW, Great idea to give this service to "not so advanced" web developers! :D (here I would like to use a "thumbs up" emoticon, but can't find it on this forum)

webado
12-18-2004, 05:12 PM
BTW, Great idea to give this service to "not so advanced" web developers! :D (here I would like to use a "thumbs up" emoticon, but can't find it on this forum)
As a CSS challenged webbie, I second that :idea: :!:

And thanks, Arne, for clarifying the px vs em vs pt vs % thing. I've mostly seen px and %. Never % for fonts thowg. The px bugs me no end as it is fixed, thus I'd concluded that once you use css, goodbye user defined text size.

China Tea
12-18-2004, 05:32 PM
To comment on the thread about free tools . . . .

I was the first to post a link to Motorwatcher's meta tag generator. I did not mean to advertise (for something free, anyway) . . . I just thought it would help other challenged people like me. I am a newbie and I appreciate free tools like that. I would rather use tools from people I know who know their business than from sites I really do not know anything about. . . I'm talking about something like trust, which to me is very important!

Sometimes I post links about my site too :oops: but only because I feel proud to have taken one little step . . . and whenever I do that, I want to share it first with people who care enough to watch my growth . . . :D

Merry Christmas!!!

China Tea

motorwatchercounter
12-18-2004, 06:13 PM
All comments taken on board and welcomed. I am sure that together we can get things right.

Not for now but I woulder if there is any mileage in creating a script to generate the tags and internal sheet together to give a result something like;

<!DOCTYPE HTML PUBLIC "">
<html>
<head>
<title> Title </title>
<meta tags">
<style type="text/css">
<!--
BODY A:link { font-family: Arial, Verdana, Serif; font-size:10px; font-weight:normal; font-style:normal; text-decoration:none; font-variant:normal; }
-->
</style>
</head>
<body>
</body>
</html>

Or keep css seperate?

Nomad
12-18-2004, 07:20 PM
(I can almost sense Nomad smiling here) ;) lol

jwj? just checked your page ..Slight problems nothing hard to clear up.

ok first we need to place your Doc type/DTD correctly. This is allways first but before you 'Open' your html document tags. Putting the DTD inside the opening tag confuses the checking parser engine.

So,


DTD
<html>
<head>
then yout title
then meta tags
then close the head
</head>

So yours would be

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>John W. Johnston, Northampton, England</title>
<meta http-equiv="Content-Language" content="en-gb">
<meta name="keywords" content="John,Johnston,Northampton,England,Accountant,Water colours,Pencil,Photographs,Comparisons,Software Design,Ponderables,Northampton,History,inspiration ,poems,stories,humour">
<meta name="description" content="Watercolours, drawings and a miscellany of poems, stories and trivia.">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<style fprolloverstyle>A:hover {color: #FF0000; font-weight: bold}
</style>
</head>



Actually looking over the code you have a cross over of html 4.0 and html 4.01 from what I can see.

The problem with microsoft FP is it doesn't write the basic stuff correctly, adds stuff in that is not needed and makes a general mess of layout because it is configured to work best with I.E. This goes hand in hand with the myraid of problems with I.E.

Most of it was down to what was known as the 'Box Model' problem. If a page was built in I.E. it looked brilliant but open it in other browsers and it would look a mess and vice versa. It happened because microjerk decided to sod the standards and 'Be Individual'. Thank fully they saw sence and corrected the error in I.E. 6.0 and above. But the problem still exists if there is no DTD present. I.E. then will fall back on the pre I.E. 6.0 models and the need of the likes of the 'Tan hack' would be needed to correct I.E's problems.

Anyway, motorwatcher? best make a clear indication of that. That the DTD is placed first, then the html tag is opened, then head etc etc ...

:)

JWJ
12-18-2004, 07:31 PM
Wow! Thanks for doing that. It is very much appreciated. I'll make the changes just as soon as I can. Thanks a million.

motorwatchercounter
12-18-2004, 08:04 PM
Thanks Arne,
What is the best or most popular? I will add this to the Variables.
:lol:

First of all, I missed one more error in the output I used as an example. You must change all the equal signs ( = ) to colons ( : ) so the browsers understand the CSS, where the "equal" is not used as in HTML

For the font size percent and "em" is prefered equaly, because the visitor can set the prefered size in the browser if needed.

OK I think this is working OK now. I have made the text "em" format and have gone from .4em to 2em based on this;
http://4ums.com/tools/font-size_em_reference.html

Any other bugs, please let me know. Any other texts also.

On to the tags script.

:lol:

Arne
12-18-2004, 09:27 PM
OK I think this is working OK now. I have made the text "em" format and have gone from .4em to 2em based on this;
http://4ums.com/tools/font-size_em_reference.html
Any other bugs, please let me know. Any other texts also.
On to the tags script. :lol:

You should not really encourage anybody to use .4em or .5em since the size is unreadable for almost everybody. Not even .6em should be used and .7em only for unimportent texts, like the footer. :wink:
I suggest you take those out and add 2.1em and 2.2em to the list, because the bigger sizes can be used for headlines ( <h1> ) sometimes.

motorwatchercounter
12-21-2004, 05:32 PM
Hi all,

Arne - I have taken out the smaller texts and added a few larger one, so there is a larger range now for the CSS.

www.motorwatcher.net/css/css.php

Nomad - Meta tag document type is now in. I had a few problems as PHP reads some chars required as text. All sorted now so can you see if I have it right please?

www.motorwatcher.net/tag/index.php

Cheers :lol:

All feedback or additions welcomed.

Arne
12-21-2004, 09:05 PM
Hi all,
Arne - I have taken out the smaller texts and added a few larger one, so there is a larger range now for the CSS.

Sorry, maybee I don't understand how it is supposed to be done. But if I make a HTML style input like "font size=6" I get it converted to
.mystyle {font-size="6"}
I'm sorry, but that's not correct CSS. First of all, "6" what? Percent, "em", "px" or something else? As you know the font size "6" in HTML is a very large font. But in CSS it's a very tiny size if it's "6%" or "6px", but very large if it's "6em". So what ever the browser is guessing here, it will be wrong.

I still see the same values in the drop down list for font size in the "[Get CSS style(s)]" part of the page? I tried to reload, with no change.

About the meta tags, I suggest you leave out the "windows 1250" from the character set list. That set is a windows only set, and works bad (or not at all) on other OS's like Mac and Linux. So the best is not to use it and propose "utf-8" as an option in it's place. That's an universal set that can be used with almost any language in the world.

motorwatchercounter
12-21-2004, 09:26 PM
Hi Arne,

I have uploaded all of the files. The dropdown should start from .7em now. Can you let me know if it is OK now please :lol:

If there is a problem, let me know what heading it is in.

Thanks.

Arne
12-22-2004, 09:59 AM
Hi Arne,
I have uploaded all of the files. The dropdown should start from .7em now. Can you let me know if it is OK now please :lol:

Hi MWC, looks OK now. Starts from .7em and goes up to 2.4em :wink:

Nomad
12-22-2004, 05:28 PM
hi guy's Happy Solstice for yesterday ^_^

Page is perfect motorwatcher. ok the css thing you mention above. i.e. inline or not. (Inline is where you use the <style> tag just before you close the head tag).
The whole point of css is to get it of browser. So inline css is not as far as I know going to be allowed in xhtml 2.0 and theres very little in xhtml 1.0/1.1.

So just one addition to your head generator is the addition of the css link.


<link rel="stylesheet" href="css_folder/name_of_ccs_file.css" type="text/css" />



Where 'css_folder' = A created folder named css for containing your css files neat and tidily.

And where 'name_of_css_file.css' = the name you call your css file.


This follows your 'Charset' or 'Character Set' . Then the rest of your meta tags or as you have it placed in your generator there and ending as you have with 'keywords' then 'description'. Maybe you could add the option for html 4.0/4.01 and a seperate option for xhtml as there is a difference.

All that needs to occur to turn the html 4.0/4.01 to xhtml compliancy is the 'Implicit' closing of each tag like so;


<html>
<head>
<title>Lock And Key - F A Q</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/name_of_file.css" />
rest of mete tags as you have them
</head>
<body>
body content
</body>
</html>


notice the added space and forward slash " /> "

Get's big thumbs up from me :)

How's the css generator coming along?

motorwatchercounter
12-22-2004, 06:06 PM
Hi Nomad,

I understand the other options and will sort it. One question/consideration, I can include the line;

<link rel="stylesheet" href="css_folder/name_of_ccs_file.css" type="text/css" />

The problem is the href. I will not know what the path or filename is. I could as for it in a form box (remember I am learning as I go) or put the line in statically and tell people to change the ref.

I have a PHP book on my christmas list (I don't have any mates or get out enough) so all is possible.

The CSS seems to be working fine (Cheers Arne for the critique). I am working on getting the whole CSS permitations on one page so people will be able to define text, background, borders and padding (I don't use CSS so If there are any more please let me know).

The present file which is work in progress is at;
http://www.motorwatcher.net/cssboarder.php

The first 2 optiuons generate at the moment. I hope to put all in the same format and on the same page.

:lol:

Nomad
12-22-2004, 10:07 PM
yeah I see what you mean...might need a brief explantion stating to change that path to suit your directory/filename structure. After all, essentially this is what this is..

The path by the way can be either absolute or relative/ Here I have used relative.

some brief instruction on how to use say a link to a 'more info' option giving a briehf explantion of use and set-up - then a link back to the tag/select tag/move on to next bit...

Anyway that link above is for xhtml linking css for html 4.01 strict remove the space and forward slash.
Transitional html 4.01 and html 4.0 are slightly different but the difference is negiligible.


<link rel="stylesheet" href="css_folder/name_of_ccs_file.css" type="text/css" /> = xhtml 1.0 strict/1.1 strict

<link rel="stylesheet" href="css_folder/name_of_ccs_file.css" type="text/css"> = html 4.01 strict

<link href="css_folder/name_of_ccs_file.css" type="text/css"> = transitional html 4.01/html 4.0


And as I say this is on line 6 or after the charset...

:)

China Tea
12-25-2004, 04:05 PM
Merry Christmas Motorwatcher!!!!Have a wonderful time with your family!

China Tea

motorwatchercounter
01-01-2005, 03:45 AM
Back to this old thread.
<link rel="stylesheet" href="css_folder/name_of_ccs_file.css" type="text/css" />
The problem... I will not know what the path or filename is.....I have a PHP book on my christmas list (I don't have any mates or get out enough) so all is possible.

The CSS seems to be working fine (Cheers Arne for the critique).... I am working on getting the whole CSS permitations on one page so people will be able to define text, background, borders and padding .......

.... didn't get my PHP book for Christmas. Got some flying lessons instead.

I plan to develop the tag and css generators this year but xmas and new year have meant I have had no time. I have sorted a few things and I still can't find another tag generator on the net that includes the doc type as a choice (It is a pain to code but let me know if there is a better one :D ) I am also still messing with the css stuff. Although the stuff I post doesn't point to much a lot is not linked.

All future stuff is going to be free, clean and simple. The latest in the wings is the new look css. At the moment I have a couple finished and will consolidate these into one page. Please have a look at the css borders part.

www.motorwatcher.net/css.php

All comments welcome especially on the colour and background picker.

BTW - These are being developed as I go.

Cheers :lol:

Nomad
01-02-2005, 02:57 PM
I've been thinking on the css here motorwatcher. In a way two sets are needed, one for inline css and another for the include css.

Also in your generator you use the class identification or

Example


.Name of target item {

css attributes
}


However 'id="name of item" would use the '#' symbol.

This would be an issue where xhtml is concerned because here, xhtml would use the 'id' indentifier for the main div's and the class identifier for items within the div element.

like so

Example

<div id="body">
<p class="name of item"></p>
</div>


And then the accompanying css

example

#body {
css here
}

.name of target item {
css here
}



So here I am using two types of identification method. Yes you can just use one but technically it is wrong to do so.

You have your main element 'id' and the nested or sub elements/attributes are identified as 'class' .

From what I've read this is the way browsers are constructed to 'Read' it, otherwise, they have to second guess what we're trying to ask it to do.

I've just got hold of a program called 'HTML/CSS Validator' that I'm checking out. I've allready cleared up a few problems with it. I also have loads of css code attributes I could probably put them together with explanations for you (If I get time that is lol).

hope that helps...

motorwatchercounter
01-02-2005, 03:14 PM
Hi Nomad,

Hope you had a good Christmas and New Year.

I don't use CSS so I am running a bit blind. I understand that the CSS can be internal (inline?) or called from an external stylesheet xxxx.css I have messed about with the way the generator works and am looking to convert and expand on what I have already. The new format will look like the boarder one I have www.motorwatcher.net/css.php I have already put in the option of putting in the name so you get .name { what you want } by using a variable. If you are saying this is OK for the external, great. I have hard coded the . in. It this need to be either a . or a # I can change this to a drop down quit easily. Are there any more options? I have seen a html/css editor resently (I thing it was on w3c - strangly).

All feedback and comments welcome as I need to make these perfect as well as easy to use. :lol:

Edit - There also seem to be a list of other options like

BR
Body
section
cite
dd
button

Which give
BR {your options here }

Nomad
01-02-2005, 04:42 PM
ok I'm gonna keep to the basics first. As far as I know there are two types mainly used. 'Inline' - where the style tag is used before closing the head tag or 'External in the form of a text/notepad document renamed to xxx.css.

However there are two types of ways to identify a certain target in the page as I said. One being the 'full stop' and the other being the 'hash sign'.

full stop = class and hash = id . Where they are used is also important. From what I learned and allways do is nest the class attribute inside the id attribute. I'l try show a better example than the p paremeter I gave above.



<div id="nameahere"> <Note: this is identidied by 'Hash' in the css.

<table class="namebhere"> <Note: this is identified by full stop in the css.
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>

in the css, you would have something like this.


/* For the div you would use the element 'Hash' */

#nameahere {
margin: 0px;
padding: 0px;
height: 30%;
width: 60%;
border-top: 1px;
border-right: 1px;
border-left: 1px #333333 solid;
border-bottom: 1px;
background-color: #ffffff;
}

/*What I have done here is target my div called 'name here' , given it no margin, no padding and a border all around of 1px with the left border colored. I have also applied a background color of white. */

/*I then move on to style my 'class' object nested in the div*/


/* class object then*/

.namebhere {
margin: 0px;
padding: 0px;
border-top: 1px;
border-right: 1px;
border-left: 1px #333333 solid;
border-bottom: 1px;
background-color: #000000;
}

/*All I've done here is change 1 value that of the background. However, it shows how the two different identifiers should be used. */



up until recently I haven't really seen a set order as to how css should be written. It does though generally start with body, then your h1,2,3,4,5,6, then the href stuff. then your navigation, content, footer and then any extras.

The css attributes though are supposed to follow a set pattern especially where the box model is concerned. this is especially important for margin, padding, border. I'm gonna hunt out the link i have on this.

ok hope it helps...

btw - I just tested it - what it does is put a black sqare dot in the upper left corner of the page...with a yellow background.

btw I made some slight adjustments to the above code...

basically because of this


An "id" attribute value must begin with a letter (A-Z or
a-z) and consist of the following characters: (A-Z), (a-z),
(0-9), hyphens (-), underscores (_), colons (:), and periods
(.). Note that spaces are not allowed.


I sorta understand it basically no spaces in target names

motorwatchercounter
01-02-2005, 05:16 PM
Hi Nomad,

Done.

www.motorwatcher.net/css.php

Let me know if it works please.

:lol:

Nomad
01-02-2005, 05:46 PM
sorry I may have confused this .. the hash or fullstop can be used in either inline or external.

what you need here really is a choice of inline or external and if you choose inline - it will generate your code like this

inline css example


<style/text.css>
the css is listed here
</style>


(Not sure on the opening style tag there as it's ages sincew i used it)

now for external, an example is not needed, just have it generate the css code and direct the user to copy paste to a notepad document and rename that document xxxx.css


external or inline use both attributes. As I said hash is for main elements fullstop is for sub-elements.


Does that explain it better :?

Arne
01-02-2005, 07:21 PM
<style/text.css>
the css is listed here
</style>

(Not sure on the opening style tag there as it's ages sincew i used it)

Opening tag for style is <style type="text/css">
Opening tag for javascript is <script type="text/javascript">

motorwatchercounter
01-02-2005, 11:52 PM
Thanks Arne,

I have kept the . or # options and named them sub or mail element. I have also put in both options with and without the style tags.

If this is OK I am going to start to work on all the rest of the css options. These will probibly have to be seperate as most people will have more than one css line controlling the text.

:lol:

Nomad
01-03-2005, 11:16 AM
Yeah now you have it but I would suggest swopping the main and sub-element around. Main would be the first element to be used and then the sub element. Also I would change type to value. Thats what px/% are.

Heh and we're only on the easy stuff at the moment - wait till ye start with img url and padding, margin top, bottom, remembering that in different divs you could be using the same style attributes 5-6 times or more with different values.


I'll leave you work away...:)

Arne
01-03-2005, 11:38 AM
First, I'll second what Nomad allready has said. About "all the rest of the css options" you will probably have a lifetime mission if you try to do it all. :)
But don't worry, what you manage to do is useful for newbee's on CSS. They may get interested in learning and using more CSS from what they see after using your "formulas" for the basic stuff, and that's a very good reason to it. 8)

motorwatchercounter
01-03-2005, 01:02 PM
Hi Nomad & Arne,

I will change the nane and order today. Looking at some of the others, some will be easier.

As for the whole CSS in one cut and paste, Yep I know that some will have to be multiples. 3 options here. Option1 do nothing and just leave it (Always an option). Option 2 make each line or type seperate so that once generated you have to cut and paste line by line. Option 3 (I can hear you both laughing now) allow the options for another text type for example and let the generator "build" the whole sheet. Option 3 would be the ideal. Need to think about how to do it.

:lol: