4 questions in this thread all html.

[no/good/at/this]

Q1. What is the <span> tag used for? i've seen it used a few times but i want to know what the proper use of it is.

Q2. I use divs in my site nothing new there, each of my divs has an 'id' id's can have whatever name you wish to give them, but what about div classes? i dont know what div 'classes' are and when im supposed to use them?

Q3. Im currently writing my site on my desktop pc which has a 19inch widescreen monitor, sometimes though i write it on my laptop. (transfer all my code via usb drive) My laptop screen is 15.4 inch normal, so when i view my site on that i get the scroll bar at the bottom because not all the site is visible, how can i combat this? Can i auto resize using any available methods? As surely this will get annoying to users.

Q4. Is it possible to change the color of a default button I.E
<input type="button" value="this is a button"/>
Can i change the color of that button?

Thanks alot.

[Declan1991]

1) Inline text. <p> is for paragraphs, <span> is for text that should not be a new line. It's pretty rare.
2) <div class="whatever whatever2"> class names do not have to be unique, and the CSS rules for .whatever and .whatever2 are applied to it.
3) Don't give your pages a defined width that is greater than 800px. Google search fluid layouts (http://www.google.com/search?q=fluid+layouts).
4) I think you have to use the <button> tag, I'm not certain.

[Fang]

4)<input type="button" style="background-color:blue;" value="this is a button">

[no/good/at/this]

Declan and fang thank you both very much.

[Centauri]

Q1) <span> isn't all that rare. Both <div> and <span> are essentially the same, being an element with no semantic meaning which can be used to group things together for styling purposes - just that divs are block level while spans are inline elements. Spans are useful for targeting inline text as mentioned, and for grouping elements that are within inline elements - for instance you cannot use a <div> inside an <a> (as block elements are not allowed inside inline elements) but you can use <span> inside <a>s for grouping/styling.

Q2) As id's can only be used once on a page, any time you have a number of divs (or any other element for that matter) that you want to apply common styling to, you can give them a class name and the styles for that class will be applied to all elements with that class name.

[Declan1991]

Well not as common as <p> or <div> I was thinking. It has its uses, but normally the more semantic you're being, the less need you have for it.

[no/good/at/this]

Im not entirely following, does that mean i can only use a 'class' name once on each page too?
Im currently using 'visual studio web devloper' to help me along to make sure i get everything in the right place but it has alot of terms that i dont know for example one of the class names is 'selected', i know what that implies under the css rule but what does it mean under the html rule? Im a bit confused.

Also il throw this in too, its just an idea of mine im not sure if it can be done.
Below is some code:
<div id="contentleft20">
<form method="post" action="">
<p>How many friends would you like to invite?</p>
<select>
<option style="background-color: #800000" value="1">1</option>
<option style="background-color: #800000" value="2">2</option>
<option style="background-color: #800000" value="3">3</option>
<option style="background-color: #800000" value="4">4</option>
<option style="background-color: #800000" value="5">5</option>
<option style="background-color: #800000" value="6">6</option>
<option style="background-color: #800000" value="7">7</option>
<option style="background-color: #800000" value="8">8</option>
<option style="background-color: #800000" value="9">9</option>
<option style="background-color: #800000" value="10">10</option>
<option style="background-color: #800000" value="11">11</option>
<option style="background-color: #800000" value="12">12</option>
<option style="background-color: #800000" value="13">13</option>
<option style="background-color: #800000" value="14">14</option>
<option style="background-color: #800000" value="15">15</option>
</select>
<br />
<br />
<input type="text" style="background-color: #800000" value="Email address" />
<select>
<option style="background-color: #800000" value="hotmail.co.uk">hotmail.co.uk</option>
<option style="background-color: #800000" value="hotmail.com">hotmail.com</option>
<option style="background-color: #800000" value="yahoo.co.uk">Yahoo.co.uk</option>
<option style="background-color: #800000" value="yahoo.com">Yahoo.com</option>
<option style="background-color: #800000" value="gmail.co.uk">Gmail.co.uk</option>
<option style="background-color: #800000" value="gmail.com">Gmail.com</option>
</select>
<br />
<br />
<input type="button" style="background-color: #800000" value="Send invite(s)" /><br />
<br />
<input type="reset" style="background-color: #800000"/><br />
<br />
<p>Use the box below if you wish to include a message with your invite(s)</p>
<textarea rows="10" cols="40"></textarea>
</form>
</div>

It amy not all be correct (the form layout mainly but ignore that).
As you can see this is an option to invite friends to join my site, the user will input his/her friends email addy and a mail will be sent to that address, ive only included one email address line but with a drop down box above for the user to select the number of friends to invite (folllow so far?).
I want to configure it so that when the user selectes a number greater then one, an additional Email address field will appear.
Im guessing this can only be done server side?
Ive also been told that i can download an application that i can use to apply server side operations before uploading (going live so to speak). Is this true or should i just take the manual path and incude multipul address lines?
Cheers

[Centauri]

You can assign as many elements to a class name as you like - this is the advantage of classes. Any styles you then assign to that class name will apply to all elements that have that name.

As far as the selects go, you can use javascript to enable additional email address inputs based on the number selected.

[no/good/at/this]

Ok, so for example if i had <div class="maincontent" id="left"></div>, i could apply a css rule to the class name and that would apply to all elements with that class name regardless of the 'id'?

[no/good/at/this]

Oh and thanks for the other answer too il get some j/script sorted for that.

[Centauri]

Ok, so for example if i had <div class="maincontent" id="left"></div>, i could apply a css rule to the class name and that would apply to all elements with that class name regardless of the 'id'?
Correct

[no/good/at/this]

Thanks very much for your help,regards.

[no/good/at/this]

Sorry to come back to this as i have already asked about this and got a reply, but im still having trouble with this screen size problem.
As ive stated above my(sites) im currently working on are not displaying correctly on different screen resolutions, e.g 19" widescreen(desktop) to 15.4" 4:3 (laptop).
The result i want is much the same as this site, it displays full screen on both and i imagin all screen resolutions (instead of massive screens i assume) without any repositioning of elements.
again take this site, when i view on my desktop it displays full screen, and again on my latop but nothing looks resized or repositioned, how is this possible?
No matter what i try, and ive read and tried certain example's i can find in google searches and although some do work ok, but not entirely what i want (but can live with) i end up with the added headache that these methods dont work properly or not at all in I.E.
Needless to say its driving barmy, i just cant find that happy medium

[Fang]

We would have to see your site.
Do you want a fixed with or elastic to fit the window?

[Centauri]

There isn't just one magic command that can make a site fluid in all window sizes - you have to analyse what you want the various parts of your site to do in various resolutions.

If you look at this site in various window sizes you will notice that some elements remain fixed in width (graphics obviously, the top advertisement, welcome info panel at the top, posting rules box below etc) and are locked to one side or the other, achieved through floating. Other elements (such as the various post panels) stretch with the width, achieved by not specifying a width and allowing them to naturally occupy available width (or specifying a percentage width). Some elements (like the main thread menu) automatically space themselves, achieved through specifying percentage widths.

What methods and actions you use will depend on the site and personal preferences.

[no/good/at/this]

Ok, i understand, ive just added an add-on to firefox that lets me view the css of any site i view so thats a very handy thing to have.
Ive noticed on this site that there's no margin or padding for the body (ive found margins to are not always a good idea, atleast for what i want); and the font sizes are set to quite small 9px to be exact in most cases, one of the problems ive been having is my main navigation bar,that when i view on a smaller screen it pushes down and displays on 2 lines, but ive sorted that and its working great now, plus ive removed the graphical buttons, apart from looking tacky they take up too much room as the resoltions cant be changed.
So im half way there, i wont post on this again as im sure ya all getting a little annoyed at answering the same questions, and sorry fang i cant post the code for my site show you all as i deleted it to start again as it looked crap so now i only have half the homepage.
But you guys have taught me quite alot so im armed with alot of new tools now, and i know it must get tedious that everytime you come on here you get a post from me but i do appreciate your time so thanks again.