Type the following code in your “contact” page or wherever you want your contact information to appear on your website:
Copy the code below, paste it in a text file and edit the content in red:
(You can use any text editor, like the Notepad app in Windows.)
// NOTE: If you use a ‘ add a slash before it like this \’
// NOTE: to turn any code into a comment, type two forward slashes //
in front of the line of code
// NOTE: I left the css code in, but you would need to create it in your own style sheet
document.write(‘Your Name Here‘);
document.write(‘10901 Your Street<br>’);
document.write(‘City, ST 12345<br>’);
document.write(‘PHONE: <span class=”phonetitle”>(555) 555-5555<BR></span>’);
document.write(‘EMAIL: <A HREF=”mailto:firstname.lastname@example.org” class=”link”>email@example.com</a><br>’);
// End –>
Name the text file “phone.js” and save it in the same folder as the file containing the first code.
Creating a text link seemingly inserts a line break and causes the text following the link to wrap to the next line. Notice the second paragraph is not a link – and it doesn’t wrap.
This is what the original code looks like:
To prevent the text from wrapping/inserting a line break, add an inline property to your anchor tag.
Here’s what the inline property looks like:
And here’s the result:
I know the font size of the link is slightly larger than the paragraph text. I’ll be fixing that next.
Working on my website recently and created a multi-level unordered list. The spacing of the second level indent was much more than I needed and I wasn’t loving the fact that the bullets were the same for both levels.
I found code to solve both those problems, so as usual, I’m posting it here for my future reference and, hopefully, to help someone else looking to solve the same problems.
I changed the second level bullet style to square and reduced the second level indent to 15px. Here’s a screen shot of my final list, followed by the code snippets I used:
Continue reading “html lists: indent spacing and change bullet styles”
Here’s a little code snippet you can add to a link so that when someone hovers their mouse over the link, a “tooltip” is displayed, giving them more information. In the example shown below, the image of Dorothy looking out her window is a link to download an audio clip of the theme of the Wicked Witch. The tooltip I added displays the target post’s title “free ringtone: wicked witch of the west” when the mouse hovers over the image.
A simple way to add a tooltip to an image link is to add the following code immediately following the link target:
<span title=”your tooltip language goes here”></span>
For an example of how this was used in the image above, check out the sample code below.
The tooltip code appears highlighted on line 4:
<span title="free ringtone: wicked witch of the west">
<img class="alignnone size-large wp-image-685"
style="border: 1px solid #000000;"
w=474" width="474" height="700" /></span></a>
As you might expect, the tooltip code isn’t limited for use with an image link. It can also be used with a text link, again, just by adding it immediately following the link target and before the </a>
(hover over the following text to view the tooltip)
Wicked Witch of the West Theme Song
Here’s what the code from the above text link looks like:
<span title="free ringtone: wicked witch of the west">Wicked Witch of the West Theme Song
To add a tooltip to plain text, it’s even simpler:
<span title=”your tooltip language goes here”>Text to be hovered over.</span>
Need a code snippet for your style sheet?
Below are four options for setting the top, bottom, left and right margins:
margin:10px 40px 25px 90px;
top margin is 10px
right margin is 40px
bottom margin is 25px
left margin is 90px
Continue reading “css margins.”