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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 29

Thread: CSS Question

  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    49
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question CSS Question

    Hi

    I have almost completed a blog but have one small problem, on the footerbar you can see that the wording Hello world is too far over to the left, I have tried altering the margins but it also moves all the other text (My name is ... and Misc).

    Please can anyone advise.

    Thanks

    Dee

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Can you show your code?

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Dee2012 View Post
    Hi

    I have almost completed a blog but have one small problem, on the footerbar you can see that the wording Hello world is too far over to the left, I have tried altering the margins but it also moves all the other text (My name is ... and Misc).

    Please can anyone advise.

    Thanks

    Dee
    Check if you set any padding? Try giving padding:0px;

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    49
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry my fault, I mean't to post a link. It's a WP site , I did ask on the WP forum but was told to post on a css forum. I have done everything else but this has me stumped.

    www.lm-lakeland-design.co.uk/lisa

    The wording Misc is fine, it's the Hello world.

    Thanks

    Dee

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The items in your Recent Entries list are not wrapped in li tags - which they should be. It's the styling applied to those that is missing and causing your list to be misaligned. Magnificent of the WP forum to tell you it was a css issue.

    Are these widgets in your footer? If so have a look at the settings on each of the widgets to see if there's a missing setting on the Recent Posts widget.

    EDIT:Actually, I suspect it isn't a widget. Looking at the original theme files there is an li in that piece of code (I think).
    Can you post the content of your footerbar.php?
    Last edited by SB65; 03-02-2012 at 06:23 PM.

  • #6
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    <!-- <span class="alignleft">(1)</span> --><a href="http://lm-lakeland-design.co.uk/lisa/2011/11/16/hello-world/">Hello World!</a></li>

    Adding a <li> tag to the begining of this aligns it.

  • #7
    New Coder
    Join Date
    Mar 2012
    Posts
    49
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks guys. here is the code for the footer:

    /* Footer Bar */

    #footerbar
    {
    clear:both;
    width:990px;
    background:#3B1C91;
    border-top:#00005B 2px solid;
    padding:5px;
    overflow:hidden;
    margin:0 auto;
    color:#FFFFFF;
    }
    #footerbar a
    {
    color: #ffffff;
    text-decoration:none;
    }
    #footerbar a:hover
    {
    text-decoration:underline;
    }
    #footerbar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #footerbar li {
    margin: 0 20px 0 0;
    padding:0 15px 0 0;
    width:290px;
    float:left;
    }

    #footerbar li ul,
    #footerbar div,
    #footerbar .textwidget
    {
    padding:0 15px;
    }

    #footerbar li li {
    margin:5px 77px;

    float:none;
    width:100%;
    }
    #footerbar h2,
    #footerbar h3
    {
    margin-bottom: 10px;
    padding:0 0 0 90px;
    color: #fff;
    font-size:1.1em;
    font-variant:small-caps;

    }

    /* Footer */

    #footer
    {
    width:960px;
    padding: 20px;
    background:#813EDB;
    border-top:#00005B 2px solid;
    margin:0 auto;
    color: #FFFFFF;
    }
    #footer .wrap
    {
    margin:0 auto;
    width:960px;
    }
    #footer strong
    {
    color:#fff;
    }
    #footer a
    {
    color: #FFFFFF;
    border:0;
    text-decoration:none;
    }
    #footer a:hover { color:#fff;}
    #credits { font-size:0.8em;margin:0;padding:0;}
    /* Misc */
    #header, #content, #sidebar, #footerbar, #footer, .widget
    {
    Last edited by Dee2012; 03-02-2012 at 07:15 PM.

  • #8
    New Coder
    Join Date
    Mar 2012
    Posts
    49
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Double posted.
    Last edited by Dee2012; 03-02-2012 at 07:16 PM.

  • #9
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    It isn't a CSS issue. The issue is a missing <li> tag.
    I've copied this from the page source, and adding the tag before <!-- <span class="alignleft">(1)</span> --> fixes the problem.

    Code:
    <li>
          <h3>Categories</h3>
          <ul>
            	<li class="cat-item cat-item-1"><a href="http://lm-lakeland-design.co.uk/lisa/category/misc/" title="View all posts filed under Misc">Misc</a>
    </li>
          </ul>
    
      </li>
      <li>
        <h3>Recent Entries</h3>
        <ul>
            <!-- <span class="alignleft">(1)</span> --><a href="http://lm-lakeland-design.co.uk/lisa/2011/11/16/hello-world/">Hello World!</a></li>
            </ul>
    </li>  
    
        </ul>
    Last edited by dan-dan; 03-02-2012 at 07:36 PM. Reason: To add [code][/code]

  • #10
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    This is dynamically created HTML, so you need to find the PHP file producing the above code. Someone else mentioned footerbar.php.

  • #11
    New Coder
    Join Date
    Mar 2012
    Posts
    49
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi

    What I initially wanted to do was move the (1) next to the Recent Posts over but it got messed up.

    This is the code for the footer.php

    <div id="footerbar">
    <ul>
    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Footerbar') ) : else : ?>
    <li>
    <h3>About</h3>
    <div>
    <p class="about_author">
    <strong><?php bloginfo( 'name' ); ?></strong>
    <br/>
    <?php echo get_avatar( get_the_author_email(), '72' ); ?>
    <?php the_author_meta( 'description' ); ?>
    <br class="clear" />
    </p>
    </div>
    </li>
    <li>
    <h3>Categories</h3>
    <ul>
    <?php wp_list_categories('orderby=name&show_count=1&hierarchical=1&title_li='); ?>
    </ul>
    </li>
    <li>
    <h3>Recent Entries</h3>
    <ul>
    <?php
    $myposts = get_posts('numberposts=6&offset=0&category=0');
    foreach($myposts as $post) :
    setup_postdata($post);
    ?>
    <li><span class="alignright"><?php comments_number('(0)','(1)','(%)'); ?></span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <?php endforeach; ?>
    </ul>
    </li>

    <?php endif; ?>
    </ul>
    </div>


    Thanks

    Dee

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Ah right, you must have reinstated that code correctly, because "Hello World" is now lined up.

    So are you trying to move the (1) so it says:

    Hello World (1)?

    In which case change this:

    Code:
    <li><span class="alignright"><?php comments_number('(0)','(1)','(%)'); ?></span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    to this:

    Code:
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?> <span><?php comments_number('(0)','(1)','(%)'); ?></span></a></li>
    (the span isn't really necessary now but we'll leave it in in case you might want to style it differently at some future date).
    Last edited by SB65; 03-03-2012 at 11:25 AM.

  • Users who have thanked SB65 for this post:

    Dee2012 (03-04-2012)

  • #13
    New Coder
    Join Date
    Mar 2012
    Posts
    49
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ye I reverted to a fresh install, when I posted on the WP forum (before they so rudely told me to post on a css forum) they said to change a certain part and that sent the Recent Entries off to the left, so I put it back to how it was.

    Thanks loads for the new code, that did the trick

    Much appreciated

    Dee

  • #14
    New Coder
    Join Date
    Mar 2012
    Posts
    49
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I have one more quick question

    I plan to increase the width of the header, can you advise me how to move the header image over to the left, the client doesn't want any of the orb "background" showing either side.

    Thanks in advance

    Dee

  • #15
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    In the CSS sheet look for:

    Code:
    #splash
    {
        background:url(images/header.jpg) no-repeat center;
        float:left;
        width:970px;
        height:200px;
    }
    Changing the width to 100% should do the trick.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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