• 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

    • Download The Inclusion Equation: Leveraging Data & AI (worth $21) for free by Steven Parker Claim your complimentary eBook worth $21 for free, before the offer ends on June 24. The Inclusion Equation is a comprehensive, one-of-a-kind guide to merging DEI and employee wellbeing concepts with data analytics and AI. In this book, renowned thought leader and professional keynote speaker Dr. Serena Huang explains exactly how to quantify the effectiveness of new talent strategies by connecting them to a firm ROI estimate, enabling readers to approach and win the favor of higher-ups in any organization with the same effectiveness that marketing and financial departments do. This book is written in a style that is appealing and accessible to all readers regardless of technical background, but with enough depth to provide real insight and strategies. Dr. Serena H. Huang distills her 10 years of Fortune 500 people analytics leadership experience into tools and framework you can leverage to measure and improve DEI and wellbeing in your workplace. Some of the topics explored in this book include: Attract and retain top talent, including Gen Z and Millennials, with tailored DEI and wellbeing strategies Quantifying not only a talent strategy's perceived initial effect on an organization, but also its improvement and expansion over time Turning DEI and wellbeing from illusive corporate concepts to quantifiable metrics Harness the power of AI to create synchronized DEI and wellbeing strategies that maximize ROI Getting serious attention from your CEO and CFO by quantifying HR initiatives Using data storytelling to demonstrate the business impact of DEI and wellbeing Preparing for the future by understanding the role of AI in creating an inclusive and healthy workplace The Inclusion Equation is a complete guide for DEI and wellbeing, covering getting started in measurement to using storytelling to influence leadership. This is the contemporary playbook for any organization intending to substantially improve their diversity, equity, inclusion, and employee wellbeing by leveraging data & AI. This book is also perfect for any data analytics professionals who want to understand how to apply analytics to issues that keep their CEOs up at night. Whether you are a data expert or data novice, as long as you are serious about improving DEI and wellbeing, this book is for you. This free to download offer expires June 24. 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 Inclusion Equation: Leveraging Data & AI (worth $21) for free Offered by Wiley, view other free resources The below offers are also available for free in exchange for your (work) email: 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 Excel Quick and Easy ($12 Value) FREE – Expires 6/24 The Inclusion Equation: Leveraging Data & AI ($21 Value) FREE – Expires 6/24 Microsoft 365 Copilot At Work ($60 Value) FREE – Expires 6/25 Natural Language Processing with Python ($39.99 Value) FREE – Expires 6/25 How to Engage Buyers and Drive Growth in the Age of AI ($22.95 Value) FREE – Expires 7/1 Using Artificial Intelligence to Save the World ($30.00 Value) FREE – Expires 7/1 Essential: How Distributed Teams, Generative AI, [...] ($18.00 Value) FREE – Expires 7/2 The Chief AI Officer's Handbook: Master AI leadership with strategies to innovate, overcome challenges, and drive business growth ($9.99 Value) FREE for a Limited Time – Expires 7/2 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.
    • It's basically been a rite of passage to blow up your first WSUS server by trying to sync the drivers database. Anyone who has done this has certainly seen the tens of thousands of driver packages and asked "what is all of this literal garbage?". Seems Microsoft is asking the same question. I do hope they won't take it too far and start removing drivers needed to run legacy systems, but there's definitely a happy medium to be found between "only the latest versions for actively supported hardware" and "every version of every driver ever for all time".
    • Stable..... No, he isn't..
    • Of course the sales are bad. Who even asked for a thinner phone with way less battery? Lightness? It's still a giant brick, it's just a thinner giant brick. It makes no sense at all. Making folding phones thinner, now that does make sense. Because when folded, the thinner it is unfolded, the more usable and pocketable it is when folded. You already expect worse battery at expense of actually being more pocketable. Galaxy Flip, when folded is half the size of S Ultra models and about as thick. That does make a big difference when fitting it in a pocket. But the phone that's as big as Ultra, making it thinner, you don't really solve anything, it's still a giant slab that barely fits into a pocket. All the "Mini" phones made way more sense than this thin crap. Especially now that it's literally impossible to find a phone smaller than 6.5". My dad only needs phone for calls and SMS and he doesn't want to go with smartphone because they are all so massive. Especially cheaper ones. Like, he'd be fine with Galaxy A06 for all he cares in terms of hardware, but it only comes in giant 6.7" format. It's useless. Or is he suppose to find a 800€ old gen iPhone Mini or Zenfone? He doesn't even need those stupid specs and such stupid price. And then you see old people fumbling around with giant smartphones and they don't even need 3/4 of features on them.
  • Recent Achievements

    • First Post
      emptyother earned a badge
      First Post
    • Week One Done
      Crunchy6 earned a badge
      Week One Done
    • One Month Later
      KynanSEIT earned a badge
      One Month Later
    • One Month Later
      gowtham07 earned a badge
      One Month Later
    • Collaborator
      lethalman went up a rank
      Collaborator
  • Popular Contributors

    1. 1
      +primortal
      664
    2. 2
      ATLien_0
      270
    3. 3
      Michael Scrip
      218
    4. 4
      Steven P.
      161
    5. 5
      +FloatingFatMan
      157
  • Tell a friend

    Love Neowin? Tell a friend!