ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

A little CSS help required in aligning channel entries/Attn: firebug users

April 26, 2011 10:37am

Subscribe [3]
  • #1 / Apr 26, 2011 10:37am

    notebook

    31 posts

    Hi

    I bought EE a week ago and i am working day and night to learn it and to convert some wordpress themes for EE2.
    In such one theme i get this alignment issue , my second article on home page broke my alignment and moved my sidebars in the bottom of page. Can anyone please check it in firebug or similar tool to get me going. I really want to get my site online asap.

    Here is my site development page link

    http://cantt.ehclients.com/blog/

  • #2 / Apr 26, 2011 11:43am

    Mark Bowen

    12637 posts

    This isn’t really a tech support issue as such but I’d check your code very carefully. I’m guessing that you should have a <div class=“entry”> around each of the entries which you don’t have at the moment, they all seem to be surrounded by one div which could well be why this isn’t working.

    You may also need to share the original template code and your template code in order to get this sorted.

    Best wishes,

    Mark

  • #3 / Apr 26, 2011 11:59am

    notebook

    31 posts

    Hi Mark

    Here’s my EE template code for this page

    <!-- ################ Entry Start ####################### -->
                <!-- one entry: -->
    
    {exp:channel:entries channel="blog" limit="2"}
    
                <div class="entry">
                    <div class="entry-previewimage rounded preloading_background">
                        <a href="http://single.html">{post_image}</a>
                    </div>
                    
                    <div class="entry-content">
                        <h1 class="entry-heading"><a href="http://single.html">{title}</a></h1>
                        <div class="entry-head">
                            <span class="date ie6fix">{entry_date format="%M %d, %Y"}</span>
                            <span class="comments ie6fix"><a href="http://single.html">{comment_total} Comments</a></span>
                            <span class="author ie6fix"><a href="http://single.html">by {author}</a></span>
                        </div><!--entry-head-->
                        
                        <div class="entry-text">
                            {post_body}
                        </div><!--entry-text-->
                        
                        <div class="entry-bottom">
                            <span class="categories"><a href="#">{channel}</a>, <a href="#">{channel}</a></span>
                            <a href="http://{comment_url_title_auto_path}" class="more-link">Read more</a>
                        </div><!--entry-bottom-->
    {/exp:channel:entries}
                    </div><!--end entry_content-->
                </div><!--end entry -->
        
    
    <!-- ################ Entry End ####################### -->

    And here is my original template code

    <!-- one entry: -->
                
                <div class="entry">
                    <div class="entry-previewimage rounded preloading_background">
                        <a href="http://single.html">files/medium_pic1.jpg</a>
                    </div>
                    
                    <div class="entry-content">
                        <h1 class="entry-heading"><a href="http://single.html">Vienna at Night is beautiful</a></h1>
                        <div class="entry-head">
                            <span class="date ie6fix">Dec 04 2009</span>
                            <span class="comments ie6fix"><a href="http://single.html">3 Comments</a></span>
                            <span class="author ie6fix"><a href="http://single.html">by Kriesi</a></span>
                        </div>
                        
                        <div class="entry-text">
                            
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                            
                        </div>
                        
                        <div class="entry-bottom">
                            <span class="categories"><a href="#">News</a>, <a href="#">Startup</a></span>
                            <a href="http://page.html" class="more-link">Read more</a>
                        </div>
                    </div><!--end entry_content-->
                </div><!--end entry -->

    i will much appreciate if you guys help me , once i become successful in converting one theme from other CMS to EE i’ll give EE community some really good themes converted by myself.

  • #4 / Apr 26, 2011 12:06pm

    Mark Bowen

    12637 posts

    If you notice in your code you have your closing {/exp:channel:entries} tag before the code has finished. Try changing your code to this instead :

    <!-- ################ Entry Start ####################### -->
                <!-- one entry: -->
    
    {exp:channel:entries channel="blog" limit="2"}
    
                <div class="entry">
                    <div class="entry-previewimage rounded preloading_background">
                        <a href="http://single.html">{post_image}</a>
                    </div>
                    
                    <div class="entry-content">
                        <h1 class="entry-heading"><a href="http://single.html">{title}</a></h1>
                        <div class="entry-head">
                            <span class="date ie6fix">{entry_date format="%M %d, %Y"}</span>
                            <span class="comments ie6fix"><a href="http://single.html">{comment_total} Comments</a></span>
                            <span class="author ie6fix"><a href="http://single.html">by {author}</a></span>
                        </div><!--entry-head-->
                        
                        <div class="entry-text">
                            {post_body}
                        </div><!--entry-text-->
                        
                        <div class="entry-bottom">
                            <span class="categories"><a href="#">{channel}</a>, <a href="#">{channel}</a></span>
                            <a href="http://{comment_url_title_auto_path}" class="more-link">Read more</a>
                        </div><!--entry-bottom-->
                    </div><!--end entry_content-->
                </div><!--end entry -->
    {/exp:channel:entries}
    
    <!-- ################ Entry End ####################### -->

    This should then ensure that each channel entry has the correct amount of opening and closing div tags.

    Hope that helps a bit.

    Best wishes,

    Mark

  • #5 / Apr 26, 2011 12:21pm

    notebook

    31 posts

    Great tip ! you know i spent my whole day in finding out mistake in my CSS. EE templating system will finish Wordpress market soon !It’s so easy ! Thanks a lot Mark

  • #6 / Apr 26, 2011 12:36pm

    Mark Bowen

    12637 posts

    Great tip ! you know i spent my whole day in finding out mistake in my CSS. EE templating system will finish Wordpress market soon !It’s so easy ! Thanks a lot Mark

    No problem at all. Glad that got it working for you.

    Looking forward to what you will create now 😉

    Best wishes,

    Mark

  • #7 / Apr 26, 2011 7:18pm

    Sue Crocker

    26054 posts

    Thanks for the assist, Mark.

    notebook - Feel free to start a new thread if you have any more questions.

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases