7 replies [Last post]
altar
Offline
newbie
Last seen: 13 years 47 weeks ago
Joined: 2006-10-26
Posts: 5
Points: 0

It's a question I already asked on the Wordpress forum and they told me to go ask a css forum (kind of telling me to get lost...) so please don't send me away.
I want to make a certain category on my blog where posts, instead of being one on top of the other, would display in rows of 3, like a gallery. It's to display images, all of the same size, with a rating under them.
I started by making a new template for that category, which instead of calling div id="content" calls another id which I created in the css file and named div id="content2". In the css I made that id 150px wide.
Hoping to make these new div content float inline to the left, I created a new class in the css I named div.float
However, it's a pathetic failure... All I have are my posts one on top of the other just as before, except they're 150px wide.
Does anybody have an idea how I could get these posts to float inline?
Here's the category as it is

Here's my theme css, with the #content2 and div.float I created

/*
Theme CSS
*/
body {
margin: 0px;
padding: 0px;
background: #ececec url(images/bg.png) repeat-y center;
color: #666;
font: 12px/15px Arial, Helvetica, sans-serif;
}
#wrap {
width: 800px;
overflow: hidden;
position:relative;
margin: 0px auto;
}
#content {
width: 532px;
float: left;
display:inline;
text-align: justify;
padding: 10px;
margin: 8px;
}
#content2 {
width: 150px;
float: left;
display: inline;
text-align: justify;
padding: 5px;
margin: 5px;
}
div.float {
float: left;
width: 150px;
padding: 15px;
display: inline;
}

div.float p {
text-align: center;
}
#nav {
height: 49px;
width: 790px;
margin-right: auto;
margin-left: auto;
}

#sidebar {
width: 190px;
float: right;
line-height: 1.5em;
display:inline;
margin: 8px 8px 8px 0px;
padding: 10px;
font-size:10px;
}
#pages h1{
margin:0px;
padding:0px;
}
#pages h1 a{
text-transform:uppercase;
display:none;
text-decoration:none;
color:#999;
font: 18px Arial, Helvetica, sans-serif;
margin:0px;
padding:13px 0px 0px 10px;
letter-spacing: -1px;
float: left;
}
#pages h1 a:hover{
text-decoration:underline;
}

h3, h4 {
padding-top: 5px;
padding-bottom: 15px;
}
#logo {
background: url(images/top.jpg) no-repeat;
height: 170px;
width: 780px;
margin-right: auto;
margin-left: auto;
}
#tagline {
height: 20px;
text-align: right;
margin-top: -30px;
margin-right: 25px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
}
div#pages {
height: 5px;
margin: 0px auto 5px;
width:780px;

}

div#pages ul {
padding: 10px 0px 0px;
white-space: nowrap;
list-style-type: none;
margin: 0px;
}
div#pages ul li {
float:right;
}
#pages ul li a:before{
content:" .: ";
color:#57B124;
}
div#pages ul li.current_page_item a {
text-decoration: underline;
}
div#pages ul li a {
display: none;
text-decoration: none;
margin:1px 0px;
text-align:right;
font-size:10px;
padding:4px;
font-weight: bold;
text-transform: uppercase;
color: #999999;
}
div#pages ul li a:hover {
color: #57B124;
}

#footer {
clear: both;
text-align: center;
height: 40px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
width: 774px;
padding: 0px;
margin-right: auto;
margin-left: auto;
}
#footer p{
padding:10px;
margin:0px;
}

.entry{
padding-top: 0px;
padding-bottom: 30px;
padding-left: 0px;
/*font-size: 0.80em;*/
line-height: 1.5em;
}
.firstpost {
margin-bottom:15px
}
h3.entrytitle, h3 {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin-top: 0;
margin-right: 0;
margin-bottom: 5px;

}
h3.entrytitle a, h3.entrytitle a:visited, h3 a{
color: #7789C0;
text-decoration:none;
border-style: none;
font-size: 12px;
font-weight: bolder;
text-transform: none;
}
h3.entrytitle a:hover, h3 a:hover{
text-decoration:underline;}
.entrymeta{
height: 16px;
margin-top: 0;
font-size: 10px;
color: #999;
border-top:solid 1px #ccc;
padding-top:4px;
margin-bottom: 8px;
}
.entrymeta a img{
border:none;
}
.entrybody img {
padding: 1px;
border: none;
}
.entrybody ul {
margin-left: 20px;
padding-left:0px;
list-style-type: none;
}
.entrybody ol{
margin-left:20px;
padding-left:0px;
}
.entrybody ul li {
list-style:square;
}
.commentlink img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

h4, h3, h2, #commentblock h2 {
margin: 0;
padding: 0px;
font-size: 11px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color:#999;
}
h2{
margin-bottom: 10px;
font-size: 14px;
}
a, a:visited{
color: #57B124;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
.entrybody p{
margin:8px 0;
padding:0;
}
.entrybody ul {
margin-left: 30px;
padding-left:0px;
list-style-type: none;
}
.entrybody ol{
margin-left:30px;
padding-left:0px;
}
.entrybody ul li {
list-style:square;
}
#sidebar h2 {
color: #999;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 8px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
border-bottom: 1px solid #ccc;
font-size: 10px;
text-transform: uppercase;
}
ul#side{
margin: 0;
padding: 0;
}
ul#side li{
list-style: none;
margin: 0;
padding: 0;
}
ul#side ul{
margin: 0;
padding: 0;

}
ul#side ul li a, ul#side ul#recentcomments li{
border-bottom: 1px solid #ccc;
display: block;
text-decoration: none !important;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 25px;
background-image:;
background-repeat: no-repeat;
background-position: 10px 50%;
margin: 0;
}
ul#side ul li a:hover{
border-bottom-color: #fff;
color: #666 !important;
background-color: #ccc;
}
ul#side ul#recentcomments li a{
background-image:none;
}
/*
#sidebar ul,#sidebar ul ul, #sidebar ul ul ul {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
}

#sidebar ul ul ul li, #sidebar ul ul ul ul li{
list-style: none;
}
#sidebar ul ul li {
border-bottom: 1px solid #ccc;
color: #57B124;
display: block;
text-decoration: none !important;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 25px;
background-image: url(images/navbulle.gif);
background-repeat: no-repeat;
background-position: 10px 50%;
}

#sidebar ul ul li a:hover{
border-bottom-color: #fff;
color: #666 !important;
background-color: #ccc;
}
*/

#searchdiv {
margin-top: 8px;
margin-bottom: 15px;
}
.comments-link {
background-image:url(images/comments.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left:16px;
}
/************************************************
* Comments *
************************************************/
#commentblock h2{
padding:2px;
margin-bottom:10px;
margin-top:30px;
}
#commentblock {
float:left;
padding-top: 0px;
padding-bottom: 20px;

text-align: left; /*font-size: 0.8em;*/
}

ol#commentlist {
margin-top:0px;
padding: 5px;
margin-left: 0px;
list-style-type: none;
}
.commentdate {
font-size:0.8em;
padding-left:5px;
}
#commentlist li p{
margin-bottom: 8px;
line-height: 20px;
padding:0;
}

.commentname {
margin: 0;
padding: 5px;
}

.commentinfo{
clear:both;
}

.commenttext {
clear: both;
margin-top: 0px;
margin-bottom: 10px;
padding: 10px;
width:450px;
background: #ececec url(images/comm.png) no-repeat top;
}

.commenttext-admin {
clear: both;
margin-top: 0px;
margin-bottom: 10px;
padding: 10px;
width:450px;
background: #d7d7d7 url(images/comm-admin.png) no-repeat top;
}

#commentsformheader{
padding-left:0px;
}

#commentsform{
margin-top:0;
text-align:center;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

#commentsform form{
text-align:left;
margin:0px;
}

#commentsform p{
margin:5px;
}

#commentsform form textarea{
width:99%;
}
p.comments_link img{
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
blockquote{
font-style: italic;
color: #999999;
}
.adwrap,
.adwrapwide,
.adwrap-lu,
.adwrapbutton {
margin:0 0 1em;
padding:4px 0;
background:#fff;
border-top-width: 1px;
border-right-width: 0;
border-bottom-width: 1px;
border-left-width: 0;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #d5d7d0;
border-right-color: #d5d7d0;
border-bottom-color: #d5d7d0;
border-left-color: #d5d7d0;
}

.adwrap object {
width:336px;
height:280px;
}

.adwrapwide iframe,
.adwrapwide object {
width:468px;
height:65px;
}

.adwrap-lu {
margin:0 0 1em 1em;
width:180px;
float:right;
}

.adwrap-lu object {
width:180px;
height:90px;
}

.adwrapbutton iframe,
.adwrapbutton object {
width:180px;
height:150px;
}

table{
margin:10px;
}
td, th{
padding:3px;
font-weight:normal;
}

And here's my category php file:

<?php
get_header();
?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
">

"> " rel="bookmark"> <?php the_title(); ?>

<?php the_content(__('Read more'));?> <?php if(function_exists('the_ratings')) { the_ratings(); } ?> <?php comments_popup_link( 'No comments ','1 comment ','% comments ', 'comments-link ','Comments are off for this post '); edit_post_link(__('Edit'));?>
-->
<?php comments_template(); // Get wp-comments.php template ?> <?php endwhile; else: ?>

<?php _e('Sorry, no posts matched your criteria.'); ?>

<?php endif; ?>

<?php posts_nav_link(' — ', __('« Previous Page'), __('Next Page »')); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 4 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

There's no point adding both

There's no point adding both a class and ID to the same element Tongue

.entry is the div that you want to target.

Simply using this:

.entry {
width: 150px;
float: left;
}

seems to achieve what you want.

Verschwindende wrote:
  • CSS doesn't make pies

altar
Offline
newbie
Last seen: 13 years 47 weeks ago
Joined: 2006-10-26
Posts: 5
Points: 0

THANKS A LOT! It works

THANKS A LOT!
It works great. Now all I have to do is find a way to spread the divs a little, maybe just using padding. But already this is so cool, thanks a lot.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 4 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

To space them out, use

To space them out, use margins instead of padding.

Verschwindende wrote:
  • CSS doesn't make pies

altar
Offline
newbie
Last seen: 13 years 47 weeks ago
Joined: 2006-10-26
Posts: 5
Points: 0

ah ha?

ah ha?
Why? It's true I don't even know the difference Laughing out loud
Padding is "inside" the object whereas margin is exterior? Something like that? But what consequence is there in using one instead of the other?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 4 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

altar wrote:Padding is

altar wrote:
Padding is "inside" the object whereas margin is exterior? Something like that?

EXACTLY like that. Laughing out loud If you want to increase the space between elements, use margins. Increasing the padding will increase the gap between the stuff inside the div and the border.

Hope that made sense.

Verschwindende wrote:
  • CSS doesn't make pies

altar
Offline
newbie
Last seen: 13 years 47 weeks ago
Joined: 2006-10-26
Posts: 5
Points: 0

It did. Thanks for all the

It did.
Thanks for all the help, I've learned quite a bit of css in 2 days (for someone who doesn't know html I mean...)

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 25 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

altar wrote:It's a question

altar wrote:
It's a question I already asked on the Wordpress forum and they told me to go ask a css forum (kind of telling me to get lost...)

It's good that someone here could help you on this with so little hoorah. It would be a Good ThingĀ® to add the answer to your thread at Wordpress along with a link to this thread.

BTW, it is good practice to post the server output rather than the raw php script, since it is the html+css that we work with. Errors in the html can mess with the way otherwise good css rules work. At the risk of being pedagogical, the simplest way is to open the page in the browser, view source and select all and copy.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.