www.webdeveloper.com
Results 1 to 1 of 1

Thread: [RESOLVED] CSS screw up

  1. #1
    Join Date
    Nov 2011
    Posts
    149

    resolved [RESOLVED] CSS screw up

    I have this site that has three page styles. On my second style. I have white text on black background. Some of the links are orange and I want them to be like the others, a kind of yellow. How can I change this?


    http://www.cjwebconsulting.com/new/index.html



    Code:
    /* --- style sheet AAC --- */
    
    /* --- colours
    	   Dark Blue  #1E2159  
    	   Medium Grey #666666
    	   Medium Blue  #000999
    	   Bright Blue  #000fff
    	   Light Purple  #6367A6
    	   Pale Yellow  #ffffcc
    	   Dark Orange  #cc3300
    	   Light Peach  #ffe5b2
    	   Light Grey  #cccccc
    	   Black  #000000
    	   White #fff
    		--- */
    
    body {
    	height:100%;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #000;
    	font-size: 110%;
    	line-height: 1.5;
    }
    
    p  {
    	margin: 0; 
    	padding: 0;
    	text-align: left; 
    	color: #000;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 110%;
    	line-height: 1.5;
    }
    
    #outerDiv {
    	position: relative;
    	background: #ffe5b2;
    	margin: -10px;
    	padding: 0px;
    	border: 0;
    	text-align: left;
    	height: 100%;
    	min-width: 800px;
    	max-width: 1300px;
    }
    
    #header {
    	padding: 0px;
    	margin: 0px;
    	background: #fff;
    	background-image: url(../images11/logo_bridge3.jpg) no-repeat left top;
    	height: 156px;
    }
    
    
    #mainContent {
    	vertical-align: top;
    	left: 10px;
    	margin: 0 0 0 300px;
    	background: #ffffcc;
    	border-left: 3px;
    	border-left-color: #666666;
    	border-left-style: solid;
    	padding: 12px 12px 0 12px;
    	line-height: 1.5;
    }
    
    
    
    
    /* --- floats --- */
    
    .floatRight {
    	float: right;
    	margin-left: 8px;
    }
    
    .floatLeft { 
    	float: left;
    	margin-right: 8px;
    }
    
    .clearfloat { 
    	clear: both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    
    /* --- fonts --- */
    
    
    h1, h2, h3, h4, h5, h6, p {
    	margin-top: 0px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    h1 {
    	font-size: 170%;
    	font-weight: bold;
    	color: #000;
    	margin-bottom: .5em;
    }
    
    h2 {
    	font-size: 120%;
    	font-weight: bold;
    	text-transform: uppercase;
    	color: #000;
    	text-decoration: none;
    	margin-bottom: 0.3em;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #999;
    	padding-bottom: .2em;
    }
    
    h3 {
    	font-size: 110%;
    	color: #000;
    	font-weight: normal;
    	font-family: Verdana, Geneva, sans-serif;
    	padding-left: 8em;
    }
    
    h4 {
    	font-size: 100%;
    	font-weight: normal;
    	color: #000;
    	text-decoration: none;
    	margin-bottom: 0;
    	padding-bottom: 0;
    	line-height: 1.5;
    }
    
    
    h5 {
    	text-indent: -9999px;
    }
    	
    h6 {
    	font-size: 90%;
    	color: #000;
    	font-weight: normal;
    	font-family: Verdana, Geneva, sans-serif;
    	padding-left: 8em;
    }
    
    .largerText  {
       font-size:18px;
    }
    
    .offleft {
    	margin-left: -9000px;
    	position: absolute;
    }
    
    
    /* --- main navigation --- */
    
    #mainNav {
    	background: #1E2159;
    	position: relative;
    	width: 100%;
    	margin: 0;
    	padding: 0;
    }
    
    #mainNav ul {
    	background: #1E2159;
    	margin: 0;
    	padding: 0;
    	List-style: none;
    	float: left;
    }
    #mainNav li {
    	float: left;
    }
    
    #mainNav li a {
    	background: #1E2159;
    	padding: .3em .5em;
    	display: block;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 150%;
    	font-weight: bold;
    	color: #fff;
    	text-decoration: none;
    	line-height: 1.2em;
    	margin-right: 1em;
    }
    
    #mainNav li a:hover {
    	color: #fff;
    	background: #cc3300;
    }
    
    #member {
    	float: left;
    	background-color: #000;
    	margin-right: 0.7em;
    	padding-bottom: none;
        border: 2px solid #000;
    }
    
    
    #mainNav a:hover, #mainNav a:focus, #mainNav a:active {
    	background-color: #000000;
    }
    
    
    /* --- links --- */
    
    a:link {
    	text-decoration: none;
    	font-weight: bold;
    	color: #cc3300;
    }
    
    a:visited {
    	text-decoration: none;
    	font-weight: bold;
    	color: #cc3300;
    }
    
    a:hover {
    	text-decoration: none;
    	font-weight: bold;
    	color: #000;
    }
    
    a:active {
    	text-decoration: none;
    	font-weight: bold;
    	color: #000;
    }
    
    div#skipLinks {
    	margin: 0px;
    	position: absolute;
    	float: left;
    }
    
    .mainImg {
    	border: thin solid #000;
    }
    
    .img {
    	border: 3px solid #333; /* --- image border --- */
    }
    
    
    /* --- font size --- */
    
    #font {
    	margin: 0;
    	padding: 20px;	
    }
    
    #font ul {
    	float: left;
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    
    #font li {
    	float: left;
    	margin: 0;
    	padding: 0;
    }
    
    #font li a {
    	display: block;
    	float: left;
    	height: 80px;
    	width: 80px;
    	background: url(fontsonly_sprite.png)  no-repeat left top;
    }
    
    
    /* --- font size icons --- */
    
    #font li#fontUp a { background-position: 0px 0px;}
    #font li#fontDown a { background-position: 0px -100px;}
    
    
    #font li#fontUp a:hover { background-position: -100px 0px;}
    #font li#fontDown a:hover { background-position: -100px -100px;}
    
    
    
    
    /* --- page contrast --- */
    
    #page {
    	float: left;
    	margin: 0;
    	padding: 20px;
    }
    
    #page ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    
    #page li {
    	float: left;
    	margin: 0;
    	padding: 0;
    }
    
    #page li a {
    	display: block;
    	float: left;
    	height: 80px;
    	width: 80px;
    	background: url(PageStyle_sprite.png) no-repeat left top;
    }
    
    
    /* --- page contrast icons --- */
    
    #page li#default a { background-position: 0px 0px;}
    #page li#WB a { background-position: 0px -100px;}
    #page li#bw a { background-position: 0px -200px;}
    
    #page li#default a:hover { background-position: -100px 0px;}
    #page li#WB a:hover { background-position: -100px -100px;}
    #page li#bw a:hover { background-position: -100px -200px;
    }
    
    
    /* --- sidebar --- */
    
    #sideBar1 {
    	float: left;
    	/* background-color: #ffe5b2; <== remove this line */
    	top: 234px;
    	left: 0px;
    	width: 280px;
    	height:100%;
    	margin: 0;
    	padding: 0;
    }
    
    
    #sidebar {
    	/* background-color: #ffe5b2; <== me too */
    	float: left;
    	width: 280px;
    	margin: 0;
    	padding: 0;
    }
    
    
    #sidemenu {
    	float: left;
    	padding: 0;
    	margin: 0;
    	width: 280px;
    }
    
    #sidemenu ul {
    	list-style: none;
    	padding: 20px;
    	margin: 0;
    }
    
    
    /* --- footer --- */
    
    
    #footer {
    	position: relative;
    	clear: both;
    	padding: 12px;
    	background-color: #cccccc;
    	margin: 0;
    	text-align: center;
    }
    
    
    p.clear {
    	clear: both;
    }
    
    
      .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }
        
    
    
    /* Dynamic Layout based on the <body> class */
    body.orange #outerDiv {background-color:#FFE5B2;}
    body.orange #mainContent {
      background-color:#FFFFCC;   
    }
    
    body.black #outerDiv {background-color:black;}
    body.black #mainContent {
      background-color:#000;
      border-color:#666;
      color:white; /* <== I'm here! */    
    }
    
    body.white #outerDiv {background-color:white;}
    body.white #mainContent {
      background-color:#EEE;  
    }
    
    
    
    body.black p  {color:white;}
    body.black h1 {color: #ffff99;}   /* --- heading 1 colour --- */
    body.black h2 {color: #ffcc33;}  /* --- heading 2 colour --- */
    body.black a:link {collor: #ffcc33;} /* --- link colour --- */
    body.black a:visited {color: #cc3300;}
    body.black a:hover {color: #ffffcc;} /* --- hover colour --- */
    body.black a:active {color: #000;}
    Last edited by Maxxxx; 03-21-2012 at 09:12 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles