Jump to content

CSS & HTML


Recommended Posts

I am having a problem with href link. I did href link using <ul> <li> for my navigation bar menu and it did okay, but when I tried to put href link on the image in table the image mimic the navigation bar menu which I do not want. Please tell me how to fix that.thank youdesperate lady :)

Link to post
Share on other sites

If you use

   a {display:block; height:26px; padding:0 5px; background-color:lime; color: #fff;}   a:hover {background-color: blue;}

ALL anchor links will be targetedif you are using one ul listing within a page you could use

   ul li a {display:block; height:26px; padding:0 5px; background-color:lime; color: #fff;}   ul li a:hover {background-color: blue;}

but if you were to add another ul with any links within the page, you will end up with same problem.The better option is to give the navigation container a id ref so you only target the ul list anchor links within this container only.

   <ul id="nav">   <li><a href="#">mypage</a></li>   ... and so on   </ul>

OR

   <div id="nav">   <ul>	 <li><a href="#">mypage</a></li>	 ... and so on	 </ul>   </div>

and use

   #nav li a {display:block; height:26px; padding:0 5px; background-color:lime; color: #fff;}	 #nav li a:hover {background-color: blue;}

Link to post
Share on other sites

thank you,I should have copy my code that I have typed up. I typed in display:block and still not working. I know I did mine diffrently.mmoore88@cogeco.ca#navcontiner ul{text-align:center;margin-left: 0;padding-left: 0;background:#862419;float:left;width:100%;font-family: arial, helvetica, sans-serif;}#navcontainer ul li {display:block;}#navcontainer a {display:block;float:left;padding: .1em 1em;text-decoration:none;color:white;background:#862419;border-right: 1px solid #fff;}#navcontainer ul li a:hover{display:blockcolor:#862419;background:#d59d46;}</style></head><body><!--top template--><div style="text-align:center"><img src="images/top-template.jpg"> </div><!-- top template end here --><!--stainedglass start here--><div style="text-align:center"><img src="images/stainglass.jpg" width="900" height="81" alt="" /></div><!--stainedglass end here--><table border="0" width="900" cellpadding="6" align="center" bgcolor="#862419"><tr><td></td></tr></table><!menu start here navigation--><div id="navcontainer"><ul> <li><a href="index.html">Home</a></li><li><a href="clergy.html">Clergy</a></li><li><a href="staff.html">Staff</a></li><li><a href="our-story.html">Our Story</a></li><li><a href="lifeandwork.html">Life and Work</a></li><li><a href="committees.html">Committees</a></li><li><a href="bulletin.html">Bulletin</a></li><li><a href="christian-education.html">Christian Education</a></li><li><a href="scrapbook.html">Scrapbook</a></li><li><a href="ministries_groups.html">Ministries and Groups</a></li></ul></div><div id="navcontainer"><!menu navigation end--><br><br><!-- body --> <table align="center"><tr><td><img src="images/front-page.jpg" width="500" height="492" alt="welcome sign" /></td><td> <a href="http://sockscanada.org/" target="_blank"><img src="images/socks.jpg" border="0" width="300" height="221" alt="socks" /></a></td></tr><tr><td></td></tr></table>

Link to post
Share on other sites

<!menu start here navigation--><div id="navcontainer"><ul> <li><a href="index.html">Home</a></li><li><a href="clergy.html">Clergy</a></li><li><a href="staff.html">Staff</a></li><li><a href="our-story.html">Our Story</a></li><li><a href="lifeandwork.html">Life and Work</a></li><li><a href="committees.html">Committees</a></li><li><a href="bulletin.html">Bulletin</a></li><li><a href="christian-education.html">Christian Education</a></li><li><a href="scrapbook.html">Scrapbook</a></li><li><a href="ministries_groups.html">Ministries and Groups</a></li></ul></div><div id="navcontainer"><!menu navigation end-->Is this a typo? the id ref must be unique within a page, also this div does not have a closing </div> tag, which would mean the anchors links in the table would be treated as being within this container, which would cause css styling for #navcontainer a to take effect.

Link to post
Share on other sites
thank you,I should have copy my code that I have typed up. I typed in display:block and still not working. I know I did mine diffrently.mmoore88@cogeco.ca#navcontiner ul{text-align:center;margin-left: 0;padding-left: 0;background:#862419;float:left;width:100%;font-family: arial, helvetica, sans-serif;}#navcontainer ul li {display:block;}#navcontainer a {display:block;float:left;padding: .1em 1em;text-decoration:none;color:white;background:#862419;border-right: 1px solid #fff;}#navcontainer ul li a:hover{display:blockcolor:#862419;background:#d59d46;}</style></head><body><!--top template--><div style="text-align:center"><img src="images/top-template.jpg"> </div><!-- top template end here --><!--stainedglass start here--><div style="text-align:center"><img src="images/stainglass.jpg" width="900" height="81" alt="" /></div><!--stainedglass end here--><table border="0" width="900" cellpadding="6" align="center" bgcolor="#862419"><tr><td></td></tr></table><!menu start here navigation--><div id="navcontainer"><ul> <li><a href="index.html">Home</a></li><li><a href="clergy.html">Clergy</a></li><li><a href="staff.html">Staff</a></li><li><a href="our-story.html">Our Story</a></li><li><a href="lifeandwork.html">Life and Work</a></li><li><a href="committees.html">Committees</a></li><li><a href="bulletin.html">Bulletin</a></li><li><a href="christian-education.html">Christian Education</a></li><li><a href="scrapbook.html">Scrapbook</a></li><li><a href="ministries_groups.html">Ministries and Groups</a></li></ul></div><div id="navcontainer"><!menu navigation end--><br><br><!-- body --> <table align="center"><tr><td><img src="images/front-page.jpg" width="500" height="492" alt="welcome sign" /></td><td> <a href="http://sockscanada.org/" target="_blank"><img src="images/socks.jpg" border="0" width="300" height="221" alt="socks" /></a></td></tr><tr><td></td></tr></table>
Link to post
Share on other sites
thank you,I should have copy my code that I have typed up. I typed in display:block and still not working. I know I did mine diffrently.mmoore88@cogeco.ca#navcontiner ul{text-align:center;margin-left: 0;padding-left: 0;background:#862419;float:left;width:100%;font-family: arial, helvetica, sans-serif;}#navcontainer ul li {display:block;}#navcontainer a {display:block;float:left;padding: .1em 1em;text-decoration:none;color:white;background:#862419;border-right: 1px solid #fff;}#navcontainer ul li a:hover{display:blockcolor:#862419;background:#d59d46;}</style></head><body><!--top template--><div style="text-align:center"><img src="images/top-template.jpg"> </div><!-- top template end here --><!--stainedglass start here--><div style="text-align:center"><img src="images/stainglass.jpg" width="900" height="81" alt="" /></div><!--stainedglass end here--><table border="0" width="900" cellpadding="6" align="center" bgcolor="#862419"><tr><td></td></tr></table><!menu start here navigation--><div id="navcontainer"><ul> <li><a href="index.html">Home</a></li><li><a href="clergy.html">Clergy</a></li><li><a href="staff.html">Staff</a></li><li><a href="our-story.html">Our Story</a></li><li><a href="lifeandwork.html">Life and Work</a></li><li><a href="committees.html">Committees</a></li><li><a href="bulletin.html">Bulletin</a></li><li><a href="christian-education.html">Christian Education</a></li><li><a href="scrapbook.html">Scrapbook</a></li><li><a href="ministries_groups.html">Ministries and Groups</a></li></ul></div><div id="navcontainer"><!menu navigation end--><br><br><!-- body --> <table align="center"><tr><td><img src="images/front-page.jpg" width="500" height="492" alt="welcome sign" /></td><td> <a href="http://sockscanada.org/" target="_blank"><img src="images/socks.jpg" border="0" width="300" height="221" alt="socks" /></a></td></tr><tr><td></td></tr></table>
Link to post
Share on other sites

Thank you,I took off the <div id="navcontainer"> that has no closing tag and it works. Thank you so much. Can I use you if I have another problems? :)

Link to post
Share on other sites
Thank you,I took off the <div id="navcontainer"> that has no closing tag and it works. Thank you so much. Can I use you if I have another problems? :)
It would probably be best to post the problem, as I may not be available to help, theres plenty of people here to give you advice and put you right.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...