Помогите, почему в одном случае встает текст справа от картинки, а в другом нет. Не могу осилить свойство
display:inline-block; и display:block;
оба свойства у меня заданы классом clearfloat,
Текст встает красиво – справа от картинки. http://www.dietplan.ru
текст упорно переходит на следующую строчку
http://www.dietplan.ru/pitanie/
Вот код номер 1
<div id="rightcol">
<?php
// this is where you enter the IDs of which categories you want to display
$display_categories = array(1,5,20,26);
foreach ($display_categories as $category) { ?>
<div class="clearfloat">
<?php query_posts("showposts=1&cat=$category");
$wp_query->is_category = false;
$wp_query->is_archive = false;
$wp_query->is_home = true;
?>
<table width="100%"><tr><td><img src="http://www.dietplan.ru/images/art_title_mark.gif" alt="" width="15" height="15" border="0"></td>
<td nowrap class="art-title" valign="bottom"><a href="<?php echo get_category_link($category);?>"><?php
// this is where the name of each category gets printed
single_cat_title(); ?></a></td><td width="100%" class="art-title-line"><img src="http://www.dietplan.ru/images/spacer.gif" width="1" height="1" border="0"></td>
</tr>
</table>
<div style="padding-top:10px;padding-left:10px;">
<?php while (have_posts()) : the_post(); ?>
<?php
// this grabs the image filename
$values = get_post_custom_values("Image");
// this checks to see if an image file exists
if (isset($values[0])) {
?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" /></a>
<?php } ?>
<h5><a href="<?php the_permalink() ?>" rel="bookmark"><?php
// this is where title of the article gets printed
the_title(); ?> »</a></h5> <?php the_excerpt(); ?>
<?php endwhile; ?> </div>
</div>
<?php } ?>
</div><!--END RIGHTCOL-->
Вот код номер два, практически тоже самое
<?php while (have_posts()) : the_post(); ?>
<div class="clearfloat">
<table width="100%"><tr><td><img src="http://www.dietplan.ru/images/art_title_mark.gif" alt="" width="15" height="15" border="0"></td>
<td nowrap class="art-title" valign="bottom"><a href="<?php echo get_category_link($category);?>"><?php
// this is where the name of each category gets printed
single_cat_title(); ?></a></td><td width="100%" class="art-title-line"><img src="http://www.dietplan.ru/images/spacer.gif" width="1" height="1" border="0"></td>
</tr>
</table>
<div style="padding-top:10px;padding-left:10px;">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" /></a> <h5><a href="<?php the_permalink() ?>" rel="bookmark"><?php
// this is where title of the article gets printed
the_title(); ?> »</a></h5> <?php the_excerpt() ?>
</div> </div>
Почему?
Хм… судя по представленному коду, первый из них относится к каким-то виджетам, поэтому судить о нем сложно. Однако суть не в этом. Если сохранить обе полученный по вашим ссылкам страницы, то в коде первой блок с классом clearfloat входит в блок с id="rightcol", для которого в листе стилей CSS предопределено правило для тэгов IMG, которое делает их "плавающими" слева.
В коде же ко второй странице блок с классом clearfloat находится внутри блока с id="content", для которого "плавание" картинок не задано.
В данных случаях свойство display не играет никакой роли. И, кстати, в листе стилей CSS заданы подряд два одинаковых правила для класса "clearfloat", но с разными значениями:
.clearfloat {
display:inline-block
}
.clearfloat {
display:block
}
Когда правила равновесны, то выполняется последнее из них. При этом свойство dispay не может быть одновременно и block, и inline. Запись display:inline-block – ошибочна. Это все равно, что задать цвет фона одновременно и белым, и черным 🙂
Настя, спасибо вам большое за подсказку!
Да не за что! 🙂 Обращайтесь, в случае чего. Чем смогу помогу
Все встало красиво, большое спасибо. Прошу не судить дизайн строго. У меня сейчас легкая паранойя – не могу определиться со шрифтом. )
Шрифт лучше сделать идентичный адсенсовому блоку. 😉
Мне не нравится Arial, если честно.
Не нравится Arial, используйте Verdana. 🙂