2-колонок; многокорпусная панель - PullRequest
Новая
       10

2-колонок; многокорпусная панель

0 голосов
/ 02 апреля 2010

Хорошо, у меня есть некоторые проблемы, и я считаю, что это проблема CSS. Вот над чем я сейчас работаю: http://www.notedls.com/demo/

Сосредоточение внимания на аккордеонном меню News. Идея здесь состоит в том, чтобы иметь маленькое изображение (50х50 с отступом) и затем огромный заголовок рядом с ним. Когда пользователь щелкает заголовок, он расширяется до статьи. Если пользователь хочет прочитать комментарии или сделать комментарий самостоятельно, он может щелкнуть «Просмотреть комментарии», чтобы развернуть его еще больше.

Проблема, с которой я столкнулся (если она не ясна) - это интервал с изображением и текстом. Я мог бы просто увеличить высоту ui.accordion-acc или -left, чтобы все уместилось, но это не решает проблему. Если вы заметите, когда щелкнете по первому расширению Заголовка 1, оно обернет View Comments под изображением. Это то, что я не хочу, я пытался разделить эти элементы на дополнительные div и даже плавать, но это просто не работает. По сути, я хочу, чтобы свободное пространство под изображением было бесконечно, как бы долго ни занимали статья + комментарии.

Ответы [ 2 ]

0 голосов
/ 03 апреля 2010

Почему плавающее не работает? Я думаю, вы могли бы сделать что-то вроде: 

.img {float: left; width: 50px; padding: 5px;}
.title {float: left; width: 300px; padding: 5px;}
.clear {clear: both; height: 1px;}

<div class="img"><img src="img/news_ffxiv_a.jpg"></div>
<div class="title">TITLE</div>
<div class="clear"><!-- --></div>

Это должно создать неограниченное пространство под изображением, так как другой div плавает слева от него. Ключ в том, чтобы отпустить оба предмета, а не только один.

0 голосов
/ 02 апреля 2010

Попробуйте добавить этот CSS: 

ul#acc1 .acc1 { padding-left: 50px; } /* headline */
ul#acc1 > li > div { padding-left: 55px; } /* text block under headline */
ul#acc1 ul li { padding-left: 0; width: 487px; } /* View Comments */
ul#acc1 ul li div { padding-left: 20px; } /* text here under view comments */

Мне пришлось уменьшить размер блока просмотра комментариев, так как он выдвигался вправо. Отрегулируйте 50px, 55px, 487px (установите ширину 542px минус 55px) и 20px (просто сделайте отступ для комментария немного больше), чтобы соответствовать размеру эскиза.

Ну, проблема в том, что в аккордеоне есть аккордеон, поэтому, когда вы добавляете общие классы CSS аккордеона, такие как ul.ui-accordion-container li a.ui-accordion-link, это влияет на оба уровня. Вот почему комментарии опустились на 62px.

У вас уже есть более конкретные классы, которые вы могли бы использовать ... попробуйте это ul.ui-accordion-container li a.acc1, но я бы не рекомендовал добавлять высоту к ссылке, а вместо этого добавить ее к <h1>, чтобы соответствовать высоте эскиза. Итак, попробуйте это: 

h1 {
 float: left;
 margin: 0px;
 padding: 1px;
 font-size: 30px;
 color: #9667cc;
 height: 65px;
}
ul.ui-accordion-container li a.acc1 { 
 display: block; 
 padding-left: 5px; 
 margin-right: 3px; 
 height: 62px;
 color: #000; 
 text-decoration: none; 
 line-height: 28px; 
}
ul.ui-accordion-container li a.acc2 { 
 line-height: 28px; 
}
...