some html help for me too

ok so im trying my hand at html and its going good so far except i cant seem to get that last bit of code that is the table to work right the colspan=“2” doesnt seem to be doing anything. Can anyone tell me why this is.
I also allready know that you dont usually put your CSS in the same HTML document but since this was just a single page i figured why not.

<!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">
<head>    
    <title>Test Page</title>
    <style type="text/css" media="all">

        body {
            font: arial, helvetica, sans-serif;
            background-color: white;
            margin 0;

        }

        #header1 {
            height; 80px;
            border-left: 170px solid transparent;
            text-align: center;


        }

        #navigation {
            position: absolute; 
            top: 60;
            left: 0;
            width: 130px;
            color: black;
            border: 0;
        }

        #main {
            position: relative;
            width: 800px; /* width + border for IE 5.x */
            w\idth: 800px; /* real width */
            margin: auto;
            float: left;
        
        }

        #contents {
            background: white
            background: white
            xpadding: 1px 1em 2em 1em;
            padding: 1px 20px 1em 40px;
            border-left: 150px solid transparent;
            text-align: center;
        }

        #footer {
            position: relative;
            text-align: center;
            border-left: 200px solid transparent;
            border-top: 20px solid transparent;
        }


    </style>
</head>

<body>
    <div id="main">
        <div id="header1">
            <img src="banner.jpg" width="600" height="100" alt="river canyon wirless"/>
        </div>

        <div id="navigation">

            <a href="tech.html"><img src="images/b-placeholder.png" width=153 height=63 border=0 alt="placeholder" /></a>
            
            <a href="tech.html"><img src="images/b-placeholder.png" width=153 height=63 border=0 alt="placeholder" /></a>

            <a href="tech.html"><img src="images/b-placeholder.png" width=153 height=63 border=0 alt="placeholder" /></a>
            
            <a href="tech.html"><img src="images/b-placeholder.png" width=153 height=63 border=0 alt="placeholder" /></a>
            
            <div id="footer">
                <table>
                    <tr>

                        <th colspan="2">Misc</th>
                        <th>Misc</th>
                    </tr>

                </table>
            </div>    
        
        </div>
        
        <div id="contents">

            <h2>Title Page</h2>

            <p>Main Body Text Here</p>
    
        </div>
    
    </div>

</body>
</html>

Edit: let me tell you what i want to do so if this is the completely wrong way someone can help me fix it,
i want to have links at the bottom of the page all in a row like the BA forums does for the previous thread and the next thread or the 4 ones at the bottom

colspan is like using the “merge cells” function in excel/open office.

So, it’s not doing anything because you only have 1 row. I’d make a quick example, but if you check out the link, it probably does a better job of explaining than I can (with pretty pictures, too!)

ok i figured that was the problem. Can anyone help me do what im wanting to do

If you’re using CSS to layout your page you shouldn’t need to use a table anyway. CSS has become sort of the replacement for the old table-based layout systems of yore. Just give your ‘footer’ id a width (600) and height (whatever you want) in the definition (the stuff that’s in the <head> part) and it should work right. You’ll probably want to get rid of the ‘border’ settings if you do it that way as well.

Just curious, are you following a tutorial or a book or are you just sort of winging it?

im kinda fallowing a tutorial but kinda doing my own thing
this one is a project of my own.

DO NOT USE TABLES FOR LAYOUT

use ‘height: ; width: ;top: ; left: ;’ CSS properties <div> and lists insted.

For a list of links it is generally deemed good practice to use unordered lists, <ul>, and style it with css so it behaves. :slight_smile:

As I learned this, the tutorials of Maxdesign helped me greatly, especially the Listutorial and Listamatics with examples of a lot of lists:
Listutorial
Listamatic
Listamatic 2

The other tutorials they have are great as well.

I congratulate you for using the strict doctype, much better to find any faults with html because it is so… strict. Remember to validate your htmland css, and develop in a standard compliant browser first (like Firefox) before tackling the quirks of, for example, IE.

I don’t know which html/css editor you’re using bu Kompozer css editor feature works fine for me and it’s quite simple to understand what you’re doing and position the div elements.

thanks for the link to the tutorial on horizontal lists. I also meant to ask if there is anything wrong with the way im structuring my html

ok well that site helped me out a lot but i have another problem now
i want to use images in the horizontal list instead of words for links but i need it to look like on unbroken image and have certain parts of the image take you to different places, but with this code

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
&lt;head&gt;    
    &lt;title&gt;Test Page&lt;/title&gt;
    &lt;style type="text/css" media="all"&gt;

        body {
            font: arial, helvetica, sans-serif;
            background-color: black;


        }

        #header1 {
            text-align: center;


        }

        #navigation ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            text-align: center;
            background-color: black;

        }

        #navigation ul li {
            display: inline;
        }

        #navigation ul li a {
            text-decoration: none;
        }

        #main {
            position: relative;
            width: 800px; /* width + border for IE 5.x */
            w\idth: 800px; /* real width */
            margin: auto;
            float: center;
        
        }

        #contents {
            xpadding: 1px 1em 2em 1em;
            padding: 1px 20px 1em 40px;
            text-align: center;
        }

        #footer {
            position: relative;
            text-align: center;
            border-left: 200px solid transparent;
            border-top: 20px solid transparent;
        }


    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="main"&gt;
        &lt;div id="header1"&gt;
            &lt;img src="images/banner.png" border="0" width="687" height="96" alt="river canyon wirless"/&gt;
        &lt;/div&gt;

        &lt;div id="navigation"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="home.html"&gt;&lt;img src="images/home.png" border="0" width="99" height="32" alt="Home"/&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="service.html"&gt;&lt;img src="images/servicet.jpg" border="0" width="140" height="32" alt="Service Type"/&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="avail.html"&gt;&lt;img src="images/avail.jpg" border="0" width="131" height="32" alt="Availibility"/&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="faq.html"&gt;&lt;img src="images/faq.png" border="0" width="86" height="32" alt="faq"/&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;        
        
        &lt;div id="contents"&gt;

            &lt;h2&gt;Service Type&lt;/h2&gt;




        &lt;/div&gt;
    
    &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

there is a border around each one of the image parts being used as a link so the image is all broken up

You’ll have more control over the looks if you put the navigation images into the css as background images. It is usually also regarded as good practice to put images into css if they are purely decorational.

If you want to give each link a different image, you would need to give each <a> a different id, like this:


        &lt;div id="navigation"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a id="home" href="home.html"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a id="service" href="service.html"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a id="avail" href="avail.html"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a id="faq" href="faq.html"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;        

then you can style it like this:

#navigation ul li #home {
  background-image: url(path/to/home-image);
}

and similar for the other IDs.
You will have to change the <a>s to display: block, though, and give them width and height in css so they have the dimension of the images.

There might be other ways to do this, but this is what I would try first.

Cool about using background images in css is, you can have a different image for the hover state, so they change when you mouseover them, like this:

#navigation ul li #home:hover {
  background-image: url(path/to/home-hover-image);
}

Disclaimer: I didn’t test this, so there might be errors or typos. But I wanted to give you the general idea.

body img {
    border: 0px;
}