Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Can't do this....

    I'm trying to get the cells on the left menu to highlight AND link on mouse-over. The problem is this: When I set "a" to display:block; the text floats to the top. It's driving me insane and I can't find a solution on the net. Help on cleaning up the CSS madness I've produced is also appreciated.

    Here's the CSS (I taught mysmelf so don't make fun of me), after will be the HTML:


    body
    {
    color: #000000;
    }

    body.one
    {
    color: #000000;
    background: #FFFFFF; /*there'll be a pic here and each page will have a separate picture, so the second page will have body.two style etc....)
    background-repeat:no-repeat;
    background-attachment:scroll;
    background-position:top center;
    }

    table.housing
    {
    width: 90%;
    margin: auto;
    margin-top: 60px;
    margin-bottom: 200px;
    border-style: groove;
    border-width: 0px;
    border-color: #000000;
    }

    td.left
    {
    width: 10%;
    }

    td.right
    {
    width: 90%;
    }

    table.mainmenu
    {
    margin: 20px 10px 20px 20px;
    width: 205px;
    height: 300px;
    border-spacing: 20px 20px;
    background-color: rgba(184,183,151,0.5);
    border-style: groove;
    border-width: 2px;
    border-color: #000000;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    float:left;
    }

    td.mainmenu
    {
    height: 60px;
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    border-color: #000000;
    font: bold 1.1em Georgia;
    font-variant: small-caps;
    background-color: rgba(255,255,255,0.7);
    }

    table.text
    {
    width: 100%;
    margin: 20px 20px 20px 10px;
    border-spacing: 20px 20px;
    height: 600px;
    background-color: rgba(184,183,151,0.5);
    border-style: groove;
    border-width: 2px;
    border-color: #000000;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    }

    td.text
    {
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #000000;
    background-color: #FFFFFF;
    padding: 10px 10px 10px 10px;
    }

    a
    {
    color: #000000;
    text-decoration:none;
    }

    a:link { color: #000000; }
    a:visited { color: #000000; }
    a:hover { color: #000099; background-color: #b8b797;}
    a:active { color: #000000; }

    Das HTML:

    <!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=windows-1252">
    <META NAME="generator" CONTENT="">
    <META NAME="author" CONTENT="">
    <META NAME="description" CONTENT="">
    <META NAME="keywords" CONTENT="">

    <LINK REL="stylesheet" TYPE="text/css" HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/test.css">

    </HEAD>


    <BODY class="one">

    <table class="housing" border="0">

    <tr>

    <td class="left" align="left" valign="top">
    <table class="mainmenu">

    <TR ALIGN="center" VALIGN="middle">
    <td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/bcconstruction.htm">Home</A></td>
    </TR>

    <TR ALIGN="center" VALIGN="middle">
    <td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/Portfolio.htm">Portfolio</A></td>
    </TR>

    <TR ALIGN="center" VALIGN="middle">
    <td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/Ideas.htm">Ideas And Information</A></td>
    </TR>

    <TR ALIGN="center" VALIGN="middle">
    <td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/Contact.htm">Contact</A></td>
    </tr>

    </table>
    </td>

    <td class="right">
    <table class="text">

    <TR>
    <TD class="text" align="center" valign="top">


    </td>
    </tr>

    </table>
    </td>

    </table>

    </BODY>
    </HTML>


  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Setting 'a' tags to 'display: block' didn't change anything for me?!

    ..AND link on mouse-over
    To cause the 'a' tags to link to (open) another page on mouse-over would require JavaScript (I believe).

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Maybe I worded it wrong, I want the whole cell to highlight and be a link on mouse-over at the same time, so that when I click anywhere on the cell it'll send me to the linked page.

    I want this:

    td:hover = link I can click

    without my fancy text alignments going awry.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    a { color: #000000;
    text-decoration:none;
    display:inline-block; height: 100%; width: 100%; }

    .. but I'm struggling to vertically align the text in the cells. I don't think using using three nested tables is helping! Ugg!

    How long ago did you study HTML ? Don't use nested tables, don't use 'align' or 'valign' (deprecated) attributes: use css to style all elements. In fact, I wouldn't use tables at all for this kind of page. I would suggest that tables should only be used for displaying tables of data.

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there PaulBuilds,

    as AndrewGSW has suggested, do not use tables for page layout purposes.

    Further reading:-

    Here is you page in more modern format...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>basic layout</title>
    
    <style type="text/css">
    body{
        margin:92px 5% 0;
        font-family: georgia,serif;
        font-size:1.1em;
     }
    #nav {
        float:left;
        width:161px;
        padding:20px 20px 0;
        margin:0;
        border:2px groove #000;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        -khtml-border-radius:6px;
        border-radius:6px;
        background-color:rgba(184,183,151,0.5);
        list-style-type:none;
     }
    #nav li {
        height:60px;
        border-top:1px solid #000;
        border-bottom:1px solid #000;
        margin-bottom:20px;
        background-color:rgba(255,255,255,0.7);
     }
    #nav a {
        display:block;
        line-height:60px;
        font-variant:small-caps;
        font-weight:bold;
        color:#000;
        text-align:center;
        text-decoration:none;
     }
    
    #nav #no-lh  {
        line-height:normal;
        height:50px;
        padding-top:10px;
     }
    #nav a:hover { 
        color:#009; 
        background-color:#b8b797;
     }
    #content {
        padding:20px;
        margin-left:230px;
        border:2px groove #000;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        -khtml-border-radius:6px;
        border-radius:6px;
        background-color:rgba(184,183,151,0.5);
     }
    #text {
        padding:20px;
        border:1px solid #000;
        background-color:rgba(255,255,255,1.0);
     }
    </style>
    
    </head>
    <body>
    
    <ul id="nav">
     <li><a href="bcconstruction.html">Home</a></li>
     <li><a href="portfolio.html">Portfolio</a></li>
     <li><a id="no-lh" href="ideas.html">Ideas And Information</a></li>
     <li><a href="contact.html">Contact</a></li>
    </ul>
    
    <div id="content">
    <div id="text">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p><p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p>
    <p>
    Nullam pharetra quam quis metus. Proin feugiat lacinia mauris. Cum sociis natoque 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus erat 
    quis ante. Suspendisse eu tellus. Donec sit amet ante in nisl dapibus condimentum. Proin 
    diam. Curabitur egestas felis iaculis lorem. Aliquam sit amet risus ut nulla sollicitudin 
    scelerisque. Mauris viverra hendrerit augue. Morbi eu sapien sed enim rutrum blandit. 
    Quisque feugiat. Pellentesque luctus sagittis est. Donec dolor sem, bibendum ac, porta in, 
    rutrum sit amet, dui. Ut libero turpis, tempus nec, venenatis at, tincidunt ac, sem.
    </p>
    </div><!-- end #text -->
    </div><!-- end #content -->
    
    </body>
    </html>
    
    coothead

  • Users who have thanked coothead for this post:

    PaulBuilds (04-23-2011)

  • #6
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here's a simplified version:

    <!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=windows-1252">
    <META NAME="generator" CONTENT="">
    <META NAME="author" CONTENT="">
    <META NAME="description" CONTENT="">
    <META NAME="keywords" CONTENT="">

    <style type="text/css">

    body
    {
    color: #000000;
    }

    table.mainmenu
    {
    margin: 20px 10px 20px 20px;
    width: 205px;
    height: 300px;
    border-spacing: 20px 20px;
    background-color: rgba(184,183,151,0.5);
    border-style: groove;
    border-width: 2px;
    border-color: #000000;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    }

    tr.mainmenu
    {
    }

    td.mainmenu
    {
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    border-color: #000000;
    font: bold 1.1em Georgia;
    font-variant: small-caps;
    background-color: rgba(255,255,255,0.7);
    }

    a { color: #000000; }

    a:link { color: #000000; }

    a:visited { color: #000000; }

    a:hover { color: #000099; background-color: #b8b797;}

    a:active { color: #000000; }

    </style>
    </HEAD>


    <BODY>

    <table class="mainmenu">

    <TR class="mainmenu" ALIGN="center" VALIGN="middle">
    <td class="mainmenu" VALIGN="middle"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/bcconstruction.htm">Home</A></td>
    </TR>

    <TR ALIGN="center" VALIGN="middle">
    <td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/Portfolio.htm">Portfolio</A></td>
    </TR>

    </table>


    </BODY>
    </HTML>

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there PaulBuilds,
    Here's a simplified version:
    Not simplified enough.

    You still have one table element to remove.

    coothead

  • #8
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OMF... this is so much easier without tables, unfortunately, now I have to re-do my whole website. The tables were driving me nuts. Live and learn I guess. Thanks for your help.

    I'm using Note Tab+, is there a better program out there?

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Still using ALIGN and VALIGN??!! Use css

    Komodo Edit - it's great!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •