Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Sep 2004
    Posts
    6
    Member #
    7421
    Hi everyone,

    I'm working on a site layout for a school project, but I'm having a problem with the coding. Here is an image of what I would like the layout to be:

    http://img30.exs.cx/img30/2539/template1.gif

    In case it is hard to tell, there is a border around the entire table.

    This is how I have coded the layout so far:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	<title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    
    <body bgcolor="#112538">
    
    <table width="750" bgcolor="#FF0000" align="center" cellspacing="1">
    <tr>
    <td width="125" height="125">
    <!-- LOGO HERE -->
    
    <!-- END LOGO -->
    </td>
    <td width="625" height="125">
    <!-- LINKS HERE -->
    <table width="100%" height="100%" bgcolor="#0000FF">
    <tr><td width="100%" height="100" colspan="5">k</td></tr>
    <tr>
    <td width="125" height="25">Link 1</td>
    <td width="125" height="25">Link 2</td>
    <td width="125" height="25">Link 3</td>
    <td width="125" height="25">Link 4</td>
    <td width="125" height="25">Link 5</td>
    </tr>
    </table>
    <!-- END LINKS -->
    </td>
    </tr>
    
    <tr>
    <td width="125" height="625">
    <!-- BANNER HERE -->
    
    <!-- END BANNER -->
    </td>
    <td width="625" height="625">
    <!-- CONTENT HERE -->
    
    <!-- END CONTENT -->
    </td>
    </tr>
    </table>
    
    </body>
    </html>
    And my stylesheet:

    Code:
    TD	{ background: #112538; }
    Because I want to use images for my links, which have a different background to the rest of the page, I need them positioned with no spacing between the image and the border. How can I achieve this?

    Thanks.

  2.  

  3. #2
    Member drewrockshard's Avatar
    Join Date
    Feb 2004
    Location
    Garland (Dallas), Texas
    Posts
    45
    Member #
    4946
    well for one...in your table start tag you have the attribute cellspacing with a value of "1"...youi dont want that if you dont want any spaces in between.

    NOTE: SO TAKE IT OUT OR ELSE YOU WILL HAVE SPACES. (not yelling just emphasizing)

    your code:
    HTML Code:
    cellspacing="1"
    also in your individual <td> tags that would hold the images that say "link1", "link2", etc, ... you need to take out the width and the height attributes, remove the text and place the image in there with an attribute border="0"

    heres what i mean...

    CHANGE THIS CODE:
    HTML Code:
    <tr>
    <td width="125" height="25">Link 1</td>
    <td width="125" height="25">Link 2</td>
    <td width="125" height="25">Link 3</td>
    <td width="125" height="25">Link 4</td>
    <td width="125" height="25">Link 5</td>
    </tr>
    TO THIS CODE:
    HTML Code:
    <tr>
    <td><a href="link.html"><img src="pic1.gif" alt="link1" border="0"></a></td>
    <td><a href="link.html"><img src="pic2.gif" alt="link2" border="0"></a></td>
    <td><a href="link.html"><img src="pic3.gif" alt="link3" border="0"></a></td>
    <td><a href="link.html"><img src="pic4.gif" alt="link4" border="0"></a></td>
    <td><a href="link.html"><img src="pic5.gif" alt="link5" border="0"></a></td>
    </tr>
    hope this works or at least helps...ill be here if you need more help...
    Thanks,
    Drew

  4. #3
    Junior Member
    Join Date
    Sep 2004
    Posts
    6
    Member #
    7421
    Thanks very much for your help, I appreciate it greatly. If I remove the cellspacing="1" from my code, is there a way I can achieve the single pixel border? Using border="1" means there is a double border between every cell, which I don't want. Using cellspacing is the only way I know of to do this, but if I remove it to compensate for the images is there any other way I can still have the border?

    Thanks again.

  5. #4
    Member drewrockshard's Avatar
    Join Date
    Feb 2004
    Location
    Garland (Dallas), Texas
    Posts
    45
    Member #
    4946
    Quote Originally Posted by THFS
    Thanks very much for your help, I appreciate it greatly. If I remove the cellspacing="1" from my code, is there a way I can achieve the single pixel border? Using border="1" means there is a double border between every cell, which I don't want. Using cellspacing is the only way I know of to do this, but if I remove it to compensate for the images is there any other way I can still have the border?

    Thanks again.
    yes there is...use css. if you want the border on the table still all you do is create a class using css.

    so if you want to make a certain table cell a certain color and width (in pxls) then you would create the following class...
    HTML Code:
    .tableBorder { border: 1px solid #000000; }
    what this is stating is your new class tableBorder has a border sixe or 1 pixel and it is a solid border( you can make it dashed or dotted if you want) and the color is going to be black.

    So you ask...how do i implement it into my HTML??

    easy...just include the class in whatever cell or element you want (the TD tag or the TR tag, depending on what you want). I will be using the syntax from my last post...
    HTML Code:
    <tr class="tableBorder">
    <td width="125" height="25">Link 1</td>
    <td width="125" height="25">Link 2</td>
    <td width="125" height="25">Link 3</td>
    <td width="125" height="25">Link 4</td>
    <td width="125" height="25">Link 5</td>
    </tr>
    what the code does is it takes that whole table row (all ure images cells) and creates the border from including the class from the stylesheet.

    thats it! but if you need anymore help let me know...happy coding!
    Thanks,
    Drew

  6. #5
    Junior Member
    Join Date
    Sep 2004
    Posts
    6
    Member #
    7421
    Thanks for the help, but I've run into another problem. I tried using the CSS as you specified, but I'm having 2 pixel borders wherever two cells meet. I've used it on table and it outlines just the outside, TD gives the double border and TR does nothing. How can I make it just a single pixel border the entire way around?

    Another problem:
    I recoded the layout due to problems with rowspan (I'm not too good with row/colspan) so that my logo is actually split up on two rows. For some reason (even without a border) the bottom part of the top image is a few pixels from the top part of the bottom image. What's going on there?

    Here's my current code, but please note that I'll be using CSS rollovers so the images titled link.gif will be DIVs with a background image specified in CSS.

    Thanks again for your help.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	<title>Untitled</title>
    <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    
    <body bgcolor="#112538">
    
    <table width="750" height="800" cellspacing="0" cellpadding="0">
    <tr>
    <!-- Logo Top -->
    <td width="125" height="100">
    <img src="logo-top.gif" height="100" width="125">
    </td>
    <!-- End Logo Top -->
    <!-- Top Right -->
    <td width="625" height="100" colspan="5">
    Top Right
    </td>
    <!-- End Top Right -->
    </tr>
    <tr>
    <!-- Logo Bottom -->
    <td width="125" height="25">
    <img src="logo-end.gif" height="25" width="125">
    </td>
    <!-- End Logo Bottom -->
    <!-- Buttons -->
    <td width="125" height="25"><img src="link.gif"></td>
    <td width="125" height="25"><img src="link.gif"></td>
    <td width="125" height="25"><img src="link.gif"></td>
    <td width="125" height="25"><img src="link.gif"></td>
    <td width="125" height="25"><img src="link.gif"></td>
    <!-- End Buttons -->
    </tr>
    <tr>
    <!-- Banner -->
    <td width="125" height="625">
    Banner Here
    </td>
    <!-- End Banner -->
    <!-- Content -->
    <td width="625" height="625" colspan="5">
    Content
    </td>
    <!-- End Content -->
    </tr>
    </table>
    </body>
    </html>
    And the stylesheet:

    Code:
    TD	{ border: 1px solid #000000; background: #112538; }

  7. #6
    Junior Member
    Join Date
    Sep 2004
    Posts
    6
    Member #
    7421
    Bump.

  8. #7
    Junior Member
    Join Date
    Sep 2004
    Posts
    6
    Member #
    7421
    I pretty much need to have the layout finalised by tomorrow night, if anyone has decided to reply at a later stage please let me know what to do as soon as possible.

  9. #8
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,657
    Member #
    1234
    Liked
    138 times
    Try this. Couple of things I did, first was to place the images within the background. Some may not need to be there, but without actual pics, couldn't really test it. Also butted up the </td> against the stuff within the td, IE has issues with spaces. Does this work for you?


    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	<title>Untitled</title>
    <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    
    <body bgcolor="#112538">
    
    <table width="750" height="800" cellspacing="0" cellpadding="0" border="0">
    <tr>
    <!-- Logo Top -->
    <td width="125" height="100" background="logo-top.gif" border="0"></td>
    <!-- End Logo Top -->
    <!-- Top Right -->
    <td width="625" height="100" colspan="5">
    Top Right
    </td>
    <!-- End Top Right -->
    </tr>
    <tr>
    <!-- Logo Bottom -->
    <td width="125" height="25" background="logo-end.gif" border="0"></td>
    <!-- End Logo Bottom -->
    <!-- Buttons -->
    <td width="125" height="25"><img src="link.gif"></td>
    <td width="125" height="25"><img src="link.gif"></td>
    <td width="125" height="25"><img src="link.gif"></td>
    <td width="125" height="25"><img src="link.gif"></td>
    <td width="125" height="25"><img src="link.gif"></td>
    <!-- End Buttons -->
    </tr>
    <tr>
    <!-- Banner -->
    <td width="125" height="625">Banner Here</td>
    <!-- End Banner -->
    <!-- Content -->
    <td width="625" height="625" colspan="5">Content</td>
    <!-- End Content -->
    </tr>
    </table>
    </body>
    </html>
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:09 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com