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.
Monday, January 30, 2012
Tuesday, January 24, 2012
Three Column Code Explained 3
<style> Yep! This is the last part and as the word says this is where the styling starts and once again we see both open and closing tags <style> </style>
Styling can be a little tricky, especaily in the case of Blogger. Why; you might ask? Because much of the styling has already been done in the template you have chosen. For example the background colour therefore; in order to change an area background colour you need to give that area a specific id as we have done previously.
td{padding:1em; td identifies what we are wanting to style, in this case the table data, note only add things here if you want it to apply to all table data or cells.The styling side of the page is called CSS and like HTML it is fussy and likes things opened and closed thus the { and the other one } at the end of the styling related to each section. Don't forget them, it is a computer program and as such will only do what you have instructed it to do. From which the saying comes "I wish my computer would do what I want it to do, not what I told it to do." Ok I'm starting to rave
padding:1em; Tells the CSS to give one em of padding to the cell, I wasn't real smart here I should not have used em it is a little hard to explain, so lets keep this simple and change it to 12px, not that an em is 12px, it is just easier for me to explain. 12px stands for 12 pixels. Therefore we could write padding:12px; and you will then find it easier to understand. If you want more or less padding just change the 12 to whatever you want.
font-size:12px; Basically gives the height of the letter's, this is becoming a bit easier eh! Feel free to change the 12 and see what happens.
text-align: centre;} Text alignment we have set to centre, you can use left and right also. and then the closing brace for that section } Once again he's lost the plot! Each thing you want to change needs to have a colon after it : what you want to change it to needs a semi-colon after it ; So far so good?
td p {width:100px;} Ok td is the same however now we are telling the CSS to do certain things to object within the td in this case the paragraph or the text within the <p> and </p>. Therefore in this example I have told the text within the cell to only fit inside a box 100 pixel's wide. Once again feel free to experiment with the 100. Now time to go off on a little rave session, remember the columns in this example are actual cells because we only used one row. So all text within them will be 100px wide, but what if I don't want them all the same? Tuff Luck! No sorry to achieve that say for only the first column, I would put that inside the first_columns { } braces. However would need a new instruction #first_column p{......
#first_column{color:white;
background-color:black;} These are the first columns instructions, where we have just the word color it refers to the text's colour. And a great big apology to my Australian friends here it has to be spelt color not colour! As you can see I have asked it to be white. Following on from that not needing much explanation is background-color and I have asked it to be black.
#second_column{
background-color:#CDC0B0;}
#third_column{
background-color:#8B7D6B;} These sections should be self explanatory now except for the numbers with a hash sign, they are hexadecimal numbers used for colours because some of us are not happy with say black we want to be a little bit more specific. Which Black?
I will not give the colours and codes here however this is a link to them http://www.w3schools.com/cssref/css_colors.asp
</style> Now we are finished with our styling so we close it.
I truly hope you have found this explanation useful, please leave a comment if you have or would like to see others like it.
Styling can be a little tricky, especaily in the case of Blogger. Why; you might ask? Because much of the styling has already been done in the template you have chosen. For example the background colour therefore; in order to change an area background colour you need to give that area a specific id as we have done previously.
td{padding:1em; td identifies what we are wanting to style, in this case the table data, note only add things here if you want it to apply to all table data or cells.The styling side of the page is called CSS and like HTML it is fussy and likes things opened and closed thus the { and the other one } at the end of the styling related to each section. Don't forget them, it is a computer program and as such will only do what you have instructed it to do. From which the saying comes "I wish my computer would do what I want it to do, not what I told it to do." Ok I'm starting to rave
padding:1em; Tells the CSS to give one em of padding to the cell, I wasn't real smart here I should not have used em it is a little hard to explain, so lets keep this simple and change it to 12px, not that an em is 12px, it is just easier for me to explain. 12px stands for 12 pixels. Therefore we could write padding:12px; and you will then find it easier to understand. If you want more or less padding just change the 12 to whatever you want.
font-size:12px; Basically gives the height of the letter's, this is becoming a bit easier eh! Feel free to change the 12 and see what happens.
text-align: centre;} Text alignment we have set to centre, you can use left and right also. and then the closing brace for that section } Once again he's lost the plot! Each thing you want to change needs to have a colon after it : what you want to change it to needs a semi-colon after it ; So far so good?
td p {width:100px;} Ok td is the same however now we are telling the CSS to do certain things to object within the td in this case the paragraph or the text within the <p> and </p>. Therefore in this example I have told the text within the cell to only fit inside a box 100 pixel's wide. Once again feel free to experiment with the 100. Now time to go off on a little rave session, remember the columns in this example are actual cells because we only used one row. So all text within them will be 100px wide, but what if I don't want them all the same? Tuff Luck! No sorry to achieve that say for only the first column, I would put that inside the first_columns { } braces. However would need a new instruction #first_column p{......
#first_column{color:white;
background-color:black;} These are the first columns instructions, where we have just the word color it refers to the text's colour. And a great big apology to my Australian friends here it has to be spelt color not colour! As you can see I have asked it to be white. Following on from that not needing much explanation is background-color and I have asked it to be black.
#second_column{
background-color:#CDC0B0;}
#third_column{
background-color:#8B7D6B;} These sections should be self explanatory now except for the numbers with a hash sign, they are hexadecimal numbers used for colours because some of us are not happy with say black we want to be a little bit more specific. Which Black?
I will not give the colours and codes here however this is a link to them http://www.w3schools.com/cssref/css_colors.asp
</style> Now we are finished with our styling so we close it.
I truly hope you have found this explanation useful, please leave a comment if you have or would like to see others like it.
Monday, January 23, 2012
Three Column Code Explained 2
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............
"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............
Friday, January 20, 2012
Three Column Code Explained
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.....................
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
<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>
<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>
Wednesday, January 18, 2012
Let us try three column's
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. |
Tuesday, January 17, 2012
Two Columns different colour Backgrounds
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.
Wednesday, January 4, 2012
Rotate Text
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.
Monday, January 2, 2012
Pulsating Text
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.
Leave a comment!
Subscribe to:
Posts (Atom)
