Borders

03-04-2004

I have the following code in my page and want the images to be surrounded by
a 150 x 150 border despite the size of each image. What have I done wrong?

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
..imgsmall {
border: 2px solid #656051;
margin: 10px;
text-align: center;
background-color: #FFFFFF;
width: 150px;
height: 150px;
}

..imgnav {
position: absolute;
left: 32%;
top: 130px;
}
</style>
</head>

<body>
<div class="imgnav">
<div class="imgsmall"><a href="design_red_dress.php"><img
src="images/rtw_ladies.jpg" alt="Click here to see a larger image and
description." /></a></div><div class="imgsmall"><a
href="design_trouser_suit.php"><img src="images/rtw_mens.jpg" alt="Click
here to see a larger image and description."/></a></div>
</div>
</body>
</html>

03-04-2004

Bruno wrote:

> I have the following code in my page and want the images to be surrounded by
> a 150 x 150 border despite the size of each image. What have I done wrong?

Nothing. The alt text is just longer than 150px, so when you
put in the pics, the alt text won't show anymore, and the
problem will be solved.
Well, that's if your images aren't larger than 146 x 146px.

>
> <html>
> <head>
> <title>Untitled Document</title>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <style>
> .imgsmall {
> border: 2px solid #656051;
> margin: 10px;
> text-align: center;
> background-color: #FFFFFF;
> width: 150px;
> height: 150px;
> }
>
> .imgnav {
> position: absolute;
> left: 32%;
> top: 130px;
> }
> </style>
> </head>
>
> <body>
> <div class="imgnav">
> <div class="imgsmall"><a href="design_red_dress.php"><img
> src="images/rtw_ladies.jpg" alt="Click here to see a larger image and
> description." /></a></div><div class="imgsmall"><a
> href="design_trouser_suit.php"><img src="images/rtw_mens.jpg" alt="Click
> here to see a larger image and description."/></a></div>
> </div>
> </body>
> </html>
>
>

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

03-04-2004

"Bruno" <> wrote:

> I have the following code in my page and want the images to be
> surrounded by a 150 x 150 border despite the size of each image.

What do you mean by 150 x 150 border? Do you actually mean putting each
image inside a 150 by 150 pixels box?

> What have I done wrong?

To begin with, you didn't post a URL. Why should we try and construct a
test page, instead of looking at yours?

> <div class="imgsmall"><a href="design_red_dress.php"><img
> src="images/rtw_ladies.jpg" alt="Click here to see a larger image
> and description." /></a></div><div class="imgsmall"><a
> href="design_trouser_suit.php"><img src="images/rtw_mens.jpg"
> alt="Click here to see a larger image and description."/></a></div>

Those alt texts will act as _replacements_ of the images exactly how?

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

03-04-2004

"Els" <> wrote in message
news:404742a0$0$41754$ i.nl...
>
>
> Bruno wrote:
>
> > I have the following code in my page and want the images to be
surrounded by
> > a 150 x 150 border despite the size of each image. What have I done
wrong?
>
> Nothing. The alt text is just longer than 150px, so when you
> put in the pics, the alt text won't show anymore, and the
> problem will be solved.
> Well, that's if your images aren't larger than 146 x 146px.
>
> >
> > <html>
> > <head>
> > <title>Untitled Document</title>
> > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> > <style>
> > .imgsmall {
> > border: 2px solid #656051;
> > margin: 10px;
> > text-align: center;
> > background-color: #FFFFFF;
> > width: 150px;
> > height: 150px;
> > }
> >
> > .imgnav {
> > position: absolute;
> > left: 32%;
> > top: 130px;
> > }
> > </style>
> > </head>
> >
> > <body>
> > <div class="imgnav">
> > <div class="imgsmall"><a href="design_red_dress.php"><img
> > src="images/rtw_ladies.jpg" alt="Click here to see a larger image and
> > description." /></a></div><div class="imgsmall"><a
> > href="design_trouser_suit.php"><img src="images/rtw_mens.jpg" alt="Click
> > here to see a larger image and description."/></a></div>
> > </div>
> > </body>
> > </html>

Thanks Els. It works fine now.

03-04-2004

"Els" <> wrote in message
news:404742a0$0$41754$ i.nl...
>
>
> Bruno wrote:
>
> > I have the following code in my page and want the images to be
surrounded by
> > a 150 x 150 border despite the size of each image. What have I done
wrong?
>
> Nothing. The alt text is just longer than 150px, so when you
> put in the pics, the alt text won't show anymore, and the
> problem will be solved.
> Well, that's if your images aren't larger than 146 x 146px.
>
> >
> > <html>
> > <head>
> > <title>Untitled Document</title>
> > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> > <style>
> > .imgsmall {
> > border: 2px solid #656051;
> > margin: 10px;
> > text-align: center;
> > background-color: #FFFFFF;
> > width: 150px;
> > height: 150px;
> > }
> >
> > .imgnav {
> > position: absolute;
> > left: 32%;
> > top: 130px;
> > }
> > </style>
> > </head>
> >
> > <body>
> > <div class="imgnav">
> > <div class="imgsmall"><a href="design_red_dress.php"><img
> > src="images/rtw_ladies.jpg" alt="Click here to see a larger image and
> > description." /></a></div><div class="imgsmall"><a
> > href="design_trouser_suit.php"><img src="images/rtw_mens.jpg" alt="Click
> > here to see a larger image and description."/></a></div>
> > </div>
> > </body>
> > </html>
> >

Actually it fails to work when I change the style to display: inline. Is
this usual?

03-04-2004

Bruno wrote:

> "Els" <> wrote in message
> news:404742a0$0$41754$ i.nl...
>
>>Bruno wrote:
>>
>>>I have the following code in my page and want the images to be surrounded by
>>>a 150 x 150 border despite the size of each image. What have I done wrong?
>>
>>Nothing. The alt text is just longer than 150px, so when you
>>put in the pics, the alt text won't show anymore, and the
>>problem will be solved.
>>Well, that's if your images aren't larger than 146 x 146px.

[snip code]

> Actually it fails to work when I change the style to display: inline. Is
> this usual?

Inline elements don't have widths as far as I know. But why
do you set display:inline to the divs? I guess you wanted to
display them horizontally, and have them take up the
available width of the window. What you need is float:left
instead of display:inline.

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Tables with different color left and right borders, no top or bottom borders, etc.	George	HTML	9	10-25-2004 04:25 PM
Framesets - Why Can Some Controls Cross Borders?	Guadala Harry	ASP .Net	1	09-09-2004 11:53 AM
Remove the XP borders of a ComboBox?	Lars Netzel	ASP .Net	0	07-28-2004 02:06 PM
TableRow Borders	=?Utf-8?B?QWxleCBNYWdoZW4=?=	ASP .Net	3	04-27-2004 07:15 AM
Re: DataGrid formatting - only one column without borders	Anatoly	ASP .Net	1	07-15-2003 12:41 PM