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

Discussion in 'Web Design and Development' started by tobefirst, Apr 18, 2008.

  1. tobefirst macrumors 68040

    tobefirst

    Joined:
    Jan 24, 2005
    Location:
    St. Louis, MO
    #1
    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;}
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. tobefirst thread starter macrumors 68040

    tobefirst

    Joined:
    Jan 24, 2005
    Location:
    St. Louis, MO
    #3
    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?
     

    Attached Files:

  4. jSunbeam macrumors regular

    Joined:
    Nov 9, 2007
    #4
    I see what you mean now. I will have a look at the code and get back to you.
     
  5. tobefirst thread starter macrumors 68040

    tobefirst

    Joined:
    Jan 24, 2005
    Location:
    St. Louis, MO
    #5
    Much appreciated.
     
  6. kgarner macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #6
    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>
     
  7. jSunbeam macrumors regular

    Joined:
    Nov 9, 2007
    #7
    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!
     
  8. tobefirst thread starter macrumors 68040

    tobefirst

    Joined:
    Jan 24, 2005
    Location:
    St. Louis, MO
    #8
    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.
     
  9. tobefirst thread starter macrumors 68040

    tobefirst

    Joined:
    Jan 24, 2005
    Location:
    St. Louis, MO
    #9
    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.
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    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.
     

Share This Page