DIV

Flanker · April 14, 2008

Есть сайт разверстанный таблицами, вот вопрос - как сделать так, чтобы слой был точно сверху одной таблицы, ну или сверху картинки ,чтобы можно было спокойно писать текст как бы поверх картинки ?

Dimitry Wolotko · April 14, 2008

Покажите код и картинку того, как должно выглядеть. Я понял слишком смутно, что вам нужно.

Flanker · April 14, 2008

Ну вот дизанй я нарисовал ,и фон у меня градиентный, и хочется чтобы текст писать сверху этого градиента, но возможно это только если будет слой сверху

Dimitry Wolotko · April 14, 2008

background-image

background-position

backgroud-repeat

Flanker · April 14, 2008

а нет где-нибудь примера, как это реализованно ?

Dimitry Wolotko · April 14, 2008

Примеры есть в соответствующих разделах на сайте.

user · April 15, 2008

Давай абсолютную позицию и координаты в стилях текста.Это если картинка .Если фоном,тогда непонятно в чем вопрос.Просто пишешь текст.

Flanker · April 15, 2008

ля ля ля тут текст

вот так я сделал ,podsol5_08.gif это картинка ,поверх которой я хочу, чтобы был слой. Но что-то не выходит, в чем ошибка ?

user · April 15, 2008

style="background-image:url('images/podsol5_08.gif');".

Flanker · April 15, 2008

странно, ничего не поменялось

ля ля ля тут текст

~Kitty~ · April 15, 2008

А у вас картинка помещается в высоту получающегося дива? Может, она просто прячется в силу небольшого количества текста?

Flanker · April 15, 2008

НУ вот в дримвивере див сверху картинки находится ,а в нем текст....а когда смотришь в браузере, то див с текстом съезжает вправо

ZoNT · April 15, 2008

пример кода пожалуйста...

Flanker · April 15, 2008

текст

ZoNT · April 15, 2008

пипец, вот набью я такой код в блокноте, открою его в браузере посмотреть, и что он мне покажет???

ZoNT · April 15, 2008

нужен код рабочей странички, чтобы смотреть что происходит в браузере, а не гадать, что там может быть...

Flanker · April 15, 2008

<html>
<head>
<title>podsol5</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="soulstudio.css" type="text/css" />

<style type="text/css">
<!--
#Layer1 {
 position:absolute;
 width:538px;
 height:157px;
 z-index:1;
 left: 391px;
 top: 173px;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (podsol5.psd) -->
<table align="center" width="1024" height="768" border="0" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
 <td>
 <img src="images/podsol5_01.gif" width="2" height="113" alt=""></td>
 <td>
 <img src="images/podsol5_02.gif" width="220" height="113" alt=""></td>
 <td colspan="3">
 <img src="images/podsol5_03.gif" width="802" height="113" alt=""></td>
 </tr>
 <tr>
 <td rowspan="2">
 <img src="images/podsol5_04.gif" width="2" height="247" alt=""></td>
 <td>
 <img src="images/podsol5_05.gif" alt="" width="220" height="45" align="top"> </td>
 <td colspan="3" background="images/podsol5_06.gif" bgcolor="#FFFFFF">
 <table width="620" height="45" border="0" align="left" class="tableclass" id="navigation">
 <tr>
 <td><a href="#">Главная</a> </td>
 <td><a href="#">Веб-дизайн</a></td>
 <td><a href="#">Видео</a></td>
 <td><a href="#">Фото</a></td>
 <td><a href="#">Портфолио</a></td>
 <td><a href="#">О нас</a> </td>
 <td><a href="#">Цены</a></td>
 </tr>
 </table></td>
 </tr>
 <tr>
 <td>
 <img src="images/podsol5_07.gif" width="220" height="202" alt=""></td>
 <td colspan="3">
 <img src="images/podsol5_08.gif" width="802" height="202" alt="">
 <div style=" style="background-image:url('images/podsol5_08.gif'); position:absolute" id="Layer1" >текст </div></td>
 </tr>
 <tr>
 <td colspan="2" rowspan="2">
 <img src="images/podsol5_09.gif" width="222" height="274" alt=""></td>
 <td colspan="3">
 <img src="images/podsol5_10.gif" width="802" alt=""></td>
 </tr>
 <tr>
 <td colspan="2"> </td>
 <td>
 <img src="images/podsol5_12.gif" width="217" height="149" alt=""></td>
 </tr>
 <tr>
 <td colspan="2">
 <img src="images/podsol5_13.gif" width="222" height="134" alt=""></td>
 <td>
 <img src="images/podsol5_14.gif" width="202" height="134" alt=""></td>
 <td>
 <img src="images/podsol5_15.gif" width="383" height="134" alt=""></td>
 <td>
 <img src="images/podsol5_16.gif" width="217" height="134" alt=""></td>
 </tr>
</table>
<!-- End ImageReady Slices -->

</body>
</html>

ZoNT · April 15, 2008

<html>
<head>
<title>podsol5</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="soulstudio.css" type="text/css" />

<style type="text/css">
.back {
 background: url(images/podsol5_08.gif) no-repeat;
 text-align: left;
 vertical-align: top;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (podsol5.psd) -->
<table align="center" width="1024" height="768" border="0" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
 <td>
 <img src="images/podsol5_01.gif" width="2" height="113" alt=""></td>
 <td>
 <img src="images/podsol5_02.gif" width="220" height="113" alt=""></td>
 <td colspan="3">
 <img src="images/podsol5_03.gif" width="802" height="113" alt=""></td>
 </tr>
 <tr>
 <td rowspan="2">
 <img src="images/podsol5_04.gif" width="2" height="247" alt=""></td>
 <td>
 <img src="images/podsol5_05.gif" alt="" width="220" height="45" align="top"> </td>
 <td colspan="3" background="images/podsol5_06.gif" bgcolor="#FFFFFF">
 <table width="620" height="45" border="0" align="left" class="tableclass" id="navigation">
 <tr>
 <td><a href="#">Главная</a> </td>
 <td><a href="#">Веб-дизайн</a></td>
 <td><a href="#">Видео</a></td>
 <td><a href="#">Фото</a></td>
 <td><a href="#">Портфолио</a></td>
 <td><a href="#">О нас</a> </td>
 <td><a href="#">Цены</a></td>
 </tr>
 </table></td>
 </tr>
 <tr>
 <td>
 <img src="images/podsol5_07.gif" width="220" height="202" alt=""></td>
 <td colspan="3" class="back">
 текст писать прямо в ячейке! Зачем ты используешь имаджи? Лучше записать все картинки бэкграундом к ячейкам и прописать ячейкам стили (посмотри как я сделал).
 </td>
 </tr>
 <tr>
 <td colspan="2" rowspan="2">
 <img src="images/podsol5_09.gif" width="222" height="274" alt=""></td>
 <td colspan="3">
 <img src="images/podsol5_10.gif" width="802" alt=""></td>
 </tr>
 <tr>
 <td colspan="2"> </td>
 <td>
 <img src="images/podsol5_12.gif" width="217" height="149" alt=""></td>
 </tr>
 <tr>
 <td colspan="2">
 <img src="images/podsol5_13.gif" width="222" height="134" alt=""></td>
 <td>
 <img src="images/podsol5_14.gif" width="202" height="134" alt=""></td>
 <td>
 <img src="images/podsol5_15.gif" width="383" height="134" alt=""></td>
 <td>
 <img src="images/podsol5_16.gif" width="217" height="134" alt=""></td>
 </tr>
</table>
<!-- End ImageReady Slices -->

</body>
</html>

Flanker · April 15, 2008

Спасибо, то что надо . Но еще вопрос, если в эту ячейку захочу вставить фотку еще , то нужно будет уже див юзать ?

ZoNT · April 15, 2008

так там твоя фотка прописана в стиле бэкграундом. или ты хочешь чтобы ещ? одна фотка была в етксте, неполностью перекрывающая бэк?

Flanker · April 15, 2008

да

ZoNT · April 15, 2008

ну так вставляй е? прамо в тексте (посреди текста в ячейке) каким хочешь тегом: хочешь - имдж, хочешь - див с бэкграундом.

Dimitry Wolotko · April 15, 2008

Flanker, используйте bb-code для размещения вашего кода.

Спасибо.

Sign In

DIV

Question

Link to comment

Share on other sites

22 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information