Jump to content

Display Inline problem

BluRay

By BluRay
in CSS Help

Recommended Posts

BluRay Newbie

BluRay

Posted
Posted

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:

eq3yj4.jpg

 

Outcome I wish to see:

x3ac15.jpg

 

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

Link to comment
https://forums.phpfreaks.com/topic/208244-display-inline-problem/
Share on other sites
BluRay Newbie

BluRay

Posted
  • Author
Posted

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>

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.