Ardan's Blog Talk

Display a group of links as a vertical menu

noreply@blogger.com (peter martin) — Sun, 29 Jan 2012 18:11:00 +0000

Rather than having several links in a row, would it not be nice to have them as a vertical menu?
The three top links work ok and the "contact me" links to one of my websites contact forms however this could be set to your email address.

Three Column Code Explained 3

noreply@blogger.com (peter martin) — Tue, 24 Jan 2012 05:21:00 +0000

Three Column Code Explained 2

noreply@blogger.com (peter martin) — Sun, 22 Jan 2012 20:38:00 +0000

Next bit of code is this valign="top" is to vertically align the contents of the table data cell to the top, which by default is in the middle therefore the = could be either "top"
"middle" or "bottom" depending on where you want the content to sit.
<p> is the tag for paragraph and usually contains text however; a link or a picture could be included and again the paragraph tag needs to be closed with the </p> tag.
</d> now closes the table data or cell.<td id="second_column"> you may have guessed starts a new lot of table data, remember though at this stage we have not closed the table row therefore this will be to the right of the previous cell.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhloDjYXC1PCE593W_wWwGftgOXilEyC-USGzKZZDCafIrpoL0UhwNK2YX75tRiBYw58KWNjnXN4EUZ2Ep-lKh9xQ8eGmNMsSVPiamALjzfS5lu62thyrGfu2Pq6pJroMgiOLwm2FU1UB4/s1600/blue-butterfly.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhloDjYXC1PCE593W_wWwGftgOXilEyC-USGzKZZDCafIrpoL0UhwNK2YX75tRiBYw58KWNjnXN4EUZ2Ep-lKh9xQ8eGmNMsSVPiamALjzfS5lu62thyrGfu2Pq6pJroMgiOLwm2FU1UB4/s200/blue-butterfly.jpg" width="200" /></a> Our friends at Blogger give you this bit of code no need to type it in although; you may need to go into the HTML editor and cut and paste it into a different location. At a later stage I may break that piece of code down so you know what it all means, just a quick explanation it is a hyperlink using the photo of whatever you have there and photo instead of blue underlined text usually associated with a hyperlink.
</td>
<td id="third_column">
<p>
This little butterfly was so small I needed to use a macro lens.</p>
</td> at this stage there should be no reason to explain the green code.
</tr> This now closes the table row, if you require a new row you just start the process from <tr> all over again. Remember we can add as many cell as we wish limited by the page width.
</table> I could leave you guessing, yes it closes the table!
I will leave the style part of the code for now, I will get around to it sometime over the next couple of days so once again, To be continued............

Three Column Code Explained

noreply@blogger.com (peter martin) — Fri, 20 Jan 2012 10:31:00 +0000

OK! so the fool ads the code and doesn't explain it!!
Lets start....
<table> table: a table is very similar to the Microsoft Excel's spreadsheet, a little longer to setup in a web page using HTML. As with all HTML code it starts with the opening tag, table which needs to be enclosed within the < and > symbols. After the table code is complete it needs to be closed by the closing tag </table> So far so good........
<tr>
Next we have the table row, which is shortened to tr and once again enclosed inside the < and > symbols. Yes! and you need to close it at the end of the row, not suprisingly the code is </tr>. Remember the rows are going across the page not down.
<td id="first_column" valign="top">
Following on we have the table data, shortened to td, the table data tag is <td> and yes you guessed it, you have to close it with </td>. Table data is the same as a spreadsheets cell. You could just ad your data using the opening <td> and closing </td> tags for each cell and all would be fine. Table data can be text a picture or many other things such as a video although you need to be careful your tags start and stop in the correct places. So why did I give the td in this case an id? Well I need this later when I style it to tell the style to do certain things to table data with this id. We can change the background colours or borders and give it padding(clearance) etc. In my example I have used id which is represented in the style code as # however, I am only using one row and really if I was to have continued it would have been better to give it a class not an id. CSS which is used to code the style only allows one item with an id on a page in this case where I might need twenty or so table data(cells) in my table to have a common style I would need to use class.
In the style id is written as # and class is a . period therefore #first_column as an id and .first_column as a class.
The name of the id or class can be almost anything however; some words can not be used for example id="red_column" is ok yet id="red" is not allowed as red is a word used for styling.
To be continued.....................

Three Column Code

noreply@blogger.com (peter martin) — Fri, 20 Jan 2012 08:15:00 +0000

<table>
<tr> <td id="first_column" valign="top">
<p>
This is a three column post with columns of equal height. this however was done with a table.</p>
</td> <td id="second_column">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhloDjYXC1PCE593W_wWwGftgOXilEyC-USGzKZZDCafIrpoL0UhwNK2YX75tRiBYw58KWNjnXN4EUZ2Ep-lKh9xQ8eGmNMsSVPiamALjzfS5lu62thyrGfu2Pq6pJroMgiOLwm2FU1UB4/s1600/blue-butterfly.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhloDjYXC1PCE593W_wWwGftgOXilEyC-USGzKZZDCafIrpoL0UhwNK2YX75tRiBYw58KWNjnXN4EUZ2Ep-lKh9xQ8eGmNMsSVPiamALjzfS5lu62thyrGfu2Pq6pJroMgiOLwm2FU1UB4/s200/blue-butterfly.jpg" width="200" /></a>
</td> <td id="third_column">
<p>
This little butterfly was so small I needed to use a macro lens.</p>
</td>
</tr> </table>

<style>
td{padding:1em;
font-size:12px;
text-align: centre;}
td p {width:100px;}
#first_column{color:white;
background-color:black;}
#second_column{
background-color:#CDC0B0;}
#third_column{
background-color:#8B7D6B;}
</style>

Let us try three column's

noreply@blogger.com (peter martin) — Tue, 17 Jan 2012 17:04:00 +0000

This is a three column post with columns of equal height. this however was done with a table.

This little butterfly was so small I needed to use a macro lens.

Two Columns different colour Backgrounds

noreply@blogger.com (peter martin) — Tue, 17 Jan 2012 07:33:00 +0000

Photo of a fly taken with a macro lens.

Photo of ant taken with a macro lens.

Photo of butterfly taken with a macro lens.

This could be done easier with a table maybe.

Rotate Text

noreply@blogger.com (peter martin) — Wed, 04 Jan 2012 00:22:00 +0000

There are some great advances taking place now with CSS and HTML5 unfortunately not all of them are supported by all browsers. Internet Explorer always seems to be the one that is left behind and it would be by far the worse browser for web designers to cope with. This is Microsoft's attempt to control the internet and what people are able to see and do, maybe Microsoft should allow the web designers to choose what they want to display.

Pulsating Text

noreply@blogger.com (peter martin) — Mon, 02 Jan 2012 12:52:00 +0000

Below is some pulsating text, no it is not an animated gif or picture and as you can see it moves its surroundings to fit. Yes it can be annoying however as you can see it does get peoples attention.

Link from a picture or photo.

noreply@blogger.com (peter martin) — Sat, 24 Dec 2011 21:54:00 +0000

Ok so I did not get a blue border by default, so what if I do want one?

Yep I know I made it green, no green is not the new blue, just showing it can be done.

The Code
<div ="separator2" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: centre;">
<a href="http://yourURL/"><img border="0" src="your photo or picture" /></a></div><br>
<style>

.separator2 img{border: 8px green solid ;}

</style>

Obviously you would need to change the url and your picture.

I know I'm lazy!

noreply@blogger.com (peter martin) — Sat, 24 Dec 2011 21:45:00 +0000

Prior to my Merry Christmas post it has been almost a year since I posted, yes I know I have been slack. I have been spending time on my photography blogs lately.
http://photographingcloseup.blogspot.com/

http://manualcamerasettings.blogspot.com/

http://freephotos4blogs.blogspot.com/

Ok so that now raises the question can you link to somewhere with a picture in Blogger and how do you remove the blue link colour?

Merry Christmas!

noreply@blogger.com (peter martin) — Sat, 24 Dec 2011 20:58:00 +0000

Remember it does not matter what the present is,
it is the thought that counts.
Wishing you all a safe and prospurous festive season.

Change Image Background with Gimp

noreply@blogger.com (peter martin) — Thu, 17 Feb 2011 14:00:00 +0000

Outline

noreply@blogger.com (peter martin) — Thu, 03 Feb 2011 12:13:00 +0000

The quick brown fox jumps over the lazy dog.

Going Mobile

noreply@blogger.com (peter martin) — Mon, 06 Sep 2010 10:00:00 +0000

Ardan’s Blog Talk is going mobile and needs your support please check it out and send a comment. The mobile web comes with a different set of browser problems that are similar but worse than the real web. Cross browser differences are more significant, if you see a problem in your mobile web browser please let me know.

If anyone is interested in developing their blog on the mobile web and would like to discuss how I have done it, feel free to ask question or offer suggestions.

Visit the mobile site via http://themoblog.com from your mobile phone.

Subscript/Superscript

noreply@blogger.com (peter martin) — Mon, 02 Aug 2010 13:52:00 +0000

^{this is superscript} Superscript/Subscript _{this is subscript}

This blog is the copyright of Ardansblogtalk^©
This is just some of the things that can be done with subscript and superscript.
So how did I get the little © ?

Symbol	HTML code
©	©
®	®
@	@
™

Then to have it as superscript or subscript it is

Ardansblogtalk^©<sup>©</sup>

or

Ardansblogtalk_©<sub>©</sub>

Table Zebra Rows

noreply@blogger.com (peter martin) — Tue, 06 Jul 2010 22:13:00 +0000

Name:	Country:	Hobbies:
Ardan	Australia	bike riding, reading
Peter	Australia	reading, blogging
John	England	soccer, boxing
Tracey	South Africa	soccer, blogging

Code with comments

This can be copied and pasted into the Edit HTML

<table>
<tr>
<th>Name:</th><!-- th:table head -->
<th>Country:</th>
<th>Hobbies:</th>
</tr>
<tr class="bg"><!-- I have given every other row a class so as to style them different-->
<td>Ardan</td>
<td>Australia</td>
<td>bike riding, reading</td>
</tr>
<tr>
<td>Peter</td>
<td>Australia</td>
<td>reading, blogging</td>
</tr>
<tr class="bg">
<td>John</td>
<td>England</td>
<td>soccer, boxing</td>
</tr>
<tr>
<td>Tracey</td>
<td>South Africa</td>
<td>soccer, blogging</td>
</tr>
</table>
<h4>Code with comments</h4>
<style>
table{width:500px;/* width can be changed but limited by page width or working area*/
border:1px solid grey;}/* change #of pixels to what you want, borders can be solid,dashed or dotted, colors can be changed  */
td{border:1px solid grey;
padding: .5em 1em .5em 1em;}
th{border:1px solid grey;
padding: .5em 1em .5em 1em;
background-color: lightgrey;}
.bg{background-color: pink;/* .bg identifies it as the class bg */
color: red}
</style>

Letter Spacing

noreply@blogger.com (peter martin) — Fri, 02 Jul 2010 17:07:00 +0000

Tight Spacing

Loose Spacing

Below is the code used to achieve this, I hope it helps.

<h2 id ="tight">
Tight Spacing</h2>
<h2 id ="loose">
Loose Spacing</h2>

<style>
#tight{letter-spacing:-2px;}
#loose{letter-spacing:10px;}
</style>

Transparent Box

noreply@blogger.com (peter martin) — Fri, 21 May 2010 20:09:00 +0000

Check out the companion site for the code.
http://ardanswebdesign.com/trans.html

A transparent box can be used for a photos caption.

Code for Tooltip

noreply@blogger.com (peter martin) — Thu, 20 May 2010 22:13:00 +0000

The code used for the tooltips can now be found here just cut and paste.
http://ardanswebdesign.com/tooltip.html

Read the comments near the Blogger logo.

Any problems post comments below.

Companion Site

noreply@blogger.com (peter martin) — Thu, 20 May 2010 18:22:00 +0000

Hi, Sorry I have been away for a while. Sometimes it is very frustrating to describe what I am trying to achieve here with the limitations of Blogger, therefore I have created a companion site to work in with this Blog.
At the moment I do not have any tutorials there, however now that I have it wish to build on it and this blog in conjunction with each other.
Please visit the site from time to time and feel free to comment here about it.
The site is Ardan's Web Design

Tool Tips Revisited and Div with Shadow

noreply@blogger.com (peter martin) — Sun, 11 Apr 2010 10:29:00 +0000

Just testing a tooltip and a div with .This is just a test if it works correctly will follow with a tutorial.

This div has a colored background and the shadow is created by the browser.

This would maybe look nice around an image.

Thumbnails

noreply@blogger.com (peter martin) — Wed, 17 Mar 2010 12:38:00 +0000

The question is, is this better done as a table or with pure CSS?
Maybe easier with a table, although thumbnails shown don't open to a larger picture,
in a new window this would be easy enough to do.

Photo of baby spider.

Photo of a butterfly.

Just flowers.

The Australian Kangaroo

Two column post in Blogger: The Video

noreply@blogger.com (peter martin) — Fri, 12 Mar 2010 20:04:00 +0000

Creating a two column post may be of some use to you so this post shows how to do it. The video also shows how to add
two small images to either side of one column. The problem I had with the first post was with FireFox so it took a while to
sort it out. The HTML involves placing two div’s inside another I have called them ‘inside1’ and ‘inside2’ and placed these
two div’s inside one called outer. To edit text afterwards you need to do it in Edit Html for some reason it will not let you
in compose

The two images are placed by telling them to float either left or right. The second one can go anywhere but it is better to
place it inside the text rather than at the end. The style sheet widths can be changed however the 2 inside div’s should
total less than the outer allowing also for the padding. If your columns do not sit properly then change these numbers.
To save time with the video I cut and paste the code if you would like a copy of the text file Download Here. If you need help post a comment.

Two column post in Blogger.

noreply@blogger.com (peter martin) — Thu, 11 Mar 2010 15:32:00 +0000

Have you ever wanted to make your post length shorter or maybe just wish you could have two columns? This post will show you how to achieve it and also add a graphic to one column, then again why not two graphics within a column but on different sides of the column.

Just a note about Ardan’s virtual ipod so far not many people have voted. It seems the concept of a blog character may not be a good one. May leave it for a while and re-introduce it at a later time. I will make a video on how to do this.