Компьютерный форум OSzone.net  

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)
-   Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)
-   -   Свойство тэга table ??? (http://forum.oszone.net/showthread.php?t=73642)

Andrei_IW 28-10-2006 13:18 503686

Свойство тэга table ???
 
Подскажите пожалуйста, есть ли возможность в таблице (<table>) разместить 3 картинки, что бы одна картинка прилипала к верхнему краю, вторая картинка прилипала к нижнему краю, а третья картинка была фотом.

Вот сделать что бы одна картинка прилипала к верхнему краю таблицы, а другая была фотом таблицы, это очень легко. К примеру:

Код:

<table border='0' cellspacing='0' cellpadding='0' width="100%" height="100%">
    <tr>
        <td height="100%" valign="top" background=”fon.jpg”>
        <img src="foto1.jpg" border="0"></td>
    </tr>
</table>

Отсюда видно, что таблица развернётся на весь экран (width="100%" height="100%"), что мне и требуется. Так же видно, что благодаря background=”fon.jpg” в своей таблице я получу фон, рисунка fon.jpg, а благодаря valign="top" я притяну картинку foto1.jpg к верхнему краю.

А теперь самое главное, в чём и заключается мой вопрос. Как добавить в эту таблицу ещё одну картинку, которая притягивалась бы к нижнему краю. Условие такое, что нельзя добавить ещё теги <tr><td>, к примеру в этой таблице добавление:

Код:

<tr>
  <td><img src="foto2.jpg" border="0"></td>
</tr>


XCodeR 28-10-2006 16:29 503747

Andrei_IW
используйте CSS:
HTML код:

<img src="*.*" style="vertical-align: top;"> //к верхнему краю
<img src="*.*" style="vertical-align: bottom;"> //к нижнему краю


Andrei_IW 29-10-2006 16:56 504066

Попробовал я так сделать. Не получается. Картинки не прилипают не к нижнему, не к верхнему краю, а выравниваются ровно посередине таблицы. Привожу код, в котором я применил Ваш способ.

Код:

<table border="1" width="100%" cellspacing='0' cellpadding='0'>
 <tr>
  <td background=" fon2_1_1.gif" width="39">
  <img src="2_1_1.jpg" width="39" height="156" border="0" style="vertical-align: top;">
  <img src="2_1_2.jpg" width="39" height="154" border="0" style="vertical-align: bottom;">
  </td>
  <td height="500">Просто текст</td>
 </tr>
</table>


XCodeR 29-10-2006 18:04 504079

как вариант:
HTML код:

<html>
<body>
<table border="1" width="100%" cellspacing='0' cellpadding='0'>
 <tr>
  <td height=500 background="fon2_1_1.gif" width="39">
  <table height=100%>
    <tr>
    <td valign=top>
      <img src="i1.jpg" border="0" style="vertical-align: top;">
    </tr>
    <tr>
    <td valign=bottom>
      <img src="i2.jpg" border="0" style="vertical-align: bottom;">
    </tr>
  </table>
  </td>
  <td height="500">Просто текст</td>
 </tr>
</table>
</body>
</html>

возможно, если подождать, кто-то даст более "удобоваримый" вариант решения проблемы.

Sham 31-10-2006 03:57 504726

Andrei_IW

в теге td с картинками добавь valign="top" style="font: 500px", 500px это "height="500"", но это только для IE, но не FF...

В общем, у XCodeR самый надежный вариант...


Время: 22:14.

Время: 22:14.
© OSzone.net 2001-