Jump to content

Display Inline problem

BluRay

By BluRay
in CSS Help

 Share

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
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>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.