Results 1 to 3 of 3

Thread: Some CSS questions from a newbie

  1. #1
    Join Date
    Jul 2006
    Location
    UK
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Some CSS questions from a newbie

    Note: I've been (on and off - depending on how much free time and energy I have available) trying to teach myself HTML and CSS, I'm getting there, slowly but surely.

    Anyway, I have a footer, and the right edge of it also doubles as a "Top" button for linking to the top of the page (see screenshot). I've been trying to use CSS to place my images, rather than coding the images/tables in HTML, and wondered if there's a way of making the "Top" button take you to the top of the document, using CSS?

    Here's my CSS code and my HTML code for my footer:

    HTML Code:
    /* Footer */
    #footer_left {
    	background: url(/home/images/footer/shimmyst_green_footer_left.gif) left bottom;
    	height: 100px;
    	width: 50px;
    }
    
    #footer_middle {
    	background: #fff url(/home/images/footer/shimmyst_green_footer_middle.gif) repeat-x bottom left;
    	font: 8pt Arial, Verdana, Helvetica, sans-serif;
    	color: #214304;
    	text-align: left;
    }
    
    #footer_right {
    	background: url(/home/images/footer/shimmyst_green_footer_right.gif) bottom right;
    	height: 100px;
    	width: 50px;
    }
    HTML Code:
    <!-- Footer -->
    <table width="800" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td id="footer_left">&nbsp;</td>
        <td id="footer_middle" width="700" height="100">Shimmering Mysteries &copy; 2006, All Rights Reserved.</td>
        <td id="footer_right"></td>
      </tr>
    </table>
    <!-- End Footer -->
    Any ideas on how to achieve what I'm trying to achieve?

    Many thanks in advance.
    Last edited by DeathByPixels; 09-28-2006 at 02:26 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    The way to get an image to take you to the top of the page is:

    HTML Code:
    <a href="#" onclick="window.scrollTo(0,0);return false;"><img src="top.gif" border="0"></a>
    For compliance in the most browsers, even when javascript is disabled, it might be better to use the name of the page itself rather than # for the href attribute.

    Positioning things using css rather than tables is a bit more complicated but, fortunately there are tons of templates (some better than others) available, for example, her is a listing of three column layouts:

    http://css-discuss.incutio.com/?page=ThreeColumnLayouts

    How exactly you go about laying out a page is an individual matter but, often it can be facilitated by using division elements float:left; broken up by other divisions clear:left; with some divisions used as containers of the floats that are neither floated nor cleared.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2006
    Location
    UK
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I've decided to go for a table layout instead of trying to do it all with CSS, until I find out more about tableless design.

    Thanks for your help.

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
  •