Google type footer

  • virg

    (@virg)


    16 years, 4 months ago

    I’m trying to create a footer that’s similar to the Google border on top with the “Web Images Videos Maps News Shopping,etc more ▼” liquid links floating left and right. What I came up with is: 

    #footer {
border-top:1px solid #DDDDDD;
padding:10px;
position:absolute;

    that moves the footer all the way to the left of the page like I want it but the border doesn’t repeat x.

    and for the links inside the footer I’m using a div class “float:left” for the part in the left and “text-align:right” or “float:right” for the links that should float right. Porblem here is, the links in the right don’t squeeze in when I make the window smaller, instead the scroll bar appears.

    Any suggestions please?

Viewing 15 replies - 1 through 15 (of 16 total)
1 2
  • xdesi

    (@xdesi)

    16 years, 4 months ago

    Do you have a link so we can get a clearer assessment of the problem and what you are trying to achieve?

    As a stab in the dark how about if you add width:100%; to the footer?

    Thread Starter virg

    (@virg)

    16 years, 4 months ago

    sorry here is the test page

    http://www.graphictask.com/

    I tried 100% width but that makes the vertical scrollbar appear and if I put right:0 it fixes that but the text in the footer no longer floats to the margin of the page.

    xdesi

    (@xdesi)

    16 years, 4 months ago

    Yeah it’s because you have applied 10px padding to the footer so the width was becoming 100% + 20px, hence the vertical scrollbar.

    Just get rid of the padding on the footer, set the footer to 100% width, and add any padding to the inside elements if you need to create a gap.

    Thread Starter virg

    (@virg)

    16 years, 4 months ago

    Thanks! that explains the scroll bar! I still couldn’t figure out how to float the links all the way to the left and right. They seemed confined in a container then I added 100% width for the “.inside” and they work! (haven’t published yet, just tested it with firebug) I’m finally doing stuff on my own! 🙂

    …but with .inside set at 100% width, when I shrink the browser window vertically, the scrollbar reappears once the right side of the window hits the footer. Then I can scroll to the right to find that the border ends.. Can’t I just make the footer border liquid?

    xdesi

    (@xdesi)

    16 years, 4 months ago

    Hey this is what I would personally do:

    HTML

    <div id="footer">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <script type="text/javascript"> Cufon.refresh(); </script>
</div>

    CSS:

    #footer {
    border-top: 1px solid #dddddd;
    clear:both;

}
#footer .right{float:right;}
#footer .left{float:left;}

    There’s no need to add position:absolsute to the footer.

    Let me know if you need clarification or a scrollbar seems to be appearing.

    Thread Starter virg

    (@virg)

    16 years, 4 months ago

    Thanks! I put that in but nothing new seems to happen. The border got thicker.

    xdesi

    (@xdesi)

    16 years, 4 months ago

    Yep but it’s because you’ve messed up the HTML a bit :), you have:

    <!-- begin #footer -->
<div id="footer">
	<div class="inside">
		<div id="footer">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <script type="text/javascript"> Cufon.refresh(); </script>

</div>
	<script type="text/javascript"> Cufon.refresh(); </script>
    </div>
</div>
<!-- end #footer -->

    It should be:

    <div id="footer">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <script type="text/javascript"> Cufon.refresh(); </script>
</div>
    xdesi

    (@xdesi)

    16 years, 4 months ago

    Thread Starter virg

    (@virg)

    16 years, 4 months ago

    Oooh! I was putting the HTML in my theme’s option. I have an option to add HTML in footer but I don’t know how it picks up the .inside class and all. Did you mean I should put the HTML code in the footer.php?

    Sorry for asking so much, I’m just happy to learn new things.

    My theme isn’t flexible..:(

    Thread Starter virg

    (@virg)

    16 years, 4 months ago

    Ok! I put it in footer.php and it works! Guess to make the top border repeat x I’ll just use a background image 🙂

    Thanks so much xdesi!

    xdesi

    (@xdesi)

    16 years, 4 months ago

    Yep just open footer.php and replace the section with what i’ve given

    Thread Starter virg

    (@virg)

    16 years, 4 months ago

    yup did it! and thanks for sharing

    #footer {
    border-top: 1px solid #dddddd;
    clear:both;

}
#footer .right{float:right;}
#footer .left{float:left;}

    I didn’t know I can put a class div within a class div!

    xdesi

    (@xdesi)

    16 years, 4 months ago

    No problems and for sure you can!

    Thread Starter virg

    (@virg)

    16 years, 4 months ago

    so sorry but I forgot to ask why you added the <script type=”text/javascript”> Cufon.refresh(); </script>

    xdesi

    (@xdesi)

    16 years, 4 months ago

    It was already in your footer, so I assumed it was a JavaScript you had in there for a purpose, so thought i’d better leave it in!

    A quick look and it seems it’s been generated by a cufon plugin to do with flash text replacement or something.

    You’ve actually made me remember something here, replace that line with:

    <?php wp_footer(); ?>

    Because sometimes plugins like to place things at the bottom of a page, like this plugin was doing, and this is the hook it uses to do it!

Viewing 15 replies - 1 through 15 (of 16 total)
1 2

The topic ‘Google type footer’ is closed to new replies.