• 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

    • They are shifting into AI now. Don't you see?
    • Exactly. No need to pay to rent a license. I'd rather own it.
    • Weekend PC Game Deals: Automation fests, Civilization for free, charity specials, and more by Pulasthi Ariyasinghe Weekend PC Game Deals is where the hottest gaming deals from all over the internet are gathered into one place every week for your consumption. So kick back, relax, and hold on to your wallets. The Epic Games Store unlocked a big strategy game giveaway earlier this week: Civilization VI: Platinum Edition. Coming in from Firaxis Games, the turn-based 4X experience has you starting world-conquering campaigns to explore, expand, exploit, and exterminate everything in your empire's reach. PvP and co-op multiplayer are also options if the various forms of AI prove to be too easy or even too troublesome. The Sid Meier’s Civilization VI: Platinum Edition giveaway is live until July 24, and it comes with two massive expansions as well as six DLC packs with extra scenarios, leaders, and more. Next week, tower defense title Legion TD 2 will become the latest freebie on the Epic Games Store. The Humble Store brought a new bundle for action game fans this weekend, and it's all about the Devil May Cry franchise. The Devil Trigger Collection begins with DmC: Devil May Cry and Devil May Cry HD Collection for $10. If you want to complete the bundle, it will set you back $20, which gets you Devil May Cry 4 Special Edition as well as the most recent entry, Devil May Cry 5, as well as its Vergil DLC. This bundle has two weeks left on its counter before it goes away. Big Deals Most publishers are returning to their usual weekend specials after the massive summer sales, so there are plenty of discounts to go around. There's even a special Make a Wish charity sale running on Steam with some discounted viral hits. With all those and more, here's our hand-picked big deals list for the weekend: Satisfactory – $27.99 on Steam Captain of Industry – $24.49 on Steam No Man's Sky – $23.99 on Steam Persona 5 Royal – $23.99 on Steam No More Room in Hell 2 – $22.49 on Steam FOUNDRY – $20.99 on Steam Banishers: Ghosts of New Eden – $19.99 on Steam SULFUR – $19.99 on Steam Assassin's Creed Mirage – $19.99 on Steam Alan Wake 2 – $19.99 on Epic Store Grand Theft Auto V Enhanced – $19.79 on Steam Norland – $19.49 on Steam Stray – $17.99 on Steam V Rising – $17.49 on Steam Dyson Sphere Program – $15.99 on Steam The Outlast Trials – $15.99 on Steam Warhammer 40,000: Darktide – $15.99 on Steam The Outlast Trials – $15.99 on Steam Red Dead Redemption 2 – $14.99 on Steam Turing Complete – $13.99 on Steam Eden Crafters – $13.99 on Steam Core Keeper – $13.99 on Steam Thank Goodness You're Here! – $12.99 on Steam Opus Magnum – $9.99 on Steam Autonauts – $9.99 on Steam EXAPUNKS – $9.99 on Steam DRAGON BALL XENOVERSE 2 – $9.99 on Steam Superliminal – $9.99 on Steam Heaven's Vault – $9.99 on Steam RAILGRADE – $9.89 on Steam Goat Simulator 3 – $9.89 on Steam Tchia – $9.89 on Steam ACE COMBAT 7: SKIES UNKNOWN – $9.59 on Steam PAYDAY 3 – $8.99 on Steam Assassin's Creed Origins – $8.99 on Steam Viewfinder – $8.74 on Steam Escape Academy – $7.99 on Steam Pit People – $7.99 on Steam Skull and Bones – $7.99 on Steam Immortals Fenyx Rising – $7.99 on Steam Imperator: Rome – $7.59 on Steam SHENZHEN I/O – $7.49 on Steam Tom Clancy’s The Division 2 – $7.49 on Steam Bassmaster Fishing – $7.49 on Steam Let's Build a Zoo – $6.99 on Steam The Forgotten City – $6.24 on Steam Control Ultimate Edition – $5.99 on Steam Bramble: The Mountain King – $5.99 on Steam Assassin’s Creed Rogue – $5.99 on Steam RoboCop: Rogue City – $4.99 on Steam Kingdom Two Crowns – $4.99 on Steam Scott Pilgrim vs. The World: The Game – $4.94 on Steam Castle Crashers – $4.49 on Steam BattleBlock Theater – $4.49 on Steam TOEM: A Photo Adventure – $3.99 on Steam Supraland – $3.99 on Steam Vampire Survivors – $3.99 on Steam Darkwood – $3.74 on Steam Valiant Hearts: The Great War – $3.74 on Steam TIS-100 – $3.49 on Steam PAYDAY 2 – $3.29 on Steam Cake Bash – $2.99 on Steam Ragnarock – $1.99 on Steam Alan Wake – $1.49 on Steam Civilization VI Platinum Edition – $0 on Epic Store DRM-free Specials Lastly, here are some highlights from the DRM-free discounts available on the GOG store this weekend: Age of Wonders 4 - $29.99 on GOG Pathfinder: Wrath of the Righteous - Game of the Year Edition - $19.99 on GOG Tomb Raider IV-VI Remastered - $19.49 on GOG The Thaumaturge - $19.24 on GOG Chained Echoes - $13.74 on GOG Tyranny - Gold Edition - $12.49 on GOG Tomb Raider I-III Remastered Starring Lara Croft - $11.99 on GOG Baldur's Gate: Enhanced Edition - $9.99 on GOG Baldur's Gate II: Enhanced Edition - $9.99 on GOG Neverwinter Nights: Enhanced Edition - $9.99 on GOG Old World - $9.99 on GOG Icewind Dale: Enhanced Edition - $9.99 on GOG Neverwinter Nights: Doom of Icewind Dale - $7.99 on GOG Kingdom Come: Deliverance - $5.99 on GOG Might and Magic 6-pack Limited Edition - $4.99 on GOG Heroes of Might and Magic 3: Complete - $4.99 on GOG Blood Omen: Legacy of Kain - $3.49 on GOG Might and Magic 8: Day of the Destroyer™ - $2.99 on GOG Worms Armageddon - $2.99 on GOG ATOM RPG: Post-apocalyptic indie game - $2.99 on GOG Keep in mind that availability and pricing for some deals could vary depending on the region. That's it for our pick of this weekend's PC game deals, and hopefully, some of you have enough self-restraint not to keep adding to your ever-growing backlogs. As always, there are an enormous number of other deals ready and waiting all over the interwebs, as well as on services you may already subscribe to if you comb through them, so keep your eyes open for those, and have a great weekend.
  • Recent Achievements

    • One Month Later
      Helen Shafer earned a badge
      One Month Later
    • One Month Later
      ambani880 earned a badge
      One Month Later
    • Week One Done
      ambani880 earned a badge
      Week One Done
    • First Post
      artistro08 earned a badge
      First Post
    • First Post
      paul29 earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      498
    2. 2
      ATLien_0
      223
    3. 3
      Michael Scrip
      196
    4. 4
      Xenon
      161
    5. 5
      +FloatingFatMan
      138
  • Tell a friend

    Love Neowin? Tell a friend!