Stylizacja wyglądu i położenia wpisu

  • Rozwiązano kucharooos

    (@kucharooos)


    9 years, 11 months temu

    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)
  • Temat ‘Stylizacja wyglądu i położenia wpisu’ jest zamknięty na nowe odpowiedzi.