Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вопрос с выводом данных в горизонтальной верстке (https://javascript.ru/forum/misc/35834-vopros-s-vyvodom-dannykh-v-gorizontalnojj-verstke.html)

danik.js 27.02.2013 02:27

HoenDHime, у все зачем-то впихнуто в таблицу. А таблица будет тянуться пока не лопнет. Она резиновая. Вот поэтому у тебя вертикальный скролл. Убери таблицу, задай всем элементам height: 100%, чтобы их высота не была больше высоты окна, и все получится.

HoenDHime 27.02.2013 19:13

Цитата:

Сообщение от danik.js (Сообщение 237495)
Убери таблицу, задай всем элементам height: 100%, чтобы их высота не была больше высоты окна, и все получится.

Сколько раз повторять что оно не влизает, всем итак назначено height: 100%, оно не влезает как по ширине - пару символов за границей страницы, и скрула нет, остальное идет вниз, это по вашему нормально? В первом спане находится картинка, которая режется чего мне не нада, если вы смотрели на скрины. И судя по логике это свойство было сделано для вертикальной верстки сайта, а не горизонтальное и оно сдесь просто не поможет. И последнее время просто таки негатив один от вас идет (будто вы ничего другова не видите кроме как ваше вот). Интересно хоть на один вопрос вы мне дадите ответ - что произойдет с таблицей ?- как вы выразились лопнет.

Deff 27.02.2013 20:48

HoenDHime,
Просто ден устал от односложной задачи

Если не сложно, - выложите минимальный HTML и поясните еще раз, что сделать в минимальной конфигурации

HoenDHime 27.02.2013 20:51

Дали мне несколько ресурсов
http://habrahabr.ru/company/microsoft/blog/143158/
http://ie.microsoft.com/testdrive/Gr...lti-column.htm
и использовал тот принцип для вашего примера:
<div class="ParentDiv">
    <span >
         @{
             if (string.IsNullOrWhiteSpace(Model.CoverImage)) 
             { 
                 <img src="@Url.Content("~/Content/CoverImage/0.jpg")" alt="CoverImage" id="imga" />
             }
             else
             {
                 <img src="@Url.Content("~/Content/CoverImage/" + User.Identity.Name + "/CoverImage" + Model.CoverImage)" alt="CoverImage" id="img" />
             }
            }
    </span>
     <span>
        @using(Html.BeginForm("PostLabel","LabelWall")){
                @Html.TextArea("Label", new { style="width: 250px; height: 150px; position: relative; resize: none;" }) 
                <br /><br />
                <input type="submit" value="Разместить" />
            }
    </span>
               @foreach(var x in Model.PersonalLabel.OrderByDescending(g=>g.LabelWall.Date))
               {
                   if(x.PersonalID==ViewBag.PersonalGuid)
                   {
                       <br /><br />
                        <span style="display: inline-block;  max-width: 300px; max-height: 300px; column-width: 300px; ">
                            @{ Html.RenderAction("MiniAvaImage", "Home"); }
                               
                                    @ViewBag.FullName<br />
                                    @x.LabelWall.Date.Value.ToLongDateString()
                                <br />
                                @x.LabelWall.Text
                            
                        </span>
                   }
               } 
</div>


columns:  4;
    column-fill: auto;
    height: 884px;

Тут же явно не те стили, которые вы давали. при height: 100% все просто идет в низ, height: 884px позже сделаю под каждый экран браузера пользователя( пару строк JS). Единственное оно и картинку мою сжимает, так что буду калдовать с ней что бы она была полноразмерная ( касательно ширины ( по высоте я равняю)).
И дам картинку как оно сечас выглядит

HoenDHime 27.02.2013 20:57

Цитата:

Сообщение от danik.js (Сообщение 237495)
HoenDHime, у все зачем-то впихнуто в таблицу. А таблица будет тянуться пока не лопнет. Она резиновая. Вот поэтому у тебя вертикальный скролл. Убери таблицу, задай всем элементам height: 100%, чтобы их высота не была больше высоты окна, и все получится.

И всетаки интересно, почему она лопнет, если можеш Deff , подскажи насчет этого.

Deff 27.02.2013 20:59

HoenDHime,
Пока думаю, - не быстро...

danik.js 27.02.2013 23:44

Блин, до чего я опустился.. Какаю какие-то левые архивы, правлю сгенерированный код (при том что у меня аллергия на чужой код), даже демку сам запилил. А все потому что дядя HoenDHime слегка ленивый.
http://jsfiddle.net/danya_postfactum/pwSdG/

HoenDHime 28.02.2013 00:49

Цитата:

Сообщение от danik.js (Сообщение 237802)
Блин, до чего я опустился.. Какаю какие-то левые архивы, правлю сгенерированный код (при том что у меня аллергия на чужой код), даже демку сам запилил. А все потому что дядя HoenDHime слегка ленивый.
http://jsfiddle.net/danya_postfactum/pwSdG/

Слегка ленивый - ну тут трудно доказать обратность, если это правда =). Я незнаю может и в других браузерах работает по другому, но в опере текст ( сообщения) идут ВНИЗ. Мне нада это слово несколько раз написать и подчеркнуть чтобы вы его увидели?
Плюс ко всему залить проект, который использует БД не на норм хостинг, а на проверку html/css/js имхо смысл, я тот сайт ( который вы привели ) знаю, но - и это все объясняет.

Deff 28.02.2013 00:53

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

danik.js 28.02.2013 00:56

Действительно. В опере хрень (я даже не удивлен, она часто косячит). Это уже проблема..

HoenDHime 28.02.2013 01:00

Вот возможно наши расхождения, ибо я в опере сначала делаю, а только потом во всем остальном (ито как время будет, пока это не принципиально). И скажи наконецто почему таблица лопнет, рано или поздно ?

рони 28.02.2013 01:06

danik.js,
текст нормально выглядит у меня только в Internet Explorer10 в остальных браузерах строки ползут на друг друга -- это Google Chrome и firefox

HoenDHime 28.02.2013 01:24

Вообщем если использовать таблицу у меня все получилось, картинка с шириной больше ширины экрана, и "посты", которые не вылазят за рамки. Как услышу ответ на мой вопрос в предыдущем "ответе" так и будем думать, стоил ли менять. Если нид скрины, пишите - выложу.

Deff 28.02.2013 22:55

ща ток пришел... минут через полчасика и чо нидь выдам

Deff 28.02.2013 23:19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Домашняя страница</title>
<link href="http://hostjs-mybb2011.narod.ru/css/style-81.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>


<div id=Storage style="display:none"></div>
<script type="text/javascript">
(function(){

    Wheight = $(window).height();
    var height = $("window").height();

$(document).ready(function(){
    var Wrap = $("#element").addClass('Wrp');
    var TR = Wrap.parent('tr')
    var img = $("#img");
    TR.attr('valign','top');
    var Stor = $('#Storage');
    Stor.html(Wrap.html());
    Wrap.empty();

setTimeout(function(){
    img.attr('height',Wheight);
    var TDheight = Wrap.innerHeight();

    Stor.find('form,span[id^="spanlabel"]').each(function(){
	var NN = $(this);//alert(NN.html())
	NN.appendTo(Wrap);

        if(Wrap.innerHeight()> TDheight+22){
	   var NN = Wrap.find('span[id^="spanlabel"]:last').remove();

	   Wrap.after('<td class="Wrp"></td>');
	   Wrap = Wrap.next();
	   NN.appendTo(Wrap);
	}
	Wrap.append('<br/>')
    });
},700)
});
})()
</script>

</head>
<body>
    <div class="page">
        <div style="position: fixed; z-index:100;">
            <ul id="menu">
                <li> 
    <img src="http://hostjs-mybb2011.narod.ru/img/AvaImage.jpg" alt="AvaImage" onload="OnlImg()">
 </li>
                <li><a href="./home_files/home.htm">Домашняя страница</a></li>
                <li><a href="http://localhost:40297/Home/PersonalPageEdit">Редактирование</a></li>      
                <li><a href="http://localhost:40297/Account/LogOff">Выход</a></li>         
            </ul>
        </div>
        <div id="main">
<table class="wall" id="labelwall">
    <tbody>
     <tr valign=top>
        <td> 
                 <img src="http://hostjs-mybb2011.narod.ru/img/CoverImage.jpg" alt="CoverImage" id="img">
        </td> 
        <td id="element">
            <br><br>
<form action="http://localhost:40297/LabelWall/PostLabel" method="post"><textarea cols="20" id="Label" name="Label" rows="2" style="width: 250px; height: 150px; position: relative; resize: none;"></textarea>                <br><br>
                <input type="submit" value="Разместить"><br><br>
</form>            
                       <br><br>
                       <span style="display: inline-block; width: 200px; height: 200px;" id="spanlabel">

    <img src="http://hostjs-mybb2011.narod.ru/img/MiniAvaImage.jpg" alt="MiniAvaImage" style="padding: 2px;">
                                Сергей Прохоров<br>
                                22 февраля 2013 г.<br>
                                Кто же это сделал ?

 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                        </span>
                       <br><br>
                       <span style="display: inline-block; width: 200px; height: 200px;" id="spanlabel"> 

    <img src="http://hostjs-mybb2011.narod.ru/img/MiniAvaImage.jpg" alt="MiniAvaImage" style="padding: 2px;">
                                Сергей Прохоров<br>
                                22 февраля 2013 г.
                                <br>
                                Кто же это сделал ?
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                        </span>
                       <br><br>
                       <span style="display: inline-block; width: 200px; height: 200px;" id="spanlabel"> 

    <img src="http://hostjs-mybb2011.narod.ru/img/MiniAvaImage.jpg" alt="MiniAvaImage" style="padding: 2px;">
                               
                                Сергей Прохоров<br>
                                22 февраля 2013 г.
                                <br>
                                Кто же это сделал ?
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                        </span>
                       <br><br>
                       <span style="display: inline-block; width: 200px; height: 200px;" id="spanlabel"> 

    <img src="http://hostjs-mybb2011.narod.ru/img/MiniAvaImage.jpg" alt="MiniAvaImage" style="padding: 2px;">
                               
                                Сергей Прохоров<br>
                                22 февраля 2013 г.
                                <br>
                                Кто же это сделал ?
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                        </span>
                       <br><br>
                       <span style="display: inline-block; width: 200px; height: 200px;" id="spanlabel"> 

    <img src="http://hostjs-mybb2011.narod.ru/img/MiniAvaImage.jpg" alt="MiniAvaImage" style="padding: 2px;">
                               
                                Сергей Прохоров<br>
                                22 февраля 2013 г.
                                <br>
                                Кто же это сделал ?
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                        </span>
                       <br><br>
                       <span style="display: inline-block; width: 200px; height: 200px;" id="spanlabel">

    <img src="http://hostjs-mybb2011.narod.ru/img/MiniAvaImage.jpg" alt="MiniAvaImage" style="padding: 2px;">
                                Сергей Прохоров<br>
                                22 февраля 2013 г.<br>
                                Кто же это сделал ?

 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                        </span>
                       <br><br>
                       <span style="display: inline-block; width: 200px; height: 200px;" id="spanlabel"> 

    <img src="http://hostjs-mybb2011.narod.ru/img/MiniAvaImage.jpg" alt="MiniAvaImage" style="padding: 2px;">
                                Сергей Прохоров<br>
                                22 февраля 2013 г.
                                <br>
                                Кто же это сделал ?
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                        </span>
                       <br><br>
        </td>       
    </tr>
</tbody></table>

        </div>

    </div>

</body>
</html>

HoenDHime 28.02.2013 23:56

Спасибо конешно, но я уже вчера отписал что сделал http://javascript.ru/forum/misc/3583...tml#post237731
Думаю мое решение лутше только тем что не надo выполнять расчетов JS.

Deff 01.03.2013 00:37

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

HoenDHime 01.03.2013 01:17

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

danik.js 01.03.2013 01:42

В myspace.com проблему с оперой как-то решили. Пытался разобраться - безуспешно.


Часовой пояс GMT +3, время: 17:37.