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 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navigation Styles for linking problem

    I'm having another problem. I've put my navigation styles to link to their pages. those are fine.

    however, when i place more links in the main body, they pick up the same style as my navigation styles. can you please help me? i've all ready tried to play with the clear. i've included the code below. thank you in advance.

    Code:
    <!DOCTYPE HTML PUBLIC
    "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Little Rangoon</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
            body{
            margin:10px;
            font-family:Verdana, Arial, Helvetica, sans-serif;
            background:url(images/b.jpg);
            padding: 0;
            }
            div#wrapper{
            width:800px;
            height:800px;
            margin-top:5px auto;
            margin-left:160px;    
            border:solid 1px white;
            background:url(images/b1.jpg);
            }
            div#wrapper img{
            position:absolute;
            height:300px;
            width:150px;
            margin-top:0;
            margin-left:-160px;
            z-index:1;
            }
            div#header{
            width:750px;
            height:210px;
            margin-top:2px;
            margin-left:18px;
            border:solid 3px #660000;
            background:url(images/b2.jpg);
            }
            div#header img{
            height:210px;
            width:745px;
            position:absolute;
            margin-top:-1px;
            margin-left:2px;
            z-index:2;
            }
            div#topnav{
            font-family:Helvetica, sans-serif;
            width:750px;
            height:30px;
            background:url(images/navbg.jpg);
            margin-top:-21px;
            margin-left:18px;
            padding-top:5px;
            border:solid 3px #660000;    
            }
            div#topnav ul{
            list-style:none;
            margin-top:0;
            margin-left:20px;
        }   
        div#topnav li{
            display:inline;
            margin-right:55px;
        }
        div#topnav a:link, a:visited{
            text-decoration:none;
            color:black;
            background:url(images/navbg.jpg);
            padding:5px 10px;
            border-left:solid 1px white;
            border-right:solid 1px black;
        }
        div#topnav a:hover{
            text-decoration:none;
            color:black;
            background-color:silver;
            padding:5px 10px;
            border-bottom:solid 2px orange;
        }      
        div#topnav a:active{
            text-decoration:none;
            color:white;
            background-color:silver;
            padding:5px 10px;
            border-bottom:solid 2px orange;
        }       
        div#mwindow{
            clear:both;
            position:absolute;
            margin-top:-25px;
            margin-left:18px;
            width:750px;
            height:510px;
            overflow:auto;
            border:solid 3px #660000;
            background:url(images/b2.jpg);
        }  
        div#mwindow a:link, a:visited, a:hover, a:active{
            clear:both;
            text-decoration:none;
            color:black;
        }
        div#mwindow p{
            clear:both;
            margin:15px;
        }
        div#b{
            position:absolute;
            font-family:Verdana, Arial;
            font-size:x-small;
            margin-top:495px;
            margin-left:0;
        }
        div#b ul{
            list-style:none;
            margin-top:0;
            margin-left:20px;
        }   
        div#b li{
            display:inline;
            margin-right:35px;
        }
    </style>
    </head>
    <body>
    <div id="wrapper"><img src="images/logo.jpg" /><br />
    <div id="header"><img src="images/statue.gif" /></div>
    <p><!--end of header--></p>
    <div id="topnav">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="reviews.html">Reviews</a></li>
    <li><a href="res.html">Reservations</a></li>
    </ul>
    </div>
    <p><!--end of nav--></p>
    <div id="mwindow">
    <p>&gt;Lunch</p>
    <p>&gt;<a href="pdf/dinner.pdf" target="blank">Dinner</a></p>
    <p>&gt;Daily Specials</p>
    <p>&gt;Wine &amp; beer</p>
    <p>&gt;<a href="pdf/desserts.pdf" target="blank">Desserts</a></p>
    </div>
    <p><!--end of mwindow--></p>
    <div id="b">
    <ul>
    <li><span style="font-family: Verdana,Arial; font-size: x-small;">&copy;&nbsp;</span>2009 Little Rangoon</li>
    <li>7000 E. Shea Blvd #1580</li>
    <li>Scottsdale, AZ 85254</li>
    <li>ph 480.922.8585</li>
    </ul>
    </div>
    <p><!--end of b--></p>
    <p><!--end of wrapper--></p>
    </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Bit hard to see without a link to your page, but I think your css is not quite specific enough:

    Code:
        div#topnav a:link, a:visited{
            text-decoration:none;
            color:black;
            background: orange url(images/navbg.jpg);
            padding:5px 10px;
            border-left:solid 1px red;
            border-right:solid 1px red;
        }
    should be:

    Code:
        div#topnav a:link, #topnav a:visited{
            text-decoration:none;
            color:black;
            background: orange url(images/navbg.jpg);
            padding:5px 10px;
            border-left:solid 1px red;
            border-right:solid 1px red;
        }
    (because while you are applying a specific style to a:link in #topnav only, this same style is applied to whole page for a:visited. Similarly

    Code:
        div#mwindow a:link, a:visited, a:hover, a:active{
            clear:both;
            text-decoration:none;
            color:black;
        }
    should be:

    Code:
        div#mwindow a:link, #mwindow a:visited, #mwindow a:hover, #mwindow a:active{
            clear:both;
            text-decoration:none;
            color:black;
        }
    although in fact this could be written more simply as:

    Code:
        div#mwindow a{
            clear:both;
            text-decoration:none;
            color:black;
        }
    Give that a try.

    I'm not quite sure what you meant by trying with clear. Clear is used for clearing floats - but you don't have any floated elements anyway, so this isn't going to have any effect.

    Hope this helps.


  •  

    Posting Permissions

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