38 users online (0 members and 38 guests)  


  Results 1 to 11 of 11

Related

  1. Layout alignment problem    Forum: CSS Forum
    Replies: 16
  2. Replies: 5
  3. CSS alignment problem    Forum: CSS Forum
    Replies: 5
  4. Image alignment problem on flexi page    Forum: HTML Forum
    Replies: 1
  5. Table alignment    Forum: HTML Forum
    Replies: 5
  1. #1
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    alignment problem

    Hello friends, i have created a web page that has a table.
    the sample code goes like this
    Code:
    Code:
    <table width="1003" >
    <tr bgcolor=#228d07>
    <td align="center"><a STYLE="text-decoration:none" href="http:\\yahoo.com"><font color="#f7eff9"><B>Menu0</B></font></a></td>
    <td align="center"><font color="#f7eff9"><B>Menu1</B></font></td>
    <td align="center"><font color="#f7eff9"><B>Menu2</B></font></td>
    <td align="center"><font color="#f7eff9"><B>Menu3</B></font></td>
    <td align="center"><font color="#f7eff9"><B>Menu4</B></font></td>
    <td align="center"><font color="#f7eff9"><B>Menu5</B></font></td>
    <td align="center"><font color="#f7eff9"><B>Menu6</B></font></td>
    <td align="center"><font color="#f7eff9"><B>Menu7</B></font></td>
    <td align="center"><font color="#f7eff9"><B>Contact Us</B></font></td>
     
    </tr>
    </table>
    when i run this, it loads well but not from the very top of the browser. it leaves little some space at the top in the browser and loads the table.
    i dont want to leave that space.
    the table should load right from the starting of the top of the browser window?

    how can i specify this?

    Thank you
    Last edited by vinyl-junkie; 11-19-2007 at 10:41 AM. Reason: Added code tags

  2. #2
    vinyl-junkie's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    721

    Re: alignment problem

    You need to add a style to your body tag.

    Code:
    <body style="margin: 0; padding: 0;">
    Side Note: Best practice is to use an external stylesheet, which is placed in between the <head></head> tags. Do this instead of having styles embedded in your HTML. For example:

    Code:
    <link rel="stylesheet" href="/styles.css" type="text/css" />
    Here is a good CSS tutorial, in case you need it.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more

  3. #3
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: alignment problem

    Thank you friend.
    It worked well.

    But one more doubt

    i ran this code
    Code:
    Code:
    <body style="margin: 0; padding: 0">
    <center>
    <img src="images/world.gif" width=1000 height=100>
    <table height="7" width="1003">
    <tr bgcolor=#228d07>
    <td width="3%"><a STYLE="text-decoration:none" href="http:\\yahoo.com"><font color="#f7eff9"><B>Home</B></font></a></td>
    <td width="13%"><font color="#f7eff9"><B>Company Profiles</B></font></td>
    <td width="12%"><font color="#f7eff9"><B>Company News</B></font></td>
    <td width="16%"><font color="#f7eff9"><B>Buy Original Software</B></font></td>
    <td width="13%"><font color="#f7eff9"><B>Student Material</B></font></td>
    <td width="7%"><font color="#f7eff9"><B>Jobs</B></font></td>
    <td width="13%"><font color="#f7eff9"><B>Consultance Zone</B></font></td>
    <td width="12%"><font color="#f7eff9"><B>Feed Back</B></font></td>
    <td><font color="#f7eff9"><B>Contact Us</B></font></td>
     
    </tr>
    </table>
    </center>
    Image perfectly aligned. but i got some vertical distance between the image and the table below it.
    How can i eliminate that distance?

    Thank you
    Last edited by vinyl-junkie; 11-19-2007 at 03:27 PM. Reason: Added code tags

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: alignment problem

    Hi there ravindarjobs,

    further to what vinyl-junkie has said, you should not really use tables for layout purposes.
    Links should be considered as lists and coded something like this...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    * {
        margin:0;
        padding:0;
     }
    #links {width:1003px;
        list-style-type:none;
     }
    #links li {
        background-color:#228d07;
        float:left;
        margin-right:2px; 
     }
    #links li a {
        color:#f7eff9;
        font-weight:bold;
        text-decoration:none;
     }
    .menu {
        padding:3px 22px;
     }
    #contact {
        padding:3px 32px;
     }
    </style>
    
    </head>
    <body>
    
    <ul id="links">
     <li><a class="menu" href="http:\\yahoo.com">Menu0</a></li>
     <li><a class="menu" href="#">Menu1</a></li>
     <li><a class="menu" href="#">Menu2</a></li>
     <li><a class="menu" href="#">Menu3</a></li>
     <li><a class="menu" href="#">Menu4</a></li>
     <li><a class="menu" href="#">Menu5</a></li>
     <li><a class="menu" href="#">Menu6</a></li>
     <li><a class="menu" href="#">Menu7</a></li>
     <li><a id="contact" href="#">Contact Us</a></li>
    </ul>
    
    </body>
    </html>
    Further reading:-
    Last edited by HTML; 03-09-2012 at 11:03 AM.

  5. #5
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: alignment problem

    Hi vinyl-junkie and Cool Thread.
    Many thanks friends.
    I find this forum well.
    you people have gave me links too to read further.
    Many Thanks

  6. #6
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: alignment problem

    Hi ...
    But i got the List items vertically.
    Instead i want them horizantally.
    where should i change the code to get horizantally.

    Thank you.

  7. #7
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: alignment problem

    Hi there ravindarjobs,

    the code that I posted does have the links positioned horizontally.
    You are meant to use all off it.

  8. #8
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: alignment problem

    Yes now i got them horizantally.
    but the vertical space between the image and the menus still persists.
    for now my code goes like this


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    * {
        margin:0;
        padding:0;
     }
    #links {width:1003px;
        list-style-type:none;
     }
    #links li {
        background-color:#228d07;
        float:left;
        margin-right:2px; 
     }
    #links li a {
        color:#f7eff9;
        font-weight:bold;
        text-decoration:none;
     }
    .menu {
        padding:3px 22px;
     }
    #contact {
        padding:3px 32px;
     }
    #img_container {
        text-align:center;
     }
    </style>
    </head>
    <body>
    <center>
    <img src="images/world.gif" width=1000 height=100>
    <ul id="links">
     <li><a class="menu" href="http:\\yahoo.com">Menu0</a></li>
     <li><a class="menu" href="#">Menu1</a></li>
     <li><a class="menu" href="#">Menu2</a></li>
     <li><a class="menu" href="#">Menu3</a></li>
     <li><a class="menu" href="#">Menu4</a></li>
     <li><a class="menu" href="#">Menu5</a></li>
     <li><a class="menu" href="#">Menu6</a></li>
     <li><a class="menu" href="#">Menu7</a></li>
     <li><a id="contact" href="#">Contact Us</a></li>
    </ul>
    
    </center>
    </body>
    </html>
    Thank you
    Last edited by vinyl-junkie; 11-19-2007 at 03:26 PM. Reason: Added code tags

  9. #9
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: alignment problem

    Hi there ravindarjobs,

    you will really need to get a good idea of how CSS works.
    Luckily for you, the forums are here to help.

    Also when posting code check out this...
    ...it will help with the presentation.

    Now to you problem, try it like this...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    * {
        margin:0;
        padding:0;
     }
    #container {
        width:1000px;
        margin:auto;
     }
    #header {
        width:1000px;
        height:100px;
        display:block;
     }
    #links {
        list-style-type:none;
     }
    #links .menu {
        background-color:#228d07;
        float:left;
        margin-right:2px;
     }
    #links .menu a {
        padding:3px 22px;
        color:#f7eff9;
        font-weight:bold;
        text-decoration:none;
     }
    #links #contact {
        background-color:#228d07;
        float:left;
     }
    #links #contact a {
        padding:3px 32px 3px 33px;
        color:#f7eff9;
        font-weight:bold;
        text-decoration:none;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <img id="header" src="images/world.gif" alt="">
    
    <ul id="links">
     <li class="menu"><a href="http://yahoo.com">Menu0</a></li>
     <li class="menu"><a href="#">Menu1</a></li>
     <li class="menu"><a href="#">Menu2</a></li>
     <li class="menu"><a href="#">Menu3</a></li>
     <li class="menu"><a href="#">Menu4</a></li>
     <li class="menu"><a href="#">Menu5</a></li>
     <li class="menu"><a href="#">Menu6</a></li>
     <li class="menu"><a href="#">Menu7</a></li>
     <li id="contact"><a href="#">Contact Us</a></li>
    </ul>
    
    </div>
    
    </body>
    </html>

  10. #10
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: alignment problem

    Thank you friend.
    It works fine now.
    yes I will look more in to CSS.

  11. #11
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: alignment problem

    No problem, you're welcome.



Tags for this Thread