From HTML and DIVs to CSS

[brrrinalaska]

Hey all,OK, been training myself on CSS, figured out some things along the way. When I did my first web sites, I started out sloppy then discovered using divs to keep everything fairly organized. In fact I was pretty proud of myself for having discovered divs layouts on my own. Soon after that I read things about CSS and figured that was the way to go. Just didn't have time then.So here's my deli-ma. I just figured out how to use class's, id's and spanning and am slowing getting away from my divs. On top of that, I can globally edit the pages now, or even just globally edit certain sections. WAY COOL!OK, lets say I need multiple paragraphs on the same page. I can format all the paragraphs and keep them nice a cozy with span calls rather than divs. But in order to put the paragraph spans where I want, I have to use position styling inline with the paragraph. Basically I'm making spanned paragraph boxes with just the positioning styling inline. The rest of the styling is done with CSS.Example:<p id="Paragraph1" style="position: absolute; z-index: 10; width: 500px; height: 200px; left: 248px; top: 183px;">Surrender all your Divs.</p>So am I going about location wrong? Even though it works, I don't want to spend 2 months recoding this to find out there's a more effective way.I'm not asking form some one to post some code for me. If I'm going about this wrong, give me some clues as to what commands and syntax I should be looking at.BTW. In 27 lines of code on my HTML page using CSS, it's unbelievable how much content is on the page for only 27 lines. CSS is indeed handy!Thanks a bunch

[dsonesuk]

Moving away from div? using css does not mean you move away from the use of div elements, using css mean you have better control over stying away from the html ideally by using external stylesheet, NOT inline styling as shown with your paragraph, divs will still be used, but with html5 you would use new elements such as section, article, header, nav etc.

[brrrinalaska]

I'll still be using divs obviously, but not nearly as much as I am now. Now that I understand spanning, I don't have to use div for everything to get my positioning. As far as inline goes, I'm only doing my positioning inline because I need paragraphs in different places on the same page. While each paragraph can use the same styling, it's the location that varys and as far as I know, the only way to handle it is in HTML, not CSS. For me it's not really CSS if it's written on an html page. So from my point of view doing the position inside a <span> is still html, not inline CSS. Back to my original question, is there some other standard method of defining the position for the paragraphs other than inline CSS as I'm doing above? The goal being to reduce the amt of code overall on the html side.

[newseed]

One thing you can do is define your default css with a class for each of your paragraphs you want to postion. For example, let's say you have 3 paragraphs that are going to be position in different places but all of them have the same width, height and any other default styles. You would write the css something like this:

.Paragraph1 { position: absolute; width: 500px; height: 200px; color: #333; font-size: 12px;}

And you html will look like this:

 <p class="Paragraph1" style="top: 100px; left: 100;">content here</p><p class="Paragraph1" style="top: 200px; left: 200;">content here</p><p class="Paragraph1" style="top: 200px; left: 200;">content here</p>

The other option is something like this:

.Paragraph1 { position: absolute; width: 500px; height: 200px; color: #333; font-size: 12px;}.Paragraph1.one { top: 100px; left: 100px; z-index: 10;}.Paragraph1.two { top: 200px; left: 200px; z-index: 20;}.Paragraph1.three { top: 300px; left: 300px; z-index: 30;}

<p class="Paragraph1 one" >content here</p><p class="Paragraph1 two" >content here</p><p class="Paragraph1 three">content here</p>

[brrrinalaska]

"Class Selectors" Yep, that's what I was looking for. Figured that out last night and was working on the coding in my head while I was at work. Came up with the same solution as your last entry. Pile all the CSS data into 1 Class for each paragraph. Then assign as needed. Already came up with a naming convention for it all too. All your suggestions are good alternatives though! Thank you for helping me confirm that Class Selectors are the way to go.

[michaelsavior5]

I agree with newseed. It is a best option to specify your styling in a separate file, that way you have control over all the elements on your page. It also helps you to work faster and reduces the page loading rate.