Помогите пожалуйста сделать такую вещь:
Есть таблица определенной ширины (скажем 50% экрана), нужно вставить в нее картинки с подписями под ними (подписи являются ссылками), но т.к. сайт резиновый, то нужно чтобы при изменении ширины окна картинки вместе с подписями меняли свое положение (допустим на разрешении 1024х768 четыре картинки в ряд, а на разрешении 800х600 - три и т.д и т.п.).
Пробовал сделать каждую картинку с подписью в отдельной маленькой табличке - не работает... Дивами тоже не получается...
Забыл сказать: нужно, чтобы все это было сделано без использования скриптов.
Это MWEB.RU
Не узнаешь, %username%?
Интересная ситуёвина... Текст под картинкой.
Модератор: [mweb team]
Сообщений: 12 • Страница 1 из 1
Интересная ситуёвина... Текст под картинкой.
Berezkin Пт фев 16, 2007 10:53
Windows как презерватив - никому не нравится, но все пользуются.
-
Berezkin - Заядлый `курильщик`
- Сообщения: 612
- Зарегистрирован: Вт дек 19, 2006 12:39
- Откуда: Москоу
Muerto Пт фев 16, 2007 15:33
В стилях
В теле допустим так:
- Код: Выделить всё
.pict {
margin:10px 10px 10px 10px;
border:#000000 1px solid;
float:left;
}
В теле допустим так:
- Код: Выделить всё
<div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div><div class="pict"><img src="dot.gif"><br>
текст</div>
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
www.muerto.ru
-
Muerto - Растаман
- Сообщения: 3597
- Зарегистрирован: Пн окт 11, 2004 19:09
- Откуда: Москва
то что нужно! И как это я сам не догадался 
Berezkin Пт фев 16, 2007 17:00
Вот так модифицировал, чтобы по вертикали выровнять в диве:
- Код: Выделить всё
<div class="pic" align="center">
<table cellpadding="5" cellspacing="0" border="0" width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<img src="img/q7.jpg" width="159" height="80" border="0" alt="Audi Q7" title="Audi Q7" hspace="7"><br>
</td>
<tr>
<td align="center" valign="middle">
<a class="blue2" href="">Audi Q7</a>
</td>
</tr>
</table>
</div>
Windows как презерватив - никому не нравится, но все пользуются.
-
Berezkin - Заядлый `курильщик`
- Сообщения: 612
- Зарегистрирован: Вт дек 19, 2006 12:39
- Откуда: Москоу
Muerto Пт фев 16, 2007 18:05
А так у тебя нигде не работает. Таблица раздвигает див на весь экран.
Ты классу pic присвой width: 200px; допустим.
Ты классу pic присвой width: 200px; допустим.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
www.muerto.ru
-
Muerto - Растаман
- Сообщения: 3597
- Зарегистрирован: Пн окт 11, 2004 19:09
- Откуда: Москва
Berezkin Пт фев 16, 2007 18:08
Да я не настолько дурак, чтобы не выставить ширину и высоту дива, естесственно она у меня стоит. Высота равна 120px, ширина - 170px
да, кстати, и отступы я в стиле убрал...
да, кстати, и отступы я в стиле убрал...
Windows как презерватив - никому не нравится, но все пользуются.
-
Berezkin - Заядлый `курильщик`
- Сообщения: 612
- Зарегистрирован: Вт дек 19, 2006 12:39
- Откуда: Москоу
Muerto Пт фев 16, 2007 21:15
2Berezkin: Напиши весь код страницы включая доктайп.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
www.muerto.ru
-
Muerto - Растаман
- Сообщения: 3597
- Зарегистрирован: Пн окт 11, 2004 19:09
- Откуда: Москва
Padonak Сб фев 17, 2007 1:27
если кусок цсс-файла враждует с определенным браузером то этот кусок надо вынести в отдельный цсс-файл и определяя браузер загружать его как второй цсс-файл к основному в те браузеры где этот кусок работает а в случае когда вражда - сделать кусок именно для данного браузера. определяешь юзерАгент и потом выбираешь файл. я так уже делал 
Uncaught TypeError: 
-
Padonak - Философ-разговорник
- Сообщения: 3872
- Зарегистрирован: Вт дек 13, 2005 3:23
- Откуда: Ростов-на-Дону
Berezkin Пн фев 19, 2007 10:41
2Muerto: Весь код написать не могу, т.к. переделал уже все на старый вариант (с одной табличкой, без поддержки разрешения 800х600). Пишу кусками (как было):
style.css
Вроде все написал...
В ИЕ и Мозилле все ок, а в Опере дивы выстраиваются в одну линию вертикально вниз...
- Код: Выделить всё
<!-- Доктайп -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Доктайп -->
<!-- head -->
<head>
<title>Untitled</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!-- head -->
...
<!-- собссно контент -->
<td class="content" align="left" valign="top">
<hr class="grey2" size="2" noshade>
<span class="title_txt">Модельный ряд Audi</span><br><br>
<table cellpadding="5" cellspacing="0" border="0" align="center">
<tr>
<td align="center">
<div class="pic" align="center">
<table cellpadding="5" cellspacing="0" border="0" width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<img src="img/q7.jpg" width="159" height="80" border="0" alt="Audi Q7" title="Audi Q7"><br>
</td>
<tr>
<td align="center" valign="middle">
<a class="blue2" href="">Audi Q7</a>
</td>
</tr>
</table>
</div>
<div class="pic" align="center">
<table cellpadding="5" cellspacing="0" border="0" width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<img src="img/q7.jpg" width="159" height="80" border="0" alt="Audi Q7" title="Audi Q7"><br>
</td>
<tr>
<td align="center" valign="middle">
<a class="blue2" href="">Audi Q7</a>
</td>
</tr>
</table>
</div>
<div class="pic" align="center">
<table cellpadding="5" cellspacing="0" border="0" width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<img src="img/q7.jpg" width="159" height="80" border="0" alt="Audi Q7" title="Audi Q7"><br>
</td>
<tr>
<td align="center" valign="middle">
<a class="blue2" href="">Audi Q7</a>
</td>
</tr>
</table>
</div>
<div class="pic" align="center">
<table cellpadding="5" cellspacing="0" border="0" width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<img src="img/q7.jpg" width="159" height="80" border="0" alt="Audi Q7" title="Audi Q7"><br>
</td>
<tr>
<td align="center" valign="middle">
<a class="blue2" href="">Audi Q7</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
<!-- собссно контент -->
...
<!-- Само собой все теги закрыты правильно (ну и html body) -->
style.css
- Код: Выделить всё
.pic {float: left; width: 170px; height: 120px;}
a.blue2 {color: #0078b5; font: 12px Arial; text-decoration: underline;}
a.blue2:hover {color: #cc0000; font: 12px Arial; text-decoration: none;}
.grey2 {color: #959595;}
.content {border-left: #cccccc 1px solid; border-right: #cccccc 1px solid; background: #ffffff; font: 12px Arial;}
.title_txt {color: #0078b5; font: bold 17px Arial;}
Вроде все написал...
В ИЕ и Мозилле все ок, а в Опере дивы выстраиваются в одну линию вертикально вниз...
Windows как презерватив - никому не нравится, но все пользуются.
-
Berezkin - Заядлый `курильщик`
- Сообщения: 612
- Зарегистрирован: Вт дек 19, 2006 12:39
- Откуда: Москоу
Muerto Пн фев 19, 2007 10:55
Моя Опера:
Версия 9.10
Сборка 8679
Платформа Win32
Система Windows XP
Java Sun Java Runtime Environment version 1.5
и всё работает, всё выстраивается нормально.
Попробуй добавить в стиль класса pic display:inline;
Версия 9.10
Сборка 8679
Платформа Win32
Система Windows XP
Java Sun Java Runtime Environment version 1.5
и всё работает, всё выстраивается нормально.
Попробуй добавить в стиль класса pic display:inline;
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
www.muerto.ru
-
Muerto - Растаман
- Сообщения: 3597
- Зарегистрирован: Пн окт 11, 2004 19:09
- Откуда: Москва
Berezkin Пн фев 19, 2007 15:50
Заработало...
Короче я так понял, что это просто Опера у меня отображала страничку из кэша...надо было просто обновить, а я затупил...
Спасибо огромное!
Короче я так понял, что это просто Опера у меня отображала страничку из кэша...надо было просто обновить, а я затупил...
Спасибо огромное!
Windows как презерватив - никому не нравится, но все пользуются.
-
Berezkin - Заядлый `курильщик`
- Сообщения: 612
- Зарегистрирован: Вт дек 19, 2006 12:39
- Откуда: Москоу
Сообщений: 12 • Страница 1 из 1
Кто сейчас на конференции
Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 43