I am practicing my HTML and CSS skills using Notepad++ and I have ran into a problem when I was adding a couple of links to my footer. The problem I am having is that each link is including the margin-right value of 15px (i.e. the white space between each link can be clicked on). I want to be able to ONLY click on the words to direct me to that particular page.
Here is my HTML code for the footer:
<body>
<div id="footer">
<div id="footerlinks">
<a href="index.html">
<span style="color: #FFFFCC">
<p class="footerlink">
HOME
</p>
</span>
</a>
<a href="about.html">
<p class="footerlink">
ABOUT
</p>
</a>
<a href="rooms.html">
<p class="footerlink">
ROOMS
</p>
</a>
<a href="divesite.html">
<p class="footerlink">
DIVE SITE
</p>
</a>
<a href="food.html">
<p class="footerlink">
FOOD
</p>
</a>
<a href="news.html">
<p class="footerlink">
NEWS
</p>
</a>
<a href="contact.html">
<p class="footerlink">
CONTACT
</p>
</a>
</div>
</div>
</body>
Here is my CSS for the footer:
#footer {
width: 100%;
height: 50px;
background-color: #999999;
border-bottom: 1px solid black;
padding-right: 20px;
padding-left: 20px;
clear: both;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#footerlinks {
height: 100%;
line-height: 45px;
display: inline-block;
float: left;
}
#footerlinks a {
color: #333333;
}
#footerlinks a:link {
text-decoration: none;
}
#footerlinks a:hover {
color: #FFFFCC;
}
.footerlink {
font-size: 14px;
vertical-align: center;
margin-right: 15px;
display: inline;
}
Here is my JSFiddle - https://jsfiddle.net/vu4qg17c/2/
I have only included the necessary parts of the HTML and CSS code in the JSFiddle. Thank you in advance.
Instead of
<a href="about.html">
<p class="footerlink">
ABOUT
</p>
</a>
Reverse the position of <a> and <p>
<p class="footerlink">
<a href="about.html">
ABOUT
</a>
</p>
Do the same in all others.
Writing <a> before <p> makes the whole<p> as a link. And, as the <p> has some default padding, the area without text also becomes clickable.
Simplest solution would be reversing the p and a on your links. Then you can adjust margin and padding on the paragraphs (.footerlink) and the links are just as long as the text is.
e.g.
<p class="footerlink">
<a href="rooms.html">
ROOMS
</a>
</p>
in this class you are giving margin of 15px.
.footerlink {
font-size: 14px;
vertical-align: center;
margin-right: 15px;
display: inline;
}
Your behaviour sounds like the standard behaviour for padding, which is whitespace "inside" of the element (between content and border). margin, as you are using it, is whitespace outside of the border and thus should not be part of the link element.
The problem in your case could be that you added the margin to the span element inside of the a element and thus being seen as "belonging" to the link in some browser. Move the margin attribute to the a element (#footerlinks a) itself instead of its child (.footerlink).
See here
Related
I have a client's website that I am trying to fix... The booking page should have the address on the left and the contact form on the right and the white box should fill the webpage.
At the moment, the DIV box just aligns to the left and this means that the contact form and address are squashed together. What can I do? Here is the webpage
.box {
background-color: white; /* for visualization purposes */
display: inline-block;
max-width: 100%;
}
.box2 {
display: inline-block;
padding: 20px 20px;
max-width: 100%;
}
<div class="content">
<div class="wrap">
<div class="contact">
<h1>Book an Appointment Online or via Telephone/Email:</h1>
<div class="section group contact1">
<div class="col span_1_of_3">
<div class="company_address">
<h3>Company Information:</h3>
<p>BY APPOINTMENT ONLY</p>
<p>Imani Skin Clinic,</p>
<p>8-10 Sneyd Street</p>
<p>Cobridge</p>
<p>ST6 2NZ</p>
<p>United Kingdom</p>
<p>Phone:+447305585588</p>
<p>Email: <span>info#imaniskinclinic.com</span></p>
<br />
<br />
<div id="share-buttons">
<!-- Twitter -->
<a href="https://twitter.com/imaniskinclinic" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/imaniskinclinic" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Instagram -->
<a href="http://www.instagram.com/imaniskinclinic" target="_blank">
<img src="images/insta.jpg" alt="Instagram" />
</a>
</div>
<br />
<br />
</div>
<div id="contact"><a class="shedul-embed-button-link" style="overflow: visible; cursor: pointer; background: rgb(248,171,190); color: rgb(255, 255, 255); border: 0px; display: inline-block; outline: none; padding: 10px 15px; margin: 0px; font-family: Roboto, sans-serif; font-size: 16px; line-height: 16px; text-decoration: none; border-radius: 3px; -webkit-appearance: none; box-shadow: none;" href="https://www.fresha.com/providers/imani-skin-clinic-ltd-cgfhlxsq">Book Now</a><script>!function(e){var t="shedul-embed-button-loader",d="https:"===e.location.protocol?"https":"http",n=e.getElementsByTagName("head")[0];if(!e.getElementById(t)){var o=e.createElement("script"),p=e.createElement("style");o.id=t,o.src="https://app.shedul.com/embed_button.js".replace(/^\w+/,d),p.type="text/css",p.innerHTML=".shedul-widget-open { position: fixed; overflow:hidden; }",n.appendChild(o),n.appendChild(p)}}(document);</script></div>
</div>
<div class="col span_3_of_3">
<div class="contact-form">
<div id="zbwid-fbedad33"></div>
</div>
</div>
You've to do two things first give contact1 class to 100% width, though it's already there but syntax error. Put !important otherwise it will be overruled
.contact1{ width: 100% !important }
Then div that contains col span_3_of_3 classes, give this div a class with floating point
.your-class-name{ float: right !important }
You are good to go
For the class ".section", make width 100% instead of auto.
Above the div class="company_address", there is one div with class "col span_1_of_3",
For ".span_1_of_3", increase width to 50%.
And for ".col span_3_of_3", increase width to 30%, and set float: right.
You may adjust the widths according to your needs and for responsive design.
Start by fixing your HTML to mark all needed elements - container (or wrapper) and contact box + address box inside it. Then you can float the contact box and address box to the left or right. Also your CSS is targeting 2 classes that do not exist in your HTML.
I imagine this is a duplicate question, but as someone who is relatively inexperienced in HTML I don't know exactly what to search, and I couldn't find a direct answer from the google searches I tried.
I'm writing HTML for the sidebar for an older website. The sidebar is nothing fancy - a small image at the top, followed by a number of plaintext links listed below it, placed at the side of the webpage with a css styling. Each link takes this form:
<span class="c2">Subpage</span><br>
In an effort to make the document somewhat more readable, I've expanded the various links to the following:
<a href="/subpage/">
<span class="c2">Subpage</span>
</a>
<br>
However, when I do this, a few extra pixels of padding are placed above and below each link. Ultimately, the combined added padding causes the links to end up overlapping an element lower on the page, which I don't want.
I'm already aware that HTML converts a newline to a space, but this appears to be a distinctly different problem. I'm curious to know what causes this padding to appear, given that I have difficulty replicating it in the online HTML playground.
Below is a mockup of the sidebar's HTML and the parts of the CSS files I believe are relevant:
body{
margin: 1px 10px 10px 10px;
padding:1px 10px 10px 10px;
background-image: url(../../images/ribbon.jpg);
}
#lh-col{
position: absolute;
top: 1px;
left: 5px;
width: 110px;
margin: 1px;
padding: 1px;
}
#rh-col{
margin: 0px 21px 0px 100px;
padding: 20px;
}
span.c2 {color: #004080; font-family: Arial; font-size: 85%}
<body>
<div id="lh-col">
<p>
<a href="/">
<img src="images/logo.gif" border="0" alt="Text" width="33" height="22">
</a>
</p>
<p>
<a href="/page1/">
<span class="c2">Page 1</span>
</a>
<br>
<a href="/page2/">
<span class="c2">Page 2</span>
</a>
<br>
<a href="/page3/">
<span class="c2">Page 3</span>
</a>
<br>
</p>
</div>
<div id="rh-col">
<!-- The rest of the page... -->
</div>
</body>
Browsers are notorious for adding extra padding between inline elements, https://css-tricks.com/fighting-the-space-between-inline-block-elements/, when there is a line break or space between them in the HTML. There's several ways to circumvent this:
Use an HTML minifier, http://minifycode.com/html-minifier/. (or a workflow tool would be more efficient)
Rewrite your HTML to remove the spaces manually. The only necessary part to focus on is having no space between one element's closing tag and the next element's open tag. i.e. </a><a>
The flexbox solution mentioned in other answers.
Adjust your CSS to compensate for a scenario where two <a> are next to each other and negative margin the second one (do not recommend this but it is an option).
a + a{margin-left: -4px;}
Another solution is to add display block to your a tags
Also if I was coding this I wouldn't even include the p tag or the br tag. Unless you need them for some reason.
body {
margin: 1px 10px 10px 10px;
padding: 1px 10px 10px 10px;
background-image: url(../../images/ribbon.jpg);
}
#lh-col {
position: absolute;
top: 1px;
left: 5px;
width: 110px;
margin: 1px;
padding: 1px;
}
#rh-col {
margin: 0px 21px 0px 100px;
padding: 20px;
}
span.c2 {
color: #004080;
font-family: Arial;
font-size: 85%
}
#lh-col p a {
display: block;
}
<body>
<div id="lh-col">
<p>
<a href="/">
<img src="images/logo.gif" border="0" alt="Text" width="33" height="22">
</a>
</p>
<p>
<a href="/page1/">
<span class="c2">Page 1</span>
</a>
<a href="/page2/">
<span class="c2">Page 2</span>
</a>
<a href="/page3/">
<span class="c2">Page 3</span>
</a>
</p>
</div>
<div id="rh-col">
<!-- The rest of the page... -->
</div>
</body>
Or you can be more semantic and make it simple with flexbox:
nav {
display: flex;
flex-direction: column;
}
<nav>
Link 1
Link 2
Link 3
</nav>
An old hack is to hide the spaces using comments:
<a href="/subpage/"><!--
--><span class="c2">Subpage</span><!--
--></a>
Of course, this causes the code to be more ugly to work with.
I'm struggling with getting a section background color to change on mouse over. I'm trying to turn the entire section into a link. Right now, only the elements inside the section become links, not the block itself.
If I remove the <section> prior to the <a> the whole block becomes a link but the background sill does not change on mouse-over. I have an identical scenario in a menu and it works, so I'm a little confused here. I'm also wondering why only the elements turn into links withing a section and it does the opposite in my sub menu. Section code below:
.ch-section {
position: relative;
min-height: 140px;
max-height: 140px;
width: 400px;
color: $ch-section-text;
font-size: 13px;
border-bottom: 1px solid $body-1px-line;
}
.ch-section a {
display: block;
width: 400px;
text-decoration: none;
}
.ch-section a.active {
font-weight: bold;
}
.ch-section a:hover:not(.active) {
background-color: yellow;
color: $sn-list-link-active;
}
<section class="ch-section">
<a href="#">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</a>
</section>
I'm struggling with getting a section background color to change on
mouse over. I'm trying to turn the entire section into a link. Right
now, only the elements inside the section become links, not the block
itself.
If I remove the prior to the the whole block becomes a
link but the background sill does not change on mouse-over.
It is because you have a as child of the section, so make it parent (as I did it in a previous question you had).
.ch-section {
position: relative;
min-height: 140px;
max-height: 140px;
width: 400px;
color: $ch-section-text;
font-size: 13px;
border-bottom: 1px solid $body-1px-line;
}
a {
text-decoration: none;
}
a .ch-section {
display: block;
width: 400px;
}
a.active .ch-section {
font-weight: bold;
}
a:hover:not(.active) .ch-section {
background-color: yellow;
color: $sn-list-link-active;
}
<a href="#">
<section class="ch-section">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</section>
</a>
The actual problem here is that you haven't set the height of your a tag. However when setting the a tag height to 100%, you will notice it still won't work. This is because the section has no fixed height specified. Instead you specified both min-height and max-height to be the same height, which doesn't really make sense. If instead you specify height:140px, it will work as expected:
.ch-section {
position: relative;
height: 140px;
width: 400px;
font-size: 13px;
}
.ch-section a {
display: block;
height: 100%;
text-decoration: none;
}
.ch-section a.active {
font-weight: bold;
}
.ch-section a:hover:not(.active) {
background-color: yellow;
}
<section class="ch-section">
<a href="#">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</a>
</section>
I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go.
Here's the code I have for it in HTML:
<div class="crown">
<div class="container">
<img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
<h3><strong>Join today!</strong></h3>
<p style="text-align: center;"><a class="btn-two" href="#">Register</a></p>
</div>
</div>
<section class="footer">
<div class="container">
<p>© 2016</p>
</div>
</div>
</body>
</html>
And here's the CSS for it:
.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 20px 0 -30px 0;}
I've tried a lot of things in the CSS that aren't working. I want the button to be a few inches below the "Join today!" text but it stays where it's at, like a hair below the text when I want there to be space in between the text and the button. Any idea what I'm doing wrong? And again I'm new to all this so I appreciate your understanding. Thank you.
You have to add display:inline-block; or block to the .btn-two since anchor elements are display:inline by default and margin/padding can't affect em
Check the snippet below
.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 60px 0 0 0;
display: inline-block;
}
I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go. Here's the code I have for it in HTML:
<div class="crown">
<div class="container">
<img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
<h3><strong>Join today!</strong></h3>
<p style="text-align: center;"><a class="btn-two" href="#">Register</a>
</p>
</div>
</div>
<section class="footer">
<div class="container">
<p>© 2016</p>
</div>
</div>
You can also remove text-align:center; style from the <p> that contains the button.
Working fiddle: https://jsfiddle.net/L210zqvf/
Apply display: inline-block; to your .btn-two. An <a> tag is an inline element, generally not accepting width, height, margins etc. as long you don't do the above.
Yeah, and if you don't want it to be centered, remove style="text-align: center;" from your <p> Tag.
Anchor a elements are display:inline by default in a browser. Inline level elements can't have margin or padding, top or bottom. You can only apply margin and padding to the left or right of an element.
In your case. I'd put a class on the containing paragraph element and add margin to the top of that. Paragraph elements are block level elements.
This seems simple to me, but after days of trying (I have very limited experience) and searching for a solution, I have drawn a blank.
I am creating a page of links on a single html page with embedded css style for use in a browser window.
I wish to simply align my link to the left of my div, with a text explanation of the link which aligns to the right of the div. There is a wrapper div which contains two of these other div's (right and left), which contain boxes (categories) of links. The first example is merely using periods to create the desired space.
So far I have tried the below HTML:
<html>
<body>
<div class="wrapper">
<div class="div_body_side1">
<div id="div_category01">
<p>
<A HREF="http://www.webaddress" > Short Description
</A>.................... Longer description of where this link will take you
</p>
</div>
</div>
</div>
</body>
</html>
I also thought I may try this method (below) but I don't know how to color the text in the long description and align it to the far right of the category div.
<tr>
<td>
<A HREF="http://www.webaddress" > Short Description</A>
</td>
<td>
Longer description of where this link will take you
</td>
</tr>
Will I have to create two more side-by-side divs inside each category to achieve what I'd like?
I will also need the divs and text to 'shrink' (scale) horizontally for small laptop use and I know that a lot of div's (floating) somehow prevents proper scaling.
I apologise for my lack of expertise, but I really have been looking for a solution for days.
Thank-you in advance for any assistance.
.............
..................................................
Hello again.
Unfortunately, Billy Chan's answer did not work (but thank you for reminding me to use the 'title' attribute). I have tried it with a list of three links and what happens is the output looks like this:
link1link2link3 explanation1explanation2explanation3
Here is what I used:
<div>
<span class="link">
Whatever</span>
<span class="explanation">Whatever explain</span>
<span class="link">
Google search
</span>
<span class="explanation">Secure Google search page
</span>
<span class="link">
<a href="http://www.google.com/ncr" >Google search</A>
</span>
<span class="explanation">US Google search page
</span>
</div>
...with the following CSS:
<style>
.link, .explanation {display:inline}
.link {float: left}
.explanation {float: right}
</style>
I shall now try the other solutions that have been kindly provided.
Thank-you all so much.
.......................................
Thank-you dbaseman, but your solution requires two more divs within my category divs, does it not? I can't apply your "div class="right"" to my Category divs (which are an IDs), can I?
Will now try Urg mu's solution. Cheers.
Oh.. Urg mu - it seems you have provided a solution for colouring the text only. Your solution isn't going to align my 'long explanation' to the right is it?
On to Naveen Sharma. I'm sorry but can you please explain what your solution is actually supposed to do?
Thank you all again. I am learning a lot.
Cheers.
Please see this horrible jsFiddle version of what I am trying to achieve. Yes, it includes lots of testing things and also the 'solutions' provided here.., and you will have to drag your browser window to the far right and the 'result' window to the far left to see my two divs side-by-side:
http://jsfiddle.net/wreckanoid/CdN2z/
Direct answer:
Use two spans to wrap links and explanation. Example
<div id="catgory01">
<span class="link">Whatever</span>
<span class="explanation">Whatever explain</span>
</div>
Then define style of the two spans
<style>
.link, .explanation {display:inline}
.link {float: left}
.explanation {float: right}
</style>
The reason to wrap the link is you may not want all your links behave like this.
This answer should work, but you may find problem is your link anchor or explanation is too long, they may overlap. Just pay attention to that.
A further answer: The correct way to explain a link is to use title attribute
Whatever
This way when you hover the link, you get the hint.
In The HTML that you have given add folowing line of code
<style>
.div_body_side1 p a{width:200px;float:left}
</style>
LIVE DEMO
CSS
div { width:400px; border:red 1px solid; padding:10px 0px; }
p { overflow:auto; margin:0px;
background:url('http://reference.wolfram.com/legacy/MathematicaCharacters/Ellipsis.gif') 100% repeat-x ;
}
a {
float:left; padding:0px 5px 0px 10px;
background-color:#fff;
}
.desc {
float:right; padding:0px 10px 0px 5px;
background-color:#fff;
color:#333;
}
HTML
<div>
<p>
<a href="#link" >IAClient</A>
<span class="desc">QUT Internet Access Client</span>
</p>
<p>
<a href="#link" >AARNet</A>
<span class="desc">AARNet's FTP & HTTP Mirror</span>
</p>
</div>
http://jsfiddle.net/CZt8R/
One simple way is to use float: left and float: right on the link and the description, respectively.
HTML
<a href="http://www.webaddress" > Short Description </a>
<div class="right">.................... Longer description of where this link will take you</div>
CSS
a { float: left; }
.right { float: right; }
Here's a demo.
Edit post update
Two keys to getting this kind of layout:
Use fixed (percentage-based) left-margins for the links, and for the descriptions
Display a long string of ellipses "..............." and use overflow-x: hidden to hide the excess
Another demo.
Here is what I have settled on.
I may add some underscores between the links and the explanations, but I think I now have the basis for a great, embedded CSS link menu page for browser use.
Here is the result:
http://jsfiddle.net/wreckanoid/zV9Sd/embedded/result/
Here is the code:
http://jsfiddle.net/wreckanoid/zV9Sd/
.wrapper
{
position:relative;
background-color: #e7ecfa;
width: 90%;
margin-left:15%;
margin-right:15%;
height:auto;
display: block;
overflow:auto;
border:inset .5em #ccffff;
margin: 1em auto;
box-shadow: 0 0.3em 1em #000000;
}
.div_body_side1
{
float: LEFT;
position:relative;
text-align: left;
/* border: solid 1px #d1d7e5; */
width: 45%;
display: block;
margin-left: 2.5em;
margin-right: 1em;
margin-top: 2em;
margin-bottom: 2em;
padding: .5em;
white-space:normal;
clear:none;
}
.div_body_side2
{
clear:none;
float:left;
position:reative;
text-align: left;
/* border: solid 1px #d1d7e5; */
width: 45%;
display:inline;
margin-right: 1em;
margin-top: 2em;
margin-bottom: 2em;
padding: .5em;
}
#div_category01, #div_category02, #div_category03, #div_category04, #div_category05, #div_category06, #div_category07, #div_category08, #div_category09
{
background-color: #eff5fb;
margin: 1em 1em;
width: auto;
display: block;
border:ridge 6px #ff3333;
box-shadow: 0 0.3em 1em #000000;
position:relative;
clear:both;
}
.center
{
text-align: center;
}
.right
{
float: right;
padding-right: 20px;
color: #cc6600;
}
body
{
margin:0;
padding:0;
}
h1
{
text-align: center;
}
h2
{
text-align: center;
}
img.center
{
display: block;
margin: 0 auto;
}
a
{
color: blue;
padding-left: 20px;
}
Here is the HTML:
</head>
<body>
<div class="wrapper">
<H1> Test Bookmarks Menu</H1>
<a href="http://www.qut.edu.au" >
<IMG SRC="http://www.tils.qut.edu.au/graphics/logo.gif"
BORDER="4" title="QUT logo" alt="QUT logo" class="center" /></a>
<div class="div_body_side1">
<div id="div_category01">
<H2>CATEGORY 1 HEADER</H2>
<br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
<a href="https://www.google.com/ncr" > Google USA
</a>
<span class="right">
Google Secure, USA
</span><br><br>
<a href="https://encrypted.google.com/" > Google Encrypted
</a>
<span class="right">
Google Secure, Encrypted
</span><br><br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
</div><!-- close category01 -->
</div><!-- close div_body_side1 -->
<div class="div_body_side2">
<div id="div_category05">
<H2>Category 5 Header </H2>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
<a href="https://www.google.com/ncr" > Google USA
</a>
<span class="right">
Google Secure, USA
</span><br><br>
<a href="https://encrypted.google.com/" > Google Encrypted
</a>
<span class="right">
Google Secure, Encrypted
</span><br><br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
</div><!-- close category05 -->
</div><!-- close div_body_side2 -->
Thanks to all you people I feel I'm now getting a grip on this CSS stuff.. ! :-)
I will be adding the 'title' tag to all the links, too.
Cheers.