I'm making a webpage and putting all the positioning stuff in the CSS file to get it off the page.

When i make a position style, I can add the text formatting as well I notice.  However the text styles are already defined.

In this situation it seems better to use <span> tags to use these styles since they already exist rather than redefining 3 or 4 times in different position styles.  I'm trying to get rid of as much code as possible on the page.

example:

#priceTXT {
    position: absolute;
    height: 26px;
    width: 61px;
    left: 545px;
    top: 299px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #FF6600;
    text-align: right;
    font-weight: bold;
}

uses text formatting already defined by:

.OrangeBodyCopySm {

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FF6600;
}

Does it matter either way really?

P

I am a little unsure of what it is you are asking. But maybe this will help.

Use a body element in your CSS to define the main  text styling.
Example;

body {font-family: Arial, Helvetica, sans-serif;

    font-size: 10pt;

    color: #FF6600;

    text-align: left;

}

You can then set different font styling inside the different classes and id's.

I'm not sure of what you're asking either ... { scratching forehead )...

G'day Peter.

Northy had a helpful post yesterday, dealing with some of this. In fact, the code is there for you to copy. Check it out.

Regards,
Laurie.

'ello chaps

Im jumping on a limb here but i think what he is asking is whether his realization about the span tag is correct... and perhaps he is requesting a brainstorming session to help him cut down the code into a css page and have a less messy html page. You know, to shoot some ideas his way about how to simplify it.

I cant really help with your css query though Peter, i to am a newb in css and have only implemented it in one of my sites to set a static background, change colors and text. I actually dont think ive even tried to position something in css? Any way, i hope my explanation of your question was correct and you get the advice you seek.

Good luck

The span-tag is an inline-element wich doesn´t format the content without any css-definition.
Compared to the div-tag, wich is a block-element, the span-tag doesn´t do a line-break.

If that is what you were searching for, I think it´s the right way.

greets,
ak

If you're wanting to sort out your home page then the positioning is really really easy (if you know what you're doing)

You will need:
1 container <div> (red)
8 full width <div>s (blue)
2 floated <div>s (green) in the 4th full width <div>

see (click for larger)



give each <div> it's own class, then in the styles you can

give a background image to your container
align text left to right as needs be
apply borders
apply more background images

and be able to use real text in your page

put the right-hand side 'green' <div> before the left-hand one in your source as this has some content in it. float it right

put the left-hand green <div> after the right hand green <div> and float it left.

Hi Northie,

I think the green divs arent´t really needed, classes would do the same job.

The headbanner-div is also needless, I think.

Maybe some of the lower ones too, and at least I´m not sure about the overall div.


ak

aknet47 wrote:

Hi Northie,

I think the green divs arent´t really needed, classes would do the same job.

The headbanner-div is also needless, I think.

Maybe some of the lower ones too, and at least I´m not sure about the overall div.


ak

SEMANTICS!!!!!!!!!!!!!

Trust me, I've been doing this a long time with great success and use it for a lot of my sites.

The green divs are needed - along with the container, they are the most important aspect of my interpretation of how to semantically mark up and style the page

1 - re order the page
2 - the classes are applied to the divs!

all the other divs are positioned in the CSS so the the 2nd blue div appears first in the source, followed by the 4th.Tthe 1st, 3rd, 7th and 8th are placed last in the source.

This gets any H1 and content right to the top of the page

Northie wrote:

along with the container

There´s a container too?? I didn´t see this before  -  needless

What I like, if I understand Northie right, is that important information moves up in the source-code. I think this is, because google weights the site from the top to the bottom!?

greets

ak

I might be a newb to css but damn, nortthie may just be onto something I think im going try this out on my next site... i have no clue what it will be about but im keen to utelise and adapt your template if you dont mind northie.

Ryan_steyn wrote:

I might be a newb to css but damn, nortthie may just be onto something I think im going try this out on my next site... i have no clue what it will be about but im keen to utelise and adapt your template if you dont mind northie.

go to positioniseverything.net and look for 'piefecta' (or google it) - probably the best starting point (the jvmembers template was adapted from that); the css even comes with instructions

Thanks, I have done a couple of css tutorials but not many of them explain how the positioning works (what tags where) so I will definately check that out. Shot.

wow, that covered a lot of stuff, sorry i wasn't more clear about what i originally asked.

I'll try again.
I've defined a type style in my style sheet.

.OrangeBodyCopySm {

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FF6600;
}

later in the stylesheet, i'm defining a div style with positioning for a layer that has type which is the same format as the orange body copy type i've already defined:

#priceTXT {
    position: absolute;
    height: 26px;
    width: 61px;
    left: 545px;
    top: 299px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #FF6600;
    text-align: right;
    font-weight: bold;
}

my question was is it better to not add the type attributes to #priceTXT since they're already defined and just use a span tag for the type in that layer.

I'm not sure it really matters that much on my website, it's not that big anyway, but it could end up redefining styles many times over which seems inefficient.

If that doesn't make sense then it probably doesn't matter anyway!

but thanks for all the ideas!

The clue is in the 'C' of CSS

Cascading

Generally speaking this is to do with priorities and the order of the code

attributes in the body {} will be global for the site, so set the font type in here and forget about it until you want to change it.

Other uses - you can define a style twice in your CSS, as an example, lets look at links

a:link, a:active, a:hover, a:visited {

     font-weight:900;

     colour:#000099;

}



a:link, a:visited {

     text-decoration:none;

}



a:active, a:hover {

     text-decoration:underline;

     background-color:#FFFF00;

}

From this we can see that we can set generic styles for several elements at once, and then give more specific styles later.

Sophie made a good post about the CSS property index,
http://forums.site-reference.com/viewtopic.php?id=3896

You can see what is available to what, and which styles are inherited.

I would avoid <span>s - I only use them to make text-buttons on membership-only control panel pages.

Learn the difference between inline-elements and block-level elements (<span> is inline, <div> is block, <img> is inline, <p> is block-level

I've had a good look at your page and firmly believe that taking the styles out of the <span>s on the page and putting it into an external CSS file will get you no where and will waste your time.

Rather than styling the span, and what's in it, create block-level containers and position them around your page (think of them as the walls of your house)

You can give each of these elements some basic properties other than position, like the font colour for nested elements, backgrounds and borders (colour of the wall paper???)

Then add your furniture, the text, images etc. each will be referenced in the stylesheet by it's parent element - see my advanced example on this post
http://forums.site-reference.com/viewto … ?id=3918#4

Read the CSS and understand what it does, if you want to know what each bit means then look it up or ask around here.