Кривой вывод (положение объектов)

Sarymian · Nov 19, 2012

Здравствуйте.

Админов и модеров прошу по почкам не бить, вопрос имеет отношение в TPII - просто не вижу смысла регаться на сайтах\форумах по HTML\CSS чтобы задать этот вопрос.

Бился сам часа 3. Не понял почему делает так.

Ситуация такая, пытаюсь написать мод для мультизагрузки фоток (галерею переписываю) с использование Flash.

Использую модуль http://www.uploadify.com/

Вот демо его работы: http://www.uploadify.com/demos/
Если посмотреть, то на кнопке лежит swf по которому по факту и щелкаем.

У меня проблема в том что мой объект swf лежит только на половине кнопке и за её пределами (на скрине видно).

Вот код области с кнопкой и swf:

PHP:

                        <span id="photos"><div style="height: 30px; width: 120px;" class="uploadify" id="file_upload_1"><object style="position: absolute; z-index: 1;" id="SWFUpload_0" type="application/x-shockwave-flash" data="misc/swf/uploadify.swf?preventswfcaching=1353302973746" class="swfupload" height="30" width="120"><param name="wmode" value="transparent"><param name="movie" value="misc/swf/uploadify.swf?preventswfcaching=1353302973746"><param name="quality" value="high"><param name="menu" value="false"><param name="allowScriptAccess" value="always"><param name="flashvars" value="movieName=SWFUpload_0&amp;uploadURL=%2Fincludes%2Fgallery%2Fuploadify.php&amp;useQueryString=false&amp;requeueOnError=false&amp;httpSuccess=&amp;assumeSuccessTimeout=30&amp;params=&amp;filePostName=Filedata&amp;fileTypes=*.*&amp;fileTypesDescription=All%20Files&amp;fileSizeLimit=0&amp;fileUploadLimit=0&amp;fileQueueLimit=999&amp;debugEnabled=false&amp;buttonImageURL=%2F&amp;buttonWidth=120&amp;buttonHeight=30&amp;buttonText=&amp;buttonTextTopPadding=0&amp;buttonTextLeftPadding=0&amp;buttonTextStyle=color%3A%20%23000000%3B%20font-size%3A%2016pt%3B&amp;buttonAction=-110&amp;buttonDisabled=false&amp;buttonCursor=-2"></object><div style="height: 30px; line-height: 30px; width: 120px;" class="uploadify-button " id="file_upload_1-button"><span class="uploadify-button-text">ДОБАВИТЬ ФОТО</span></div></div></span>
                        <br>
                        <label><input name="create_thumb" value="0" type="checkbox">&nbsp;Создать превью&nbsp;</label>

Подскажите плиз, в каком хоть направлении копать? Почему криво ставиться кнопка. Параметры css position перепробовал, кнопка туда сюда прыгала, а толку мало.

З.Ы. Мод будет в паблике.

Sarymian · Nov 19, 2012

Всего 5 минут на редактирование

мало. Вот удобочитаемый код:

PHP:

<center>
<span id="photos">
  <div style="height: 30px; width: 120px;" class="uploadify" id="file_upload_1">
    <object style="position: absolute; z-index: 1;" id="SWFUpload_0" type="application/x-shockwave-flash" data="misc/swf/uploadify.swf?preventswfcaching=1353302973746" class="swfupload" height="30" width="120">
    <param name="wmode" value="transparent">
    <param name="movie" value="misc/swf/uploadify.swf?preventswfcaching=1353302973746">
    <param name="quality" value="high">
    <param name="menu" value="false">
    <param name="allowScriptAccess" value="always">
    <param name="flashvars" value="movieName=SWFUpload_0&amp;uploadURL=%2Fincludes%2Fgallery%2Fuploadify.php&amp;useQueryString=false&amp;requeueOnError=false&amp;httpSuccess=&amp;assumeSuccessTimeout=30&amp;params=&amp;filePostName=Filedata&amp;fileTypes=*.*&amp;fileTypesDescription=All%20Files&amp;fileSizeLimit=0&amp;fileUploadLimit=0&amp;fileQueueLimit=999&amp;debugEnabled=false&amp;buttonImageURL=%2F&amp;buttonWidth=120&amp;buttonHeight=30&amp;buttonText=&amp;buttonTextTopPadding=0&amp;buttonTextLeftPadding=0&amp;buttonTextStyle=color%3A%20%23000000%3B%20font-size%3A%2016pt%3B&amp;buttonAction=-110&amp;buttonDisabled=false&amp;buttonCursor=-2">
    </object>
 
  <div style="height: 30px; line-height: 30px; width: 120px;" class="uploadify-button " id="file_upload_1-button">
    <span class="uploadify-button-text">ДОБАВИТЬ ФОТО</span>
  </div>
  </div>
</span>
  <br>
<label><input name="create_thumb" value="0" type="checkbox">&nbsp;Создать превью&nbsp;</label>
</center>

Exile · Nov 19, 2012

Sarymian said:
Всего 5 минут на редактирование мало

Поднял до 10, но изменений в большую сторону не будет - слишком много любителей "суицида".

По сути вопроса... Точно div с кнопкой должен быть вложен в div swf-объекта? Если один закрывающий </div> после кнопки добавления фото перенести выше?

Sarymian · Nov 19, 2012

Часть кода:

PHP:

  <div style="height: 30px; width: 120px;" class="uploadify" id="file_upload_1">
    <object style="position: absolute; z-index: 1;" id="SWFUpload_0" type="application/x-shockwave-flash" data="misc/swf/uploadify.swf?preventswfcaching=1353302973746" class="swfupload" height="30" width="120">
    <param name="wmode" value="transparent">
    <param name="movie" value="misc/swf/uploadify.swf?preventswfcaching=1353302973746">
    <param name="quality" value="high">
    <param name="menu" value="false">
    <param name="allowScriptAccess" value="always">
    <param name="flashvars" value="movieName=SWFUpload_0&amp;uploadURL=%2Fincludes%2Fgallery%2Fuploadify.php&amp;useQueryString=false&amp;requeueOnError=false&amp;httpSuccess=&amp;assumeSuccessTimeout=30&amp;params=&amp;filePostName=Filedata&amp;fileTypes=*.*&amp;fileTypesDescription=All%20Files&amp;fileSizeLimit=0&amp;fileUploadLimit=0&amp;fileQueueLimit=999&amp;debugEnabled=false&amp;buttonImageURL=%2F&amp;buttonWidth=120&amp;buttonHeight=30&amp;buttonText=&amp;buttonTextTopPadding=0&amp;buttonTextLeftPadding=0&amp;buttonTextStyle=color%3A%20%23000000%3B%20font-size%3A%2016pt%3B&amp;buttonAction=-110&amp;buttonDisabled=false&amp;buttonCursor=-2">
    </object>
 
  <div style="height: 30px; line-height: 30px; width: 120px;" class="uploadify-button " id="file_upload_1-button">
    <span class="uploadify-button-text">ДОБАВИТЬ ФОТО</span>
  </div>

вообще генерирует JS. В шаблоне написано:

PHP:

                    <div><center>
                        <span id="photos"><input type="file" name="file_upload" id="file_upload_1" /></span></div>
                        <br />
                        <label><input type="checkbox" name="create_thumb" value="0"  />&nbsp;{L_GALLERY_CREATE_THUMB}&nbsp;</label>
                    </center></div>

А вот код с демо на офф. сайте (тут был бред

конец рабочего дня, котелок не варил).

PHP:

<div style="height: 30px; width: 120px;" class="uploadify" id="file_upload_1">
<object style="position: absolute; z-index: 1;" id="SWFUpload_0" type="application/x-shockwave-flash" data="/uploadify/uploadify.swf?preventswfcaching=1353306028263" class="swfupload" height="30" width="120">
<param name="wmode" value="transparent">
<param name="movie" value="/uploadify/uploadify.swf?preventswfcaching=1353306028263">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="allowScriptAccess" value="always">
<param name="flashvars" value="movieName=SWFUpload_0&amp;uploadURL=%2Fuploadify%2Fuploadify.php&amp;useQueryString=false&amp;requeueOnError=false&amp;httpSuccess=&amp;assumeSuccessTimeout=30&amp;params=&amp;filePostName=Filedata&amp;fileTypes=*.*&amp;fileTypesDescription=All%20Files&amp;fileSizeLimit=0&amp;fileUploadLimit=0&amp;fileQueueLimit=999&amp;debugEnabled=false&amp;buttonImageURL=%2Fdemos%2F&amp;buttonWidth=120&amp;buttonHeight=30&amp;buttonText=&amp;buttonTextTopPadding=0&amp;buttonTextLeftPadding=0&amp;buttonTextStyle=color%3A%20%23000000%3B%20font-size%3A%2016pt%3B&amp;buttonAction=-110&amp;buttonDisabled=false&amp;buttonCursor=-2">
</object>
<div style="height: 30px; line-height: 30px; width: 120px;" class="uploadify-button " id="file_upload_1-button">
<span class="uploadify-button-text">SELECT FILES</span>
</div>
</div>
<div class="uploadify-queue" id="file_upload_1-queue"></div>

ChihPyh · Nov 19, 2012

Sarymian said:

PHP:

<span id="photos">
  <div style="height: 30px; width: 120px;" class="uploadify" id="file_upload_1">
    <object style="position: absolute; z-index: 1;" id="SWFUpload_0" type="application/x-shockwave-flash" data="misc/swf/uploadify.swf?preventswfcaching=1353302973746" class="swfupload" height="30" width="120">
    <param name="wmode" value="transparent">
    <param name="movie" value="misc/swf/uploadify.swf?preventswfcaching=1353302973746">
    <param name="quality" value="high">
    <param name="menu" value="false">
    <param name="allowScriptAccess" value="always">
    <param name="flashvars" value="movieName=SWFUpload_0&amp;uploadURL=%2Fincludes%2Fgallery%2Fuploadify.php&amp;useQueryString=false&amp;requeueOnError=false&amp;httpSuccess=&amp;assumeSuccessTimeout=30&amp;params=&amp;filePostName=Filedata&amp;fileTypes=*.*&amp;fileTypesDescription=All%20Files&amp;fileSizeLimit=0&amp;fileUploadLimit=0&amp;fileQueueLimit=999&amp;debugEnabled=false&amp;buttonImageURL=%2F&amp;buttonWidth=120&amp;buttonHeight=30&amp;buttonText=&amp;buttonTextTopPadding=0&amp;buttonTextLeftPadding=0&amp;buttonTextStyle=color%3A%20%23000000%3B%20font-size%3A%2016pt%3B&amp;buttonAction=-110&amp;buttonDisabled=false&amp;buttonCursor=-2">
    </object>
 
  <div style="height: 30px; line-height: 30px; width: 120px;" class="uploadify-button " id="file_upload_1-button">
    <span class="uploadify-button-text">ДОБАВИТЬ ФОТО</span>
  </div>
  </div>
</span>

div не может быть внутри span

Sarymian · Nov 19, 2012

PHP:

<script type="text/javascript">
    $(document).ready(function() {
        $("#file_upload_1").uploadify({
            'swf'              : 'misc/swf/uploadify.swf',
            'uploader'          : 'includes/gallery/uploadify.php',
            'checkExisting'    : 'includes/gallery/check-exists.php',
            'cancelImg'        : 'images/uploadify-cancel.png',
            'queueID'          : 'list',
            'auto'              : true,
            'multi'            : true,
            'progressData'      : 'speed',
            'buttonText'        : 'ДОБАВИТЬ ФОТО',
            'removeTimeout'    : 1
            //'onUploadSuccess' : function(file, data, response) {
                    //$("#photos").append(data);
            //}
        });
    });
</script>
<table width="100%" cellpadding="3" cellspacing="1" border="0" class="forumline">
    <tr>
        <th height="25" class="thCornerL" nowrap>{L_GALLERY}</th>
    </tr>
    <tr>
        <td class="row1" align="center">
            <span class="gen">
                <h3 align="Center">{L_GALLERY_MAX_FILE_SIZE} {MAX_SIZE}</h3>
                {MSG}
                <hr>
                    <center>
                        <input type="file" name="file_upload" id="file_upload_1"/>
                        <br>
                        <label><input type="checkbox" name="create_thumb" value="0"/>&nbsp;{L_GALLERY_CREATE_THUMB}&nbsp;</label>
                    </center>
            </span>
        </td>
    </tr>
</table>

Это весь код файла gallery.tpl

Избавился от всех ДИВ'ов и СПАН'он. Эффект тот же.

З.Ы. Кэши ВСЕ чистил, всегда при любом изменении, как ни как с шаблоном ковыряюсь - поэтому для верочки весь кеш чистил перед проверкой внесенных изменений.

Sarymian · Nov 19, 2012

ChihPyh, вся надежда на Вас.

Кстати чет меня переклинило и решил проверить в IE. Там отображается нормально.

DarkMod · Nov 19, 2012

<div id="photos">
что такое span?
Тег <span> предназначен для определения строчных элементов документа

Sarymian · Nov 19, 2012

DarkMod, по существу СПАН перекочевал из одного примера (там обращение в JS было к СПАНу по id).

Удалил все лишнее. Оставил только:

PHP:

                    <center>
                        <input type="file" name="file_upload" id="file_upload_1"/>
                        <br>
                        <label><input type="checkbox" name="create_thumb" value="0"/>&nbsp;{L_GALLERY_CREATE_THUMB}&nbsp;</label>
                    </center>

Такая же история

Lange · Nov 19, 2012

Sarymian, добавлю свои пять копеек. Может попробовать теги центр использовать? <center></center>

Кривой вывод (положение объектов)

Sarymian

Sarymian

Exile

Sarymian

ChihPyh

Sarymian

Sarymian

DarkMod

Sarymian

Lange