khmedia Posted June 22, 2012 Share Posted June 22, 2012 Hello there, I have developed this piece of php/html code, for my custom Wordpress theme. <?php get_header(); ?><div class="layout clearfix"> <div id="content"> <?php if (have_posts()) : ?> <div id="loops-wrapper" class="left"> <?php while (have_posts()) : the_post(); ?> <div id="article-<?php the_id(); ?>" class="article clearfix"> <div class="post-others-wrap"> <p class="categories"><?php the_category('<br />'); ?></p> <div class="khmedia-social"> <p class='st_facebook_vcount' displayText='Facebook'></p> <p class='st_twitter_vcount' displayText='Tweet'></p> <p class='st_email_vcount' displayText='Email'></p> </div> </div> <div class="post-date-wrap"> <p class="post-date"> <span class="day"><?php the_time('d'); ?></span> <span class="month"><?php the_time('M'); ?></span> <span class="year"><?php the_time('Y'); ?></span> </p> </div> <div id="article-title-<?php the_id(); ?>" class="post-title"> <h1> <?php echo the_title(); ?> </h1> <div id="article-excerpt-<?php the_id(); ?>" class="post-content"> <?php wp_link_pages( array( 'before' => '<div class="pages">'.'पृष्ठ:', 'after' => '</div>' ) ); ?> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="pages">'.'पृष्ठ:', 'after' => '</div>' ) ); ?> </div> </div> </div> <?php endwhile; ?> <div id="pagelinks" class="clearfix"> <?php previous_post_link('<div class="prevlink">%link</div>'); ?> <?php next_post_link('<div class="nextlink">%link</div>'); ?> </div> </div> <?php endif; ?> </div> <div class="sidebar"> <?php if ( is_active_sidebar( 'primary' ) ) : dynamic_sidebar( 'primary' ); endif; ?> </div></div><?php get_footer(); ?> And now here is the CSS for it: .layout { display: block; margin-top: 3em; width: 100%;} #content { line-height: 1.5em; width: 697px; float: left; padding-right: 30px; position: relative; min-height: 300px;} .clearfix { clear: both; content: " "; display: block; line-height: 0; visibility: inherit;} #loops-wrapper { display: block;} #loops-wrapper .article { padding-left: 122px; width: 600px; margin-bottom: 50px; min-height: 150px; display: block; position: relative;} #loops-wrapper .article .post-others-wrap { left: 0; display: block; position: absolute; width: 100px; margin: 55px 0 0; text-align: right; line-height: 1.5em;} #loops-wrapper .article .post-others-wrap .khmedia-social { display: block; border-top: 2px solid #8AE234; border-bottom: 2px solid #8ae234; padding: 0 0 5px; margin-top: 20px;} #loops-wrapper .article .post-others-wrap .categories { color: black; position: relative;} Actually, the main content area is expanding with large data. But, when I insert a simple post with only the title. The div is overlapping with the footer.Here is my site link: http://www.khmedia.in Please help guys... Link to comment Share on other sites More sharing options...
Ingolme Posted June 22, 2012 Share Posted June 22, 2012 The "position: absolute" property completely messes up layouts and causes overlapping, you probably need to rethink your code. Link to comment Share on other sites More sharing options...
khmedia Posted June 22, 2012 Author Share Posted June 22, 2012 The "position: absolute" property completely messes up layouts and causes overlapping, you probably need to rethink your code. Thanks for your reply foxy. Please help me, I am really not good in CSS, just started to program and I know that there's a clear issue and with the positions. But, I really don't know where to start. Please help me. Link to comment Share on other sites More sharing options...
Ingolme Posted June 22, 2012 Share Posted June 22, 2012 This is a good tutorial on how to make a proper layout, I'm not sure if it's a bit outdated since I haven't read through the whole thing in a while:http://www.subcide.com/articles/creating-a-css-layout-from-scratch/ You must read through and understand every page if you want to make your layout properly because there are a lot of important details to have in mind. Link to comment Share on other sites More sharing options...
khmedia Posted June 22, 2012 Author Share Posted June 22, 2012 Thanks foxy, I will first read the link. Link to comment Share on other sites More sharing options...
khmedia Posted June 23, 2012 Author Share Posted June 23, 2012 Thanks Ingolme, Your link helped me a lot and I got my problem resolved. Thanks a lot. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.