• 0

Basic Html/Css Questions..


Question

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.

layoutmz.png

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?

Link to comment
https://www.neowin.net/forum/topic/886726-basic-htmlcss-questions/
Share on other sites

11 answers to this question

Recommended Posts

  • 0

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.

  • 0
  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>

  • 0

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.

  • 0
  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.

  • 0

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.

  • 0

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...

&lt;p&gt;This is the first paragraph...&lt;/p&gt;
&lt;p&gt;And the next one...&lt;/p&gt;

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

&lt;p&gt;This paragraph has a subject.&lt;br /&gt;&lt;br /&gt;
Still talking about the same subject...&lt;br /&gt;&lt;br /&gt;
And so on.&lt;/p&gt;

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

Hope this helped!

-- unintentional;)

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Nvidia App gets light theme, bug fixes, and support for more games by Taras Buria Nvidia has released a new update for the Nvidia App on Windows. Version 11.0.4 is now available with a few changes, such as automatic theme switching with light mode support, Windows Narrator support, fixed bugs, and optimal settings for 12 new games. With today's update, Nvidia App now supports light mode. You can switch between modes in settings or let the app follow the system settings (Windows still does not support automatic theme switching). To change the mode, go to Settings > Features > Theme. In addition, Nvidia App now supports Windows Narrator. The system's native screen reader can now properly read aloud on-screen content to improve accessibility for those relying on assistive technologies. Next, the list of games that Nvidia App can tune for optimal performance has been extended with 12 new titles: Assassin's Creed: Shadows Clair Obscur: Expedition 33 Deadlock ELDEN RING NIGHTREIGN Grand Theft Auto V Enhanced Half-Life 2 with RTX Indiana Jones And The Great Circle inZOI Monster Hunter Wilds Split Fiction The Last of Us Part II Remastered The Elder Scrolls IV: Oblivion Remastered Finally, Nvidia App 11.0.4 fixes the following bugs: Fixed an issue where DLSS-FG defaults to 2x irrespective of in-game setting when DLSS override model is set to "Latest” and Frame generation is set to “Use the 3D application setting". Fixed an issue where the driver download could not be completed. Fixed an issue where the recording bitrate setting was not saved. Fixed an issue where HDR video colors were not encoded properly for HEVC and AV1 playback. Fixed a bug where the in-game overlay was not accessible on the GeForce RTX 5070. Fixed an issue where a PC reboot would reset microphone boost to an incorrect value. Fixed an issue where Highlights summary window could not be disabled. Various stability fixes. You can download the Nvidia App from the official website. Full release notes are available here.
    • Ai is terrible at showing us existing knowledge. Hallucinating s**t is not exactly "discovering".
    • You know, this is mostly Edge related? It also affects just EU people.
  • Recent Achievements

    • Conversation Starter
      lilyandrew11 earned a badge
      Conversation Starter
    • Contributor
      Ed B went up a rank
      Contributor
    • One Month Later
      moporcho earned a badge
      One Month Later
    • One Month Later
      Parotel earned a badge
      One Month Later
    • Reacting Well
      Cryptecks earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      188
    2. 2
      snowy owl
      135
    3. 3
      ATLien_0
      131
    4. 4
      Xenon
      120
    5. 5
      +FloatingFatMan
      100
  • Tell a friend

    Love Neowin? Tell a friend!