Стилизация фона элемента div с относительной высотой, только если он содержит содержимое - PullRequest
Новая
       2

Стилизация фона элемента div с относительной высотой, только если он содержит содержимое

2 голосов
/ 17 сентября 2011

Я пытаюсь стилизовать фон элемента div, используя верхнее и нижнее изображение для эффекта тени, например: 

<div id='topline' style='background-image:url("topline.png"); background-repeat:no-repeat; height:10px'></div>
<div id='boxcontent' style='background-image:url("contentline.png"); background-repeat:repeat-y;'>
  [some content]
</div>
<div id='bottomline' style='background-image:url("bottomline.png"); background-repeat:no-repeat; height:10px'></div>

это прекрасно работает с контентом, но, как только контента нет, верхний и нижний делители, конечно, все еще отображаются. Любые идеи о том, как улучшить это так, чтобы весь блок не отображался, если он не содержит контента?

Спасибо

Ответы [ 4 ]

1 голос
/ 17 сентября 2011

Предполагая, что на странице имеется более одного "ящика", вам нужно изменить id s на classes ..., поскольку id s должны быть уникальными для страницы.

Сделав это, вы можете сделать что-то подобное с jQuery

$ ('. Boxcontent: empty'). Hide ();

Пример: http://jsfiddle.net/h5S9B/

Извините, @hofnarwillie.Забыл о сокрытии других частей.Пересмотрено: 

if($('.boxcontent:empty')){
    $('.boxcontent:empty').hide(); 
    $('.boxcontent:empty').prev().hide();
    $('.boxcontent:empty').next().hide();    
}

Пример 2: http://jsfiddle.net/h5S9B/1/

Затем вы можете превратить это в function для повторного использования: 

var e = $('.boxcontent:empty'); 

function hideBoxes(e){
    if(e){
        e.hide();    
        e.prev().hide();
        e.next().hide();    
    }
}

hideBoxes(e);

Пример 3: http://jsfiddle.net/h5S9B/2/

0 голосов
/ 17 сентября 2011

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

0 голосов
/ 17 сентября 2011

Вам просто нужен серверный язык.

В PHP, то есть вы можете попробовать что-то вроде этого: 

<?php 
$some_content = "Your Content";

if (!empty($some_content)): ?>
   <div id='topline'></div>
<?php endif; ?>

<div id='boxcontent'>
  <?php echo $some_content; ?>
</div>

<?php if (!empty($some_content)): ?>
<div id='bottomline'></div>
<?php endif; ?>

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

style.css 

#topline, #bottomline { 
   height:10px; 
   background-repeat:no-repeat 
}
#topline    { background-image:url("topline.png") }
#bottomline { background-image:url("bottomline.png") }

#boxcontent {
   background-image:url("contentline.png");
   background-repeat:repeat-y
}
0 голосов
/ 17 сентября 2011

Проверьте содержимое на стороне сервера с любым языком на стороне сервера, который вы используете, и, если нет содержимого, примените класс к div, который будет его скрывать. Например, вы можете назначить класс «скрыть», а затем определить «скрыть» в вашем CSS как: 

.hide { display:none }
...