SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru wild boar's Avatar
    Join Date
    Aug 2003
    Location
    illinois
    Posts
    793
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    i hate netscape.. net help

    ok, if you take a look at www.illinoiswinecellar.com/shop/customer in
    microsoft explorer.. it looks the way I want it.. now if you look at it in netscape then the top nav bar colors and stuff aren't working..

    What am I doing wrong? I'm learning css.. so theres probably a ton of bugs in my .css file..


    I'm having the same problems with another site I am designing..

    is this the correct way to use css on fonts that you want a diff color then the rest of the page



    Code:
    <font class="nav"><a href=""></a></font>

  2. #2
    011521 dbalsdon's Avatar
    Join Date
    Feb 2003
    Location
    North Of Scotland
    Posts
    444
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you should try to use the <span>, <p> or <div> tags if you want to apply CSS to some text...

    Code:
    <span class="nav"><a href=""></a></span>
    Daniel Balsdon
    My Site

  3. #3
    011521 dbalsdon's Avatar
    Join Date
    Feb 2003
    Location
    North Of Scotland
    Posts
    444
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you are just wanting ALL your links to be a different colour.. then you should add the following code to an external stylesheet..

    a { color: blah; }
    a:active { color: blah; }
    a:visited { color: blah; }
    a:hover { color: blah; }
    Daniel Balsdon
    My Site

  4. #4
    SitePoint Guru wild boar's Avatar
    Join Date
    Aug 2003
    Location
    illinois
    Posts
    793
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the page I'm working on -
    http://www.hardincountyil.org/index12.htm

    I changed the code to span istead of font on the page..

    I still have viewing problems with netscape..

    Here is my styles.css file.. it's probably all screwed up.. I dunno.. never made one before.. thanks for your help

    Code:
    
    BODY,P,DIV,TH,TD,P,INPUT,SELECT,TEXTAREA {
            FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif; 
            COLOR: #000000; FONT-SIZE: 10px;
    }
    A:link {
            COLOR: #372EB4; TEXT-DECORATION: none;
    }
    A:visited {
            COLOR: #372EB4; TEXT-DECORATION: none;
    }
    A:hover {
            COLOR: #372EB4; TEXT-DECORATION: underline;
    }
    A:active  {
            COLOR: #372EB4; TEXT-DECORATION: none;
    }
    H1 {
            FONT-SIZE: 15px;
    }
    H2 {
            FONT-SIZE: 13px;
    }
    H3 {
            FONT-SIZE: 12px;
    }
    HR {
            COLOR: #DDDDDD; HEIGHT: 1px;
    }
    BODY { 
            BACKGROUND-COLOR: #FFFFFF;
    
    .nav { font-size: 10 px; color: #FFFFFF; font-family: Arial; text-decoration:none; }
    .nav a:link  { color: #FFFFFF; font-family: Arial; text-decoration:none; }
    .nav a:visited  { color: #FFFFFF; font-family: Arial; text-decoration:none; }
    .nav a:hover  { color:#FFFFFF; font-family: Arial; text-decoration: underline; }
    .nav a:active  { color:#FFFFFF; font-family: Arial; text-decoration:none; }
    
    }
    .SubTitle {
            COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-STYLE: italic; FONT-SIZE: 16px; FONT-FAMILY: Serif;
    }
    .FootText {
            COLOR: #FFFFFF; FONT-SIZE: 10px; FONT-FAMILY: Arial;
    }

  5. #5
    SitePoint Guru wild boar's Avatar
    Join Date
    Aug 2003
    Location
    illinois
    Posts
    793
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    forgot to say, I want the text on the navigation bar on the right white, white underline when hoover, white text on footer (same as navigation bar) and in the body the text should be black with blue hyper links..

    It looks perfect in microsoft.. but netscape it's all screwed up.. I know it's my css file.. I think

  6. #6
    SitePoint Guru wild boar's Avatar
    Join Date
    Aug 2003
    Location
    illinois
    Posts
    793
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, ignore all of that, I have it figured out with a few exceptions..


    I changed my .css code to this -

    Code:
    BODY,P,DIV,TH,TD,P,INPUT,SELECT,TEXTAREA {
            FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif; 
            COLOR: #000000; FONT-SIZE: 10px;
    }
    A:link {
            COLOR: #ffffff; TEXT-DECORATION: none;
    }
    A:visited {
            COLOR: #ffffff; TEXT-DECORATION: none;
    }
    A:hover {
            COLOR: #ffffff; TEXT-DECORATION: underline;
    }
    A:active  {
            COLOR: #ffffff; TEXT-DECORATION: none;
    }
    H1 {
            FONT-SIZE: 15px;
    }
    H2 {
            FONT-SIZE: 13px;
    }
    H3 {
            FONT-SIZE: 12px;
    }
    HR {
            COLOR: #DDDDDD; HEIGHT: 1px;
    }
    BODY { 
            BACKGROUND-COLOR: #FFFFFF;
    }
    .nav {
            COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-SIZE: 10px; FONT-FAMILY: Arial;
    }
    .SubTitle {
            COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-STYLE: italic; FONT-SIZE: 16px; FONT-FAMILY: Serif;
    }
    .FootText {
            COLOR: #FFFFFF; FONT-SIZE: 10px; FONT-FAMILY: Arial;
    }
    .WelcomeText {
            COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-STYLE: italic; FONT-SIZE: 12px; FONT-FAMILY: Arial;
    }

    Now how would I go about doing something like this
    instead of A: link I would have another section called B: Link b: visited and so on, let's say I want foottext to go with b link's.. how do I do this?

    and how do I make a standard text and colors for text that I don't assign a class to?

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Germany
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To have links with a different formatting, you should go the way of assigning these links to a special class for example. In your HTML this would look like:
    <a href="link.html" class="differentstyle">This is a link</a>

    The CSS counterpart would then be:
    a.differentstyle:link {
    color:#000000;
    }

    Similar for visited links etc.


    The standard formatting for all not further specified text would be your declaration for BODY, the way you already have it in your CSS.


    Hope this helps.

  8. #8
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    get rid of the span on the links and put the class in the <a> tag
    add a doctype...
    do some css tutorials,
    your code isn't too bad, but you are making lotsa newb mistakes that will cause you pain, and can be quickly learnt about...

  9. #9
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ALternitively if you want the links in a particular section to be different just address that section.

    So to get different links in the main body and the footer of this code
    HTML Code:
    <body>
    <div id="Content">
     <a href='...'>Link 1</a>
     <a href='...'>Link 2</a>
     etc 
    </div>
    <div id='Footer'>
     <a href='...'>Footer Link 1</a>
     <a href='...'>Footer Link 2</a>
    </div>
    </body>
    You'd use CSS similar to

    HTML Code:
    <style>
    #Content {
      content text style attributes here
    }
    
    #Content a:link {
      content link attributes
    }
    
    #Content a:visited {
      content visited link attributes
    }
    
    #Content a:active {
      content active link attributes
    }
    
    #Content a:hover {
      content hovered link attributes
    }
    
    #Footer {
      footer text style attributes here
    }
    
    #Footer a:link {
      footer link attributes
    }
    
    #Footer a:visited {
      footer visited link attributes
    }
    
    #Footer a:active {
      footer active link attributes
    }
    
    #Footer a:hover {
      footer hovered link attributes
    }
    </style>
    You need to learn about selectors, I am using inheritance selectors here (which work on most(all) CSS platforms). Also note that the top level of my html is spliting the page into it's semantic components i.e. the content and the footer which I then apply styles to to get the appearance that I want.

    Also no one seems to have mentioned that the font tag is depricated (i.e. they are encouraging you NOT to use it) which is why you should not be using it. You can apply you text styles to any tag that happens to be handy although most usually that will be div, p, span or a, possible td and th if you are still using tables for layout (but that is also being discouraged).

    You should not need to add extra tags to get your text styles unless they change (i.e. if you want 1 word red in a paragraph of blue text then that word will need to be inside an extra set of tags, possibly span).

    The :link, :visited, :active and :hover pseudo tags can only be used on the a tag as this is the only tag that defines a link.

    CSS is about having html mark in a semantic scheme rather than a visual scheme, i.e. you mark sections by what they are rather than how you want them to look. You then use CSS to apply a certain look and positioning to each part of the document. For this reason the semantic tags <strong> and <em> (emphysis) are encourged over the visual tags <b> and <i>. <strong> and <em> will mean more to say a text reader than <b> and <i> making your content maintain it's meaning better.

  10. #10
    SitePoint Guru wild boar's Avatar
    Join Date
    Aug 2003
    Location
    illinois
    Posts
    793
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys for the help, I haven't had time to read the posts, but I will later tonight.. I'll read them and work it all out.

    I guess It's time to learn css.. instead of <font color=#ffffff> lol

    it's a hard habbit to get out of isn't it?

    heck, i'm trying to quit smoking this week too!


Bookmarks

Posting Permissions

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