[SOLVED] CSS border

Johnathan · #1 Jan 5th, 2008, 11:50

Hi all,

I have tried to search this forum for my question but get the message, seach string needs to be 4 charactors or above. Maybe this is due to the first word only containing 3 letters?

www.usbtvtuner.co.uk

I am trying to create a border around my 3 images on the left of the page like the borders around the images in the grey boxes. Can anyone advise on the code please?

Also when I tried to resolve this matter before posting on the forum I noticed that the top grey box has width and height options within the index.html page wheres the second box does not. Also there is the option to change the width and height of the first box in the CSS which at the time appeared to be different to that on the index.html.

Regards. John.

Stuart · #2 Jan 5th, 2008, 13:21

Just add the following around the image:

HTML: Select all

<div class="thumb">
<!-- image here -->
</div>

Then, change your CSS a bit. Like this:

Code: Select all

.thumb {
background:none;
border:1px solid #D4D4D4;
color:#FFFFFF;
float:left;
margin:0pt 15px 15px 0pt;
padding:5px;

I removed some unnecessary styles that were messing it up.

Cheers

Johnathan · #3 Jan 5th, 2008, 18:26

Thanks Stuart,

I presume I add the code above the following code?

<img

src="../tn/tn_encoder440.jpg" alt="Play"

width="96" height="94" border="0" align="left"/>Lorem ipsum dolor

When I changed the tumb statement the CSS disappeared around the organge boxes, any ideas?

Regards. John.

Stuart · #4 Jan 5th, 2008, 19:01

Here is what you do:

HTML: Select all

<div class="thumb">
 <img  src="../tn/tn_encoder440.jpg" alt="Play"  width="96" height="94" border="0" align="left"/>
</div>

Then, replace the current .thumb CSS with this:

Code: Select all

.thumb {
background:none;
border:1px solid #D4D4D4;
color:#FFFFFF;
float:left;
margin:0pt 15px 15px 0pt;
padding:5px;

And that should be it.

dab42pat · #5 Jan 5th, 2008, 19:05

Hi Jonathon

As stuart said in his above post in your html code it would look like this.

HTML: Select all

<div class="thumb"><img  

src="../tn/tn_encoder440.jpg" alt="Play"  

width="96" height="94" border="0" align="left"/><div>Lorem ipsum dolor

and replace your .thumb in your css file with what stuart posted.

that should do it.

Pat

damn!, to slow again

Marc · #6 Jan 5th, 2008, 19:11

Just to let you know, the "align" attribute is depreciated in HTML.

Stuart · #7 Jan 5th, 2008, 19:21

Good point, Marc. So, do the following instead:

HTML: Select all

<div class="thumb">
 <img  src="../tn/tn_encoder440.jpg" alt="Play" width="96" height="94" border="0" class="alignleft" />
</div>

And here's the CSS:

Code: Select all

.thumb {
background:none;
border:1px solid #D4D4D4;
color:#FFFFFF;
float:left;
margin:0pt 15px 15px 0pt;
padding:5px;

.alignleft {
float:left;
}

And that's all you need.

dab42pat · #8 Jan 5th, 2008, 19:26

I think what jonathon has done is he has copied and pasted certain parts of his code as he now has 14 errors.
His page validated before he posted this thread.

Stuart · #9 Jan 5th, 2008, 19:33

Well, the code from my last post up there is valid, so if he uses that, there shouldn't be any errors.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] border-radius	RZX Developer	Web Page Design	19	Dec 15th, 2007 23:32
Border to a form	paddywhack	Web Page Design	3	Feb 7th, 2007 13:44
Apache FOP Border	davedran	Other Programming Languages	0	Dec 18th, 2006 15:28
Why only one border?	timmytots	Web Page Design	1	Nov 30th, 2005 21:32
CSS Border Question!	freebirdnz	Web Page Design	2	Nov 23rd, 2004 17:51

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] CSS border