Блочная верстка

09 марта 2011 года

RussianSpy

3.0K / / 04.07.2006

Не очень понятно что вы хотите получить в итоге. Скриншот или доступ к хтмл очень сильно ускорили бы решение проблемы.

242

09 марта 2011 года

2.2K / / 04.02.2006

постараюсь объяснить. мне надо сделать шаблон элемента для отображения Item'a в интернет-каталоге. структура описания: title, picture, description - смотрите 3-e вложение, там желаемый результат(табличная верстка).
так вот, когда я делаю верстку слоями, пример попытки в моем первом посте, и если картинка выше (длиннее) описания товара, то верстка едет - смотрите второе вложение:
серая полоса - высота слоя itemImage
красная полоса(цвет) - container
желтый цвет - itemDescription

ну а в первом вложении видно, что если высота слоя itemDescription выше, то все нормально, т.е. получается, что высота слоя container зависит именно от него ... надеюсь я еще больше не запутала. просто первые шаги в блочной верстке как и во многом, что касается веб.

09 марта 2011 года

RussianSpy

3.0K / / 04.07.2006

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

Код:

.container
{

            position:relative;

    width: 800px;

    margin: 0 auto;

}
.itemImage
{

            position:relative;

            float: left;

    width: 150px;

            height: auto;

    margin-top: 5px;

    border: 2px solid black;
}
.itemDescription
{

            position:relative;

            float: left;

            height: auto;

            margin-left: 160px;

    margin-top: 15px;

    border: 2px solid black;
}

242

09 марта 2011 года

2.2K / / 04.02.2006

RussianSpy, спасибо, попробую, как просплюсь, и напишу результаты. Насчет кода, я просто не поняла, что вы имели ввиду написав "доступ к хтмл", вот до чего дошло :-) если не поможет ваш совет, приведу.
Спасибо за помощь.

563

09 марта 2011 года

MrLinker

249 / / 17.09.2006

Цитата:

Люди, подскажите пожалуйста, в чем моя ошибка.

У вас отличный код, оставьте как есть.
В вашем случае, есть несколько способов, как заставить внешний контейнер растянуться по содержимому:
- добавить к css-правилу .container стиль overflow: hidden
- добавить элемент со свойством clear: both в html-код после блока контейнера, либо прописать этот стиль любому, идущему после, блоку (более старый метод).

Причем, интересный момент. В IE 6,7 ваш пример будет работать как надо (чудо-браузер, прям). Это происходит потому, что для .container у вас задана ширина. А если в IE у элемента задан хоть какой-то размер, то устанавливается флаг hasLayout (помните?), что в свою очередь решает вашу проблему.

Если не требуется определенный размер, то width: 100% или height: 1%.
В любых других случаях с IE, где не уместно задавать размер, включить HasLayout можно при помощи, например, задания стиля zoom: 1 (правда не проходит валидацию).

Я все это к тому, что в будущем вы столкнетесь с этим не раз. Будет хоть вектор размышлений.

242

09 марта 2011 года

2.2K / / 04.02.2006

Цитата: RussianSpy

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

неа, не помогло и ничего удивительного, я не корректную инфу привела, запуталась в своем же гениальном коде :-)

25 строка - начало шаблона, класс стилей "content", a не "container", который я вчера ошибочно привела.
31стр. - начало описания шаблона и там видна табличная верстка, которую я надеюсь получиться заменить на блочную.
комментарии я там написала, надеюсь внятно.
прилагаю скриншот общего вида каталога.

Код:

<body>

    <form id="form1" runat="server">

    <div id="container" class="container" runat="server">

         <div id="header" class="head" runat="server">

                 <h1>Internet-Catalog</h1>

         </div>

         <div id="options" class="options">

                 <asp:Label ID="lblLogin" runat="server" Text="Login: "></asp:Label>

                <asp:TextBox ID="txtLogin" runat="server"></asp:TextBox>

                <asp:Label ID="lblPassport" runat="server" Text="Passport: "></asp:Label>

               <asp:TextBox ID="TtxtPassport" runat="server"></asp:TextBox>      

               <asp:Button ID="btnLogin" runat="server" Text="Login"              &#111;&#110;click="btnEnter_Click" />

              <asp:LinkButton ID="btnRegistration" OnClick = "btnRegistration_Click"  runat="server">Registration</asp:LinkButton>

       </div>

       <div id="menu" class="menu" runat="server">

       </div>

       <!-- Начало шаблона, которому я бы хотела сделать блочную верстку -->

       <div id="content" class="content" runat="server">   

             <asp:Repeater ID="RepeaterContent" runat="server" DataSourceID="SqlDataSource1" EnableTheming="False">

             <HeaderTemplate><table border="0" width="100%"></HeaderTemplate>

          <!-- Начало тела шаблона где размещается картинка, описание ...-->

             <ItemTemplate>

             <tr>

                <td colspan="2">  <!-- Заголовок продукта - title -->

                    <asp:Label ID="Label1" runat="server" Text=<%# Eval("title") %> Font-Bold="True" Font-Size="Medium"></asp:Label>

                 </td>

             </tr>

             <tr>

                 <td>

                    <asp:Image ID="picture" runat="server" ImageUrl= <%# Eval("imageUri") %> />    <!-- A product picture -->                

                </td>

                <td>

                   <%# Eval("pDescription") %> <!-- This is a product description -->

                </td>

             </tr> 

             <tr><td colspan="2"><hr /></td></tr>

             </ItemTemplate>

             <FooterTemplate></table></FooterTemplate>

           </asp:Repeater>

       <asp:SqlDataSource ID="SqlDataSource1" runat="server" 

        ConnectionString="<%$ ConnectionStrings:InternetCatalogConnectionString %>" 

        SelectCommand="SELECT [categoryID], [maker], [title], [pDescription], [price], [imageUri] FROM [Product]"></asp:SqlDataSource>

       </div>

  <div id="footer" style="clear: left" runat="server"></div>    

</div>

    </form> 

</body>

Код:

body
{

 font-family: Arial, Helvetica, Sans-Serif;

 margin: 0;
}

h1
{

 font-size: 36px;

 font-weight: bold;

 margin: 0;

 color: #fc6;

 }

h2
{

 margin-top: 0;
}
.container
{

    width: 800px;

    margin-left: auto;

    margin-right: auto;

    margin-top: 25px;

    /*background: red;*/
}
/*Upper block(layer)*/
.head
{

    text-align: center;

    /*width: 800px;*/

    background: #0080c0;

    padding: 10px;

    height: 50px;

    padding: 10px;

    margin-bottom: 10px;

}
.options
{

    background: white;

    border: 1px black;

    height: auto;

}
/*Left column*/

.menu 
{

    background: #e9e9ea;  /*#008000;lightgray;*/

    color: White;

    float: left;

    /*border: 1px solid #333;*/

    width: 200px;

    padding: 5px;

    margin-top: 10px;

    /*margin: 10px 10px 20px 5px;*/
}
.menu div
{

    padding: 2px;
}
.menu a
{

    display: block;

    padding: 2px;

    margin: 1px;

    font-size: 0.9em;

    text-decoration: none;
}

menu a:hover
{

    background: white; /* #faf3d2;*/

    border: 1px dashed #634f36;

    margin: 0;
}
/*A right column*/

.content
{

    /*margin: 10px 5px 20 225;*/

    /*border: 1px solid #333;*/

    /*color:lightgray;*/

    margin-left: 220px;

    margin-top: 10px;

    padding: 5px;

    background: #e9e9ea;

}
/* A lower block */
.foot
{

    background: #333;

    padding: 5px;

    color: #fff;

    clear: both;
}
.repeaterItem
{
}
.itemImage
{

    float: left;

    width: 150px;

    margin-top: 5px;

}
.itemDescription
{

    margin-left: 160px;

    margin-top: 15px;

}

242

09 марта 2011 года

2.2K / / 04.02.2006

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

563

10 марта 2011 года

MrLinker

249 / / 17.09.2006

Olga, это был даже не совет, я привел вам решение.
Хотя вы сами решили задачу на 99%.

Давайте чуть-чуть модифицируем ваш код, переименуем css-правло .container на .product и добавим стиль position: relative к правилу .content:

Код:

.content {

    margin-left: 220px;

    margin-top: 10px;

    padding: 5px;

    background: #e9e9ea;

    position: relative;
}

.product {

    width: 100%;

    overflow: hidden;

    margin-bottom: 2em;
}

.itemImage {

    float: left;

    width: 150px;

    text-align: center;
}

.itemDescription {

    margin-left: 160px;
}

Выводим список продуктов:
[HTML]<div class="content">
<div class="product">
<h2>Заголовок продукта 1</h2>
<div class="itemImage">
<img src="image.jpg" alt="Mobile phone"/>
</div>
<div class="itemDescription">
Аннотация к .......
</div>
</div>

<div class="product">
<h2>Заголовок продукта 2</h2>
<div class="itemImage">
<img src="image.jpg" alt="Mobile phone"/>
</div>
<div class="itemDescription">
Аннотация к .......
</div>
</div>

<div class="product">
<h2>Заголовок продукта 3</h2>
<div class="itemImage">
<img src="image.jpg" alt="Mobile phone"/>
</div>
<div class="itemDescription">
Аннотация к .......
</div>
</div>
</div>[/HTML]

Посмотрите на пример.

P.S. Время и посоветовать что-нибудь. Сделайте фон у правого блока белым. Такой вариант свежее и будет легче восприниматься, также не будет проблем с адаптацией изображений.

242

12 марта 2011 года

2.2K / / 04.02.2006

MrLinker, спасибо большое за помощь.

Цитата:

Olga, это был даже не совет, я привел вам решение.
Хотя вы сами решили задачу на 99%.

я не знаю поймете вы меня или нет ) но это моя первая попытка в блоч. верстке с онлайн учебником, вызванная необходимостью сделать лабу. я сейчас asp.net учу. это я к тому, что не могу на ходу сообразить с таким стажем опыта и знаний, что мне дали. сорри.