Jump to content
xisto Community
Sign in to follow this  
xboxrulz1405241485

Css & Putting Logos At The Bottom

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

It's on a password protected server so I can only give you the 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 xmlns="http://www.w3.org/1999/xhtml/; <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&%2334; alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> </p></body></html>

Thanks, xboxrulz


Share this post


Link to post
Share on other sites

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.

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/; 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://forums.xisto.com/no_longer_exists/; 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

Share this post


Link to post
Share on other sites
Unfortunately, not in Google ChromeCss & Putting Logos At The Bottom

P.Footer{position:fixed; bottom:1px;}While a wonderful solution for Firefox or IE, does not work in Chrome, and I have not been able to figure out why.

-reply by Jim Selleck

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.