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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    Before You Post: This site currently has major problems in NS, Opera, Firebird and Mozilla, which, if you know how to fix or workaround please go to this thread: http://webdesignforums.net/thread11482.html Besides that, please only view with IE.

    The Site: http://www.poker-resource.com

    The Problem: I have a navigation bar on the left side of my page and each of the links are defined as list-elements with a display property of 'box' in my global css file. I have the a:hover class for these links set to change the background color, so that the entire line changes color on mousover.
    Problem is, it seems the box that contains each of the links does not extend all the way to the right edge of the nav bar and noticiable gap shows on mouseover.

    I've tried messing with all the padding and margin properties of both the box and the nav bar div, but with no sucess. Is there some easy workaround for this, so the box extends all the way to the edge of the div?
    Any help would be appreciated.
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  2.  

  3. #2
    Senior Member tekp's Avatar
    Join Date
    Jan 2004
    Location
    A small village near a small city near a small cit
    Posts
    918
    Member #
    4667
    Liked
    1 times
    Change the width of the "a"s to 100%? maybe, dunno, i had a look but i cant seem to figure it out, sorry.

    tekp
    tekp :cheeky: tekponline.com

  4. #3
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    nope, no good, screws up the rest of the divs. thanx for the reply though.
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  5. #4
    Senior Member tekp's Avatar
    Join Date
    Jan 2004
    Location
    A small village near a small city near a small cit
    Posts
    918
    Member #
    4667
    Liked
    1 times
    Oh, sorry. Try writing it again as a table and a row and cell for each header and set of links? It would be a lot sturdier then.

    tekp
    tekp :cheeky: tekponline.com

  6. #5
    Senior Member tekp's Avatar
    Join Date
    Jan 2004
    Location
    A small village near a small city near a small cit
    Posts
    918
    Member #
    4667
    Liked
    1 times
    Does this help?:

    <html>
    <head>
    <title>Poker-Resource.com</title>
    <style type="text/css">
    #lefttable {width: 11em;
    heigh: 75em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-top: 0;
    border-right: 1px solid #858585;
    border-top: 0px;
    border-left: 0px;
    border-bottom: 0px;}

    #header {PADDING-LEFT: .5em;
    PADDING-RIGHT: .5em;
    PADDING-TOP: .15em;
    PADDING-BOTTOM: .15em;
    BORDER-TOP: 1px solid black;
    BORDER-BOTTOM: 1px solid black;
    MARGIN-TOP: .25em;
    MARGIN-BOTTOM: .25em;
    FONT-family: Arial;
    font-size: 8pt;
    COLOR: #E8E8E8;
    height: 30px;
    BACKGROUND-COLOR: #CC0000;
    WIDTH: 100%;}

    h1 {PADDING-LEFT: 0em;
    PADDING-RIGHT: 0em;
    PADDING-TOP: 0em;
    PADDING-BOTTOM: 05em;
    BORDER-TOP: 0px solid black;
    BORDER-BOTTOM: 0px solid black;
    MARGIN-TOP: 0em;
    MARGIN-BOTTOM: 0em;
    FONT-family: Arial;
    font-size:8pt;
    COLOR: #E8E8E8;
    BACKGROUND-COLOR: #CC0000;
    WIDTH: 100%;}

    a.left {width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 10;
    padding-right: 0;
    padding-bottom: 1;
    padding-top: 1;
    FONT-family: Arial;
    font-size: 8pt;
    COLOR: #990000;}

    a.left:hover {width: 100%;
    background-color: #858585;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 10;
    padding-right: 0;
    padding-bottom: 1;
    padding-top: 1;
    FONT-family: Arial;
    font-size: 8pt;
    COLOR: #FFFFFF;}
    </style>
    </head>
    <body>
    <table id="lefttable" cellspacing="0" cellpadding="0">
    <tr>
    <td id="header" align="left" valign="middle">
    Poker-resource.com
    </td>
    </tr>
    <td id="links" align="left" valign="middle">
    <p id="leftlinks">
    <a href="#" class="left">Home</a>
    <a href="#" class="left">About us</a>
    <a href="#" class="left">Contact</a>
    <a href="#" class="left">Article Archive</a>
    <a href="#" class="left">etc.</a>
    </p>
    </td>
    </tr>
    <tr>
    <td id="header" align="left" valign="middle">
    Poker-resource.com
    </td>
    </tr>
    <td id="links" align="left" valign="middle">
    <p id="leftlinks">
    <a href="#" class="left">Home</a>
    <a href="#" class="left">About us</a>
    <a href="#" class="left">Contact</a>
    <a href="#" class="left">Article Archive</a>
    <a href="#" class="left">etc.</a>
    </p>
    </td>
    </tr>
    <tr>
    <td id="header" align="left" valign="middle">
    Poker-resource.com
    </td>
    </tr>
    <td id="links" align="left" valign="middle">
    <p id="leftlinks">
    <a href="#" class="left">Home</a>
    <a href="#" class="left">About us</a>
    <a href="#" class="left">Contact</a>
    <a href="#" class="left">Article Archive</a>
    <a href="#" class="left">etc.</a>
    </p>
    </td>
    </tr>
    </table>
    </body></html>

    Copy and save it and try it out if you want.
    tekp :cheeky: tekponline.com

  7. #6
    Senior Member tekp's Avatar
    Join Date
    Jan 2004
    Location
    A small village near a small city near a small cit
    Posts
    918
    Member #
    4667
    Liked
    1 times
    Oh man it messed up all my syntax! it looked so neat as wel... :'(

    lol
    tekp :cheeky: tekponline.com

  8. #7
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    That could have been placed in [code] tags . That wouldn't have messed it up . Looks like it works to me though.
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  9. #8
    Senior Member tekp's Avatar
    Join Date
    Jan 2004
    Location
    A small village near a small city near a small cit
    Posts
    918
    Member #
    4667
    Liked
    1 times
    Oh, oops, i didnt know about those. :S sorry

    tekp
    tekp :cheeky: tekponline.com

  10. #9
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    wow, u didnt have to write all the code. Thank you very much for the help.

    Unfortunately I wont be able to use it however, cuz u see my goal is leave the site laid out and formatted using only CSS, no tables at all. So far it has worked out, except for the bugs i still have to fix in NS, Opera, Mozilla, Firebird. Lol i know thats alot of browsers but it was quite a feat for me just to have a working layout using only CSS/xhtml having only learned CSS a few weeks ago. Hopefully I will be able to work all the kinks out eventually.

    One things for sure though, seperating content from presentation using CSS really does make things A LOT easier when u want to add content or tweak your design. sure beats being restricted to the limited design abilites of table cells.
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  11. #10
    Senior Member tekp's Avatar
    Join Date
    Jan 2004
    Location
    A small village near a small city near a small cit
    Posts
    918
    Member #
    4667
    Liked
    1 times
    Ok, sure thing. It don't matter, gave me something to do :classic:
    tekp :cheeky: tekponline.com


Page 1 of 2 1 2 LastLast

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