Announcement

Collapse
No announcement yet.

Help me nail my CSS problem for ever!!!

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    Help me nail my CSS problem for ever!!!

    OK folks, I know we've been here before but I'm going to ask one more time in case the penny drops by re-wording my dilemma!


    I've created a home page. On the left I want all my side menu links. At the bottom of the page I want a greyed out smaller version of the side menu.

    How should I go about creating two different style sheets which will show my side menu as Arial Blk size 12 with a possible link rollover colour or line on mouse over....

    And

    another CSS which is linked to my smaller menu Arial Grey size 8 with a possible link rollover colour or line on mouse over.

    Thank you
    Tags: None
    #2
    Dont use 2 CSS files, but add to the single CSS file... eg:

    .NormalText {
    font-family: Arial;
    font-size: 12pt;
    }

    .OtherText {
    font-family: Arial;
    font-size: 8pt;
    }

    use colours as you see fit within the { } as per normal css guidelines and then either encase your links in <span class="NormalText"> or call your class for the href by the name...

    Should get you on the right track...

    Comment

      #3
      To go one stage further, we have 3 different types of links on our homepage (not an Actinic site www.shiver-solutions.co.uk), for this you will be best off using Pseudo Classes on the A tag in your style sheet.

      All this means is that you can give different links a different .class in your style sheet.

      eg

      a:link {
      text-decoration: none;
      color:#0000FF;
      }

      a:visited {
      text-decoration: none;
      color:#0000EE;
      }

      a:hover {
      color: black;
      background: #E9E9F8;
      }

      a:active {
      color: black;
      background: #E9E9F8;
      }

      a.menu:link {
      letter-spacing: 1px;
      color: white;
      font-size: 8pt;
      padding: 2px;
      text-transform:uppercase;
      font-weight: bold
      }

      a.menu:visited {
      letter-spacing: 1px;
      font-size: 8pt;
      color: white;
      padding: 2px;
      text-transform:uppercase;
      font-weight: bold
      }

      a.menu:hover {
      letter-spacing: 1px;
      color: #696969;
      font-size: 8pt;
      background: white;
      padding: 2px;
      font-weight: bold;
      text-transform:uppercase;
      text-decoration: underline;
      }

      a.menu:active {
      letter-spacing: 1px;
      color: red;
      padding: 2px;
      font-weight: bold;
      text-transform:uppercase;
      text-decoration: underline;
      }

      a.sphere:link {
      letter-spacing: 1px;
      font-size: 9pt;
      background-image: url(/images/sphere.gif);
      background-repeat: no-repeat;
      background-position: left;
      padding-left: 10px;
      margin-left: 10px;
      }

      a.sphere:visited {
      letter-spacing: 1px;
      font-size: 9pt;
      color: #0000DD;
      background-image: url(/images/sphere-rovisited.gif);
      background-repeat: no-repeat;
      background-position: left;
      padding-left: 10px;
      margin-left: 10px;
      }

      a.sphere:hover {
      letter-spacing: 1px;
      font-size: 9pt;
      background: transparent;
      background-image: url(/images/sphere-ro.gif);
      background-repeat: no-repeat;
      background-position: left;
      padding-left: 20px;
      margin-left: 10px;
      }

      a.sphere:active {
      letter-spacing: 1px;
      color: red;
      background-image: url(/images/sphere.gif);
      background-repeat: no-repeat;
      background-position: left;
      padding-left: 10px;
      margin-left: 10px;
      }

      I've left the full code in place in case you want to use it.

      This would mean you could have;

      a:link {}
      for your normal in page links

      a.menuleft:link {}
      for you left menu

      a.menubottom:link {}
      for your botom menu

      They can all be styled completely independently.
      Justin Rowe
      Shiver

      Comment

        #4
        Thank you will try the above out.

        Smudgie.

        Comment

          #5
          Same problem...

          We're also trying to alter the css to make the navigation links change to a different colour and not become underlined. We have fiddled around with the actinic.css file and tried to apply the code you listed in your post above:

          .actxxsmall{
          font-size:9px;
          color:#000000;
          }
          a.actxxsmall:link{
          color:#003366;
          font-size:10px;
          text-decoration:none;
          }

          a.actxxsmall:visited{
          color:#003366;
          font-size:10px;
          text-decoration:none;
          }

          a.actxxsmall:hover{
          color:#FF6600;
          font-size:10px;
          text-decoration:underline;
          }

          a.actxxsmall:active{
          color:#003366;
          font-size:10px;
          text-decoration:none;
          }

          -we just wanted to try to get the links to look different to start with - we haven't put in the proper colours yet.

          Any ideas?

          Thanks,

          D

          Comment

            #6
            Hmmm... you need to start again from an original CSS file as the changes you have made so far will be counterproductive. You can get an original actinic.css file from '/Formats/themes/Layout1' on your PC. Copy this into your 'Site1' folder.

            Locate the following lines:
            Code:
            a:link{
color:NETQUOTEVAR:LINKCOLORCSS;
font-size:x-small;
text-decoration:none;
}

a:visited{
color:NETQUOTEVAR:VLINKCOLORCSS;
font-size:x-small;
text-decoration:none;
}

a:hover{
color:NETQUOTEVAR:HLINKCOLORCSS;
font-size:x-small;
text-decoration:underline;
}

a:active{
color:NETQUOTEVAR:ALINKCOLORCSS;
font-size:x-small;
text-decoration:none;
}
            Underneath them, enter the following code:
            Code:
            a.nav:link{
color:NETQUOTEVAR:LINKCOLORCSS;
font-size:xx-small;
text-decoration:none;
}

a.nav:visited{
color:NETQUOTEVAR:VLINKCOLORCSS;
font-size:xx-small;
text-decoration:none;
}

a.nav:hover{
color:NETQUOTEVAR:HLINKCOLORCSS;
font-size:xx-small;
text-decoration:none;
}

a.nav:active{
color:NETQUOTEVAR:ALINKCOLORCSS;
font-size:xx-small;
text-decoration:none;
}
            Then open Act_NavigationItem.html and locate the line:
            Code:
            <A HREF="NETQUOTEVAR:NAVLINK" TARGET="NETQUOTEVAR:NAVTARGET" NETQUOTEVAR:MOUSEOVERCALL><span class="actxxsmall"><b>NETQUOTEVAR:NAVTEXT</b></span></A>
            Change it to read:
            Code:
            <A HREF="NETQUOTEVAR:NAVLINK" TARGET="NETQUOTEVAR:NAVTARGET" NETQUOTEVAR:MOUSEOVERCALL class="nav"><b>NETQUOTEVAR:NAVTEXT</b></A>
            That should do it.

            Comment

              #7
              Still having trouble with getting the navbar to work

              Hi there

              Im still having trouble getting my nav bar to do the rollovers properly heres is the code if anyone can help?


              /*cope with inheritance bugs*/
              body, table, th, td{
              color:#000000;
              font-size:10px;
              font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
              }

              /*body specific*/
              body{
              background-image:url(background1.gif);
              margin-top:0px;
              margin-right:0px;
              margin-bottom:0px;
              margin-left:0px;
              }

              form{
              margin-top:0px;
              margin-right:0px;
              margin-bottom:0px;
              margin-left:0px;
              }



              a:link{
              color:#003366;
              font-size:10px;
              text-decoration:none;
              }

              a:visited{
              color:#003366;
              font-size:10px;
              text-decoration:none;
              }

              a:hover{
              color:#FF6600;
              font-size:10px;
              text-decoration:underline;
              }

              a:active{
              color:#003366;
              font-size:10px;
              text-decoration:none;
              }

              li{
              color:#000000;
              list-style-type:square;
              }

              ol{
              color:#000000;
              }

              ul{
              color:#000000;
              list-style-type:square;
              }

              H1, H2, H4, H5, H6 {
              font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
              }

              H3{
              font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
              font-size:12px
              }

              .actCHECKOUTEM {background-color:#003366;}
              .actCHECKOUTBG {background-color:#eeeeee;}

              .topnav {
              font-size: 9px;
              color: #FFFFFF;
              font-family: Verdana, Arial, Helvetica, sans-serif;
              border-top-width: 0px;
              border-right-width: 0px;
              border-bottom-width: 0px;
              border-left-width: 0px;
              }
              .topnav a:link {
              color: #FFFFFF;
              text-decoration: none;
              }
              .topnav a:visited {
              color: #FFFFFF;
              text-decoration: none;
              }
              .topnav a:hover {
              color: #FF6600;
              text-decoration: none;
              }
              .topnav a:active {
              color: #FFFFFF;
              text-decoration: none;
              }

              .actlarger{
              font-size: larger;
              color:#000000;
              }

              .actsmaller{
              font-size: smaller;
              color:#000000;
              }

              .actxxsmall{
              font-size:9px;
              color:#ff0000;
              }



              .actxsmall{
              font-size:10px;
              color:#000000;
              }

              .actsmall{
              font-size:10px;
              color:#000000;
              }

              .actregular{
              font-size:12px;
              color:#000000;
              }

              .actlarge{
              font-size:14px;
              color:#000000;
              }

              .actxlarge{
              font-size:16px;
              color:#000000;
              }

              .actxxlarge{
              font-size:18px;
              color:#000000;
              }

              .actwarningcolor{color:#ff3300;}
              .actrequiredcolor{color:#ff3300;}
              .actsearchhighlightcolor{color:#ff6600;}
              .actrequired{color:#ff3300;}
              .actwarning{color:#ff3300;}
              .actwelcome{color:#000000;}

              .actlogotext {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: x-small; color: #D9090E; font-style: normal; font-weight: bold; text-align: center}
              .actlogout{font-size:10px;}

              .thinborder {
              border-top-width: 0px;
              border-right-width: 1px;
              border-bottom-width: 1px;
              border-left-width: 1px;
              border-top-style: solid;
              border-right-style: solid;
              border-bottom-style: solid;
              border-left-style: solid;
              border-top-color: #ffffff;
              border-right-color: #999999;
              border-bottom-color: #999999;
              border-left-color: #999999;
              }

              .thinred {
              border-right-width: 1px;
              border-bottom-width: 1px;
              border-left-width: 1px;
              border-right-style: solid;
              border-bottom-style: solid;
              border-left-style: solid;
              border-top-color: #ffffff;
              border-right-color: #003366;
              border-bottom-color: #003366;
              border-left-color: #003366;
              }

              .thinred2 {
              border-right-width: 1px;
              border-bottom-width: 1px;
              border-left-width: 1px;
              border-right-style: solid;
              border-bottom-style: solid;
              border-left-style: solid;
              border-top-color: #ffffff;
              border-right-color: #003366;
              border-bottom-color: #003366;
              border-left-color: #003366;
              }

              .actsmallheading {
              font-size:10px;
              color:#ffffff;
              font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
              text-transform: uppercase;
              }


              As you can see there is no way of telling which section controls the navigation bar text, we know that when viewing the code each navigation item has actxxsmall class.

              Thanks in advance

              D


              Website in question

              Comment

                #8
                Your CSS seems to work perfectly - in that your links at the bottom of the page (which are in cells with a class of 'topnav') turn orange and do not underline. I'm guessing you have fixed it today.

                Comment

                Previous template Next
                Working...
                X