Wsparcie » Motywy » Stylizacja wyglądu i położenia wpisu

  • Rozwiązany kucharooos

    (@kucharooos)


    Witam serdecznie

    Jestem nowym użytkownikiem WordPressa, poznałem podstawy html+css i postanowiłem spróbować swoich sił z wordpress.

    Zakodowałem prosty layout, składający się z :
    -header
    -content
    –>(tutaj chce wyświetlać nowe wpisy)
    -footer

    Div content chciałem,aby zawierał trzy kolejne div-y z wpisami.
    Tak jak widać na tym obrazie :
    <img src=”http://s5.ifotos.pl/img/problem1p_whawnns.png”&gt;

    Kiedy jest jeden wpis to wszystko jest ok, problem pojawia się kiedy dodaje kolejne wpisy. Wszystko się rozjeżdza 🙁

    Dodam, że content ma wymiary ustalone np. 900px na 260px i każdy z trzech div w content ma wymiary np. 300px na 260px, tak, żeby idealnie pasowały. Oczywiście dodałem float.

    Tak wygląda kod :

    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
        <head>
            <meta charset="<?php bloginfo( 'charset' ); ?>" />
            <title><?php wp_title(); ?></title>
            <link rel="profile" href="http://gmpg.org/xfn/11" />
            <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
            <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
            <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
            <?php wp_head(); ?>
        </head>
    <body>
    
    	<div id="wrapper">
    
    	<div id="header">
    		To jest nagłówek strony
    	</div>
    
    	<div id="content">
    
    			<div id="tekst">
    			<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    			<?php the_title(); ?>
    			<?php the_content('Czytaj dalej →'); ?>
    		</div>
    
    			<?php endwhile; else: ?>
    			<p><?php _e('Nie znaleziono postów spełniających podane kryteria.'); ?></p>
    			<?php endif; ?>
    	</div>
    
    		<div id="footer">
    			To jest stopka strony
    		</div>
    
    	</div>
    		<?php wp_footer(); ?>
    </body>
    <html>

    oraz css

    /*
    Theme Name: Testowy
    Description: To jest theme testowy
    Version: 0.1
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: test, theme
    Text Domain: Motyw testowy
    */
    
    /* =WordPress Core
    -------------------------------------------------------------- */
    .alignnone {
        margin: 5px 20px 20px 0;
    }
    
    .aligncenter,
    div.aligncenter {
        display: block;
        margin: 5px auto 5px auto;
    }
    
    .alignright {
        float:right;
        margin: 5px 0 20px 20px;
    }
    
    .alignleft {
        float: left;
        margin: 5px 20px 20px 0;
    }
    
    .aligncenter {
        display: block;
        margin: 5px auto 5px auto;
    }
    
    a img.alignright {
        float: right;
        margin: 5px 0 20px 20px;
    }
    a img.alignnone {
        margin: 5px 20px 20px 0;
    }
    
    a img.alignleft {
        float: left;
        margin: 5px 20px 20px 0;
    }
    
    a img.aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto
    }
    
    .wp-caption {
        background: #fff;
        border: 1px solid #f0f0f0;
        max-width: 96%; /* Image does not overflow the content area */
        padding: 5px 3px 10px;
        text-align: center;
    }
    
    .wp-caption.alignnone {
        margin: 5px 20px 20px 0;
    }
    
    .wp-caption.alignleft {
        margin: 5px 20px 20px 0;
    }
    
    .wp-caption.alignright {
        margin: 5px 0 20px 20px;
    }
    
    .wp-caption img {
        border: 0 none;
        height: auto;
        margin: 0;
        max-width: 98.5%;
        padding: 0;
        width: auto;
    }
    
    .wp-caption p.wp-caption-text {
        font-size: 11px;
        line-height: 17px;
        margin: 0;
        padding: 0 4px 5px;
    }
    
    body {
    background-color:white;
    padding:0;
    color:white;
    background-color:blue;
    font-size:16px;
    }
    
    h1 {
    font-size:16px;
    color:white;
    }
    
    #wrapper {
    width:900px;
    margin:0 auto;
    }
    
    #header {
    width:900px;
    height:200px;
    background-color:red;
    text-align:center;
    }
    
    #content {
    width:900px;
    height:260px;
    float:left;
    }
    
    #tekst{
    width:300px;
    height:260px;
    background-color:silver;
    float:left;
    }
    
    #footer {
    width:900px;
    height:150px;
    background-color:green;
    text-align:center;
    clear:both;
    }

    Proszę o pomoc, chcę ustawić wpisy w div content obok siebie.

    Dziękuje bardzo

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Stylizacja wyglądu i położenia wpisu’ is closed to new replies.