944,167 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > make css apply to a chunk of html
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Nov 3rd, 2006
0

make css apply to a chunk of html

Expand Post »
hi all!!

This is my text only back-up menu at the bottom of my page, but the colours from my origional external css sheet look bad on its background, so how do i make them a different colour? Here is the code for the hyperlink:

HTML and CSS Syntax (Toggle Plain Text)
  1. <tr>
  2.     <td>&nbsp;</td>
  3.     <td height="20" class="stylesheet3" valign="bottom" body><div align="center" ><font face="Arial, Helvetica, sans-serif"><a href="<a rel="nofollow" href="http://www.themepics.co.uk/" target="_blank"> http://www.themepics.co.uk/</a> " ><font size="-2"> Home</font> </a> <font size="-2">  
  4.         | <a href="<A href="http://www.themepics.co.uk/gallery">Gallery</a"> http://www.themepics.co.uk/gallery">Gallery</a>  | <a href="<A href="http://www.themepics.co.uk/adobe%20photo%20gallery/adobe_gallery.htm">Adobe">http://www.themepics.co.uk/adobe%20photo%20gallery/adobe_gallery.htm">Adobe 
  5.         Gallery</a> | <a href="<A href="http://www.themepics.co.uk/art-packages"> Art">http://www.themepics.co.uk/art-packages">Art Packages</a>  
  6.         | <a href="<A href="http://www.themepics.co.uk/customise">Customise</a"> http://www.themepics.co.uk/customise">Customise</a>  | <a href="<A href="http://www.themepics.co.uk/buy">Buy</a"> http://www.themepics.co.uk/buy">Buy</a>  
  7.         | <a href="<A href="http://www.themepics.co.uk/process">The">http://www.themepics.co.uk/process">The Process</a> | <a href="<A href="http://www.themepics.co.uk/offers"> Special">http://www.themepics.co.uk/offers">Special 
  8.       Offers</a> </font> </font> </div> </td> 
  9.     <td> &nbsp;</td> 
  10.   </tr>

Here is my css code that i have at the moment:

HTML and CSS Syntax (Toggle Plain Text)
  1. .stylesheet1 {
  2.  font-family: arial;
  3.  font-size: 12px;
  4.  font-style: normal;
  5.  line-height: normal;
  6.  font-variant: normal;
  7.  color: #000000;
  8.  text-align: left;
  9. }
  10. a:link{
  11. color: #990000;
  12. text-decoration: none;
  13. }
  14. a:visited{
  15. color: #AF1E2D;
  16. text-decoration: none;
  17. }
  18. a:hover{
  19. color: #808080;
  20. text-decoration: underline;

and here is how i want the hyperlinks to look like:

HTML and CSS Syntax (Toggle Plain Text)
  1. a:link{
  2. color: #000000;
  3. text-decoration: none;
  4. }
  5. a:visited{
  6. color: #333333;
  7. text-decoration: none;
  8. }
  9. a:hover{
  10. color: #999999;
  11. text-decoration: underline;

Thanks!!!
Reputation Points: 32
Solved Threads: 3
Posting Whiz in Training
MaxMumford is offline Offline
228 posts
since Oct 2006
Permalink
Nov 3rd, 2006
0

Re: make css apply to a chunk of html

CSS:
HTML and CSS Syntax (Toggle Plain Text)
  1.  
  2. a.backup:link{
  3. color: #000000;
  4. text-decoration: none;
  5. }
  6. a.backup:visited{
  7. color: #333333;
  8. text-decoration: none;
  9. }
  10. a.backup:hover{
  11. color: #999999;
  12. text-decoration: underline;
HTML:
HTML and CSS Syntax (Toggle Plain Text)
  1.  
  2.     <td height="20" class="stylesheet3" valign="bottom" body><div align="center" ><font face="Arial, Helvetica, sans-serif"><a class="backup" href="http://www.themepics.co.uk/" ><font size="-2">Home</font></a><font size="-2"> 
  3.         | <a href="<A class="backup" href="http://www.themepics.co.uk/gallery"> Gallery</a">http://www.themepics.co.uk/gallery">Gallery</a> | <a class="backup" href="<A href="http://www.themepics.co.uk/adobe%20photo%20gallery/adobe_gallery.htm"> Adobe">http://www.themepics.co.uk/adobe%20photo%20gallery/adobe_gallery.htm">Adobe 
  4.         Gallery</a>  | <a class="backup" href="<A href="http://www.themepics.co.uk/art-packages">Art">http://www.themepics.co.uk/art-packages">Art Packages</a> 
  5.         | <a href="<A class="backup" href="http://www.themepics.co.uk/customise"> Customise</a">http://www.themepics.co.uk/customise">Customise</a> | <a href="<A class="backup" href="http://www.themepics.co.uk/buy"> Buy</a">http://www.themepics.co.uk/buy">Buy</a> 
  6.         | <a href="<A class="backup" href="http://www.themepics.co.uk/process"> The">http://www.themepics.co.uk/process">The Process</a>  | <a href="<A class="backup" href="http://www.themepics.co.uk/offers">Special">http://www.themepics.co.uk/offers">Special 
  7.       Offers</a></font></font></div></td>
Reputation Points: 15
Solved Threads: 10
Unverified User
BinaryMayhem is offline Offline
173 posts
since Jun 2004
Permalink
Nov 4th, 2006
0

Re: make css apply to a chunk of html

Quote ...
[code<a href="<A class="backup" href="http://www.themepics.co.uk/gallery">[/code]
Ok cos there is a small glitch in the html i put class="backup" after the <a and before the href="... . I pasted the css into my style sheet i was using for the page, which already contains info about how my hyperlinks should be. this is what each of my things look like at the moment:
HTML and CSS Syntax (Toggle Plain Text)
  1. .stylesheet1 {
  2.  font-family: arial;
  3.  font-size: 12px;
  4.  font-style: normal;
  5.  line-height: normal;
  6.  font-variant: normal;
  7.  color: #000000;
  8.  text-align: left;
  9. }
  10. a:link{
  11. color: #990000;
  12. text-decoration: none;
  13. }
  14. a:visited{
  15. color: #AF1E2D;
  16. text-decoration: none;
  17. }
  18. a:hover{
  19. color: #808080;
  20. text-decoration: underline;
  21. a.backup:link{
  22. color: #000000;
  23. text-decoration: none;
  24. }
  25. a.backup:visited{
  26. color: #333333;
  27. text-decoration: none;
  28. }
  29. a.backup:hover{
  30. color: #999999;
  31. text-decoration: underline;
  32. }

HTML and CSS Syntax (Toggle Plain Text)
  1.     <td height="20" class="stylesheet3" valign="bottom" body><div align="center" ><font face="Arial, Helvetica, sans-serif"><a class="backup" href="<a rel="nofollow" href="http://www.themepics.co.uk/" target="_blank"> http://www.themepics.co.uk/</a> " ><font size="-2"> Home</font> </a> <font size="-2">  
  2.         | <a class="backup" href="<A href="http://www.themepics.co.uk/gallery">Gallery</a"> http://www.themepics.co.uk/gallery">Gallery</a>  | <a class="backup" href="<A href="http://www.themepics.co.uk/adobe%20photo%20gallery/adobe_gallery.htm">Adobe">http://www.themepics.co.uk/adobe%20photo%20gallery/adobe_gallery.htm">Adobe 
  3.         Gallery</a> | <a class="backup" href="<A href="http://www.themepics.co.uk/art-packages"> Art">http://www.themepics.co.uk/art-packages">Art Packages</a>  
  4.         | <a class="backup" href="<A href="http://www.themepics.co.uk/customise">Customise</a"> http://www.themepics.co.uk/customise">Customise</a>  | <a class="backup" href="<A href="http://www.themepics.co.uk/buy">Buy</a"> http://www.themepics.co.uk/buy">Buy</a>  
  5.         | <a class="backup" href="<A href="http://www.themepics.co.uk/process">The">http://www.themepics.co.uk/process">The Process</a> | <a class="backup" href="<A href="http://www.themepics.co.uk/offers"> Special">http://www.themepics.co.uk/offers">Special 
  6.       Offers</a> </font> </font> </div> </td>

Thanks again.
Reputation Points: 32
Solved Threads: 3
Posting Whiz in Training
MaxMumford is offline Offline
228 posts
since Oct 2006
Permalink
Nov 4th, 2006
0

Re: make css apply to a chunk of html

hmm, well I quickly edited the code you had and didn't really look at your HTML. it appears you had <A href="<a href="http://...">....</a>... </a>

you should really be neater with your html. also, font tags and tables are depreciated. you should be using all css. font-family:arial; font-size:medium;

any who, here is what you should have. I straigted it up really quick.
HTML and CSS Syntax (Toggle Plain Text)
  1. <td height="20" class="stylesheet3" valign="bottom" body><div align="center" ><font face="Arial, Helvetica, sans-serif">
  2. <a class="backup" href="http://www.themepics.co.uk/" >
  3. <font size="-2">Home</font></a><font size="-2"> 
  4.         | <A class="backup" href="http://www.themepics.co.uk/gallery">Gallery</a"> 
  5.         | <a class="backup" href="http://www.themepics.co.uk/adobe%20photo%20gallery/adobe_gallery.htm"> Adobe Gallery</a> 
  6.         | <A class="backup" href="http://www.themepics.co.uk/art-packages"> Art Packages</a>  
  7.         | <A class="backup" href="http://www.themepics.co.uk/customise"Customise</a> 
  8.         | <A class="backup" href="http://www.themepics.co.uk/buy"> Buy</a>  
  9.         | <A class="backup" href="http://www.themepics.co.uk/process"> The Process</a> 
  10.         | <A class="backup" href="http://www.themepics.co.uk/offers"> Special Offers</a> 
  11. </font> </font> </div> </td>
Reputation Points: 15
Solved Threads: 10
Unverified User
BinaryMayhem is offline Offline
173 posts
since Jun 2004
Permalink
Nov 4th, 2006
0

Re: make css apply to a chunk of html

You mean "deprecated", right? Font tags are. Tables are not. For certain pages/applications, tables are still the best way to control layout. This forum (any forum) for instance, uses CSS extensively, but the overall structure of the site is tabular.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Permalink
Nov 4th, 2006
0

Re: make css apply to a chunk of html

yes, I was mainly referring to the font tags, however; some people make it a habbit to lay a site out with tables when they should be using css.

Quote ...
Tables should be used to mark up truly tabular information ("data tables"). Content developers should avoid using them to lay out pages ("layout tables"). Tables for any use also present special problems to users of screen readers (refer to checkpoint 10.3).

http://www.w3.org/TR/WAI-WEBCONTENT/#gl-table-markup
Reputation Points: 15
Solved Threads: 10
Unverified User
BinaryMayhem is offline Offline
173 posts
since Jun 2004
Permalink
Nov 4th, 2006
0

Re: make css apply to a chunk of html

Click to Expand / Collapse  Quote originally posted by BinaryMayhem ...
yes, I was mainly referring to the font tags, however; some people make it a habbit to lay a site out with tables when they should be using css.
oh well i dont really understand how to layout pages with css. I find tables are good because you can do things like make all text line up or have a pic as a border to a text box etc. Its also nice to use with templates on DWMX cos its very fast to edit.

Do you know of any good sites which can teach me to use css well?

thanks,
Max
Reputation Points: 32
Solved Threads: 3
Posting Whiz in Training
MaxMumford is offline Offline
228 posts
since Oct 2006
Permalink
Nov 4th, 2006
0

Re: make css apply to a chunk of html

your not gona learn css over night. it will take time and experince to understand what is going on. your best off learning from what other peoples work.

here are some quick links.

http://www.glish.com/css/
http://www.tjkdesign.com/articles/on...ss_layouts.asp
http://www.w3schools.com/css/default.asp
http://www.sitepoint.com/subcat/css
http://www.digital-web.com/articles/fluid_thinking/

everthing is working correctly now right?
good luck.
Reputation Points: 15
Solved Threads: 10
Unverified User
BinaryMayhem is offline Offline
173 posts
since Jun 2004
Permalink
Nov 5th, 2006
0

Re: make css apply to a chunk of html

well almost but ill try to learn it and do it myself because i will be able to use it in the future more thanks for your help.

Max.
Reputation Points: 32
Solved Threads: 3
Posting Whiz in Training
MaxMumford is offline Offline
228 posts
since Oct 2006
Permalink
Nov 6th, 2006
0

Re: make css apply to a chunk of html

Click to Expand / Collapse  Quote originally posted by BinaryMayhem ...
yes, I was mainly referring to the font tags, however; some people make it a habbit to lay a site out with tables when they should be using css.
i'm going to absolutely disagree with you (and the w3c/wai) there. content is data; and until there's an effective replacement for tables, there's no way to do certain things without them.

for example, to make a page that fills the horizontal width of a screen always, has blocks of text and fixed sized blocks:

tables expand downwards rather than jump underneath each other, if the text is huge, the table compensates and all other parts of the table reflect that, and they degrade well if you're careful. They separate a page into clear areas, and you know they'll always be in the correct (relative) position, rather than having to "lock" or "push" things into place with css, which imo should be something that other people can change safely without knowing the inner workings of the designer's mind.

EDIT: i gotta add, table cells in xhtml strict/xhtml transitional/html 4 strict/transitional are possibly the only blocks that support vertical-align:center; that's a big thing.

solutions i've seen to split pages up how i'd like with divs/css have tons more markup than solutions with tables and css.

that one line by the wai is somewhat overquoted... the w3c have a good side and a bad side.. the good side provides a wealth of technical information and guidelines, and brings unrelated projects into a cohesion... the bad side trys to promote those guidelines as irrefutable law.
Last edited by MattEvans; Nov 6th, 2006 at 3:15 pm.
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: using html in my welcome email
Next Thread in HTML and CSS Forum Timeline: CSS & menu





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC