Placing spaces and images in Strict HTML

  • lzr
  • Novice
  • Novice
  • lzr
  • Posts: 28

Post 3+ Months Ago

Hi,
When I run W3C validator [on my page originally designed for transtional HTML] for strict HTML, it complained on BR tags and images placed in html body.
Both, BR and images were accepted when they were inside some box (such as a table).

My questions are, to comply with strict html markup:
1. How do we put spaces between objects (say, between tables) if BR in the body is no OK?
2. How do we insert images right into the page outside of any box?
Thanks,
Lzr
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

The way to space objects, of all sorts, is to use the margin and/or padding properties in CSS.

For the insertion of images, you can still do the direct method, <img>, or you can set up containers and apply the images a background, again in CSS.

Are you familiar with CSS?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

In addition to dm's suggestions <br> and <img> in strict cannot be a child of blockquote, body, form, noscript. They need to be within block elements. <p> and <div> would be appropriate containers.

A quick reference
http://www.zvon.org/xxl/xhtmlReference/ ... rison.html
  • lzr
  • Novice
  • Novice
  • lzr
  • Posts: 28

Post 3+ Months Ago

digitalMedia wrote:
The way to space objects, of all sorts, is to use the margin and/or padding properties in CSS.


Thanks all for quick answers. I have a very basic familiarity with css.
With a quick google search I found "margin-bottom". Is this what you meant can be used in css for vertical spacing between the objects? What if it is just a plain text in html body? Do I need to put it in a container to implement a BR?
Thanks,
Lzr
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

lzr wrote:
Thanks all for quick answers. I have a very basic familiarity with css.
With a quick google search I found "margin-bottom". Is this what you meant can be used in css for vertical spacing between the objects? What if it is just a plain text in html body? Do I need to put it in a container to implement a BR?


If I understand you correctly, the answer is yes.

To write well-formed HTML, your text should be parsed out into individual containers according to their type. Here's an example...
Code: [ Select ]
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<p>This is a paragraph. Each paragraph should be seperated in its own P container.</p>
  1. <h1>This is Heading 1</h1>
  2. <h2>This is Heading 2</h2>
  3. <p>This is a paragraph. Each paragraph should be seperated in its own P container.</p>


The way you would control the spacing between paragraphs, headings, lists, etc. is to apply margining to all P containers, like so...
Code: [ Select ]
p{margin:10px;}


This would give every instance of a <p> tag (paragraph) a uniform spacing throughout the document.

You can use a <br /> within the <p> tag, as its an appropriate container - referring to what ATNO rightly said. However, it should not be used to create spaces between paragraphs.

Here's another example. Let's say I have a paragraph...
Code: [ Select ]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada sem quam, vitae lacinia enim. Donec porttitor placerat purus, ac sodales purus vulputate eget. Cras mollis pharetra rutrum. Vestibulum cursus molestie metus eu pharetra. Duis pharetra rhoncus rhoncus. Fusce pulvinar lobortis est dictum blandit. Curabitur euismod pretium ullamcorper. Integer vel purus urna. Vivamus pulvinar euismod elit eu consectetur. Maecenas ut adipiscing metus. Maecenas eu arcu at ipsum sollicitudin venenatis. Pellentesque tempor laoreet orci in posuere. Maecenas ut massa sit amet velit commodo vestibulum. Duis felis nunc, malesuada vel facilisis ut, pretium sit amet ipsum. Nullam molestie pretium leo, in luctus nibh lacinia quis. Integer sit amet nulla nisl, vitae feugiat turpis. Sed sit amet magna justo. Phasellus mollis adipiscing mi quis pellentesque. Quisque at orci vel neque egestas suscipit sit amet at tellus. </p>


...and I wanted to add an inset image. I could accomplish that with markup and CSS, like so...

Code: [ Select ]
<p> <img src="some.jpg" style="float:left;margin:5px;" alt="Alternative Text" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada sem quam, vitae lacinia enim. Donec porttitor placerat purus, ac sodales purus vulputate eget. Cras mollis pharetra rutrum. Vestibulum cursus molestie metus eu pharetra. Duis pharetra rhoncus rhoncus. Fusce pulvinar lobortis est dictum blandit. Curabitur euismod pretium ullamcorper. Integer vel purus urna. Vivamus pulvinar euismod elit eu consectetur. Maecenas ut adipiscing metus. Maecenas eu arcu at ipsum sollicitudin venenatis. Pellentesque tempor laoreet orci in posuere. Maecenas ut massa sit amet velit commodo vestibulum. Duis felis nunc, malesuada vel facilisis ut, pretium sit amet ipsum. Nullam molestie pretium leo, in luctus nibh lacinia quis. Integer sit amet nulla nisl, vitae feugiat turpis. Sed sit amet magna justo. Phasellus mollis adipiscing mi quis pellentesque. Quisque at orci vel neque egestas suscipit sit amet at tellus. </p>


This would cause the text to wrap around the image, but also leave some negative space too.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 63 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.