Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Параметр все оставшееся место, средний блок из трех в строке 
:(
    Опции темы
liliana2
Дата 14.3.2008, 12:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет



Перерыла кучу инфы и тут тоже не нашла такой темы, подскажите кто знает.
Есть три блока в строке
в строку уложены флоатами, правй и левый имеют фиксированные размеры в пикселях, надо чтобы у середнего был параметр занимать все оставшееся место.
Подскажите как это сделать. Заранее спасибо.
PM MAIL ICQ   Вверх
SelenIT
Дата 14.3.2008, 13:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



Имхо, понятие "все оставшееся место" - стереотип табличной верстки, в CSS такого не предусмотрено. Но можно, не указывая ширину центральному блоку, задать ему правый и левый margin-ы под размер боковых, а сами боковые наложить на них с помощью отрицательных margin-ов или абсолютного позиционирования...


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
bars80080
Дата 14.3.2008, 13:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



так оно так и есть:
Код

<style type="text/css">
#f1 { float: left; width: 100px; border: solid 1px #00ff00; }    
#f2 { float: right; width: 100px; border: solid 1px #0000ff; }    
</style>
<div>
<div id="f1">f1 sdg s gaepog eaweop gwpoe epor wepwer wepr pweor</div>
<div id="f2">f2 wer wer gwerg wper pwerg w're por pwero we'g ewrg 'wergweg weg elg</div>
<div id="f3">f3 welkr wkllqwe q qlr lrg wevrmfmvw ewrg wegvewv  rgergrlg r</div>
</div>

PM MAIL WWW   Вверх
NDenis
Дата 14.3.2008, 17:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8



bars80080, это все хорошо, вот только для SEO хотелось бы, чтобы контент был малость повыше smile 
Поэтому вариант с отрицательными полями. Да и по логике так должно быть. smile 

Это сообщение отредактировал(а) NDenis - 14.3.2008, 17:52
PM MAIL   Вверх
bars80080
Дата 14.3.2008, 18:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



что значит повыше?
PM MAIL WWW   Вверх
SelenIT
Дата 14.3.2008, 18:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



Цитата(bars80080 @  14.3.2008,  18:14 Найти цитируемый пост)
что значит повыше?

Раньше в коде, ближе к началу документа, по-видимому. Говорят, что поисковики любят, чтобы "главное было сразу" smile


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
bars80080
Дата 14.3.2008, 19:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



ну, это я уже называю через ж***

вы можете себе представить структуру сайта в объёме? где дальнейший код это ниже, а место которое он займёт на сайте - это ближе,

с отрицательными маргинами сайт перекручивается в спираль, оттого и неудивительно, когда в него набухивается много всяких фентифлюшек, он начинает прыгать блоками
PM MAIL WWW   Вверх
NDenis
Дата 14.3.2008, 20:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8



SelenIT, да-да именно это

bars80080, ну почему сразу через ж***? и где перекручивается и прыгает?
Мое же ИМХО, что блоки должны идти по порядку (слева на право по горизонтали). Для этого и придумали этот способ, как вы выразились, через ж***. Он наиболее правильный. Если не хочется возится этой ж***, можно пользоваться таблицами.
Но блоки могут прыгать именно в варианте bars80080.
PM MAIL   Вверх
ilyaILF
Дата 14.3.2008, 20:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6



PM MAIL   Вверх
Itsys
Дата 16.3.2008, 02:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 34



Ну скажите мне неразумному, ЗАЧЕМ и в чем "крутость" верстания колонок с помошью divов? Почему бы не воспользоваться простейшей конструкцией
Код

<table width="100%">
<tr>
<td width="100px"></td>
<td width="100%"></td>
<td width="100px"></td>
</tr>
</table>


В чем смысл этого "огорода"?
Код

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<style type="text/css" media="screen">
/*<![CDATA[*/
#outer_wrapper {
    background: #fff url(background_3.gif) repeat-y left;
}
#wrapper {
    background: url(background_2.gif) repeat-y right;
}

#container {
    width: 100%;
    float: left;
    margin-right: -200px;
    background: url(background_2.gif) repeat-y right;
}
#content {
    margin-right: 200px;
    background: url(background_3.gif) repeat-y left;
}
#main {
    margin-left: 150px;
}
#left {
    width: 150px;
    float: left;
}
#sidebar {
    width: 200px;
    float: right;
}
h1 {
    margin-top: 0;
}
.last {
    margin-bottom: 0;
}
.clearing {
    height: 0;
    clear: both;
}
/*]]>*/
</style>
</head>

<body>

<div id="outer_wrapper">

    <div id="wrapper">
        <div id="container">
            <div id="content">
            
                <div id="left">
                    <h1>navbar</h1>
                    <ul>
                        <li>link one</li>
                        <li>link two</li>

                    </ul>
                </div>
                
                <div id="main">
                    <h1>content</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
                    <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
                </div>

                
            </div>
        </div>
        
        <div id="sidebar">
            <h1>sidebar</h1>
            <p>Here be your sidebar. Add whatever content you may desire.</p>
        </div>
        
        <div class="clearing">&nbsp;</div>
    </div>

</div>

</body>
</html>

PM MAIL WWW Skype   Вверх
NDenis
Дата 16.3.2008, 12:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8



Itsys, в том, что народ услышал прикольное слово "семантика" и то, что таблицы созданы для табличных данных а не для построеня структуры страницы, да и еще, наверное, чтобы получить порцию гемороя на свою маленькую попу.
Но для новичков в верстке таблицы это самое то что надо. Потом можно уже лезть в эти дебри.
PM MAIL   Вверх
Itsys
Дата 16.3.2008, 14:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 34



Хе ну кто мне скажет, как надо извратиться с помошью div-ов, чтобы повторить такое:
Код

<table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td rowspan="3" width="100" bgcolor="#C0C0C0">Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример </td>
        <td>Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример </td>
        <td rowspan="2" width="200" bgcolor="#008080">Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример </td>
    </tr>
    <tr>
        <td>
        <table border="0" width="100%" id="table2" cellspacing="0" cellpadding="0">
            <tr>
                <td width="50" bgcolor="#FFFF00">Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример </td>
                <td>Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример </td>
                <td width="200" bgcolor="#FF00FF">Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример </td>
            </tr>
        </table>
        </td>
    </tr>
    <tr>
        <td colspan="2" bgcolor="#808000">Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример Пример </td>
    </tr>
</table>


 smile Пример так, отвлеченный, так же как и использованные цвета.
PM MAIL WWW Skype   Вверх
NDenis
Дата 16.3.2008, 16:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8



в этом я согласен
есть такие разметки, что проще и без лишней головной боли сделать таблцами
но, если у кого-то есть время, можно позаморачиваться 
PM MAIL   Вверх
bars80080
Дата 17.3.2008, 11:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



NDenis, мы видать не поняли друг друга

Цитата
через ж***? 
 относится к построению с отрицательными маргинами, чтобы при нажатии кнопки tab фокус перемещался с верхненго блока сразу в контент, который обычно центральный, и только потом переходил на левый блок, который меню

про мой пример, конечно, следовало правый блок отрядить последним

кстати, по-моему всё же таблицы нужны не для табличных данных, а для построения таблиц, и страница в большинстве случаев именно таблицу и представляет.
PM MAIL WWW   Вверх
SelenIT
Дата 17.3.2008, 14:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



Цитата(bars80080 @  17.3.2008,  11:08 Найти цитируемый пост)
страница в большинстве случаев именно таблицу и представляет

Имхо, нет. Все-таки шапка, подвал, навигационная панель, основной контент и т.п. - это именно блоки. На экране КПК, к примеру, пихать их в таблицу нерационально, там логичнее выводить их последовательно. Кстати, в HTML5 для них вообще предусмотрены специальные теги.


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.1355 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.