Help me with my CSS or PHP...I'm not sure which. (:

tobefirst ⚽️ · Apr 18, 2008

I'm having a little trouble with my blog, and I'm hoping someone can help me figure out what I'm doing wrong. I'm having a problem with the "meta" section, which is where the title, category, and date are.

As you can see here each entry is stepped down (from the previous entry) the same height as the "meta" div. If I eliminate the "meta" div, the problem goes away, and all the entries run straight across the top, like they are supposed to. If I have my meta information underneath the posts, it works fine as well, but I'd really like to have that stuff at the top.

Anyone wanna help out a n00b and let him know what he's doing wrong? Thanks so much!

index.php

Code:

<div id="gallery">
<div id="photos">

	<?php if (have_posts()) : ?>

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


				[B]<div class="meta">
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				posted: <?php the_time('F jS, Y') ?><br>
				filed in:  <?php the_category(', ') ?><br>
				 <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
				</div>[/B]

			<span class="photo">
			<div class="image">
		
					<?php the_content('Read the rest of this entry »'); ?>


				

			</div>
			</span>

		<?php endwhile; ?>

	</div>


		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('Older Photos » ') ?></div>
			<div class="alignright"><?php previous_posts_link('« Newer Photos ') ?></div>
		</div>
		
</div>

CSS

Code:

body {color: #fff; background: #000; font-size: 10px; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; text-align: left;}
a {color: #ebebeb; text-decoration: none;}
a:hover {text-decoration: none; color: #666;}
#header {text-transform: uppercase; letter-spacing: 2px; margin: 50px 0 0 50px;}
#gallery {width: 10000px; margin: 0px 40px 0px 300px}
#single-image {width: 10000px; margin: 40px 40px 0px 50px;}
#photos {padding: 0px 200px 0 0;}
.photo {float: left; display: inline;}
.image {float: left; width: 450px; padding: 0px 200px 0 0;}
[B].meta {margin: 0px 0px 0px 0px; padding: 0 0 0 0px; line-height: 14px;}[/B]
h2 {font-size: 12px;}
.navigation {float: right; padding: 0px 10px 0 0;}
.pagenavigation {clear: both; margin: 40px 10px 0 40px;}

angelwatt · Apr 18, 2008

Don't think I quite understand what the problem is and what you want it to look like. I read "... all the entries run straight across the top, like they are supposed to" as being fixed by removing the br tags that you use. I'm thinking you're after something more than that though. Can you elaborate a little more on the problem.

On an aside, the earthquake was neat, my first experience with one too and it woke me up. Being so groggy though, I just thought my neighbors being noisy and waited for things to stop shaking and went back to sleep.

tobefirst ⚽️ · Apr 18, 2008

Sorry for being less than clear.

If you'll notice each successive entry is "stepped down" about 70ish pixels from the previous entry. I would like all entries to be aligned across the top of the page, in line with the first entry. The amount of the "step" is exactly the size of the "meta" div.

I would like all entries to be top-aligned across the page, instead of this "stepping" that is going on. See the attachment for a visual explanation. If I get rid of (or move to the bottom of the post) the "meta" div, it fixes this issue.

Does that make sense?

jSunbeam · Apr 18, 2008

tobefirst said:
Sorry for being less than clear.

If you'll notice each successive entry is "stepped down" about 70ish pixels from the previous entry. I would like all entries to be aligned across the top of the page, in line with the first entry. The amount of the "step" is exactly the size of the "meta" div.

I would like all entries to be top-aligned across the page, instead of this "stepping" that is going on. See the attachment for a visual explanation. If I get rid of (or move to the bottom of the post) the "meta" div.

Does that make sense?

I see what you mean now. I will have a look at the code and get back to you.

tobefirst ⚽️ · Apr 18, 2008

jSunbeam said:
I see what you mean now. I will have a look at the code and get back to you.

Much appreciated.

kgarner · Apr 18, 2008

wrap the div.meta and the div.photo in a div.post (or whatever you want to call it) and float the div.post. Be sure to set the width of the column on that div as well. Like this:

Code:

<div class="post">
<div class="meta">
stuff
</div>
<div class="photo">
stuff
</div>
</div>

CSS

Code:

div.post {
width: 450px;
float: left;
}

div.meta {
styles here
}

div.photo {
styles here
remove the float style and width style
}

The issue is that the div.meta is at 100% width so each successive post is floated left, but must be below the previous div.meta. wrapping them in a div that is floated should allow them to all start at the same point. You could probably even remove the div.meta and div.photo and just include the content of those div's. Like this:

Code:

<div class="post">
<h2>Title</h2>
<p>other metadata</p>
<img blah blah blah />
<p>other content</p>
</div>

jSunbeam · Apr 18, 2008

I have a fix for you

There's loads of divs and spans in this so would take a short while for me to deconstruct (especially with this hangover), but the quickest solution is to move the meta stuff inside the next <span>

like so:

Code:

<div id="gallery">
<div id="photos">

	<?php if (have_posts()) : ?>

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


				

			<span class="photo">
[B]<div class="meta">
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				posted: <?php the_time('F jS, Y') ?><br>
				filed in:  <?php the_category(', ') ?><br>
				 <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
				</div>[/B]
			<div class="image">
		
					<?php the_content('Read the rest of this entry »'); ?>


				

			</div>
			</span>

		<?php endwhile; ?>

This will work.

There's probably a CSS fix in there somewhere. It's probably something to do with the floats. Will have a look.

EDIT: go with what the guy above said. His approach is similar to mine but done properly!

tobefirst ⚽️ · Apr 18, 2008

Thanks, both of you, for the answers. I'll give them a try and let you know if they work (I don't imagine them not). Thanks.

tobefirst ⚽️ · Apr 18, 2008

Thanks, guys. I got it to work with a little trial and error. I'm a super n00b, so it took me a few minutes, but it looks great now. If you ever need a little aid with some print work (or applications there of), I'd be happy to help.

angelwatt · Apr 18, 2008

tobefirst said:
Does that make sense?

It was partially my fault it seems. I didn't realize the page went horizontally. I thought that second post was just some ad on the right side (as most pages do) so never really looked at it. That's part of the danger with using horizontally laid out pages, people aren't expecting them so they won't be looking for them.

But glad you got the problem resolved.

And for anyone wondering why I earlier made comment on an earthquake, the linked page had a mention of the one this morning on the left side.

Search

Search

Help me with my CSS or PHP...I'm not sure which. (:

tobefirst ⚽️

macrumors 601

angelwatt

Moderator emeritus

tobefirst ⚽️

macrumors 601

Attachments

jSunbeam

macrumors regular

tobefirst ⚽️

macrumors 601

kgarner

macrumors 68000

jSunbeam

macrumors regular

tobefirst ⚽️

macrumors 601

tobefirst ⚽️

macrumors 601

angelwatt

Moderator emeritus

Our Staff