• 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

    • WYSIWYG Web Builder 20.2.1 by Razvan Serea Web Buialder is a WYSIWYG (What-You-See-Is-What-You-Get) program used to create complete web sites. WYSIWYG means that the finished page will display exactly the way it was designed. The program generates HTML (HyperText Markup Language) tags while you point and click on desired functions; you can create a web page without learning HTML. Just drag and drop objects to the page position them "anywhere" you want and when youre finished publish it to your web server (using the build in Publish tool). Web Builder gives you full control over the content and layout of your web pages. One Web Builder project file can hold multiple web pages. Desktop publishing for the web, build web sites as easy as Drag & Drop "One Click Publishing" No FTP program needed. No special hosting required, use with any Hosting Service! Easily create forms using the built-in Form Wizard plus Form validation tools and built-in CAPTCHA. Advanced graphics tools like shapes, textart, rotation, shadows and many other image effects. Fully integrated jQuery UI (Accordion, Tabs etc), animations, effects and built-in ThemeRoller theme editor. Google compatible sitemap generator / PayPal eCommerce Tools Many navigation tools available: Navigation bars, tab menus, dropdown menus, sitetree, slidemenus. Built-in Slide Shows, Photo Galleries, Rollover images, Banners etc. Support for YouTube, Flash Video, Windows Media Player and many other video formats. Unique extension (add-on) system with already more than 250 extensions available! Create HTML5 / CSS3 websites today HTML5 document type (optimized HTML5 output). HTML5 audio/video and YouTube HTML5 support. HTML5 forms: native form validation, new input types and options, web storage. HTML5 canvas and svg support in shapes and other drawing tools. CSS3 @font-face. Use non web safe fonts in all modern browsers. CSS3 opacity, border radius, box shadow. CSS3 gradients. Add cool gradient effects using native CSS3 (no images). CSS3 navigation menu. Create awesome menus without using JavaScript or images. CSS3 animations and transitions. Including support for 2D and 3D transforms! Features for advanced users: Login Tools/Page Password Protection. Built-in Content Management System with many plug-ins (guestbook, faq, downloads, photo album etc). Add custom HTML code with the HTML tools. JavaScript Events: Show/hide objects (with animation), timers, move objects, change styles etc. Layers: Sticky layer, Docking layer, Floating layer, Modal layer, Anchored layer, Strechable layer and more! jQuery Theme Manager, create your own themes for the built-in jQuery UI widgets. Style Manager (global styling, H1, H2, H3 etc). Master Frames and Master Objects: reuse common element in your website. and much more! WYSIWYG Web Builder 20.2.1 changelog: Improved: Images in the properties of Photo Gallery, Photo Grid, Photo Collage and Slide Show can now be re-arrange using drag & drop. Improved: Default aspect ratio of HTML5 audio Fixed: Issue with list item icon offset in workspace. Fixed: 'Edit' button text in Login Admin cannot be changed. Fixed: Issue with Card max-width size calculation in breakpoints Fixed: Issue with (fixed) Layout Grid column height in breakpoints. Download: WYSIWYG Web Builder 64-bit | 30.1 MB (Shareware) Download: WYSIWYG Web Builder 32-bit | 28.0 MB Screenshot: >> Click here << Link: Home Page | Templates | Free extras/addons | Changelog Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Damn no doubt this is gonna be good, can't think of many franchises as consistent as RE (apart from 3 remake)
    • There are two version of qbittorrent 5.1.0 The normal version which I think is based of QT5 & the QT6 lt20 version. I'm currently using the QT6 LT20 version of 5.1.0 and it downloaded an ubuntu iso perfectly fine.
    • Are we forgetting the hardware degradation on 13th and 14th gen??
    • Cry more. The Ukrainians who had internet access because of Starlink were trash too, huh?
  • Recent Achievements

    • One Year In
      Vladimir Migunov earned a badge
      One Year In
    • One Month Later
      daelos earned a badge
      One Month Later
    • Week One Done
      daelos earned a badge
      Week One Done
    • Mentor
      Karlston went up a rank
      Mentor
    • One Month Later
      EdwardFranciscoVilla earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      494
    2. 2
      snowy owl
      252
    3. 3
      +FloatingFatMan
      250
    4. 4
      ATLien_0
      225
    5. 5
      +Edouard
      181
  • Tell a friend

    Love Neowin? Tell a friend!