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 9 of 9
  1. #1
    Junior Member Mehreen's Avatar
    Join Date
    Jul 2011
    Location
    Somewhere on Earth
    Posts
    26
    Member #
    28376
    Liked
    1 times
    hi guys this would be my second post...You really helped in first one,
    I recently have learned the HTML and CSS. So i'm beginner, Now i got stuck while making navigation bar inside the table.
    The issue is that i want to make horizontal navigation bar with <ul> tag but how can i fit it with full width covering the whole row in table like this and it should work in all display.

    --------------------------------------
    News Gallery About
    --------------------------------------

    here is my script:

    <html>

    <head>

    <title> My Test Web page </title>
    <meta name="revised" contents:28/Dec/2011 />
    <link rel="stylesheet" type="text/css" href="styles.css" />

    </head>

    <Body>

    <!--site layout-->

    <!--header-->

    <table width="60%" height="60%">
    <tr>
    <th height="15%"><h3 id="site-title"><a id="link-title" href="#index.html">Welcome to Test

    Webpage</h3></th>
    </tr>

    <!--Navigation panel-->
    <tr>
    <td height="1%">
    <ul>
    <li><a class="navigation-links" href="#news.html" > News</a></li>
    <li><a class="navigation-links" href="#gallery.html" > Gallery</a></li>
    <li><a class="navigation-links" href="#about.html" > About Us</a></li>
    </ul>
    </td>
    </tr>

    <tr>
    <td height="40%">content</td>
    </tr>

    <tr>
    <td height="10%">Footer</td>
    </tr>
    </table>

    ----------------------------------------------------------------------------------------------

    fix the script and rewrite it and clear the issue. What i was doing wrong..and how to do it.
    waiting for your response. i'm also uploading the preview image how it looks....
    preview.JPG



    here is the css script:

    /*Stylesheet*/


    body {background-color:AliceBlue;}
    table,th,td {border:1px solid black; margin:auto;}
    th {
    background-image:url('img/header-img.png');
    background-repeat:no-repeat;
    background-position:right bottom;
    background-color:#223e88
    }
    #site-title
    {
    color:white;
    padding:0;
    margin:0;
    font-family:verdana;
    }
    /*Welcome to Test Webpage*/
    a#link-title
    {
    color:white;
    text-decoration:none;
    }
    a#link-title:hover
    {
    color:Coral;
    }
    /*Navigation Panel*/
    ul
    {
    list-style-type:none;
    padding:0;
    margin:0;
    }


    li
    {
    display:inline;
    }
    /*Navigation Links*/
    a.navigation-links
    {
    text-decoration:none;
    font-weight:bold;
    font-family:arial;
    background-color:green;
    padding:20;
    }

    -------------------------------------------------------------------------preview.JPG

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Add

    Width:100%;

    Ul in our CSS, keep in mind using it this way, ANY unordered list will then be 100% .

    I usually create a wrapper for the nav

  4. #3
    Junior Member Mehreen's Avatar
    Join Date
    Jul 2011
    Location
    Somewhere on Earth
    Posts
    26
    Member #
    28376
    Liked
    1 times
    Quote Originally Posted by Webzarus, post: 227849
    Add

    Width:100%;

    Ul in our CSS, keep in mind using it this way, ANY unordered list will then be 100% .

    I usually create a wrapper for the nav
    i didn't get you point? my ul item (navigation bar) is not fitting properly in td see when i resize the browser.
    preview2.JPG

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Sorry,

    was on my iPhone and couldn't see everything.

    That won't work.

    I see several issues that are causing you problems.

    1. you're not defining a doc type.

    http://w3schools.com/html/html_xhtml_dtd.asp

    that's throwing your browser into quirk mode, which means it will display differently in different browsers. http://www.webmasterworld.com/forum21/7975.htm

    2. you're using tables with some inline styling elements ( tables should really only be used for tabular data, not page layouts ).

    3. when using CSS for any elements that should be sized, you should always define:
    1. width
    2. height
    3. padding ( even if zero )
    4. margins ( even if zero )

    that way, all browsers should display the same way.

    4. you should have a "reset" on the body tag to eliminate the builtin padding and margins that some browsers impose on divs by default if there is nothing defined.
    body{ margin:0;padding:0;}

    Since it appears as though you are starting out, I would suggest taking a little time and learning how to use CSS to style your pages instead of using tables... yes, you can use CSS and tables, but it can be more confusing and frustrating dealing with all the weird issues that would be generated from using tables and css.

    What you have is much more confusing than it has to be.

  6. #5
    Junior Member Mehreen's Avatar
    Join Date
    Jul 2011
    Location
    Somewhere on Earth
    Posts
    26
    Member #
    28376
    Liked
    1 times
    Thankyou very much, i can't define with the words but if you were not on other side of computer. I would hug you and say thankyou

    and yeah also happy new year
    Quote Originally Posted by Webzarus, post: 227884
    Sorry,

    was on my iPhone and couldn't see everything.

    That won't work.

    I see several issues that are causing you problems.

    1. you're not defining a doc type.

    http://w3schools.com/html/html_xhtml_dtd.asp

    that's throwing your browser into quirk mode, which means it will display differently in different browsers. http://www.webmasterworld.com/forum21/7975.htm

    2. you're using tables with some inline styling elements ( tables should really only be used for tabular data, not page layouts ).

    3. when using CSS for any elements that should be sized, you should always define:
    1. width
    2. height
    3. padding ( even if zero )
    4. margins ( even if zero )

    that way, all browsers should display the same way.

    4. you should have a "reset" on the body tag to eliminate the builtin padding and margins that some browsers impose on divs by default if there is nothing defined.
    body{ margin:0;padding:0;}

    Since it appears as though you are starting out, I would suggest taking a little time and learning how to use CSS to style your pages instead of using tables... yes, you can use CSS and tables, but it can be more confusing and frustrating dealing with all the weird issues that would be generated from using tables and css.

    What you have is much more confusing than it has to be.
    Thankyou very much, i can't define with the words but if you were not on other side of computer. I would hug you and say thankyou

    and yeah also happy new year

  7. #6
    Junior Member Mehreen's Avatar
    Join Date
    Jul 2011
    Location
    Somewhere on Earth
    Posts
    26
    Member #
    28376
    Liked
    1 times
    :angel:listen i'm little bit got confuse on every step. Can you be little more graceful, if you give me your email address and whenever i got stuck i'll ask you there. here i've to wait 2 days for your Awesome!!! answer.

    May i have to say please?

  8. #7
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Quote Originally Posted by Mehreen, post: 227903
    :angel:listen i'm little bit got confuse on every step. Can you be little more graceful, if you give me your email address and whenever i got stuck i'll ask you there. here i've to wait 2 days for your Awesome!!! answer.

    May i have to say please?
    Mehreen, It would be more appropriate for you to post a new thread in the forums than email someone that helped you directly. If you have issues, feel free to ask in the correct Forum Room here.

    Thanks

    -M3
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  9. #8
    Junior Member Mehreen's Avatar
    Join Date
    Jul 2011
    Location
    Somewhere on Earth
    Posts
    26
    Member #
    28376
    Liked
    1 times
    Quote Originally Posted by m3n0tu18, post: 228020
    Mehreen, It would be more appropriate for you to post a new thread in the forums than email someone that helped you directly. If you have issues, feel free to ask in the correct Forum Room here.

    Thanks

    -M3
    ii ii sir i'll keep in mind
    m3n0tu18 likes this.

  10. #9
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    Whats the point of making it in a table? Its way faster with div's. If you want I cant just code all of it and zip it up for you. Then you cant just dissect and learn.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs




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 10:38 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com