Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Font not working with CSS

    I am trying to change my font but it seems like any changes I make to change the font color and text has no effect on what it looks like on the page. I also want to change the height of the header.
    I want to make the steinem font size 18, and I want the #E2E2E2.

    http://campustaps.com/NEW/Lq.html

    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CampusTaps.com</title>
    <link rel="stylesheet" href="LiquorPrices.css" type="text/css" />
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript"
    src="http://campustapscom.ipage.com/jquery.flow.1.2.auto.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#myController").jFlow({
    slides: "#slides",
    controller: ".jFlowControl", // must be class, use . sign
    slideWrapper : "#jFlowSlide", // must be id, use # sign
    selectedWrapper: "jFlowSelected", // just pure text, no sign
    auto: true, //auto change slide, default true
    width: "610px",
    height: "235px",
    duration: 400,
    prev: ".jFlowPrev", // must be class, use . sign
    next: ".jFlowNext" // must be class, use . sign
    });
    });
    </script>
    
    <!--CONTENT SLIDER-->
    
    </head>
    <body>
    <!--CONTAINER STARTS-->
    <div id="container"> 
    	<!--HEADER/NAVIGATION STARTS-->
     
    	<div id="top"> 
    		<!--WEBSITE TITLE STARTS-->
    		<div id="title">
    			<h1><a href="####" title=""></a></h1>
    		</div>
    		<!--WEBSITE TITLE ENDS--> 
    		<!--NAVIGATION STARTS-->
    		<div id="nav">
    			<ul class="nav-links">
    				<li><a href="#####" title="Home">Home</a></li>
    				<li><a href="#####" title="L P">LP</a></li>
    				<li><a href="######" title="Car">C B</a></li>
    				<li class="borderx2"><a href="#####" title="Contact">ntact</a></li>
    			</ul>
    		</div>
    		
    		<!--NAVIGATION ENDS--> 
    	</div>
    	<!--HEADER/NAVIGATION ENDS-->
    	<div id="container2"> <img src="http://campustapscom.ipage.com/Images/campuscity.jpg" id="city"  alt="" />
    		<div id="main" style="opacity:0.9;filter:alpha(opacity=90)">
    		
    
    			<!--FOOTER STARTS-->
    			<div id="footer">
    				<p>Copyright &copy; 2010 <strong>CampusTaps Media Group</strong></p>
    			</div>
    			<!--FOOTER ENDS--> 
    		</div>
    	</div>
    </div>
    <!--CONTAINER ENDS-->
    </body>
    </html>

    CSS
    Code:
    * {
    	margin: 0px;
    	padding: 0px;
    	border: none;
    }
    body {
    	background-image: url(http://campustapscom.ipage.com/Images/Background.jpg);
    	background-repeat: repeat-x;
    	background-color: #000000;
    	font-family: steinem;
    	font-size: 12px;
    	color: #c8c8c8;
    }
    #container {
    	height:100%;
    }
    #top {
    	width: 850px;
    	height: 119px;
    	margin:auto;
    }
    #title {
    	float: left;
    	width: 278px;
    	height: 74px;
    	padding-top: 45px;
    }
    #title h1 {
    	display: block;
    	float: left;
    	width: 278px;
    	height: 74px;
    	text-indent: -9999px;
    }
    #title h1 a {
    	display: block;
    	width: 220px;
            height: 39px;
    	background-image: url(http://campustapscom.ipage.com/Images/campustapslogosmall.jpg);
    	background-repeat: no-repeat;
    	background-position: 0 0;
    }
    #navigation {
    	float: right;
    }
    .nav-links li {
    	display: block;
    	float: left;
    	list-style-type: none;
    }
    .nav-links li a {
    	float: left;
    	width: 120px;
    	height: 68px;
    	text-decoration: none;
    	text-transform: capitalize;
    	color: #666666;
    	font-size: 12px;
    	text-align: center;
    	padding-top: 51px;
    	border-left-width: 1px;
    	border-left-style: solid;
    	border-left-color: #cecece;
    }
    .nav-links li a:hover {
    	color: #ffffff;
    	background-position: center bottom;
    }
    li.borderx2 {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #cecece;
    }
    .separator {
    	background-image: url(http://campustapscom.ipage.com/Images/separator.jpg);
    	background-repeat: no-repeat;
    	float: left;
    	height: 6px;
    	width: 960px;
    	margin-top: 20px;
    	margin-bottom: 20px;
    }
    .bx-pager a {
    	text-indent: -999999px;
    }
    h2 {
    	text-transform: uppercase;
    	color: #ffffff;
    	font-size: 16px;
    	margin-bottom: 15px;
    }
    .separator {
    	background-image: url(http://campustapscom.ipage.com/Images/divider.jpg);
    	background-repeat: no-repeat;
    	float: left;
    	height: 6px;
    	width: 960px;
    	margin-top: 20px;
    	margin-bottom: 20px;
    }
    #sidebar {
    	float: left;
    	height: 209px;
    	width: 219px;
    	background-image: url(http://campustapscom.ipage.com/Images/Updatesbox.gif);
    	background-repeat: no-repeat;
    	padding-top: 20px;
    	padding-right: 20px;
    	padding-bottom: 30px;
    	padding-left: 20px;
    }
    h3 {
    	text-transform: uppercase;
    	color: #ffffff;
    	text-align: center;
    	margin-bottom: 20px;
    	font-size: 12px;
    }
    .sidebar-list li {
    	list-style-type: none;
    	color: #2C5923;
    	margin-top: 10px;
    	padding-bottom: 10px;
    	background-image: url(http://campustapscom.ipage.com/Images/divider.png);
    	background-repeat: repeat-x;
    	background-position: bottom;
    }
    	#content {
     
      height: 370px;
      width: 650px;
      background-image: url(http://campustapscom.ipage.com/Images/LiquorPricesBox.jpg);
      background-repeat: no-repeat;
      padding-top: 20px;
      padding-right: 20px;
      padding-bottom: 30px;
      padding-left: 20px;
    }
    }
    #content p {
    	margin-bottom: 15px;
    	text-align: center;
    }
    #footer {
      height: 20px;
    clear: both;
      margin-top: 10px;
      padding-top: 25px;
      text-align: center;
     color: #ffffff;
    background-image:url(http://campustapscom.ipage.com/Images/Body-bg.jpg);
     repeat-x;
    }
    }
    #jFlowSlide {
    	background:#7A7A7A;
    	font-family: Georgia;
    	margin:auto;
    }
    #myController {
    	font-family: Georgia;
    	padding:2px 0;
    	width:610px;
    	background:#333333;
    	margin:auto;
    }
    #myController span.jFlowSelected {
    	background:#43A0D5;
    	margin-right:0px;
    }
    .slide-wrapper {
    	padding: 5px;
    }
    .slide-thumbnail {
    	width:300px;
    	float:left;
    }
    .slide-thumbnail img {
    	max-width:300px;
    }
    .slide-details {
    	width:290px;
    	float:right;
    	margin-left:10px;
    }
    .slide-details h2 {
    	font-size:1.5em;
    	font-style: italic;
    	font-weight:normal;
    	line-height: 1;
    	margin:0;
    }
    .slide-details .description {
    	margin-top:10px;
    }
    .jFlowControl, .jFlowPrev, .jFlowNext {
    	color:#FFF;
    	cursor:pointer;
    	padding-left:5px;
    	padding-right:5px;
    	padding-top:2px;
    	padding-bottom:2px;
    }
    .jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover {
    	background: #43A0D5;
    }
    .jflow-content-slider {
    	clear:left;
    	padding-top:40px;
    	width:700px;
    	margin:auto;
    }
    /* =Hoverbox Code
    ----------------------------------------------------------------------*/
    
    .hoverbox {
    	cursor: default;
    	list-style: none;
    	margin-left:279px;
    	margin-top:148px;
    }
    .hoverbox a {
    	cursor: default;
    }
    .hoverbox a .preview {
    	display: none;
    }
    .hoverbox a:hover .preview {
    	display: block;
    	position: absolute;
    	top: -33px;
    	left: -45px;
    	z-index: 1;
    }
    .hoverbox img {
    	background: #fff;
    	border-color: #aaa #ccc #ddd #bbb;
    	border-style: solid;
    	border-width: 1px;
    	color: inherit;
    	padding: 2px;
    	vertical-align: top;
    	width: 100px;
    	height: 100px;
    }
    .hoverbox li {
    	background: #eee;
    	border-color: #ddd #bbb #aaa #ccc;
    	border-style: solid;
    	border-width: 1px;
    	color: inherit;
    	display: inline;
    	float: left;
    	margin: 3px;
    	padding: 5px;
    	position: relative;
    }
    .hoverbox li p {
    	text-align:center;
    }
    .hoverbox .preview {
    	border-color: #000;
    	width: 200px;
    	height: 150px;
    
    }
    #container2 {
    	position:relative;
    }
    #city {
    	width:100%;
    	height:750px;
    	position:absolute;
    	top:0;
    	left:0;
    	z-index:0;
    }

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    As you have Steinen font on your body, it is hit and miss as to what you want changed. If its the links:

    Code:
    .nav-links li a {
        border-left: 1px solid #CECECE;
        color: #E4E4E4;
        float: left;
        font-size: 18px;
        height: 68px;
        padding-top: 51px;
        text-align: center;
        text-decoration: none;
        text-transform: capitalize;
        width: 120px;
    }
    .nav-links li a:hover {
        background-position: center bottom;
        color: #FFFFFF;
    }

  • Users who have thanked quartzy for this post:

    conphill (02-25-2011)

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by quartzy View Post
    As you have Steinen font on your body, it is hit and miss as to what you want changed. If its the links:

    Code:
    .nav-links li a {
        border-left: 1px solid #CECECE;
        color: #E4E4E4;
        float: left;
        font-size: 18px;
        height: 68px;
        padding-top: 51px;
        text-align: center;
        text-decoration: none;
        text-transform: capitalize;
        width: 120px;
    }
    .nav-links li a:hover {
        background-position: center bottom;
        color: #FFFFFF;
    }
    This works out great but when I try to change the shade of the font color, it seems to change the white border inbetween the links. I am just trying to change the color of the links and not the color when you hover over the link. What part of the CSS should i change?
    Last edited by conphill; 02-25-2011 at 11:41 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello conphill,
    The bit highlighted in red would change the color of the text in your links -
    Code:
    .nav-links li a {
        border-left: 1px solid #CECECE;
        color: #E4E4E4;
        float: left;
        font-size: 18px;
        height: 68px;
        padding-top: 51px;
        text-align: center;
        text-decoration: none;
        text-transform: capitalize;
        width: 120px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello conphill,
    The bit highlighted in red would change the color of the text in your links -
    Code:
    .nav-links li a {
        border-left: 1px solid #CECECE;
        color: #E4E4E4;
        float: left;
        font-size: 18px;
        height: 68px;
        padding-top: 51px;
        text-align: center;
        text-decoration: none;
        text-transform: capitalize;
        width: 120px;
    }
    I attempted to change the color: but nothing changes. Is it something in the body css that is preventing the color from changing

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Anything to do with the errors in your CSS?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Quote Originally Posted by abduraooft View Post
    Anything to do with the errors in your CSS?
    the validator should be your first stop when things don't act the way you think they should.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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