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 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2011
    Location
    Raleigh, NC
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    HREF issues in CSS and HTML

    I'm trying to create a table with clickable images but every time I put the <a href...> element in it, it's pulling the formatting from the nav bar. Is there an easy way to separate the nav bar href and the table images href? Here is the code for both the HTML and CSS:

    Code:
    h1 {font-family: Adobe Garamond Pro Bold; color:#610B0B;}
    
    hr {color:#000000; background-color:#000000; width:100%; height:4px;}
    
    body {margin-left:120px; margin-right:120px; background-color: #4682b4; font-family: 
    
    Adobe Garamond Pro; color:#3B0B39}
    
    .inlinetext1 {text-align: center; margin-left: auto; margin-right: auto; font-size: 
    
    1.0em;}
    
    ul{list-style-type: none; margin-left: auto; margin-right: auto; width: 30em; 
    
    padding:4px; overflow:hidden;}
    
    li{float:left;}
    
    a:link,a:visited
    
    {width:110px; font-weight:regular; color:#000000; background-color:#C4106A; text-
    
    lign: center; padding: 20px; text-decoration: none;}
    
    a:hover
    
    {background-color:#7A991A;}
    Code:
     
    <link rel="stylesheet" type="text/cs" href="portfolio.css"
    >
    
    
    </style>
    
    </head>
    
    <body>
    
    <h1><img src="windowspiratedversion.jpg" alt="logo" width="325" height="175" />Brett 
    
    Ryan's Portfolio
    
    <hr />
    
    <ul id="list-nav">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="graphics.html">Designs</a></li>
    <li><a href="#">Web Sites</a></li>
    <li><a href="#">Resume</a></li>
    <li><a href="#">References</a></li>
    </ul>
    
    </h1>
    
    <h2>Here are just a few of the designs I have created using Adobe Photoshop and 
    
    Adobe Illustrator.</h2>
    
    
    <table width="735" border="0" cellspacing="30px";>
    <tr><td><a href="spacecolor.jpg"><img width="200" height="150" src="spacecolor.jpg" 
    
    alt="Colors of Space"</a></td>
    <td><img width="200" height="150" src="commonsense2.jpg" alt="Common Sense"</td>
    <td><img width="200" height="150" src="deadfrog.jpg" alt="Dead Frog"</td>
    <td><img width="200" height="150" src="swordplay.jpg" alt="Swordplay"</td>
    <td><img width="200" height="150" src="eyenumbing.jpg" alt="Eye Numbing"</td></tr>
    <tr>
    <td><img width="200" height="150" src="habitat.jpg" alt="Habitat for Humanity"</td>
    <td><img width="200" height="150" src="texturestar.jpg" alt="Textured Star"</td>
    <td><img width="100" height="200" src="winelabel2.jpg" alt="Wine Label"</td>
    </tr>
    </table>
    And yes, I am very much a noob at this!

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,229
    Thanks
    10
    Thanked 270 Times in 269 Posts
    Since you've named your nav bar "list-nav" you could narrow your css definitions to just that nav bar via:
    Code:
    #list-nav a:link,#list-nav a:visited
    {width:110px; font-weight:regular; color:#000000; background-color:#C4106A; text-align: center; padding: 20px; text-decoration: none;}
    #list-nav a:hover {background-color:#7A991A;}
    That way, any other anchor tags (like the ones in your table) won't be affected, and could be styled in some other way if you like.

    Dave

  • #3
    New Coder
    Join Date
    Apr 2011
    Location
    Raleigh, NC
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you Dave! That worked perfectly!! Greatly appreciated!!


  •  

    Posting Permissions

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