Помогите с версткой.

**h2so4** · 24.11.2006, 12:17

Необходимо создать, что-то типа файлового менеджера. В нем будут, папки, файл (не столь важно). Вот создан макет

Код:

 <html>

 <head>
 * <title>Folders</title>
 <style type="text/css">
 * * div.window{
 * * * * position: absolute;
 * * * * overflow: auto;
 * * * * margin: 8px;
 * * * * padding: 0px;
 * * * * width: 420px;
 * * * * height: 280px;
 * * }
 * * div.titlebar{
 * * * * background-color: #0066AA;
 * * * * background-image:url(images/titlebar_bg.ОЬЮ);
 * * * * background-repeat: repeat-x;
 * * * * color: white;
 * * * * border-bottom: solid black 1px;
 * * * * width: 100%;
 * * * * height: 16px;
 * * * * overflow: hidden;
 * * }
 * * span.titleButton{
 * * * * position: relative;
 * * * * height: 15px;
 * * * * width: 15px;
 * * * * padding: 0px;
 * * * * margin: 0px 1px 0px 1px;
 * * * * float: right;
 * * }
 * * span.titleButton#min{
 * * * * background: transparent url(images/min.gif) top left no-repeat;
 * * }
 * * span.titleButton#max{
 * * * * background: transparent url(images/max.gif) top left no-repeat;
 * * }
 * * span.titleButton#close{
 * * * * background: transparent url(images/close.gif) top left no-repeat;
 * * }
 * * div.contents{
 * * * * background-color: #E0E4E8;
 * * * * overflow: auto;
 * * * * padding: 2px;
 * * * * height: 240px;
 * * }
 * * div.item{
 * * * * position: relative;
 * * * * height: 64px;
 * * * * width: 56px;
 * * * * float: left;
 * * * * padding: 0px;
 * * * * margin: 8px;
 * * }
 * * div.item div.itemName{
 * * * * margin-top: 48px;
 * * * * font: 10px verdana, arial, helvetica;
 * * * * text-align: center;
 * * }
 * * div.folder{
 * * * * background: transparent url(images/folder.gif) top left no-repeat;
 * * }
 * * div.file{
 * * * * background: transparent url(images/file.gif) top left no-repeat;
 * * }
 * * div.special{
 * * * * background: transparent url(images/folder_important.gif) top left no-repeat;
 * * }
 </style>
 </head>
 <body>
 * * <div class="window">

 * * * * <div class="titlebar">
 * * * * * * 
 * * * * * * 
 * * * * * * 
 * * * * </div>
 * * * * <div class="contents">
 * * * * * * <div class="item folder">
 * * * * * * * * 

 * * * * * * </div>
 * * * * * * <div class="item folder">
 * * * * * * * * 
 * * * * * * </div>
 * * * * * * <div class="item folder">
 * * * * * * * * 
 * * * * * * </div>
 * * * * * * <div class="item file">

 * * * * * * * * 
 * * * * * * </div>
 * * * * * * <div class="item file">
 * * * * * * * * 
 * * * * * * </div>
 * * * * * * <div class="item special">
 * * * * * * * * 

 * * * * * * </div>
 * * * * * * <div class="item file">
 * * * * * * * * 
 * * * * * * </div>
 * * * * * * <div class="item file">
 * * * * * * * * 
 * * * * * * </div>
 * * * * * * <div class="item file">

 * * * * * * * * 
 * * * * * * </div>
 * * * * * * <div class="item file">
 * * * * * * * * 
 * * * * * * </div>
 * * * * * * <div class="item file">
 * * * * * * * * 

 * * * * * * </div>
 * * * * * * <div class="item file">
 * * * * * * * * 
 * * * * * * </div>
 * * * * * * <div class="item file">
 * * * * * * * * 
 * * * * * * </div>
 * * * * * * <div class="item file">

 * * * * * * * * 
 * * * * * * </div>
 * * * * * * <div class="item file">
 * * * * * * * * 
 * * * * * * </div>
 * * * * * * <div class="item file">
 * * * * * * * * 

 * * * * * * </div>
 * * * * </div>
 * * </div>
 </body>
 </html>

В ФФ он работает корректно, но в ИЕ есть баг. Первый элемент, после первой строки смещаецца влево и никак не могу это побороть

**Phreek** · 26.11.2006, 03:58

низнаю помогут ли тебе
все заняты - работают
а я флешер - ну неумею я верстать

**Aykroyd** · 27.11.2006, 00:17

Originally posted by h2so4@Nov 24 2006, 12:17
В ФФ он работает корректно, но в ИЕ есть баг. Первый элемент, после первой строки смещаецца влево и никак не могу это побороть
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

С блоками - это Вам лучше дождаться ответа Zigzag-а.
Он без сомнения может помочь.

А я бы расчертил все таблицей, и никакие элементы никуда бы не смещались.

Ни в каких браузерах...

**Zigzag** · 27.11.2006, 01:02

Коммент намба ван. Если уж взялись работать с блоками, обязательно указывайте ДОКТАЙП!

Коммент намба ту. Я взял на себя смелость немного оптимизировать CSS правила.

Коммент намба три. Проблема в IE решается уменьшением margin в 2 раза, т.к. у него есть такая болезнь удваивать их. Для этого я воспользовался хаком:

Код:

 *margin: 8px;
 */marin: 4px;

Первый параметр обработаю все браузеры, а второй только IE, переписав соответственно первый параметр на второй.

Коммент намба фо. Т.к. у вас не согласованы размеры блоков их внешних отступов и родительского блока (т.е. ширина дочерних блоков + отступы * на колво блоков в строке = ширина родительского блока), плюс еще то, что дочерние блоки из-за невозможности вместить текст увеличивали высоту блока, то на выходе и получали такую мешанину. Для наглядности я переопределил цвет фона дочерних блоков, чтобы было лучше видно их.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Folders</title>
<style type="text/css">
****div.window {
 *width: 420px;
 *height: 280px;
 *position: absolute;
 *margin: 8px;
 *padding: 0px;
 *overflow: auto;
****}
****div.titlebar {
 *width: 100%;
 *height: 16px;
 *border-bottom: solid black 1px;
 *overflow: hidden;
 *color: white;
 *background: #0066AA url(images/titlebar_bg.jpg) repeat-x;
****}
****span.titleButton {
 *height: 15px;
 *width: 15px;
 *position: relative;
 *padding: 0px;
 *margin: 0px 1px 0px 1px;
 *float: right;
****}
****span.titleButton#min {
 *background: transparent url(images/min.gif) top left no-repeat;
****}
****span.titleButton#max {
 *background: transparent url(images/max.gif) top left no-repeat;
****}
****span.titleButton#close {
 *background: transparent url(images/close.gif) top left no-repeat;
****}
****div.contents {
 *height: 240px;
 *padding: 2px;
 *overflow: auto;
 *background: #E0E4E8;
****}
****div.item {
 *height: 80px;
 *width: 56px;
 *float: left;
 *position: relative;
 *padding: 0px;
 *margin: 8px;
 */margin: 4px;
 *background: red !important;
****}
****div.item div.itemName {
 *margin-top: 48px;
 *font: 10px verdana, arial, helvetica;
 *text-align: center;
****}
****div.folder {
 *background: transparent url(images/folder.gif) top left no-repeat;
****}
****div.file {
 *background: transparent url(images/file.gif) top left no-repeat;
****}
****div.special {
 *background: transparent url(images/folder_important.gif) top left no-repeat;
****}
</style>
</head>
<body>
<div class="window">
****<div class="titlebar">
 *
 *
 *
****</div>
****<div class="contents">
 *<div class="item folder">
 *****
 *</div>
 *<div class="item folder">
 *****
 *</div>
 *<div class="item folder">
 *****
 *</div>
 *<div class="item file">
 *****
 *</div>
 *<div class="item file">
 *****
 *</div>
 *<div class="item special">
 *****
 *</div>
 *<div class="item file">
 *****
 *</div>
 *<div class="item file">
 *****
 *</div>
 *<div class="item file">
 *****
 *</div>
 *<div class="item file">
 *****
 *</div>
 *<div class="item file">
 *****
 *</div>
 *<div class="item file">
 *****
 *</div>
 *<div class="item file">
 *****
 *</div>
 *<div class="item file">
 *****
 *</div>
 *<div class="item file">
 *****
 *</div>
 *<div class="item file">
 *****
 *</div>
****</div>
</div>
</body>
</html>

**agat** · 27.11.2006, 11:29

Болезнь с Ослом по удваиванию маргинов лучше решать вот так:

{...
display: inline;
...}

Для других браузеров это правило никак не повлияет, а ослы исправятся. И никаких хаков. Всё валидно.

**Zigzag** · 27.11.2006, 17:11

можно и так, а можно, правда не проверял, верстать в стрикте, говорят, это помогает IE

**h2so4** · 27.11.2006, 19:43

* Коммент намба ван. Если уж взялись работать с блоками, обязательно указывайте ДОКТАЙП!

из-за него, не работае в ИЕ7 нормально, папки вылазят за див, я так понимаю overflow:auto не срабатывает

без него все ок.

**Zigzag** · 28.11.2006, 00:31

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

**h2so4** · 28.11.2006, 12:06

Zigzag
Дело в том, что задача стоит как раз, чтоб работало под ИЕ7 и ФФ 2.0. ФФ2.0 все ок

ИЕ, он и в Африке ИЕ

Если можете, помогите плиз

**Zigzag** · 28.11.2006, 21:55

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

**h2so4** · 29.11.2006, 14:46

знаешь, попробовал под 6 эксплорером та же беда

когда убираю
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
то работает..

**Zigzag** · 29.11.2006, 20:23

так а что именно разваливается с доктайпом?

**h2so4** · 30.11.2006, 13:16

Разваливается то, что все папки, которые должны быть в ограничивающем скроллируещем диве, вылазят за его пределы и игнорируют этот див

**Zigzag** · 30.11.2006, 23:33

если честно... я такой уставший, тяжело как-то представить, скриншот, думаю. исправил бы это =)

**h2so4** · 02.12.2006, 21:59

вот скрин

**h2so4** · 07.12.2006, 17:52

HelpMePliz

**Zigzag** · 08.12.2006, 00:43

а воз и ныне там? хм. ну я пока еще не ставил себе ие7, сорри =)

Тема: Помогите с версткой.

Опции темы

Поиск по теме

Отображение

Похожие темы

Помогите с версткой (кроссбраузерность)

Помогите с вёрсткой формы

Проблемы с версткой, помогите

помогите с версткой пож :)

помогите с версткой

Ваши права