Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy CSS - divs won't sit side by side :(

    I'm currently modifying a Wordpress theme that I want to use on my blog, and after 2 days of trying to figure this out, I've finally got everything sitting where I want it to...EXCEPT for this



    In the index.php file I have:

    Code:
    <div class="post_date">
    <div class="date_post"><?php the_time('j') ?>&nbsp;<?php the_time('M') ?></div>
    <div class="year_post"><?php the_time(' Y') ?></div>
    </div>	
    
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>	
    
    <div class="top"><a href="http://del.icio.us/post?url=<?php echo get_permalink() ?>"><img src="<?php bloginfo('template_directory'); ?>/images/delicious.gif" title="del.icio.us this!" alt="del.icio.us" /></a>&nbsp;
    
    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/trackback.gif" title="Trackback" alt="TRACK" /></a>&nbsp;
    
    <a href="#top"><img src="<?php bloginfo('template_directory'); ?>/images/top.gif" border="0" alt="TOP" title="To the top" /></a></div>
    
    <small>By <?php the_author() ?>.  Filed in <?php the_category(', ') ?>.<br /> <?php comments_popup_link('No comments yet. Be the first to comment!', '1 comment filed', '% comments filed'); ?> <?php edit_post_link('Edit.', '', ''); ?></small>
    And in style.css:
    Code:
    .post_date {
      	background: url('images/datebg.jpg');
    	background-repeat: no-repeat;
    	clear:left;
    	float:left;
    	margin-right:5px;
    	position:relative;
    	width:42px;
    	height:40px;
    }
    
    html>body .post_date {
            width: auto;
    	width: 42px;
    	height: auto;
    	height: 40px;
    }
    
    .date_post {
    	border-bottom:1px dotted;
    	clear:left;
    	color:#2C4353;
    	float:left;
    	font-size:12px;
    	font-weight:400;
    	padding-top:2px;
    	text-align:center;
    	width:42px;
    }
    .year_post {
    	float: left;
    	clear: left;
    	width: 42px;
    	font-size: 14px;
    	color: #2C4353;
    	text-align: center;
    	padding-bottom:2px;
    }
    
    .top {
    float: right;
    padding-left: 10px;
    }
    Whilst I'm fairly chuffed that I've managed to get this far by myself (the extent of my mark-up code knowledge comes from a 6-week course on 'introduction to the web' and toying with my blog), I'm losing my mind because of that silly calendar won't align in IE

    You can see how its working so far here - www.insanitytheory.net/test

    Any and all help would make me indebted to you for life!

    (Oh, and I know that all the images don't work on the test site, but I wanted to get the code right before toying with the aesthetics!)
    Attached Files Attached Files
    Last edited by kitchenwench; 10-21-2007 at 11:49 AM. Reason: Attaching css and index.php files

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Code:
    <div class="post_date" style="float:left;">
    <div class="date_post"><?php the_time('j') ?>&nbsp;<?php the_time('M') ?></div>
    <div class="year_post"><?php the_time(' Y') ?></div>
    </div>	
    
    <div class="posthead" style="float:left;">
    <h2 style="margin-top:0;"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>	
    
    <div class="top"><a href="http://del.icio.us/post?url=<?php echo get_permalink() ?>"><img src="<?php bloginfo('template_directory'); ?>/images/delicious.gif" title="del.icio.us this!" alt="del.icio.us" /></a>&nbsp;
    
    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/trackback.gif" title="Trackback" alt="TRACK" /></a>&nbsp;
    
    <a href="#top"><img src="<?php bloginfo('template_directory'); ?>/images/top.gif" border="0" alt="TOP" title="To the top" /></a></div>
    
    <small>By <?php the_author() ?>.  Filed in <?php the_category(', ') ?>.<br /> <?php comments_popup_link('No comments yet. Be the first to comment!', '1 comment filed', '% comments filed'); ?> <?php edit_post_link('Edit.', '', ''); ?></small></div>

  • Users who have thanked Fang for this post:

    kitchenwench (10-21-2007)

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I'm so sorry - I tried it out and it made the site go berkers - but that's absolutely no fault of yours! Being the idiot that I am, I posted some code that I was trying when I wrote the post, instead of the code that works (>_<) Thanks for the quick reply, though

    I know this stuff takes time, but I've attached the css and php (zipped) files in case anyone is feeling particularly generous with their time and advice

  • #4
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Remove the class="posthead" which was on your live site.

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts


    Alas, still no joy...

  • #6
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Looks like you got this one solved?

  • #7
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy I wish I could quit...

    Alas, not yet after spending the better part of a weekend on this ******* date issue, I gave up and tried to resort to using a table to force them to sit in place...

    except even the table is giving me grief! They sit side by side, but the date is sitting quite a fair bit up from the post header:



    I never thought I'd hate a website so much (>_<) *sobs*

  • #8
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    You can use a relative positioning to place the date a bit more to the bottom:
    PHP Code:
    #date_id
    {
    position:relative;
    top:5px/*Will place it 5 pixels below the starting position.*/


  • Users who have thanked BarrMan for this post:

    dcostalis (10-21-2007)

  • #9
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Code:
    <div class="post_date"><p>
    <span class="daymonth">16&nbsp;Oct</span>
    <span class="year"> 2007</span>
    </p></div>		
    
    <h2><a href="http://www.insanitytheory.net/test/?p=92" rel="bookmark" title="Permanent Link to An open letter from my mind to my body">An open letter from my mind to my body</a></h2>
    	
    <div class="top"><a href="http://del.icio.us/post?url=http://www.insanitytheory.net/test/?p=92"><img src="http://www.insanitytheory.net/test/wp-content/themes/techozoic-edit/images/delicious.gif" title="del.icio.us this!" alt="del.icio.us"></a>&nbsp;
    
    <a href="http://www.insanitytheory.net/test/?p=92" rel="bookmark" title="Permanent Link to An open letter from my mind to my body"><img src="http://www.insanitytheory.net/test/wp-content/themes/techozoic-edit/images/trackback.gif" title="Trackback" alt="TRACK"></a>&nbsp;
    
    <a href="#top"><img src="http://www.insanitytheory.net/test/wp-content/themes/techozoic-edit/images/top.gif" alt="TOP" title="To the top" border="0"></a></div>
    I wonder if having an encapsulating div would help you out here. I notice you go from <div> to <h2> to some more divs. it might be a total rewrite of the seciton, but if you make those items a <ul><li> thing sized with ems, and have the encapsulating div a fixed height, you might have better results.

  • Users who have thanked dcostalis for this post:

    kitchenwench (10-21-2007)

  • #10
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by kitchenwench View Post
    Alas, not yet after spending the better part of a weekend on this ******* date issue, I gave up and tried to resort to using a table to force them to sit in place...

    except even the table is giving me grief! They sit side by side, but the date is sitting quite a fair bit up from the post header:



    I never thought I'd hate a website so much (>_<) *sobs*
    It looks much better on my screen than your screenshots:


  • #11
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Heh, I think that's because you caught me in the middle of some experimenting...

    Having spent almost the entire weekend on just the code (when I wanted to have the entire theme up and running by now), I really didn't want to consider a complete rewrite, mostly because since I only know the bare basics of HTML and CSS, it'll take me forever - BUT, I had a thought awhile ago...that maybe the theme was flawed to begin with, and the floating date div in IE wasn't actually my fault?

    Turns out that I was right...

    Since I always use Firefox, I'd ONLY viewed the original theme site on FF, and it looks fine there...but when its viewed in IE, it displays the same problem that I've been trying to solve over the past 2 days!

    http://clarktech.no-ip.com/blog/



    I can't even BEGIN to tell you how stupid I felt, or how much I wanted to kick myself in the head!

    So, I'm stuck :/ I've already invested so much time in this theme that I am veeeery reluctanct to start a new one...but at the same time, I wonder if I really have the energy/sanity left to try and rewrite it...

    (Hint as to why - I only found out that 'em' existed this weekend, and I'm still not sure how pt/px/%/em all work, except to make my life miserable!)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •