I need HTML help!

[sily_sicily]

How do I make a border and put words in it? And how do I close a border? Help I don't understand!!!

[werepup]

Moving the the computing and technology section.

Now, what do you mean by a border, do you mean within a table?

Have a look on http://www.w3schools.com/ and look at the Learn HTML tutorials, if you get past them, try the CSS tutorials. Good luck

[mazil]

Are you wanting to add some text to a webpage, with a border around it?

Hmmm, there's probably two main ways to do it (try copying and pasting these into your HTML file or petpage or webpage in general).

1. The table way:

Code:

<table border="1">
    <tr>
       <td>Text goes here!</td>
    </tr>
</table>


This'll give the text a slightly ugerly border by putting it inside a table. People tend to use tables to add background images and things too. You could also add some CSS to make the border prettier.

2. The CSS way:

Code:

<div style="border: 1px solid blue">Text goes here!</div>


In this case, the text is put in a "div" element, which basically just defines an area of a webpage.

This method is kinda difficult if you don't know much CSS, but it gives you the most flexibility! Basically, you can change the border properties to various things. The first part (property) after border: is the width (eg. "1px", "5px", "thick"), the second is the style ("solid", "dashed") and the third is the colour ("blue", "red", "#ff0000"). This page explains it a bit too.

Edit: Yeah, the w3schools site is really good! It's perhaps not the friendlist looking site, but it's very thorough.
This page, for example, explains almost all there is about borders. If you click on one of the examples, it shows the HTML and CSS in action (eg. this one is pretty cool)

[sily_sicily]

I mean borders that are similar to the tables here: http://www.i-petz.com/goodieroom/shop_tables.html. How do I change the image and how do I close the borders?

[werepup]

It's normally done on photoshop or a similar graphics package.

Try looking on http://www.tutorialized.com/tutorials/P ... /Brushes/1 if you have photoshop, or search on google for tutorials on how to do it for the graphics package that you have.

[sily_sicily]

Sigh, no one is answering me about closing a border...
Anyone knows how? Can you tell me please?

[werepup]

Right, first off, the link you gave went to a 404 page... at first glance I thought that was the page you were talking about, there was actually a '.' at the end of the link, making it invalid.


By looking at the code that's on the correct page, all that's happening here is that there's a table with a background and a cell centred within the table with the text within it.

The code that's there for the first table is:

Code:

<center>
<p><table cellpadding="30" cellspacing="30" border="3" background="http://www.i-petz.com/bgimage/shop_tables/ang_gl1.gif"><tr><td bgcolor="white" align="center" valign="middle" colspan="2"><center><p><a><img src="http://www.i-petz.com/tbltg001.gif" border="0" alt="NWoF Guild"></a><p></center><br>


The

Code:

http://www.i-petz.com/bgimage/shop_tables/ang_gl1.gif

is the sparkly image. This is just one image that is animated on the site, but will be repeated on the x and y axis as needed to fill the table size. (since there's nothing there to tell it not to)

The

Code:

<a><img src="http://www.i-petz.com/tbltg001.gif" border="0" alt="NWoF Guild"></a>

Is the section you can edit and make your own text.

The table will close itself if you leave in

Code:

<tr><td bgcolor="white" align="center" valign="middle" colspan="2"><center><p>

and your end tags in place

Hope that helps.

[sily_sicily]

Thank you soo much!!!

[sily_sicily]

Urgh...got another problem...

How do we make something that can contain words in it, is able to scroll and is not textarea? Erm I don't mean neopets petpage, I mean freewebs.

[mazil]

Ah, here's something that'll work, I think. You need a "div" element again (like in my post above), with a CSS property of "overflow: scroll". Try copying and pasting this somewhere:

Code:

<div style="overflow: scroll; width:150px; height: 150px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pede urna, semper a, rhoncus quis, bibendum id, mauris. Nam malesuada lacinia nibh. Vestibulum quam. Nulla erat. Vivamus non nunc. Cras justo. Donec a dui vitae nisi gravida vestibulum. Fusce posuere accumsan libero. Integer malesuada. Cras at nisl.
</div>


Replace the "Lorem ipsum..." text with whatever you like :) You can also change the width and height, and add other CSS properties (eg. to add a border and background colour)!

For example, the following creates a scrolly div with a width of 300 pixels, a height of 100 pixels, a 5 pixel blue border and a neopets background image:

Code:

<div style="overflow: scroll; width:300px; height: 100px; border: 5px solid #0099CC; background-image: url('http://images.neopets.com/backgrounds/tile1.gif'); ">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pede urna, semper a, rhoncus quis, bibendum id, mauris. Nam malesuada lacinia nibh. Vestibulum quam. Nulla erat. Vivamus non nunc. Cras justo. Donec a dui vitae nisi gravida vestibulum. Fusce posuere accumsan libero. Integer malesuada. Cras at nisl.
</div>