Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.
Hi all, please see this major site announcement: https://www.boards.ie/discussion/2058427594/boards-ie-2026

Table, DIV and CSS...

  • 04-09-2006 10:54PM
    #1
    MartMax
    Registered Users, Registered Users 2 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

  • #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]


  • #3
    MartMax
    Registered Users, Registered Users 2 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


  • #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