Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  | Правила  

Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » блочная верстка часть 1 (DIV)

Ответить
Настройки темы
блочная верстка часть 1 (DIV)

Ночной странник


Contributor


Сообщения: 4050
Благодарности: 83


Конфигурация

Профиль | Сайт | Отправить PM | Цитировать


вот решил начать вереницу тем посвещенную блочной верстке...

для начала предлагаю обсудить седующий элемент верстки:

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

и есть очень большое желание сделать это без использования позиционирования!
при использовании позиционирования это сделать просто...

какие есть идеи???

-------
можно практически все, но просто мы это еще не знаем.
главный враг програмиста это копипастинг
За хорошее сообщение не забываем нажимать ссылочку "Полезное сообщение"!


Отправлено: 00:17, 06-06-2006

 

Ночной странник


Contributor


Сообщения: 4050
Благодарности: 83

Профиль | Сайт | Отправить PM | Цитировать


я думаю что капать нужно в эту сторону:
PHP код: Выделить весь код

<div style="border:#333333 1px solid; width:100%;padding:2px;">

            <
div style="border:#333333 1px solid;background-color: #006666; height:5px;width:100%;overflow:hidden;">&#160;</div>        
        
</div

-------
можно практически все, но просто мы это еще не знаем.
главный враг програмиста это копипастинг
За хорошее сообщение не забываем нажимать ссылочку "Полезное сообщение"!


Отправлено: 18:18, 07-06-2006 | #21



Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

Если же вы забыли свой пароль на форуме, то воспользуйтесь данной ссылкой для восстановления пароля.


Ночной странник


Contributor


Сообщения: 4050
Благодарности: 83

Профиль | Сайт | Отправить PM | Цитировать


что? все идеии уже иссякли????

-------
можно практически все, но просто мы это еще не знаем.
главный враг програмиста это копипастинг
За хорошее сообщение не забываем нажимать ссылочку "Полезное сообщение"!


Отправлено: 11:53, 08-06-2006 | #22


Аватара для benya

Старожил


Сообщения: 302
Благодарности: 5

Профиль | Сайт | Отправить PM | Цитировать


Изображения
Тип файла: gif vot.gif
(914 байт, 3 просмотров)

Vlad Drakula,
Кстати, у меня же точно же такая задача. (если я правильно понял). Сделать 3 дива. По краям фиксированной ширины 2 пикс. Середина пустая, должна растягиваться от общей ширины. Нужно для полоски голосования.
Но че-то у меня нихера не получилось. Средина без указания ширины ну никак не заполняется.
Сделал что-то типа (только с одним дивом и спозиционировал 2 имиджа) :
HTML код: Выделить весь код
<style type="text/css"> <!-- .DC{ float:left; height:11px; width:100%; background-image: url(/images/vote/c.gif); } --> </style> <div class="DC" style="width:54%"><img src="/images/vote/l.gif" width="1" align=left><img src="/images/vote/r.gif" width="1" align="right"></div>

Вышло см. вложение. Но хотелось бы что бы цифры с процентами были около полоски и растягивались в месте с ней, а не в отдельной ячейке.


Отправлено: 12:42, 08-06-2006 | #23


Ночной странник


Contributor


Сообщения: 4050
Благодарности: 83

Профиль | Сайт | Отправить PM | Цитировать


benya
подобную конструкцию пробовал?

PHP код: Выделить весь код

<div style="position:relative;width:%;height:20px;">

<
div style="position:absolute;top:0;left:0;width:2px;height:20px;">*</div>
<
div style="position:absolute;top:0;right:0;width:2px;height:20px;">*</div>
<
div style="margin-left:2px;margin-right:2px:width:100%;">*</div>
</
div

-------
можно практически все, но просто мы это еще не знаем.
главный враг програмиста это копипастинг
За хорошее сообщение не забываем нажимать ссылочку "Полезное сообщение"!


Отправлено: 13:05, 08-06-2006 | #24


Аватара для benya

Старожил


Сообщения: 302
Благодарности: 5

Профиль | Сайт | Отправить PM | Цитировать


Vlad Drakula,
Ну ты гений Отписать осталось только классы

Отправлено: 13:20, 08-06-2006 | #25


Ночной странник


Contributor


Сообщения: 4050
Благодарности: 83

Профиль | Сайт | Отправить PM | Цитировать


benya
это то известно мне давно... так сказать одино из стандартных решений...
у меня вот было жилание написать такой шаблон, где не нужно будет использовать обсолютное и релятивное позиционирование!

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

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

-------
можно практически все, но просто мы это еще не знаем.
главный враг програмиста это копипастинг
За хорошее сообщение не забываем нажимать ссылочку "Полезное сообщение"!


Отправлено: 14:01, 08-06-2006 | #26


Аватара для benya

Старожил


Сообщения: 302
Благодарности: 5

Профиль | Сайт | Отправить PM | Цитировать


Изображения
Тип файла: gif vot.gif
(407 байт, 7 просмотров)

Vlad Drakula,
Немного таки не подходит

HTML код: Выделить весь код
<style type="text/css"> <!-- .DO { position:absolute; top:-2px; right:-28px; height:11px; font-size:11px; color:#333333; font-family:Verdana, Arial, Helvetica, sans-serif; } .DL{ position:absolute; top:0; left:1px; width:1px; height:11px; background-image: url(/images/vote/l.gif); overflow:hidden; } .DC{ margin-left:2px; margin-right:2px; width:100%; height:11px; background-image: url(/images/vote/c.gif); overflow:hidden; } .DR{ position:absolute; top:0; right:1px; width:1px; height:11px; background-image: url(/images/vote/r.gif); overflow:hidden } --> </style> <table width="100" cellpadding="2" cellspacing="0" border="1"> <tr><td> <div style="position:relative;width:100%; "> <div class="DL"></div> <div class="DC"></div> <div class="DR"></div> <div class="DO">12%</div> </div> </tr></td></table>

Цифры с процентами вылазят за пределы внещнего блока (таблицы)
Чего не должно быть. 100% должно быть учтено с цифрами.

Отправлено: 14:07, 08-06-2006 | #27


Ночной странник


Contributor


Сообщения: 4050
Благодарности: 83

Профиль | Сайт | Отправить PM | Цитировать


benya
1) не нужно использовать служную верстку дивами внутри таблиц!!! это сильно глючит в IE !!!
2) баг с вылизанием текста очень просто... попробуйте исправить сами... если не получится то я помогу вам...

-------
можно практически все, но просто мы это еще не знаем.
главный враг програмиста это копипастинг
За хорошее сообщение не забываем нажимать ссылочку "Полезное сообщение"!


Отправлено: 14:20, 08-06-2006 | #28


Аватара для benya

Старожил


Сообщения: 302
Благодарности: 5

Профиль | Сайт | Отправить PM | Цитировать


Vlad Drakula,
Да ничего не получается. цифры эти плавают поверх таблицы. А как их воткнуть внутрь..

HTML код: Выделить весь код
<style type="text/css"> <!-- .DO { position:absolute; height:11px; font-size:9px; color:#333333; font-family:Verdana, Arial, Helvetica, sans-serif; padding-left:2px; left: 100%; top: -1px; } .DL{ position:absolute; top:0; left:-1px; width:1px; height:11px; background-image: url(/images/vote/l.gif); overflow:hidden; } .DC{ width:100%; height:11px; background-image: url(/images/vote/c.gif); overflow:hidden; } .DR{ position:absolute; top:0; right:-1px; width:1px; height:11px; background-image: url(/images/vote/r.gif); overflow:hidden } --> </style> <table width="100" cellpadding="2" cellspacing="0" border="1"> <tr><td style="padding:3px;"> <div style="position:relative;width:100%;"> <div class="DL"></div> <div class="DC"></div> <div class="DR"></div> <div class="DO">12%</div> </div> </tr></td></table>


Отправлено: 13:09, 09-06-2006 | #29


Ночной странник


Contributor


Сообщения: 4050
Благодарности: 83

Профиль | Сайт | Отправить PM | Цитировать


benya
1) вы уж извените, но сначала почитаю вам немного морали...
у вас не получается т.к. вы просто не корерктно сформулировали то что вы хотите сделать... возможно вы еще не готовы чтобы мыслить блоками а не таблицами... для этого нужно много стараться и уяснить несколько простых вещей по блочной верстке...
2) вы не учли мое замечание о том что не нужно комбинировать дивы и таблицы... (просто лирическое отступление...)
3) а вы такую конструкцию не пробовали делать:

.DO {
right:0px;
}

.DR{
right:30px;
}

.DC{
margin-left:2px;
margin-right:32px;
}

-------
можно практически все, но просто мы это еще не знаем.
главный враг програмиста это копипастинг
За хорошее сообщение не забываем нажимать ссылочку "Полезное сообщение"!


Отправлено: 13:41, 09-06-2006 | #30



Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » блочная верстка часть 1 (DIV)

Участник сейчас на форуме Участник сейчас на форуме Участник вне форума Участник вне форума Автор темы Автор темы Шапка темы Сообщение прикреплено

Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
Верстка DIV'ами (разлазится в IE6) darksmoke Вебмастеру 5 27-12-2009 13:54
[решено] Верстка слоями (Div) Bullet-Avalon Вебмастеру 5 28-11-2008 09:49
Как прижать footer-image ( верстка <DIV> XHTML/CSS ) ? stalingrad432006 Вебмастеру 6 04-11-2008 16:57
блочная верстка часть хз кк E-mail Вебмастеру 5 23-08-2006 18:05
блочная верстка часть 2 (DIV) Vlad Drakula Вебмастеру 3 08-07-2006 13:26




 
Переход