• 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

    • Oh the Chinese crybabies who couldn't accept the fact that they lost GOTY to Astro Bot? Not interested
    • Download this SQL Essentials For Dummies eBook (worth $10) for free by Steven Parker FOR DUMMIES is a trademark of John Wiley & Sons, Inc. A right-to-the-point guide on all the key topics of SQL programming SQL Essentials For Dummies is your quick reference to all the core concepts of SQL—a valuable common standard language used in relational databases. This useful guide is straightforward—with no excess review, wordy explanations, or fluff—so you get what you need, fast. Great for a brush-up on the basics or as an everyday desk reference, this book is one you can rely on. Strengthen your understanding of the basics of SQL Review what you've already learned or pick up key skills Use SQL to create, manipulate, and control relational databases Jog your memory on the essentials as you work and get clear answers to your questions Perfect for supplementing classroom learning, reviewing for a certification, and staying knowledgeable on the job, SQL Essentials For Dummies is the convenient, direct, and digestible reference you've been looking for. Claim your complimentary eBook worth $10 for free, before the offer ends on June 17. How to get it Please ensure you read the terms and conditions to claim this offer. Complete and verifiable information is required in order to receive this free offer. If you have previously made use of these free offers, you will not need to re-register. While supplies last! Download the SQL Essentials For Dummies eBook (worth $10) for free Offered by Wiley, view other free resources The below offers are also available for free for a limited time: Winxvideo AI V3.0 Lifetime License for PC ($69.95 Value) FREE – Expires 6/8 Aiarty Image Enhancer for PC/Mac ($85 Value) FREE – Expires 6/8 Solutions Architect's Handbook, Third Edition ($42.99 Value) FREE – Expires 6/10 AI and Innovation ($21 Value) FREE – Expires 6/11 Unruly: Fighting Back when Politics, AI, and Law Upend [...] ($18 Value) FREE - Expires 6/17 SQL Essentials For Dummies ($10 Value) FREE – Expires 6/17 Continuous Testing, Quality, Security, and Feedback ($27.99 Value) FREE – Expires 6/18 VideoProc Converter AI v7.5 for FREE (worth $78.90) – Expires 6/18 Macxvideo AI ($39.95 Value) Free for a Limited Time – Expires 6/22 The Ultimate Linux Newbie Guide – Featured Free content Python Notes for Professionals – Featured Free content Learn Linux in 5 Days – Featured Free content Quick Reference Guide for Cybersecurity – Featured Free content We post these because we earn commission on each lead so as not to rely solely on advertising, which many of our readers block. It all helps toward paying staff reporters, servers and hosting costs. Other ways to support Neowin The above deal not doing it for you, but still want to help? Check out the links below. Check out our partner software in the Neowin Store Buy a T-shirt at Neowin's Threadsquad Subscribe to Neowin - for $14 a year, or $28 a year for an ad-free experience Disclosure: An account at Neowin Deals is required to participate in any deals powered by our affiliate, StackCommerce. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through the branded deals site.
    • No one is surprised. It goes both ways. Warhammer remake is not on the PS5, but Xbox/PC and Game Pass day 1 and it is NOT a Microsoft owned game (Sega). 100% Microsoft money deal. Timed of course. Sega wins because they get the Microsoft money now then when the deal ends they get the much larger PS audience to make money from. As far as Black Myth is concerned, the Chinese gaming platform market is very much PC then PS then everything else. Consoles were banned in China for years, then allowed and the PS is the console of choice. The release of Black Myth actually saw a PS5 console sale spike because of Chinese gamer's buying PS5's just to play this game. With the ever shrinking Xbox console market I can see a point where 3rd party games try to get Sony exclusive money because the ROI for Xbox console versions of those games is a shrinking endeavor.
    • Yeah Microsoft's "recommendation" is based on some promotional partnership with Intel. This is not very news worthy.
  • Recent Achievements

    • One Month Later
      MoyaM earned a badge
      One Month Later
    • One Month Later
      qology earned a badge
      One Month Later
    • One Year In
      Frinco90 earned a badge
      One Year In
    • Apprentice
      Frinco90 went up a rank
      Apprentice
    • Week One Done
      theevergreentree earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      448
    2. 2
      +FloatingFatMan
      248
    3. 3
      snowy owl
      232
    4. 4
      ATLien_0
      202
    5. 5
      Xenon
      146
  • Tell a friend

    Love Neowin? Tell a friend!