Display Inline problem

BluRay · July 20, 2010

I'm currently working on creating a wordpress template for myself but I'm stuck at one problem that I can't seem to solve myself.

index.php

<?php get_header(); ?>

<?php get_sidebar(); ?>
<div id="main-block">
    <div id="content">
      <?php if (have_posts()) : ?>
            <ul>
              <?php while (have_posts()) : the_post(); ?>

                  <li class="post" id="post-<?php the_ID(); ?>">
                        <div class="title">
                          <h4><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h4>
                        </div>

                    <div class="entry">
                        <?php the_content('Continue reading »'); ?>
                    </div>
                    <?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>
                  </li>
              <?php endwhile; ?>
             </ul>

          <p><?php next_posts_link('« Previous Entries') ?>   <?php previous_posts_link('Next Entries »') ?></p>

          <?php else : ?>

          <h3 class="t-center">Not Found</h2>

          <p class="t-center">Sorry, but you are looking for something that isn't here.</p>

      <?php endif; ?>
    </div>

    <?php get_footer(); ?>

single.php

<?php get_header(); ?>
<?php get_sidebar(); ?>
    <div id="main-block">
        <div class="left-line">
            <div id="content">
              <?php if (have_posts()) : ?>
                    <ul>
                      <?php while (have_posts()) : the_post(); ?>

                          <li class="post" id="post-<?php the_ID(); ?>">
                                <div class="title">
                                  <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                                </div>
                                <div class="postdata">
                                    <span class="category"><?php the_category(', ') ?></span>
                                </div>
                            <div class="entry">
                                <?php the_content('Continue reading »'); ?>
                            </div>
                            <p>Posted by <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit')); ?></p>
                            <?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>
                          </li>
                      <?php endwhile; ?>
                     </ul>
                    <?php comments_template(); ?>
                <?php else : ?>
                  <h3 class="t-center">Not Found</h2>
                  <p class="t-center">Sorry, but you are looking for something that isn't here.</p>
              <?php endif; ?>
            </div><!--#content-->
        </div><!--.left-line-->
<?php get_footer(); ?>

and here's the style.css

/* Reset styles
*******************************/
html, body, div, span,iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
del, dfn, em, font, ins,strong,ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}

/* Main styles
*******************************/
html {
  height: 100%;
  margin-bottom: 1px;/* force vertical scrollbars */
}

body {
  background-color: #ffffff;
  color: #646464;
  font-size: 75%;
  text-align: left;
}

/* Default fonts
*******************************/
body,
input,
select    { font-family: Tahoma, Arial, Helvetica, sans-serif; }
textarea,
pre,
code       { font-family:"Courier New", Courier, monospace; }

/* Header elements
*******************************/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight:normal;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
}

h1 {
    font-size: 2.5em;
    color:#fff;
    line-height:1;
}
h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.5em;
    padding-bottom:1em;
    color:#518cb1;
}
h4 {
    font-size: 1.0em;
    font-weight: bold;
    padding: 3px;
    border: 1px solid #FFFFFF;
    background:url(img/title.png) 0 0 repeat-x;

}

h5 { font-size: 1.2em; }
h6 { font-size: 1.1em; }

/* Text elements
*******************************/
p        { margin: 0 0 1em 0; text-align: left; line-height:1.2; }
p.last       { margin-bottom:0; }
p.first      { margin-top:1em; }
p.img      { float: left; margin:0 1em 1em 0; padding:0; }

blockquote    {
    margin:0 0 1em 1em;
    padding-left:1em;
    border-left:2px solid #B8E0FA;
}
strong        { font-weight: bold; }
em            { font-style: italic; }
pre           { border: 1px solid #ddd; margin-bottom: 1.2em; padding:1.2em; }
ins           { text-decoration:none; } /*remove underline from text*/
del           { text-decoration:line-through; }

dl {
    line-height:1.2;
    margin-bottom:1.2em;
}

hr {
    color: #fff;
    background:transparent;
    margin: 0 0 0.5em 0;
    padding: 0 0 0.5em 0;
    border:0;
    border-bottom: 1px #000 dotted;
}

/*links*/
a:link,
a:visited,
a:focus,
a:hover,
a:active  { color: #518cb1; text-decoration: underline; cursor:pointer; }

a:hover    {}
a:visited  {}

a:active,
a:focus     { outline: 0; } /*remove border in ff*/


/* decorate lists in posts */
#content .post ul,
#content .post ol {
    margin: 0 0 1em 2em;
}

#content .post ul {
    list-style-type:disc;
}

#content .post ol {
    list-style-type:decimal;
}

#content .post ul li,
#content .post ol li {
    line-height:2;
}

#content .product img {
    margin: 10px;
    border: 1px solid #bfbfbf;
    width: 169px;
    height: 145px;
}


/* Images
*******************************/
img     { outline:0;border:0; }

/* Form styles
*******************************/
input,
select,
textarea {
  font-size:1.0em;/*by default font-size is bigger*/
  vertical-align:baseline;
}

input.text,
input.file { cursor:text; }

input.button {
    cursor:pointer;
    color:#fefefe;
    border:0;
    background:url(img/header-search-button.gif) 0 0 repeat-x;
    font-weight:bold;
    padding:1px 12px;
    text-align:center;
    height:19px;
}

input.radio,
input.checkbox { border: 0;padding: 0; }

/* Wordpress aligning
*******************************/
.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
    float:left;
    margin: 0 1em 1em 0;
}

.alignright {
   float: right;
   margin: 0 0 1em 1em;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption {
    border:1px solid #eee;
    text-align:center;
    padding-top:4px;
}
.wp-caption p.wp-caption-text {
    font-size:.92em;
    text-align:center;
}


/* Text align
*******************************/
.t-right   { text-align: right; }
.t-left   { text-align: left; }
.t-center   { text-align: center; }
.t-justify   { text-align: justify; }

/* Other
*******************************/
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.zoom {
    overflow:hidden;
}

/* Main styles
*******************************/
#root {
    width: 980px;
    margin: 24px auto 0 auto;
    padding-bottom: 24px;
}

/* Header
*******************************/
#header {
    overflow: hidden;
}

#header .menu,
#header .search {
    background:url(img/menu.png) 0 0 repeat-x;
}

#header .menu {
    float:left;
    width:667px;
    height:28px;
    padding:8px 20px;
}

#header .menu li {
    float:left;
}

#header .menu li.last {
    background:none;
}

#header .menu a {
    color:#fefefe;
    font-weight:bold;
    padding:0 14px;
    display:block;
    line-height:2.2;
}

#header .menu a:hover {
    text-decoration:none;
}

#header .search {
    width:236px;
    height:20px;
    float:right;
    padding:14px 16px;
    font-size:0.92em;
}

#header .search label {
    color:#fff;
    padding-right:8px;
}

#header .search input.text {
    width:122px;
    border:1px solid #5286ab;
    border-right:0;
    border-bottom:0;
    background:#ecf0f2;
    padding:2px;
    color:#34668a;
    margin-right:8px;
}

#header .search input.button {
    color:#fefefe;
    border:0;
    background:url(img/header-search-button.gif) 0 0 repeat-x;
    font-weight:bold;
    width:51px;
    padding:1px 0;
    text-align:center;
    height:19px;
}

#heading {
    margin-top:2px;
    width:999px;
    float:left;
    clear:both;
    height:242px;
    background:url(img/header.png) 0 0 no-repeat;
    padding: 2px 0 0 156px;
    text-indent: -9999px;
}

#heading a {
    color:#fff;
    text-decoration:none;
}

#heading .description {
    color:#fff;
    text-indent: -9999px;
}

#about {
    margin-top:4px;
    width:232px;
    height:164px;
    overflow:hidden;
    float:right;
    background:url(img/header-about-back.gif) 0 0 repeat-y #f9fdff;
    padding:18px;
}

#about .signature {
    text-align:right;
    margin:0;
}

#main {
    margin-top:4px;
    clear:both;
    overflow:hidden;
}

#left-block {
    width:180px;
    float:left;
}

#left-block .box {
    background:#ffffff;
    padding:18px;
    margin-bottom:4px;
    border:1px solid #bfbfbf;
}

#left-block .box h2 {
    padding-bottom:16px;
}

#left-block .box ul {
    font-size:1.17em;
}

#left-block .box ul.children {
    padding-top:8px;
    font-size:1em;
}

#left-block .box li {
    padding:4px 0;
    padding-left:20px;
    background-repeat:no-repeat;
    background-position:0 6px;
    background-image:url(img/cat.gif);
}

#left-block .box li.current-cat {
    font-weight:bold;
}

#left-block .categories li {

}

#left-block .archive li {
    background-image:url(img/cal.gif);
}

#left-block .blogroll li,
#left-block .meta li {
    background-image:url(img/arrow.gif);
}

.box input.text {
    border:1px solid #5286ab;
    border-right:0;
    border-bottom:0;
    background:#ecf0f2;
    padding:2px;
    color:#34668a;
    width:110px;
    font-size:.92em;
}

.box input.button {
    font-size:.92em;
    width:48px;
}

.box .tags {
    line-height:1.4;
}

.box .textwidget {
    font-size:.92em;
    line-height:1.4;
}

#left-block #recentcomments {
    font-size:.92em;
}

#left-block #recentcomments li {
    background:none;
    padding-left:0;
}


#wp-calendar {
    width:180px;
    font-size:.92em;
}

#wp-calendar caption {
    padding:0 0 4px 0;
    font-weight:bold;
}

#wp-calendar th,
#wp-calendar td {
    padding:2px;
    text-align:center;
}

#wp-calendar thead th {
    background:#eee;
}

#wp-calendar #prev {
    text-align:left;
    padding-top:4px;
}

#wp-calendar #next {
    text-align:right;
    padding-top:4px;
}

/* Content
*******************************/
#main-block {
    width:205px;
    float:left;
}

#content {
    padding-left:10px;
    background:#ffffff;
    min-height:400px;
    height:auto!important;
    height:400px;
}

#content .post {
    border: 1px solid #c7c7c7;
    overflow:hidden;
    margin-bottom:18px;
    clear:both;
}

#content .entry a {
    color:#e08105;
}

#content .date {
    float:left;
    width:54px;
    height:43px;
    padding-top:11px;
    background:url(img/post-date.gif) 0 0 no-repeat;
    color:#669abb;
    font-size:1.67em;
    text-align:center;
    margin: 0 0 20px 0;
    text-transform:uppercase;
}

#content .date span {
    font-size:0.65em;
    display:block;
}

#content .title,
#content .postdata {
    margin:0px;
}

#content .page .title {
    margin-left:0;
}

#content .title h4 {
    text-transform: uppercase;
    padding-bottom:8px;
    margin-bottom:8px;
}

#content .title a {
    text-decoration:none;
    color:#ffffff;
}

#content .title a:hover {
    color:#e7e7e7;
}

#content .postdata {
    font-size:0.92em;
}

#content .category {
    background:url(img/cat.gif) 0 1px no-repeat;
    padding-bottom:1px;
    padding-left:20px;
    float: left;
}

#content .comments {
    background:url(img/comment.gif) 0 1px no-repeat;
    padding-bottom:1px;
    padding-left:20px;
    float: right;
}

#content .category,
#content .category a {
    color:#91adc1;
}

#content .entry {
    clear:both;
}

#content .entry .more-link {
    font-weight:bold;
    color:#000000;
}

#recent {
    margin-top:4px;
    background:#e7f5fe;
    overflow:hidden;
}

#recent .posts,
#recent .comments {
    width:312px;
    padding:24px 32px;
}

#recent .posts {
    float:left;
}

#recent .comments {
    float:right;
}

#recent .posts ul,
#recent .comments ul {
    font-size:.92em;
    line-height:1.2;
}

#recent .posts li,
#recent .comments li {
    margin-bottom:1.1em;
}

#recent .posts li a {
    font-weight:bold;
}

#recent .comments li .author {
    font-size:0.91em;
    line-height:1.4;
}

#recent .comments li a {
    text-decoration:none;
}

#leavecomment {
    padding-top:1em;
}

.comments-list .avatar {
    margin-bottom:4px;
}

.comments-list li {
    padding:18px;
    line-height:1.2;
}

.comments-list li.graybox {
    background:#f5f5f5;
}

.comments-list cite {
    font-weight:bold;
    font-style:normal;
}

.comments-list small {
    font-size:.83em;
}

.comments-list .comment {
    margin-top:8px;
}

#commentform input.text,
#commentform textarea {
    border:1px solid #5286ab;
    border-right:0;
    border-bottom:0;
    background:#ecf0f2;
    padding:2px;
    color:#34668a;
}

#commentform input.text {
    width:200px;
}

#commentform textarea {
    width:600px;
}

/* Footer
*******************************/
#footer {
    margin-top:4px;
    padding:4px 32px;
    font-size:.92em;
    overflow:auto;
    line-height:1.2;
    background:url(img/cubes.gif) 705px 4px no-repeat;
}

#footer img {
  vertical-align:middle;
}

#footer .copyright {
    float:left;
}

#footer .links {
    float:right;
}

#footer .links a {
    padding-left:16px;
    margin-left:16px;
    background-repeat:no-repeat;
    background-position:0 1px;
}

#footer .rss {
    background-image:url(img/rss.gif);
}

#footer .login {
    background-image:url(img/login.gif);
}

#footer a.powered {
    padding:0;
}

Outcome:

Outcome I wish to see:

Took me 3 hours to attempt to fix it, but without results...hopefully anyone can help me.

haku · July 20, 2010

1) You never told us what the problem is.

2) Please don't post PHP in the CSS section. PHP is irrelevant to CSS, only the HTML output is relevant. Please post the HTML output of your PHP script.

BluRay · July 20, 2010

Sorry about that. Basically, I want to make my wordpress articles appear in line (you can see the difference when you look at the pictures I posted above)

I've tried adding display: inline; to my CSS #content but nothing has worked so far. So the question would be, how to make my articles appear in 1 line like on this picture: http://i29.tinypic.com/x3ac15.jpg

Here's the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Localhost</title>
<meta name="generator" content="WordPress 3.0" /> <!-- leave this for stats -->
<link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/template/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/template/print.css" type="text/css" media="print" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://localhost/wordpress/?feed=rss2" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://localhost/wordpress/?feed=rss" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://localhost/wordpress/?feed=atom" />
<link rel="pingback" href="http://localhost/wordpress/xmlrpc.php" />
<link rel='archives' title='July 2010' href='http://localhost/wordpress/?m=201007' />
<link rel='archives' title='June 2010' href='http://localhost/wordpress/?m=201006' />

<meta name='robots' content='noindex,nofollow' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" /> 
<link rel='index' title='Leet Shop' href='http://localhost/wordpress' />
<meta name="generator" content="WordPress 3.0" />
<!--[if IE ]>
<link type="text/css" rel="stylesheet" media="screen" href="http://localhost/wordpress/wp-content/themes/template/ie.css" />
<![endif]-->
</head>
<body>
    <div id="root">
      <div id="header">
      <div id="heading">
                <h1><a href="http://localhost/wordpress">Localhost</a></h1>

                <div class="description">Some description about the website.</div>
            </div>
            <ul class="menu">
                <li><a href="#">Button</a></li>
                <li><a href="#">Button</a></li>
                <li><a href="#">Button</a></li>
                <li><a href="#">Button</a></li>
                <li><a href="#">Button</a></li>
            </ul>
            <form action="http://localhost/wordpress/" id="searchform"><div class="search"><label for="s">Search:</label><input type="text" class="text" value="" name="s" id="s" /><input class="button" type="submit" value="Go!" /></div></form>

      </div><!--#header-->
        <div id="main">
<div id="left-block">
            <div class="box">
          <ul class="categories">

              	<li class="cat-item cat-item-1"><a href="http://localhost/wordpress/?cat=1" title="View all posts filed under Category01">Category01</a>
</li>
<li class="cat-item cat-item-3"><a href="http://localhost/wordpress/?cat=3" title="View all posts filed under Category02">Category02</a>
</li>
<li class="cat-item cat-item-4"><a href="http://localhost/wordpress/?cat=4" title="View all posts filed under Category03">Category03</a>
</li>
<li class="cat-item cat-item-5"><a href="http://localhost/wordpress/?cat=5" title="View all posts filed under Category04">Category04</a>
</li>
<li class="cat-item cat-item-6"><a href="http://localhost/wordpress/?cat=6" title="View all posts filed under Category05">Category05</a>

</li>
<li class="cat-item cat-item-7"><a href="http://localhost/wordpress/?cat=7" title="View all posts filed under Category06">Category06</a>
</li>
<li class="cat-item cat-item-8"><a href="http://localhost/wordpress/?cat=8" title="View all posts filed under Category07">Category07</a>
</li>
<li class="cat-item cat-item-9"><a href="http://localhost/wordpress/?cat=9" title="View all posts filed under Category08">Category08</a>
</li>
          </ul>
        </div>

        <div class="box">
          <h3>Archives:</h3>
          <ul class="archive">
              	<li><a href='http://localhost/wordpress/?m=201007' title='July 2010'>July 2010</a></li>
<li><a href='http://localhost/wordpress/?m=201006' title='June 2010'>June 2010</a></li>
          </ul>
        </div>

        <div class="box">
        </div>

  </div><!--#left-block--><div id="main-block">
    <div id="content">
                  <ul>
              
                  <li class="post" id="post-13">
                        <div class="title">

                          <h4><a href="http://localhost/wordpress/?p=13" rel="bookmark" title="Permanent Link to IPOD NANO 99GB">IPOD NANO 99GB</a></h4>
                        </div>

                    <div class="entry">
                        <div class="product" style="text-align: center;"><img class="center" src="http://i25.tinypic.com/2w4enuf.jpg" alt="" width="169" height="145" /></div>
                    </div>
                                      </li>
              
                  <li class="post" id="post-1">

                        <div class="title">
                          <h4><a href="http://localhost/wordpress/?p=1" rel="bookmark" title="Permanent Link to APPLE IPHONE 3G 8GB">APPLE IPHONE 3G 8GB</a></h4>
                        </div>

                    <div class="entry">
                        <div class="product" style="text-align: center;"><img class="center" src="http://i25.tinypic.com/2w4enuf.jpg" alt="" width="169" height="145" /></div>
                    </div>
                                      </li>

                           </ul>

          <p>   </p>

              </div>

                        <div id="footer">
                        <span class="copyright"><p>Localhost is proudly powered by WordPress and <a title="Free Usenext" href="http://www.freeusenext.com">FreeUsenext</a></p></span>
                        <span class="links">

                            <a href="http://localhost/wordpress/?feed=rss2" title="Syndicate this site using RSS" class="rss">Entries <abbr title="Really Simple Syndication">RSS</abbr></a>
                            <a href="http://localhost/wordpress/?feed=comments-rss2" title="The latest comments to all posts in RSS" class="rss">Comments <abbr title="Really Simple Syndication">RSS</abbr></a>
                            <a href="http://localhost/wordpress/wp-admin/" class="login" title="Login to post an entry">Login</a>
                            <a href="http://www.aoemedia.de" class="powered"><img src="http://localhost/wordpress/wp-content/themes/template/img/cubes.gif" alt="Open Source CMS" /></a>
                        </span>
                    </div><!--#footer-->

                <!--#do not delete this part#-->
                </div><!--#main-block-->
            </div><!--#main-->
        </div><!--#root-->
    </body>
</html>

haku · July 20, 2010

Try using:

#content li.post
{
  float:left;
}

BluRay · July 20, 2010

Thanks a lot mate. It works!

Sign In

Display Inline problem

Recommended Posts

BluRay

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

BluRay

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

BluRay

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information