Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Table, DIV and CSS...

Options
  • 04-09-2006 11:54pm
    #1
    MartMax
    Registered Users Posts: 1,667 ✭✭✭


    Argh

    I cannot make around my head how to fix this. See http://beserah.com/nada and if you use IE the gap between the menus are not as bad as in FF or Opera. What's wrong wt my codings?

    [HTML]
    <table style="img" width="769" border="0" align="center">
    <tr>
    <td>RSVP</td>
    </tr>
    <tr>
    <td><div><img src="images/header.png"><img src="images/header2.png" width="205" height="61"></div></td>
    </tr>
    <tr>
    <td>
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
    </ul>
    </div> </td>
    </tr>
    </table>
    [/HTML]
    img {vertical-align:bottom}
#navcontainer ul { padding-left: 0; margin-left: 0; background-color: #3dae38; color: White; float: left; width: 100%; font-family: arial, helvetica, sans-serif; clear: both; }
#navcontainer ul li { display: inline; }
#navcontainer ul li a { padding: 0.2em 1em; background-color: #3dae38; color: White; text-decoration: none; float: left; border-right: 1px solid #fff; }
#navcontainer ul li a:hover { background-color: #98ca97; color: #fff; }

    My intention is to close the gap at all between the menus and graphic header.

    Mart


Comments

  • Options
    #2
    frodo_dcu
    Closed Accounts Posts: 119 ✭✭frodo_dcu


    lots wrong with ur code no need for tables and div use on or the other i went with divs as there better and the new standerd read up a bit on the w3c site about this yada yada i'm tired
    i also change ur code to use an inline style sheet and absolute url's so i could test the code
    the 1px gap thats left is in the image not the code

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

    <head>

    <title>Frodos fix</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style>
    body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; }
    body,td,th, tr, p, div { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #666666; }
    hr { color: #ccc; background-color: #ccc; height: 1px; width: 100%; }
    a:link, a:visited { color: #017aa7; text-decoration : underline; }
    a:hover { text-decoration: none; color: #F08400; }
    img {vertical-align:bottom}
    #container {width: 770px; border: 0; align: center; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px;}
    #rsvp {width: 770px; border: 0; align: center; text-align: left; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px;}
    #header {width: 770px; height: 61px; border: 0; align: center; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; background-color: #fff; background-image: url("http://www.beserah.com/nada/images/header2.png"); background-repeat: repeat-x; text-align: left;}
    #navcontainer {width: 770px; border: 0; align: center; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px;}
    #navcontainer ul { padding: 0; margin: 0; background-color: #3dae38; color: White; float: left; width: 100%; font-family: arial, helvetica, sans-serif; clear: both; }
    #navcontainer ul li { display: inline;}
    #navcontainer ul li a { padding: 0.2em 1em; background-color: #3dae38; color: White; text-decoration: none; float: left; border-right: 1px solid #fff; }
    #navcontainer ul li a:hover { background-color: #98ca97; color: #fff; }
    </style>

    </head>

    <body>

    <div id="container" align="center">

    <div id="rsvp">
    RSVP
    </div>

    <div id="header">
    <img src="http://www.beserah.com/nada/images/header.png&quot; align="left">
    </div>

    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
    </ul>
    </div>

    </div>

    </body>

    </html>

    [/html]


  • Options
    #3
    MartMax
    Registered Users Posts: 1,667 ✭✭✭MartMax


    thanks frodo

    i'm now using your codes and it works perfectly. i guess i am really struggling with this, i never code with HTML/CSS only without WYSIWYG page editors.

    now, i'm continuing building up the page layout and to be honest i don't really understand what i am doing. the header is sorted but the side and main area are not showing up properly and differently in every common browser.

    i guess i must go back reading the basic of DIV...

    argh.

    Mart


  • Options
    #4
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie 


    [COLOR=#000080]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">[/COLOR]
[COLOR=#000080]<html>[/COLOR]

[COLOR=#000080]<head>[/COLOR]

[COLOR=#000080]<title>[/COLOR]Frodos fix[COLOR=#000080]</title>[/COLOR]

[COLOR=#000080]<meta http-equiv="Content-Type" content=[COLOR=#0000ff]"text/html; charset=iso-8859-1"[/COLOR]>[/COLOR]

[COLOR=#800080]<style>[/COLOR]
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; }
body,td,th, tr, p, div { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #666666; }
hr { color: #ccc; background-color: #ccc; height: 1px; width: 100%; }
a:link, a:visited { color: #017aa7; text-decoration  : underline; }
a:hover { text-decoration: none; color: #F08400; }
img {vertical-align:bottom}
#container {width: 770px; border: 0; align: center; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px;}
#rsvp {width: 770px; border: 0; align: center; text-align: left; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px;}
#header  {width: 770px; height: 61px; border: 0; align: center; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; background-color: #fff; background-image: url("http://www.beserah.com/nada/images/header2.png"); background-repeat: repeat-x; text-align: left;}
#navcontainer  {width: 770px; border: 0; align: center; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px;}
#navcontainer ul { padding: 0; margin: 0; background-color: #3dae38; color: White; float: left; width: 100%; font-family: arial, helvetica, sans-serif; clear: both; }
#navcontainer ul li { display: inline;}
#navcontainer ul li a { padding: 0.2em 1em; background-color: #3dae38; color: White; text-decoration: none; float: left; border-right: 1px solid #fff; }
#navcontainer ul li a:hover { background-color: #98ca97; color: #fff; }
#div_left{float:left;width:15%;text-align:left;}
#div_center{float:left;width:82%;text-align:left;padding:2px 0x 2px 2px;}
[COLOR=#800080]</style>[/COLOR]

[COLOR=#000080]</head>[/COLOR]

[COLOR=#000080]<body>[/COLOR]

[COLOR=#000080]<div id=[COLOR=#0000ff]"container"[/COLOR] align=[COLOR=#0000ff]"center"[/COLOR]>[/COLOR]
  
[COLOR=#000080]<div id=[COLOR=#0000ff]"rsvp"[/COLOR]>[/COLOR]
RSVP
[COLOR=#000080]</div>[/COLOR]

[COLOR=#000080]<div id=[COLOR=#0000ff]"header"[/COLOR]>[/COLOR]
[COLOR=#800080]<img src=[COLOR=#0000ff]"http://www.beserah.com/nada/images/header.png"[/COLOR] align=[COLOR=#0000ff]"left"[/COLOR]>[/COLOR]
[COLOR=#000080]</div>[/COLOR]

[COLOR=#000080]<div id=[COLOR=#0000ff]"navcontainer" style='clear:both;'[/COLOR]>[/COLOR]
    [COLOR=#000080]<ul id=[COLOR=#0000ff]"navlist"[/COLOR]>[/COLOR]
    [COLOR=#000080]<li id=[COLOR=#0000ff]"active"[/COLOR]>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"#"[/COLOR] id=[COLOR=#0000ff]"current"[/COLOR]>[/COLOR]Item one[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
    [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"#"[/COLOR]>[/COLOR]Item two[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
    [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"#"[/COLOR]>[/COLOR]Item three[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
    [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"#"[/COLOR]>[/COLOR]Item four[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
    [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"#"[/COLOR]>[/COLOR]Item five[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
    [COLOR=#000080]</ul>[/COLOR]
[COLOR=#000080]</div>[/COLOR]
[COLOR=#000080]<div id="div_left">[/COLOR]
[COLOR=#000080]link<br />[/COLOR]
[COLOR=#000080]link<br />[/COLOR]
[COLOR=#000080]link[/COLOR]
[COLOR=#000080]</div><!--end of left div-->[/COLOR]
[COLOR=#000080]<div id="div_center">[/COLOR]
[COLOR=#000080]Some text here to display your information[/COLOR]
[COLOR=#000080]</div><!--end of center div-->[/COLOR]

[COLOR=#000080]</div>[/COLOR]

[COLOR=#000080]</body>[/COLOR]

[COLOR=#000080]</html>[/COLOR]

    try the above code


Advertisement