HTML Links & Border Colour Problem

Lago

I'm doing HTML website design for a college assignment and I've run into some problems.

The first one is with links. We have to create 3 pages at least and put links for each one on each page so they're easily reachable. I have three links across the top of the screen but for some reason they just randomly stop working. Instead of linking to the page I set, they random change one at a time to link to "url", which was the placeholder I was using before I created all the pages. Obviously this gives me a unable to find webpage error. It's a different link that this happens on each time. Here's the code:

<p style="text-align:center;"><a href="Website.html" style="text-decoration:none;">Home</a>    <a href="Gym.html" style="text-decoration:none;">Gym</a>    <a href="Spa.html" style="text-decoration:none;">Spa</a></p>

I also want to change the text to white and possible make it bigger if anyone can help me with that.

Secondly, I have an image at the top of my page with a border around it. It seems that by default this border is black, but I want to change it to white. And here's the code for that.

<center><img src="anoceanofsky.jpg" alt="image description" height="325" width="650" border="8"></center>

Just to point out that I've been reading up on CSS and I'd love to use it because it seems fair easier and more managable. However, it never came up in classes or notes so I'm not sure if we're not allowed use it or if I'll get accused of plagarism for using it so I'd rather not risk it. Thanks in advance for any help

Mr E

Your website may be hosted on a server where case sensitivity matters. Make sure your page file names are lower case (e.g. website.html instead of Website.html), and make sure your menu matches up.

Also make sure you don't have a mixture of htm and html file extensions.

If you want to make the links white (but don't want to use linked stylesheets), update the style on your link tags from:

style="text-decoration:none;"
to:
style="text-decoration:none;color:white;"

Borders on images are a bit naff and are usually turned off. If still want to use them and you're allowed use style attributes (like your links), try adding style="border:1px solid white;" to each image.

Increase px value to increase width.

Lago

Mr E wrote: »

Your website may be hosted on a server where case sensitivity matters. Make sure your page file names are lower case (e.g. website.html instead of Website.html), and make sure your menu matches up.

Also make sure you don't have a mixture of htm and html file extensions.

If you want to make the links white (but don't want to use linked stylesheets), update the style on your link tags from:

style="text-decoration:none;"
to:
style="text-decoration:none;color:white;"

Borders on images are a bit naff and are usually turned off. If still want to use them and you're allowed use style attributes (like your links), try adding style="border:1px solid white;" to each image.

Increase px value to increase width.

Thanks a million, they all worked.

Just one more question, how exactly would I create a table (I think it's a table) like the one at the bottom of this screenshot?

http://i528.photobucket.com/albums/dd330/ccllnply/screenshot_zpse0918605.jpg

BmCon

Looks like you should have a href to the index.html page and not website.html
You could also use this ../pagename.html for the links to your pages.
I hope this helps

Mr E

Lago wrote: »

Thanks a million, they all worked.

Just one more question, how exactly would I create a table (I think it's a table) like the one at the bottom of this screenshot?

http://i528.photobucket.com/albums/dd330/ccllnply/screenshot_zpse0918605.jpg

A table is probably the easiest way of doing it.

The only way to learn is by trying it yourself. Syntax here:

http://www.w3schools.com/html/html_tables.asp

Make it the same width as your image, and use the same thickness of border.

Lago

Thanks again.

I managed to get the table to work and look like the one in the picture. However, when I go to put text in it, it starts halfway down the table and creates a black line just inside the border. I don't mind about the black line but I want to be able to start the text from the top of the table.

<table border="5" align="center" width="660" height="325" background="content_back.png" style="border-width:5px; border-color:white;
border-style: solid;;">
<tr>
<td> </td>
<td> </td>
</tr>
</table>

Kenny Logins

It's a div (or set of divs), not a table.

Do you have to use inline styles, with no css?

Lago

Kenny Logins wrote: »

It's a div (or set of divs), not a table.

Do you have to use inline styles, with no css?

That's the way I'm trying to do it. Like I said it wasn't mentioned in class or in the notes so I'm just playing it safe incase we're not allowed use CSS. I'm love to really, it seems like a far easier way of doing it

Kenny Logins

Even internal css (placed in the head) would be easier than inline styles IMHO.

I'd imagine the only problem with that is you might be jumping ahead. ..if that is a problem...

BTW, you can download that template (from the screenshot) and have a peep at what's going on in there.

Lago

Kenny Logins wrote: »

Even internal css (placed in the head) would be easier than inline styles IMHO.

I'd imagine the only problem with that is you might be jumping ahead. ..if that is a problem...

BTW, you can download that template (from the screenshot) and have a peep at what's going on in there.

I don't really know how to do internal CSS at all. Not sure if I'll have the time to read up on it.

I did download the template, it's all done in external CSS. I've been trying to redo it in inline styles but obviously I'm facing some problems

Kenny Logins

This is it in div form;

<div style="background: url('content_back.png'); border: 5px solid #FFF; width: 660px; height: 325px; margin: auto;">
<p style="margin: 20px">Text goes here</p>
</div>

Margin: auto centres it on the page, but you would only need to do this for a 'wrapper' or 'container' div that would hold everything on the page.

Lago

Kenny Logins wrote: »

This is it in div form;

<div style="background: url('content_back.png'); border: 5px solid #FFF; width: 660px; height: 325px; margin: auto;">
<p style="margin: 20px">Text goes here</p>
</div>

Margin: auto centres it on the page, but you would only need to do this for a 'wrapper' or 'container' div that would hold everything on the page.

Thanks man, hugely appreciate that. It's helped me out massively