Basic Html/Css Questions..

[game_over]

When writing lots of paragraphs what is the best way to do it:

A:

<p>Paragraph 1</p>

<p>Paragraph 2</p>

<p>Paragraph 3</p>

or B:

<p>Paragraph 1...<br />

Paragraph 2...<br />

Paragraph 3...</p>

-----------------------------------------

When creating complex-ish layouts, like the image i've attached below, what is the best way to do this in CSS. I have a feeling i'm going the long winded way about it.

Ignoring the header and footer, this is my CSS for the below image:

main width 800px

#menu {

width: 250px;

float: left;

}

#BigPhoto {

width: 550px

float: left;

}

#Middle {

width: 400px

float: left;

}

Text {

width: 650px;

float: left;

}

PhotoBottom {

width: 150px;

float: left;

}

.clear { clear: both; } /*to bring the footer down*/

Also, if each of the columns on each row varied in size i would also have to wrap those in <div></div> to keep in rows inline.

I've worked on a website that is laid out similar to this, and it has different layouts on every page.. This has made the CSS look very messy, i'm just wondering if that's the way you would go about doing those types of layouts.

Is there a way to get text and photo side by side without putting each in it's own div?

[Des429]

a) best way ive always doen it to keep it more organized is to use <p></p> for each separate paragraph. it gets confusing embedding a whole bunch of <br />'s throughout your text

b) your css looks fine. i didnt chekc to make sure it worked, but the style of it looks fine.

[zhangm Supervisor]

I always encase paragraphs in their own paragraph tags.

<p class="generic">This is the first paragraph.</p>
<p class="generic">This is the second paragraph.</p>
<p class="generic">This is the third paragraph.</p>

[Mike]

Paragraphs go in well, paragraph tags :p

[game_over]

  On 25/03/2010 at 22:11, Des429 said:

a) best way ive always doen it to keep it more organized is to use <p></p> for each separate paragraph. it gets confusing embedding a whole bunch of <br />'s throughout your text

b) your css looks fine. i didnt chekc to make sure it worked, but the style of it looks fine.

Thanks,

the real issue i was having was just the different sized boxes = lots of CSS. the messier it got the more i thought i was going the long way about it.

  On 25/03/2010 at 22:16, Mike said:

Paragraphs go in well, paragraph tags :p

They are both technically in paragraph tags.

--

So is it possible to have text side-by-side but contained in the same <div>

[jordan.]

1. Lots of paragraphs, go with:

<p></p>

<p></p>

<p></p>

2. If every block is going to have a different fixed width, then yes, every block will have to have its own rule in the CSS. However, if you have say 3 different blocks with the same width, it may make more sense to create one class that those 3 can share.

3. Once you float the photo left or right, the text will naturally move to its side. You can apply the float directly to the image without a div.

[game_over]

  On 25/03/2010 at 22:25, jordan. said:

3. Once you float the photo left or right, the text will naturally move to its side. You can apply the float directly to the image without a div.

I didn't know that, it would definitely eliminate the need for some extra divs as i have been casing each text and photo in it's own div just to get them side by side.

[Tanoru]

1.) Um I'm assuming you mean a space between each line because a single <br /> only moves to the line below. But if you want loads of paragraphs then seperate <p> tags look neater.

2.) That looks good to me =)

[+Majesticmerc MVC]

As the others said, paragraph tags are designed to encase a single paragraph, so for each paragraph, you want to put it in a new <p></p> tag.

As for your question about row alignment, its actually necessary to have divs to align the rows anyway. If you're floating your items on the left, you will need extra the divs to stop the paragraphs and other stuff from sitting alongside the floated elements.

[unintentional]

To be technically correct,Princeton defines a paragraph as

  Quote

"One of several distinct subdivisions of a text intended to separate ideas."

(emphasis mine). The more logical way to code your document is to divide paragraphs, as they should be, by their tags...

<p>This is the first paragraph...</p>
<p>And the next one...</p>

But if your paragraph is divided into blocks of text that are still relating to the same subject, you should use line break tags:

<p>This paragraph has a subject.<br /><br />
Still talking about the same subject...<br /><br />
And so on.</p>

However, the simplest thing of all is to just split everything using <p> tags, as the other posters have suggested.:)

Hope this helped!

-- unintentional;)

[The_Decryptor Veteran]

  On 25/03/2010 at 22:23, forcer said:

...

They are both technically in paragraph tags.

...

Actually, the second example is only in one tag, meaning it's a single paragraph to the browser.

[sweetsam]

I would do one block of text in one p tag. Using individual p tags helps create custom gaps between paragraphs which is something you can not achieve if you use br's.