Css & Putting Logos At The Bottom

xboxrulz

Mar 12 2009, 05:18 AM

Hey guys,

I'm trying to have a logo at the very bottom of the screen, but I don't know how to do this in CSS. It's part of my project and it's just ridiculous to constantly inserting <br/>'s.

Is there a way to always have it at the bottom no matter of screen resolution?

Thanks,
xboxrulz

Comment/Reply (w/o sign-up)

mastercomputers

Mar 12 2009, 06:18 AM

Can you show your page code, would make it easier to understand where you want your logo to be positioned and yes I do believe it to be ridiculous to use <br /> in your code, in fact, I have not found a use for using <br /> for anything I've designed.

If your design is suppose to be fluid, it may also require some javascript. Otherwise if it just needs to come after your content or a fixed height/width, we could position it where you want it.

Cheers,

MC

Comment/Reply (w/o sign-up)

xboxrulz

Mar 13 2009, 12:31 AM

It's on a password protected server so I can only give you the code:

CODE

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title/>
    <style type = "text/css">
        body{font-family:"Calibri", "Bitstream Vera Sans", "Arial"; color: #FFFFFF; background-color:#2B3856}
        a:link{color:#ffffff}
        a:visited{color:#ffffff}
    </style>
</head>
<body>
    <h2><em><strong><u>Assignment 2</u></strong></em></h2>
    <h3><strong><u>Contents</u></strong></h3>
    <ul>
        <li><a href="index2.html" target="cframe">Index</a></li>
        <li><a href="medianet.html" target="cframe">MediaNet</a></li>
        <li><a href="pjharvey.html" target="cframe">P.J. Harvey</a></li>
        <li><a href="../" target = "_vblank">Home</a></li>
    </ul>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <p>
            <a href="http://validator.w3.org/check?uri=referer" target = "_vblank"><img
            src="http://www.w3.org/Icons/valid-xhtml10"
            alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
      </p>
</body>
</html>

Thanks,
xboxrulz

Comment/Reply (w/o sign-up)

mastercomputers

Mar 13 2009, 09:37 AM

OK, well I didn't want to spend too much time on this but there are plenty of alternatives.

Only tested on Firefox, so not sure if my IE6 hack even works, or if it even works on IE7 or any other browser.

I use XHTML 1.1 which only comes in strict, so you may need to revert back to XHTML 1.0 Transitional, I've also styled it differently to match what you were showing with your markup. I hope it matches it closely, visually.

Just play around with it.

CODE

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
        <title>Logo at bottom</title>
        <style type="text/css">
            html, body {
                height: 100%;
            }
            body {
                font-family: "Calibri", "Bitstream Vera Sans", Arial, sans-serif;
                color: white;
                background-color: #2B3856;
            }
            h1 {
                font-size: 1.5em;
                text-decoration: underline;
                font-style: italic;
            }
            #nav p {
                font-size: 1.2em;
                font-weight: bold;
                text-decoration: underline;
            }
            a, a:link, a:visited, a:hover, a:active, a:focus {
                color: white;
                background-color: inherit;
            }
            a img {
                border: none;
            }
            div#wrapper {
                min-height: 100%;
                height: auto !important;
                height: 100%;
                margin: 0 auto -31px auto;
            }
            div#footer {
                height: 31px;
                clear: both;
                position: relative;
            }
            .clear {
                height: 31px;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <h1>Assignment 2</h1>
            </div>
            <div id="nav">
                <p>Content</p>
                <ul>
                    <li><a href="index2.html">Index</a></li>
                    <li><a href="medianet.html">MediaNet</a></li>
                    <li><a href="pjharvey.html">P.J. Harvey</a></li>
                    <li><a href="../">Home</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
        <div id="footer">
            <p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88" /></a></p>
        </div>
    </body>
</html>

Cheers,

MC

P.S. position:fixed has it's problems in IE6

Comment/Reply (w/o sign-up)

xboxrulz

Mar 14 2009, 06:50 AM

Thanks,

I did find an alternative.

CODE

p.footer{position:fixed; bottom:1px;}

That forces it to the bottom.

xboxrulz

Comment/Reply (w/o sign-up)