Need Help With Html Code

[Puccini]

For a blog entry on blogger.com I wanted to use this code:

<object width="200" height="160">
<param name="movie" value="http://www.youtube.com/v/HGOd7LekaI0?fs=1&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/HGOd7LekaI0?fs=1&hl=en_US" type="application/x-shockwave-flash" 
allowscriptaccess="always" allowfullscreen="true" width="200" height="160">
</embed>
</object>

Two days ago, on my way to the dentist, I was for the first time driven accross the Bhumipol bridge that was 
opened for traffic in September 2006. Very impressive construction.

But this displays the post as follows:

What must I add or change so that the text is displayed on the right of the image, right from the top, without having to make a table?

[scubateacher]

For consistency of layout, it's always best to put the elements of your web page in a table. Remember - your page will have many different viewers, each using a different size of screen (some will be on iPhones, some on large monitors, some on small monitors) - and you want all of them to enjoy the same quality of viewing.

Putting a table in isn't just easy, it's the only way to guarantee your page looks the same, wherever it's viewed and whatever it's viewed on.

If you need help with the html to insert a table, I'm sure there are plenty of people who can help!

[Supernova]

Put the video inside a DIV tag and use CSS. Adjust margins accordingly...

<div style="float:left;margin:0 10px 5px 0;">
<object width="200" height="160">
<param name="movie" value="http://www.youtube.com/v/HGOd7LekaI0?fs=1&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/HGOd7LekaI0?fs=1&hl=en_US" type="application/x-shockwave-flash" 
allowscriptaccess="always" allowfullscreen="true" width="200" height="160">
</embed>
</object>
</div>
<p>Two days ago, on my way to the dentist, I was for the first time driven accross the Bhumipol bridge that was 
opened for traffic in September 2006. Very impressive construction.</p>

[phuket Mike]

Amazing it looks like 3 people posted at the same time lol

You could try something like this, it will work dependant on the parent containers' width. This also assumes you don't have access to the style sheet. If you do, you could simply assign ID's to object and paragraph and then address them via the style sheet. The break clear:all may not be needed.

<object width="200" height="160" style="float:left;">
<param name="movie" value="http://www.youtube.com/v/HGOd7LekaI0?fs=1&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/HGOd7LekaI0?fs=1&hl=en_US" type="application/x-shockwave-flash" 
allowscriptaccess="always" allowfullscreen="true" width="200" height="160">
</embed>
</object>
<p style="float:left; margin: 0 5px;">Two days ago, on my way to the dentist, I was for the first time driven accross the Bhumipol bridge that was 
opened for traffic in September 2006. Very impressive construction.</p>
<br style="clear:both;" />

Edited February 6, 2011 by phuket Mike

[tomat]

Never ever use tables for creating layouts, that has been deprecated for almost a decade...

Use floating as already suggested.

[kmj]

For consistency of layout, it's always best to put the elements of your web page in a table. Remember - your page will have many different viewers, each using a different size of screen (some will be on iPhones, some on large monitors, some on small monitors) - and you want all of them to enjoy the same quality of viewing.

Putting a table in isn't just easy, it's the only way to guarantee your page looks the same, wherever it's viewed and whatever it's viewed on.

If you need help with the html to insert a table, I'm sure there are plenty of people who can help!

tables are for data any layout / styling should use CSS...

[Puccini]

Thank toy all. I got it to display now they way I wanted, using the code provided by phuket Mike.

To complete the picture, I am limited what I can do on blogger.com and CSS code is not allowed -- and I wouldn't know how to use it anyway. I had copy/pasted the embed code from the YouTube site and then changed width and height. What was needed in addition was the float:left and the margin to give a space between the image and the text elements. margin: 0 5px; in the text style did not work, so I added a margin-right: 1em; to the image element. (Apologies if some of my terminology is wrong; I am a beginner with HTML)

The blog template uses a fixed width, looks like 720px, so I guess it should display all right on any monitor that is at least 720px wide. Other templates offered for choice by Blogger have variable width, ie adjust to fill the entire monitor, and my next challenge will be to figure out how to change the code for that.

[Supernova]

CSS code is not allowed -- and I wouldn't know how to use it anyway.

Of course it is.

By using the style attribute, you've just applied was is known as 'inline CSS'.

[wolf5370]

Never ever use tables for creating layouts, that has been deprecated for almost a decade...

Use floating as already suggested.

I wouldn't say never - tables have their uses - for, erm, tables! Alos can be useful with footer and headers where a table is easier to control than floating divs. To crash and mangle two cliches head on - There are many ways to skin a cat, but don't throw the old ways out with the bath water.

However, for this floating divs is a good way to go - or float the elements (but make sure you reset their blocking settings to inline (etc) if they are blocked).

[Puccini]

CSS code is not allowed -- and I wouldn't know how to use it anyway.

Of course it is.

By using the style attribute, you've just applied was is known as 'inline CSS'.

I see. So it's the style sheets that I can't use in blog posts, I guess, the stuff with the wrinkly parenthese { }.

Edited February 6, 2011 by Puccini

[Puccini]

This FLOAT property is great. I continue changing also other posts now in my blog to reduce the size of the embedded videos, and now I have run up against another problem. In the post below, the two BR tags towards the end of the post, before the text "The two last songs songs:", have no effect and I cant't figure out why, tried everything with P and DIV tags.

This is the code:

<div>Lugano is host to the <a href="http://www.swiss-harley-days.ch/shd.cfm?pageid=106〈=en">Swiss Harley</a> Days as part of <a href="http://www.agendalugano.ch/estivalugano/">estivaLugano</a>, hundreds of glorious Harley-Davidson machines in all squares and streets, but it was <a href="http://www.djangomania.it/html/new.html">Djangomania</a> that lured me into town tonight. This is what the festival program says about them:
<br /><br />
<em><span style="font-family: Verdana, sans-serif;">“Djangomania” offers an original performance, a tribute of Django Reinhardt, traditional manouche music and popular italian songs from the fifties. Fresh, dynamic and intense.</span></em>
<br /><br /></div>

<div><span style="float:left;">  Amore, baciami</span>   <span style="float:right";> Instrumental piece </span></div>

<div><object width="200" height="160" style="float:left; margin-right: 1em;">
<param name="movie" value="http://www.youtube.com/v/ekzuahwc3J8&hl=en_US&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/ekzuahwc3J8&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="160"></embed></object>

<object width="200" height="160" style="float:right;">
<param name="movie" value="http://www.youtube.com/v/0OZHkTVy7u0&hl=en_US&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/0OZHkTVy7u0&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="160"></embed></object></div>

<div><br /><br />
The two last songs songs:
<br />
<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://www.mdn.fm/files/183700_uyv7r/20100616%20Djangomania.mp3" width="300" height="30" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded"> </embed></div>

P.S. Note to myself: change the last line of text to "The last two songs"

Edited February 6, 2011 by Puccini

[Supernova]

So it's the style sheets that I can't use in blog posts, I guess, the stuff with the wrinkly parenthese { }.

Yes you can.

CSS is widely used (this includes blog posts).

Click here to familiarize yourself with the basics. You'll be coding CSS in no time.

[phuket Mike]

This FLOAT property is great. I continue changing also other posts now in my blog to reduce the size of the embedded videos, and now I have run up against another problem. In the post below, the two BR tags towards the end of the post, before the text "The two last songs songs:", have no effect and I cant't figure out why, tried everything with P and DIV tags.

This is the code:

<div>Lugano is host to the <a href="http://www.swiss-harley-days.ch/shd.cfm?pageid=106〈=en">Swiss Harley</a> Days as part of <a href="http://www.agendalugano.ch/estivalugano/">estivaLugano</a>, hundreds of glorious Harley-Davidson machines in all squares and streets, but it was <a href="http://www.djangomania.it/html/new.html">Djangomania</a> that lured me into town tonight. This is what the festival program says about them:
<br /><br />
<em><span style="font-family: Verdana, sans-serif;">“Djangomania” offers an original performance, a tribute of Django Reinhardt, traditional manouche music and popular italian songs from the fifties. Fresh, dynamic and intense.</span></em>
<br /><br /></div>

<div><span style="float:left;">  Amore, baciami</span>   <span style="float:right";> Instrumental piece </span></div>

<div><object width="200" height="160" style="float:left; margin-right: 1em;">
<param name="movie" value="http://www.youtube.com/v/ekzuahwc3J8&hl=en_US&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/ekzuahwc3J8&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="160"></embed></object>

<object width="200" height="160" style="float:right;">
<param name="movie" value="http://www.youtube.com/v/0OZHkTVy7u0&hl=en_US&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/0OZHkTVy7u0&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="160"></embed></object></div>

<div><br /><br />
The two last songs songs:
<br />
<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://www.mdn.fm/files/183700_uyv7r/20100616%20Djangomania.mp3" width="300" height="30" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded"> </embed></div>

P.S. Note to myself: change the last line of text to "The last two songs"

You probably just need to use the clear command - <br style="clear:both;" /> after the end of your div.

[Puccini]

You probably just need to use the clear command - <br style="clear:both;" /> after the end of your div.

Yes, that did it. Thank you very much. I will now use that everywhere where I use the FLOAT property, even if I do not follow the object with a new DIV of text, just to get into the habit.

Edited February 7, 2011 by Puccini

[Puccini]

Yes you can.

CSS is widely used (this includes blog posts).

Click here to familiarize yourself with the basics. You'll be coding CSS in no time.

This morning, before logging into ThaiVisa, I looked at the blog design possibilities some more and found that I can indeed edit the HTML code of the template. I have been using W3C Schools to start learning about HTML but always found CSS too daunting. I think I shall make do with the few "inline CSS" codes that I need to learn for what I want to do. The blog has a GUI/menu that lets me configure the template in many ways such as font style and colour. If ever I should muster enough courage to dabble in CSS and then run into trouble, I shall be sure to come back here and ask for help

[Puccini]

As a token of appreciation to all who responded to my appeal for help, I offer this recording of a bird song I made last summer (still don't know the name of the bird, which I did not see):

www.mdn.fm/files/150828_ckzzh/20100711_bird_song.mp3

[Puccini]

I found further confirmation that my assumption was wrong that blogger.com does not allow real CSS code, only inline CSS, when writing a post. In an old post I used the "compose" mode to write it, then used the easy blog feature to just click and drag the two photos to the left of the text. Actually, I remember it wasn't that easy and I struggled quite some time to get it right. Today, looking at the HTML code, I see that it contains:

onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}

Just looking at it makes me shiver but who knows, one day I may yet get to grips with it. For the time being, next time I want to place two images side by side to the left of text, I know where to go and copy the code.