SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Resistance is Futile webgodjj's Avatar
    Join Date
    Nov 2002
    Location
    Madison, WI USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    left and right align in a footer

    I am trying to make a footer. On the left side I want three small icons lined up. On the left site (inline with the icons) I want two lines of copyright text.

    So far I have tried making a footer div and in it, I put a icons div
    <div id="footer"><div id="icons>icons</div>copy<BR>right</div>

    This displays right on the mac in Firefox and Safari, however, in IE both get pushed over to the right with the icons above the text... any ideas?

    #footer {
    text-align: right;
    width: 700px;
    color: #f60;
    padding: 0px;
    margin:10px auto;
    font-size: 10px;

    }

    #icons{
    float: left;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }

  2. #2
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Might want to close the quote on <div id="icons>
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  3. #3
    Resistance is Futile webgodjj's Avatar
    Join Date
    Nov 2002
    Location
    Madison, WI USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by The New Guy
    Might want to close the quote on <div id="icons>
    oups.. that was a typo in the forum... in my code the quotation is closed...

    any other suggestions?

  4. #4
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,449
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Do me a favor? Post the whole code for the page so I can play with it?

  5. #5
    Resistance is Futile webgodjj's Avatar
    Join Date
    Nov 2002
    Location
    Madison, WI USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stymiee
    Do me a favor? Post the whole code for the page so I can play with it?
    Ok.. but I warn you it's a mess I have been hacking my way through learning Css by using bits of code from here and there. Actually have been learning alot. I am having some issues understanding inheritance, however, this will be apparent....

    I have been only focusing on the index page
    http://www.mankindinc.com/newsite/

    style.css
    HTML Code:
    body{
    background: url(../images/bg.gif) #666666;
    color:#666666;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    }
    
    #wrapper{
    	width: 700px;
    	background-color:#FFFFFF;
    	margin:10px auto;
    	border: 1px solid #000000;
    	text-align:left;
    }
    
    #head{
    	margin:1px;
    	padding: 1px;
    }
    
    #head h1 {
    	width:700px;
    	color:#666666;
    	font-size: 22px;
    }
    
    h1 span{
    	color:#FF9933;
    }
    
    #menuContainer {
    	background: #B6B9AC;
    	height: 20px;
    	border-top: 1px solid #000000;
    	border-bottom: 1px solid #FFF;
    	color: #FFF;
    	padding: 0px;
        margin-top: 0px;
    }
    
    #menu {
    	float: right;
    	font-size: 12px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    #icons{
    	float: left;
    	font-size: 12px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    #icons img  {
        border: 0;
    }
    
    
    #menu ul {
    	display: inline;
    	margin: 0px;
    	padding: 0px;
    }
    
    #menu ul li {
    	border-left: 1px solid #FFF;
    	width: 90px;
    	text-align: center;
    	background: #B6B9AC;
    	float: left;
    	list-style: none;
    	height: 20px;
    }
    
    #menu>ul>li {
    	border-bottom: 1px solid #FFF;
    }
    
    #menu ul li.active {
    	border-left: 1px solid #FFF;
    	background: #FFA061;
    	border-bottom: 1px solid #FFA061;
    }
    
    #menu li.active a:hover {
    	display: block;
    	color: #FFF;
    	height: 100%;
    }
    
    #menu li a {
    	display: block;
    	text-decoration: none;
    	color: #FFF;
    }
    
    #menu li.active a {
    	color: #000000;
    }
    
    #menu li a:hover {
    	display: block;
    	background: #FFA061;
    	color: #333;
    	text-decoration: none;
    	color: #000000;
    	height: 100%;
    }
    
    #functions {
    	height: 20px;
    	background: #FFA061;
    	border-bottom: 1px solid #000000;
    	clear: both;
    }
    
    #date {
    	float: right;
    	padding: 3px;
    	margin-right: 10px;
    	text-align: right;
    	font-size: 10px;
    	color: #333;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    #content p{
    font-size: 12px;
    margin: 20px;
    text-align: Justify;
    }
    
    #content h1{
    font-size: 16px;
    color: #666666;
    padding: 0;
    margin: 20px;
    border-bottom: 1px solid #AAA;
    }
    
    #content h2{
    font-size: 110%;
    color: #003366;
    padding: 0;
    margin: 20px;
    }
    
    .leftimage{
    float: left;
    margin-right: 10px;
    border: 1px solid #000000;
    }
    
    .rightimage{
    float: right;
    margin-left: 15px;
    border: 1px solid #000000;
    }
    
    #bottomnav {
    	height: 20px;
    	background: #FFA061;
    	border-top: 1px solid #000000;
    	text-align:center;
    	color: #333;
    	font-size: 10px;
    	clear: both;
    	padding-top: 4px;
    	margin-top: 2px;
    
    }
    
    #bottomnav a {
    	color: #333;
    	text-decoration: none;
    }
    
    #bottomnav a:hover, a:active {
    	color: #fff;
    	text-decoration: underline;
    	font-size: 10px;
    }
    #footer {
    	text-align: right;
    	width: 700px;
    	color: #f60;
    	padding: 0px;
    	margin:10px auto;
    	font-size: 10px;
    
    }
    
    #footer a:hover, a:active {
    	color: #F60;
    	text-decoration: none;
    	font-size: 10px;
    	
    }
    
    #footer a {
    	color: #F60;
    	text-decoration: underline;
    	font-size: 10px;
    }
    index.php

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <?php 
    $pageid
    ="Home";
    include(
    "includes/config.php");
    mysql_connect($host$user$pass) or die ("Unable to connect!");
    mysql_select_db($db) or die ("Unable to select database!");
    ?>
    <head>
    <title>Mankind Support Service - <?php echo $pageid ?></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
        <div id="head">
            <h1><img src="images/logo.gif" alt="Mankind Support Service Logo" />Mankind <span>Support</span> Service</h1>
        </div>
        <div id="menuContainer">
            <div id="menu"><?php include("includes/nav.php")?></div>
        </div>
        <div id="functions">
            <div id="date">
                <?php echo date("F j, Y"); ?>
            </div>
        </div>
    <?php
    $result
    =mysql_query("SELECT * FROM SectionPhotos where `section`='$pageid'") or die(mysql_error());
    $row=mysql_fetch_object($result);
    ?>
        <div id="content">
            <h1><?php if ($pageid=="Home") {echo "Community Based Support Living"; } else { echo $pageid; }?></h1>
              <p><img src="<?php echo "$imageBase$row->photo"?>" alt="<? echo "$row->alttext?>" class="rightimage"/><?
            $result
    =mysql_query("SELECT * FROM fronttext");
            while(
    $row=mysql_fetch_object($result)){
            echo 
    nl2br("$row->description");
            }
            
    ?></p>
        </div>
        <div id="bottomnav">
            <a href="employment.php">Employment Oppertunities</a> | <a href="sitemap.php">Site Map</a> | <a href="privacy.php">Privacy Policy</a> | <a href="usercorner.php">User's Corner</a>
        </div>
    </div>
      <div id="footer"><div id="icons"><a href="http://validator.w3.org/check/?uri=referer"><img src="images/valid_xhtml.gif" alt="100% pure, hand coded, valid XHTML" /></a> 
    <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://boastology.com/bstyle.css"><img src="images/valid_css.gif" alt="Natural, beautiful, valid CSS" /></a> <a href="http://www.contentquality.com/mynewtester/cynthia.exe?rptmode=-1&amp;url1=http://www.mankindinc.com/newsite/"><img src="images/501_compliant.gif" alt="Section 501 Compliant" /></a></div>
        <?php include ("includes/footer.php"?>
    </div>
    </body>
    </html>
    nav.php
    HTML Code:
    <ul>
    	<li<?php if ($pageid=="Home") echo " class=\"active\""; ?>><a href="index.php" title="Home">Home</a></li>
    	<li<?php if ($pageid=="About Us")  echo " class=\"active\""; ?>><a href="aboutus.php" title="About Us">About Us</a></li>
    	<li<?php if ($pageid=="Services")  echo " class=\"active\""; ?>><a href="services.php" title="Services">Services</a></li>
    	<li<?php if ($pageid=="Resources") { echo " class=\"active\"";}?>><a href="resources.php" title="Resources">Resources</a></li>
    	<li<?php if ($pageid=="Faqs") { echo " class=\"active\"";}?>><a href="faqs.php" title="Faqs">Faqs</a></li>
    	<li<?php if ($pageid=="Contact Us") { echo " class=\"active\"";}?>><a href="contactus.php" title="Contact Us">Contact Us</a></li>
    	<li<?php if ($pageid=="Events") { echo " class=\"active\"";}?>><a href="#" title="Events">Events</a></li>
    </ul>

  6. #6
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Make two divs, or spans, float one to the left, and one to the right. Give the footer a height that will acommodate 2 lines of text.

    Or just abslutely position the icons.

  7. #7
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,449
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Looks like you've solved this since it looks fixed in IE now.


Bookmarks

Posting Permissions

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