Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Controls not aligning properly

Tags:

html

css

html4

I am using following code to design my home page. The output (as shown below) is not appearing properly. You can see the banner going to far left and the navigation links have a huge gap in between. How to set this? Can it be done using only the DIV tag instead of TABLE?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title>
    First Website
  </title>
</head>

<body>
      <table  id="main" align="center" width="600 px">
        <tr  id="trBanner">
            <td  id="tdBanner">
                <img src="../../../My Pictures/banner copy.bmp.jpg"
            </td>
        </tr>
        <tr  id="trNavLinks">
            <td  id="lnkHome">
                  <a href="" id="lnkHome" name="lnkHome">Home</a>
            </td>
            <td  id="lnkLife">
                  <a href="" id="lnkLife" name="lnkLife">Life</a>
            </td>
            <td  id="lnkTeachings">
                  <a href="" id="lnkTeachings" name="lnkTeachings">Teachings</a>
            </td>
            <td  id="lnkExperiences">
                  <a href="" id="lnkExperiences" name="lnkExperiences">Experiences</a>
            </td>
            <td  id="lnkPhotoGallery">
                  <a href="" id="lnkPhotoGallery" name="lnkPhotoGallery">Photo Gallery</a>
            </td>
            <td  id="lnkReach">
                  <a href="" id="lnkReach" name="lnkReach">How to Reach</a>
            </td>
            <td  id="lnkContact">
                  <a href="" id="lnkContact" name="lnkContact">Contact Us</a>
            </td>
        </tr>
      </table>
</body>

</html>

alt text http://www.freeimagehosting.net/uploads/b122c4ef21.jpg

like image 460
RKh Avatar asked Aug 19 '26 08:08

RKh


2 Answers

Without seeing your code very long - don't use tables!

I know it's hard for those people who developed a long time with tables in webdesign, but belive me - after you learned how to design it with CSS & DIV-Tags, you will thank god for this!

Here is a tutorial for you: http://www.colorplexstudios.com/articles/div_web_design_tutorial/

And if you want to have an answer to your code-question: It's because you have 1 cell in the first row and 3 cells in the second row. Use the colspan-attribute. You find a tutorial for this here: http://www.htmlcodetutorial.com/tables/index_famsupp_30.html

like image 110
PassionateDeveloper Avatar answered Aug 22 '26 04:08

PassionateDeveloper


Don't use tables, use a right combination of div tags and position attributes. They're way better than tables, and more editable if you need to make any changes.

like image 24
lbedogni Avatar answered Aug 22 '26 04:08

lbedogni



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!