Text color help

Dev Shed Forums Sponsor:

October 14th, 2012, 01:25 PM

maineman

Contributing User

Join Date: Sep 2012

Posts: 112

Time spent in forums: 14 h 27 m 57 sec
Reputation Power: 5

Text color help

I have a text link menu I want to change the text to white. I also want to be able to adjust the width of the background color, currently is spans the entire page. I would like to make the background color just as wide as the text menu. Here is my current CSS and text menu code.

text code:

PHP Code:


		
			
<p class="tcolor"><a style="text-decoration:none" href="index.php?page=home_page">Home Page</a> |  <a style="text-decoration:none" href="index.php?page=site_layout">Site Layout</a> |  <a style="text-decoration:none" href="index.php?page=control_structures">Control Structures</a> | <a style="text-decoration:none" href="index.php?page=string_functions">String Functions</a> | <a style="text-decoration:none" href="index.php?page=web_forms">Web Forms</a> | <a style="text-decoration:none" href="index.php?page=midterm_assessment">Midterm Assessment</a> | <a style="text-decoration:none" href="index.php?page=state_information">State Information</a> | <a style="text-decoration:none" href="index.php?page=user_templates">User Templates</a> | <a style="text-decoration:none" href="index.php?page=final_project">Final Project</a></p>

CSS Code for text links:

PHP Code:


		
			
#text_links

    {

        background-color:blue;

        color:white;

        text-align:center;

        font-family:"Times New Roman";

        font-size:14px;        

    }

October 14th, 2012, 05:24 PM

_voidPirate

Registered User

Join Date: Oct 2012

Location: Irvine, CA

Posts: 1

Time spent in forums: 10 m 10 sec
Reputation Power: 0

Hope this helps.

Code:

<!DOCTYPE html>

<head>
<meta charset="utf-8" >

<style>

<!-- wrapper for the entire site-->
#wrapper{
	;
	margin-left:none;
	margin-right:none;
	width:80%;
	}
<!-- link styles -->	
a{
	color:#FFF;
	}
	
<!-- this is how a class is declared-->
.tcolor{
	background-color:#00F;
	color: white;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	}
	
</style>
<title>Untitled Document</title>
</head>

<body>
<div id="wrapper">
<p class="tcolor"><a style="text-decoration:none" href="index.php?page=home_page">Home Page</a> |  <a style="text-decoration:none" href="index.php?page=site_layout">Site Layout</a> |  <a style="text-decoration:none" href="index.php?page=control_structures">Control Structures</a> | <a style="text-decoration:none" href="index.php?page=string_functions">String Functions</a> | <a style="text-decoration:none" href="index.php?page=web_forms">Web Forms</a> | <a style="text-decoration:none" href="index.php?page=midterm_assessment">Midterm Assessment</a> | <a style="text-decoration:none" href="index.php?page=state_information">State Information</a> | <a style="text-decoration:none" href="index.php?page=user_templates">User Templates</a> | <a style="text-decoration:none" href="index.php?page=final_project">Final Project</a></p>  

</div>
</body>
</html>

October 14th, 2012, 05:45 PM

maineman

Contributing User

Join Date: Sep 2012

Posts: 112

Time spent in forums: 14 h 27 m 57 sec
Reputation Power: 5

thanks for that. What is the purpose of the wrapper?

October 14th, 2012, 06:27 PM

maineman

Contributing User

Join Date: Sep 2012

Posts: 112

Time spent in forums: 14 h 27 m 57 sec
Reputation Power: 5

ok ive got a <ul> vertical menu formatted as follows in CSS:

PHP Code:


		
			
.glossymenu{

list-style-type: none;

margin: 5px 0;

padding: 0;

width: 145px;

border: none;

border-bottom-width: 0;

}



.glossymenu li a{

background: white url(Images/glossyback.gif) repeat-x bottom left;

font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;

color: white;

display: block;

width: auto;

padding: 3px 0;

padding-left: 10px;

text-decoration: none;



}





* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */

width: 120px;

}



.glossymenu li a:visited, .glossymenu li a:active{

color: white;

}



.glossymenu li a:hover{

background-image: url(Images/glossyback2.gif);

}

How can I apply the same formatting to the text menu at the beginning of this thread?

October 15th, 2012, 10:52 PM

voidPirate

Registered User

Join Date: Oct 2012

Posts: 15

Time spent in forums: 5 h 27 m 53 sec
Reputation Power: 0

I am not sure what you are asking. The wrapper was to wrap the body of the HTML document to give it the middle alignment. Do you want the menu to have middle alignment?

Developer Shed Advertisers and Affiliates