• 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

    • Just WHY... I wonder if some executive really pushed for this to come up because of SOME REASON that bothered the dude... Or maybe so that it doesn't overlap with the OCD in some handheld, something like that?
    • OneDrive search is currently broken for many users by Taras Buria If you are trying to find a certain file in your OneDrive storage, but the service just won't give you the stuff you need, you are likely experiencing an issue that Microsoft has just confirmed. The company updated the official OneDrive documentation with a list of known bugs to clarify that the service currently exhibits problems with the search functionality. According to Microsoft, the bug affects four platforms: Windows, iOS, Android, and Web (macOS users are spared). The company says that affected users see black search results, and the storage does not return files that certainly exist (do not blame Microsoft if OneDrive cannot find the file you accidentally deleted or renamed). Fortunately, files are intact—it is just the search that cannot find them and present them to you. Another good thing is that the issue does not appear to affect 100% of users. Microsoft says only "a subset of users" experience the bug. Neowin checked a bunch of systems with personal and work OneDrive accounts, and all of them found the requested files without any issues. Unfortunately, if you are affected, there is nothing you can do at this point. Microsoft made it clear that there are no workarounds. Therefore, you will have to manually scavenge your OneDrive folders (they can now be colored!) to search for the needed file. Microsoft added that it understands how disruptive this bug could be, and it is "working with urgency" to resolve the bug as quickly as possible. You can check out the list of known OneDrive bugs and their possible workarounds in the official support document. In other news about OneDrive frustration, Microsoft recently locked out a user who was attempting to move a bunch of important data from old hard drives to OneDrive. Eighteen attempts to resolve the issue led to nothing but automated replies from Microsoft. You can read more about that wild story here.
    • If anyone thinks bringing manufacturing back will result in a bazillion jobs should heed this information. They will be plants full of robots with human supervisors. It’s the only way the products have a chance to be affordable.
    • You can’t sell BS unless you have autonomy as a sales gimmick. They don’t have the technology, I’ve been in several Tesla Swasticars, they are not safe and self driving barely works - their implementation is incredibly dangerous and still very error prone. They are selling this as a feature to assure safety, the reality is they know their technology isn’t safe and have humans there when it’s not fully able to do what you want it to. If they hired drivers and didn’t have any self driving they are then basically competing with uber and they don’t have the numbers of cars to compete so they sell fake self driving with humans and hope they fix their problems in the meantime. Felon skum has always been a snake oil salesman and people fall for it.
    • Exactly, this defeats the point entirely.
  • Recent Achievements

    • Week One Done
      BlakeBringer earned a badge
      Week One Done
    • Week One Done
      Helen Shafer earned a badge
      Week One Done
    • 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
  • Popular Contributors

    1. 1
      +primortal
      669
    2. 2
      ATLien_0
      271
    3. 3
      Michael Scrip
      229
    4. 4
      Steven P.
      166
    5. 5
      +FloatingFatMan
      161
  • Tell a friend

    Love Neowin? Tell a friend!