X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

5 страниц V   1 2 3 4 5 >
Открыть тему
Тема закрыта
> картинки в одну строку
s1mple
s1mple
Topic Starter сообщение 17.1.2008, 22:05; Ответить: s1mple
Сообщение #1


Всем привет! Я буквально 2 день разбираюсь с этим языком, который мне понравился и натолкнулся на такое припятствие, которое не даёт мне идти дальше. Вот что у меня получилось:

<div>
<center><img src="ффф.jpg" height="150" width="200">
<a href="ggg.html"><br>Увеличить</br></a>
</center>
<left><img src="чукч2.jpg" height="150" width="200">
<a href="чукча.html"><br>Увеличить</br></a>
</left>
</div>


Впринцепи всё работает (открываются ссылки), но не получается зделать так, чтобы все эти картинки (10 карт.) были в одной строке, а для экономия места нужно именно это. Как не крути left>right>center не получается расположения этих картинок на одной полосе... Возможно есть код, который я не заметил?
Ну вообщем знающие люди меня точно должны понять =) и если такого кода нет, то придётся перейти к изучению PHP сразу? Спс заранее.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pomp
pomp
сообщение 17.1.2008, 23:08; Ответить: pomp
Сообщение #2


s1mple, Если по простому, то просто вставляйте каждую Вашу новую картинку с сылкой в новую <td>-шку (ячейка)....Которые относятся к одной и тойже<tr> (рядок)

<table>
<tr>
<td>
<img src="ффф.jpg" height="150" width="200"><a href="ggg.html"><br>Увеличить</br></a>
</td>
<td>
<img src="чукч2.jpg" height="150" width="200"><a href="чукча.html"><br>Увеличить</br></a>
</td>
<td><!-- Новая картинка--></td>
<td><!-- еще картинка с сылкой--></td>
<td><!-- и так далее.....--></td>
</tr>
</table>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 17.1.2008, 23:13; Ответить: Exterior
Сообщение #3


s1mple, вот, что-то вроде этого:
<div align="center">
<div style="float:left; padding-right:10px">
<img src="ффф.jpg" height="150" width="200"><br />
<a href="ggg.html"><b>Увеличить</b></a>
</div>

<div style="float:left">
<img src="чукч2.jpg" height="150" width="200"><br />
<a href="чукча.html"><b>Увеличить</b></a>
</div>
</div>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
s1mple
s1mple
Topic Starter сообщение 18.1.2008, 16:29; Ответить: s1mple
Сообщение #4


Спасиб всем!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
s1mple
s1mple
Topic Starter сообщение 26.1.2008, 22:01; Ответить: s1mple
Сообщение #5


<div style="float:left; padding-right:2px">
<img src="img/1-ые дни дороги/123.jpg" height="128" wigth="160"><a href="img/123/123.html"><br><center>Увеличить<center></br></a></div>

<div style="float:left; padding-right:2px">
<img src="img/123.jpg" height="128" wigth="160"><a href="img/123.html"><br>Увеличить</br></a></div>

<div style="float:left; padding-right:2px">
<img src="img/123.jpg" height="128" wigth="160"><a href="img/123.html"><br>Увеличить</br></a></div>


Можно вписать это "<div style="float:left; padding-right:2px">" и height="128" wigth="160" в какой нибудь один тэг и не прописывать это каждый раз?
И кстати, что означают эти тэги (<div style="float:left; padding-right:2px">)? Я честно говоря о них ничего не нашёл и правильно ими управлять ещё не получается...
И какой же лучший и удобный вариант выстроения картинок в один ряд? table легче по-моему, но есть ещё кое какие проблемы :(
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 27.1.2008, 11:42; Ответить: Exterior
Сообщение #6


(s1mple @ 27.1.2008, 00:01) *
Можно вписать это "<div style="float:left; padding-right:2px">" и height="128" wigth="160" в какой нибудь один тэг и не прописывать это каждый раз?

конечно можно, даже нужно! Создаете файл с табицей каскадных стилей (CSS), и в ней указываете все параметры для любых объектов - блоков, таблиц, текста и т.д. Вот пример:
1) выдумываете любое имя блока, напр., pic_1;
2) в CSS пишете:
[COLOR="Magenta"]#pic_1 {[/COLOR]
        [COLOR="Navy"]width[/COLOR][COLOR="#ff00ff"]:[/COLOR] [COLOR="Blue"]160px[COLOR="#ff00ff"];[/COLOR][/COLOR]        /*ширина блока*/
        [COLOR="#000080"]height[/COLOR][COLOR="#ff00ff"]:[/COLOR] [COLOR="#0000ff"]128px[/COLOR][COLOR="#ff00ff"];[/COLOR]       /*высота блока*/
        [COLOR="#000080"]float[/COLOR][COLOR="#ff00ff"]:[/COLOR] [COLOR="#0000ff"]left[/COLOR][COLOR="#ff00ff"];[/COLOR]             /*обтекание*/
        [COLOR="#000080"]padding-right[/COLOR][COLOR="#ff00ff"]:[/COLOR] [COLOR="#0000ff"]2px[/COLOR][COLOR="#ff00ff"];[/COLOR] /*отступ справа*/
        [COLOR="#000080"]text-align[/COLOR][COLOR="#ff00ff"]:[/COLOR] [COLOR="#0000ff"]center[/COLOR][COLOR="#ff00ff"];[/COLOR]  /*выравнивание текста по центру*/
[COLOR="Magenta"]}[/COLOR]

3) затем в html-файле указываете: <div id="pic_1"></div>
4) все, теперь блок с идентификатором pic_1 принял все те свойства, что мы указывали выше.
(s1mple @ 1.1.1970, 07:00)
И кстати, что означают эти тэги

советую посмотреть здесь >>> "Учебники по CSS"
(s1mple @ 1.1.1970, 07:00)
И какой же лучший и удобный вариант выстроения картинок в один ряд? table легче по-моему

ну, тут на вкус и цвет товарищей нет! Кому как удобней.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
s1mple
s1mple
Topic Starter сообщение 27.1.2008, 15:44; Ответить: s1mple
Сообщение #7


<style>
#pic {
width: 160px;
height: 128px;
float: left;
padding-right: 2px;
text-align: center;
}
</style>
<body text="#FFFFFF" bgcolor="#3399CC">
<div align="center"><h1>123<h1></div>
<br>
<div id="pic">
<img src="img/123.jpg"><a href="img/123.html"><br><center>Увеличить</center></br></a></div>

И ничего не получается блин... Что же не так?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 27.1.2008, 17:15; Ответить: Exterior
Сообщение #8


s1mple, что у вас должно было получиться? Поясните.
На всякий случай исправил ошибки:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>test DIV</title>

<style type="text/css">
<!--
body {
background-color: #3399CC;
color: #FFFFFF;
}

#pic {
width: 160px;
height: 128px;
float: left;
padding-right: 2px;
text-align: center;
}
-->
</style>

</head>

<body>

<h1 align="center">123</h1>

<br />

<div id="pic">
<img src="img/123.jpg" width="160" height="120" alt="" />
<br />
<a href="img/123.html">Увеличить</a>
</div>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
s1mple
s1mple
Topic Starter сообщение 27.1.2008, 17:23; Ответить: s1mple
Сообщение #9


должны получиться картинки в одну строку с определёнными параметрами =)
а вот это зачем мне понадобится?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 27.1.2008, 18:11; Ответить: Exterior
Сообщение #10


(s1mple @ 27.1.2008, 19:23) *
а вот это зачем мне понадобится?

SGML декларация !DOCTYPE должна указывать на тип вашего документа (Document Type Definition - DTD) и теоретически, она должна присутствовать в каждой HTML-странице до тега <HTML>. На практике, все браузеры умеют без нее обходиться, так же как, впрочем, и без тегов <html> и <body>. Однако для того, чтобы включить режим совместимости со стандартом, вам придется эту декларацию указать и вдобавок позаботиться, чтобы ваш документ действительно соответствовал спецификации.

Вот простой пример фотогалереи на вашем примере:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>test DIV</title>

<style type="text/css">
<!--
body {
background-color: #3399CC;
color: #FFFFFF;
}

#wrapper {
width: 700px;
margin: 0 auto;
}

#pic {
width: 160px;
height: 128px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
text-align: center;
}

#clear {
clear: both;
}
-->
</style>

</head>

<body>

<h1 align="center">Photo Galery</h1>

<br />

<div id="wrapper">

<!-- Первая строка с изображениями -->
<div id="pic">
<img src="img/123.jpg" width="160" height="120" alt="" />
<br />
<a href="img/123.html">Увеличить</a>
</div>

<div id="pic">
<img src="img/124.jpg" width="160" height="120" alt="" />
<br />
<a href="img/124.html">Увеличить</a>
</div>

<div id="pic">
<img src="img/125.jpg" width="160" height="120" alt="" />
<br />
<a href="img/125.html">Увеличить</a>
</div>

<div id="pic">
<img src="img/126.jpg" width="160" height="120" alt="" />
<br />
<a href="img/126.html">Увеличить</a>
</div>

<div id="clear"></div>

<!-- Вторая строка с изображениями -->
<div id="pic">
<img src="img/127.jpg" width="160" height="120" alt="" />
<br />
<a href="img/127.html">Увеличить</a>
</div>

<div id="pic">
<img src="img/128.jpg" width="160" height="120" alt="" />
<br />
<a href="img/128.html">Увеличить</a>
</div>

<div id="pic">
<img src="img/129.jpg" width="160" height="120" alt="" />
<br />
<a href="img/129.html">Увеличить</a>
</div>

<div id="pic">
<img src="img/130.jpg" width="160" height="120" alt="" />
<br />
<a href="img/130.html">Увеличить</a>
</div>

</div>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
5 страниц V   1 2 3 4 5 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКто и зачем покупает картинки обезьян по $200 тысяч?
NFT
 167 metvekot 27412 6.3.2024, 21:58
автор: Boymaster
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВыравнивание картинки по центру между текстом
 10 NikN 2637 6.1.2021, 23:24
автор: buypushplatform
Открытая тема (нет новых ответов) Нужно добавить картинки на сайт
И видео
 2 Ksardas777 4092 17.11.2018, 10:41
автор: Intuit89
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыСравнение 2-х страниц на одну тему
 1 rad_mw 1056 28.6.2018, 18:27
автор: Napoleon-007
Открытая тема (нет новых ответов) Mobalfa.com - web и wap подписки по РФ и СНГ! Выгодно лить в одну ПП! Высокие ставки
 10 Mobаlfa_hb 3628 4.12.2017, 11:06
автор: -Mobаlfa-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 19.4.2024, 18:24

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet