[Помогите] Обтекание изображений текстом

Тема в разделе "Wordpress", создана пользователем Urch, 1 мар 2009.

Статус темы:
Закрыта.
Модераторы: DzSoft, Sorcus
  1. Urch

    Urch Вебмастер

    Регистр.:
    3 янв 2008
    Сообщения:
    263
    Симпатии:
    73
    В некоторых шаблонах WP текст не обтекает картинку решается эта проблема довольно просто

    в файл стиля нужно добавить

    Код:
     img.centered {
        display: block;
        margin-left: auto;
        margin-right: auto;
        }
     
        img.alignright {
        padding: 4px;
        margin: 0 0 2px 7px;
        display: inline;
        }
     
        img.alignleft {
        padding: 4px;
        margin: 0 7px 2px 0;
        display: inline;
        }
     
        .alignright {
        float: right;
        }
     
        .alignleft {
        float: left;
        }
     
  2. Mitchellzzz

    Mitchellzzz Создатель

    Регистр.:
    7 янв 2009
    Сообщения:
    47
    Симпатии:
    1
    Опа, отличная темка, отсель вытекает один вопросик, а как у галер делать отступ ? Что бы не было вот такой фигни [​IMG]
     
  3. Xonres

    Xonres

    Регистр.:
    13 ноя 2006
    Сообщения:
    204
    Симпатии:
    12
    Поработать с .gallery, к примеру .gallery{margin: 10px} :)
     
  4. Mitchellzzz

    Mitchellzzz Создатель

    Регистр.:
    7 янв 2009
    Сообщения:
    47
    Симпатии:
    1
    тож в css проживает ?
     
  5. Xonres

    Xonres

    Регистр.:
    13 ноя 2006
    Сообщения:
    204
    Симпатии:
    12
    По ходу да, просмотрел код страницы с галереей и в середине кода увидел в нем следущее:
    Код:
    		<style type='text/css'>
    			.gallery {
    				margin: auto;
    			}
    			.gallery-item {
    				float: left;
    				margin-top: 10px;
    				text-align: center;
    				width: 50%;			}
    			.gallery img {
    				border: 2px solid #cfcfcf;
    			}
    			.gallery-caption {
    				margin-left: 0;
    			}
    		</style>
    		<!-- see gallery_shortcode() in wp-includes/media.php -->
     
  6. Mitchellzzz

    Mitchellzzz Создатель

    Регистр.:
    7 янв 2009
    Сообщения:
    47
    Симпатии:
    1
    image_galary.php вот такая тема
    Код:
    <?php
    /*
    Template Name: Image Gallery
    */
    ?>
    
    <?php get_header(); ?>
    <div id="breadcrumbs"></div>
    
    <div class="clearfloat stripes">
    <?php get_sidebar(); ?>
    	
    		<div id="content">
    
    		<h2>Галерея</h2>
    		<br />
    
    <?php
    //Gets the last 16 images and paginates them
    $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
    query_posts("showposts=12&paged=$page");
    ?>
    
    <?php
    //Wraps all the floats in a clearfloat
    $posts = get_posts('');
    foreach($posts as $post) :
        if(get_post_meta($post->ID, 'Image', TRUE)) {
    ?>
    
    
    <div class="clearfloat">       
    <?php
            $ifpics = TRUE;
            break;
        }
    endforeach;
    ?> 
    
    
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    			<?php 
    			//This grabs the custom_field image if there is one
    			$values = get_post_custom_values("Image");
    	if (isset($values[0])) {						
    	?>
    	
    	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img class="gallery" src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
    			$values = get_post_custom_values("Image"); echo $values[0]; ?>&amp;w=70&amp;h=70&amp;zc=1" alt="<?php the_title(); ?>" /></a>
    <?php } ?>
    
    		<?php endwhile; ?>
    		
    		<?php if($ifpics == TRUE) : ?></div><?php endif; ?> 
    
    		<div class="clearfloat pagination">
    			<div class="left"><?php next_posts_link('&laquo; Предыдущие записи') ?></div>
    			<div class="right"><?php previous_posts_link('Новые записи &raquo;') ?></div>
    		</div>
    
    		<?php else : endif; ?>
    	
    		</div>
    
    		
    </div>
    	
    
    <?php get_footer(); ?>
    Добавлено через 2 минуты
    А в css у меня только вот что связаное с gallery :nezn:

    Код:
    .cat-excerpt img, .gallery {
    	float:left;
    	margin:1px 12px 7px 0;
    	border:1px solid #516f80;
    	padding:1px;
    	}	
    
    .gallery {
    	margin:0 18px 16px 18px;
    	}
     
  7. Xonres

    Xonres

    Регистр.:
    13 ноя 2006
    Сообщения:
    204
    Симпатии:
    12
    Попробуйте заменить на... :)
    Код:
    .cat-excerpt img {
    	float:left;
    	margin:1px 12px 7px 0;
    	border:1px solid #516f80;
    	padding:1px;
    	}	
    .gallery {
    	float:left;
    	margin:100px;
    	border:1px solid #ff0000;
    	padding:1px;
    	}	
    
    Должны быть большие отступы с 4-х сторон и обводка красной линией.
     
  8. Mitchellzzz

    Mitchellzzz Создатель

    Регистр.:
    7 янв 2009
    Сообщения:
    47
    Симпатии:
    1
    Я вот так попроавил =)
    Код:
    .gallery {
    	float:left;
    	margin:100px;
            margin-left:7px
            margin-right:7px
    	border:1px solid #ff0000;
    	padding:1px;
    	}
     
  9. Xonres

    Xonres

    Регистр.:
    13 ноя 2006
    Сообщения:
    204
    Симпатии:
    12

    Код:
    .gallery {
    	float:left;
    	margin:0 7px 0 7px;
    	border:1px solid #ff0000;
    	padding:1px;
    	}
    Так лучше будет. Забыли поставить точку с запятой. И по мелочи :) Код работает? Дизайн меняется?
     
  10. Mitchellzzz

    Mitchellzzz Создатель

    Регистр.:
    7 янв 2009
    Сообщения:
    47
    Симпатии:
    1
    Немного фиктивно, чтоли выходит, посмотрите [​IMG] интерсно, что картинки в самой галере пляшут =) отступ получился фиктивным я border 0 поставил )))
     
Статус темы:
Закрыта.