Re: помогите правильно сверстать дивами
От: Аноним  
Дата: 16.05.09 14:50
Оценка: 1 (1)
FM>Собственно, хотелось бы, чтобы более знающие люди посмотрели и, если что не так, поправили или подсказали как лучше.

Не знаю какая точно задача перед тобой стояла (потому что все контролы, которые в общем случае могут быть сложными, в одну строку — это оригинально), но табличную раскладку надо делать таблицами. Тот, кто тебя сказал, что таблицами верстать нельзя или дурак или намеренно обманул тебя.

http://rsdn.ru/Forum/message/2917435.1.aspx
Автор: avpavlov
Дата: 15.04.08
Re[2]: помогите правильно сверстать дивами
От: masterlelik  
Дата: 16.05.09 17:04
Оценка: +1
Здравствуйте, Аноним, Вы писали:

FM>>Собственно, хотелось бы, чтобы более знающие люди посмотрели и, если что не так, поправили или подсказали как лучше.


А>Не знаю какая точно задача перед тобой стояла (потому что все контролы, которые в общем случае могут быть сложными, в одну строку — это оригинально), но табличную раскладку надо делать таблицами. Тот, кто тебя сказал, что таблицами верстать нельзя или дурак или намеренно обманул тебя.


А>http://rsdn.ru/Forum/message/2917435.1.aspx
Автор: avpavlov
Дата: 15.04.08


Поддерживаю, надо использовать комбинацию дивов и таблиц http://web-blog.com.ua/r/3/o/11/
помогите правильно сверстать дивами
От: FreddieM  
Дата: 28.04.09 07:13
Оценка:
Сделал верстку дивами для форм редактирования данных, но опыт в такой верстке у меня минимальный. Требования к верстке следующии:

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

ps для тех, кто не работал с asp.net Label — это span, TextBox — input.


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
        .master-div
        {
            display:block;
            width:855px;
        }
        .field-div
        {
            float:left;
            margin-top:5px;
        }
        .label-div
        {
            float:left;
            width:100px;
        }
        .input-div
        {
            float:left;
            width:180px;            
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="master-div">
        <div class="field-div">
            <div class="label-div">
                <asp:Label ID="lblField1" runat="server" Text="Field 1" />
            </div>            
            <div class="input-div">
                <asp:TextBox ID="txtField1" runat="server" />
            </div>
        </div>
        <div class="field-div">
            <div class="label-div">
                <asp:Label ID="Label1" runat="server" Text="Field2" />
            </div>            
            <div class="input-div">
                <asp:TextBox ID="TextBox1" runat="server" />
            </div>
        </div>
        <div class="field-div">
            <div class="label-div">
                <asp:Label ID="Label2" runat="server" Text="Field3" />
            </div>            
            <div class="input-div">
                <asp:TextBox ID="TextBox2" runat="server" />
            </div>
        </div>
        <div class="field-div">
            <div class="label-div">
                <asp:Label ID="Label3" runat="server" Text="Field4" />
            </div>            
            <div class="input-div">
                <asp:TextBox ID="TextBox3" runat="server" />
            </div>
        </div>
        <div id="div5" runat="server" class="field-div">            
            <div class="label-div">
                <asp:Label ID="Label4" runat="server" Text="Field5" />
            </div>            
            <div class="input-div">
                <asp:TextBox ID="TextBox4" runat="server" />
            </div>            
        </div>
        <div class="field-div">
            <div class="label-div">
                <asp:Label ID="Label5" runat="server" Text="Field6" />
            </div>            
            <div class="input-div">
                <asp:TextBox ID="TextBox5" runat="server" />
            </div>
        </div>
        <div class="field-div">
            <div class="label-div">
                <asp:Label ID="Label6" runat="server" Text="Field7" />
            </div>            
            <div class="input-div">
                <asp:TextBox ID="TextBox6" runat="server" />
            </div>
        </div>
        <div class="field-div">
            <div class="label-div">
                <asp:Label ID="Label7" runat="server" Text="Field8" />
            </div>            
            <div class="input-div">
                <asp:TextBox ID="TextBox7" runat="server" />
            </div>
        </div>        
    </div>    
    <div style="clear:both" />
    <div>
        <asp:Button ID="btnHide" runat="server" Text="Hide Field 5" />
    </div> 
    </form>
</body>
</html>
Re: помогите правильно сверстать дивами
От: masterlelik  
Дата: 29.04.09 13:40
Оценка:
Здравствуйте, FreddieM, Вы писали:

FM>Сделал верстку дивами для форм редактирования данных, но опыт в такой верстке у меня минимальный. Требования к верстке следующии:

FM>
FM>Собственно, хотелось бы, чтобы более знающие люди посмотрели и, если что не так, поправили или подсказали как лучше.


FM>ps для тех, кто не работал с asp.net Label — это span, TextBox — input.


Если какое-то поле будет выше остальных, например, везде одна строка, а одно поле будет двухстрочное, то все "поломается".
В таких случаях, зная что такое возможно я задаю необходимую высоту внешних контейнеров master-div.
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.