Jump to content

using css to make blog posts display like a gallery..


altar
 Share

Recommended Posts

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.floatHowever, 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 isHere's my theme's 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:

<?phpget_header();?><div id="content2"; class="float">  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>  <div class="entry <?php if(is_home() && $post==$posts[0] && !is_paged()) echo ' firstpost';?>">	<h3 class="entrytitle" id="post-<?php the_ID(); ?>"> <a href="<?php the_permalink() ?>" rel="bookmark">	  <?php the_title(); ?>	  </a> </h3>	  <div class="entrymeta">			<?php the_time('F dS'); 			echo " |";the_category(',');?>		</div>	<div class="entrybody">	  <?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(__('<strong>Edit</strong>'));?>	  	</div>	<!--	<?php trackback_rdf(); ?>	-->  </div>  <?php comments_template(); // Get wp-comments.php template ?>  <?php endwhile; else: ?>  <p>	<?php _e('Sorry, no posts matched your criteria.'); ?>  </p>  <?php endif; ?>  <p>	<?php posts_nav_link(' — ', __('« Previous Page'), __('Next Page »')); ?>  </p></div><?php get_sidebar(); ?><!-- The main column ends  --><?php get_footer(); ?>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...