Borders

Discussion in 'HTML' started by Bruno, Mar 4, 2004.

  1. Bruno

    Bruno Guest

    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>
     
    Bruno, Mar 4, 2004
    #1
    1. Advertising

  2. Bruno

    Els Guest

    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 -
     
    Els, Mar 4, 2004
    #2
    1. Advertising

  3. "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
     
    Jukka K. Korpela, Mar 4, 2004
    #3
  4. Bruno

    Bruno Guest

    "Els" <> wrote in message
    news:404742a0$0$41754$...
    >
    >
    > 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.
     
    Bruno, Mar 4, 2004
    #4
  5. Bruno

    Bruno Guest

    "Els" <> wrote in message
    news:404742a0$0$41754$...
    >
    >
    > 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?
     
    Bruno, Mar 4, 2004
    #5
  6. Bruno

    Els Guest

    Bruno wrote:

    > "Els" <> wrote in message
    > news:404742a0$0$41754$...
    >
    >>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 -
     
    Els, Mar 4, 2004
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Anatoly
    Replies:
    1
    Views:
    561
    Hrvoje Vrbanc
    Jul 15, 2003
  2. =?Utf-8?B?QWxleCBNYWdoZW4=?=

    TableRow Borders

    =?Utf-8?B?QWxleCBNYWdoZW4=?=, Apr 25, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    9,596
    [MSFT]
    Apr 27, 2004
  3. Lars Netzel

    Remove the XP borders of a ComboBox?

    Lars Netzel, Jul 28, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    341
    Lars Netzel
    Jul 28, 2004
  4. Guadala Harry
    Replies:
    1
    Views:
    305
    Rutger Smit
    Sep 9, 2004
  5. George
    Replies:
    9
    Views:
    4,931
    George
    Oct 25, 2004
Loading...

Share This Page