HomeDifferent Font/Link Colors
4 posters
Page 1 of 1
Different Font/Link Colors
by CatherinaAndrea July 6th 2012, 9:26 pm
I got this code on my HTML Page and the font and link color is set the same for everywhere. What i would like to achieve is, have white font in the left and right columns and black font in the middle column. Take a look at the link of the example webdesign i found on google.
This is the HTML Code on my page ( http://m3rcs.forummotion.com/h1-loading-page ) :
This is the HTML Code on my page ( http://m3rcs.forummotion.com/h1-loading-page ) :
- 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=iso-8859-1" />
<style> body {
background-image:url(http://img171.imageshack.us/img171/2192/concretetexture.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-attachment:fixed;
background-color: #101010;
}
* {margin: 0px;padding: 0px;}
p {
padding: 10px 10px 10px 20px;
display:block;
color:#6b7272;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold
}
a {
color:#cccccc;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
#container {
margin: 0px auto;
text-align: left;
width: 1200px;
}
#header{
height:300px;
width:1200px;
background-image:url(http://img818.imageshack.us/img818/9299/header5s.jpg);
background-repeat: no-repeat;
}
#content{
}
#left{
width:200px;
float:left;
}
#middle{
width:600px;
margin-left:200px;
}
#right{
width:200px;
float:right;
}
#right2{
width:200px;
float:right;
}
/********************* menu ****************************/
.menuheader{
width:200px;
height:50px;
background-image:url(http://i216.photobucket.com/albums/cc174/ToxiCure/LeftMenuTop-3.jpg);
display:block;
}
.menucontent{
width:200px;
background-image:url(http://i216.photobucket.com/albums/cc174/ToxiCure/LeftMenuMiddle2.jpg);
padding-top:0px;
padding-bottom:5px;
padding-left: 5px;
background-repeat: repeat-y;
}
.menuheader h3{
padding: 11px 0px 0px 40px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
.menufooter{
width:200px;
height:40px;
background-image:url(http://i216.photobucket.com/albums/cc174/ToxiCure/LeftMenuBottom3-1.jpg);
display:block;
}
.postheader,.menuheader{
color:#cccccc;
text-transform: uppercase;
}
/********************* menuright ****************************/
.menurightheader{
width:200px;
height:50px;
background-image:url(http://i216.photobucket.com/albums/cc174/ToxiCure/RightMenuTop-1.jpg);
display:block;
}
.menurightcontent{
width:200px;
background-image:url(http://i216.photobucket.com/albums/cc174/ToxiCure/RightMenuMiddle-1.jpg);
padding-top:5px;
background-repeat: repeat-y;
}
.menurightheader h3{
padding: 11px 0px 0px 40px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
.menurightfooter{
width:200px;
height:50px;
background-image:url(http://i216.photobucket.com/albums/cc174/ToxiCure/RightMenuBottom-1.jpg);
display:block;
}
.postrightheader,.menuheader{
color:#cccccc;
text-transform: uppercase;
}
/********************* post ****************************/
.post{
margin-bottom:15px;
}
.postheader{
background-image:url(http://i216.photobucket.com/albums/cc174/ToxiCure/Post2Top.jpg);
display:block;
width:600px;
height:50px;
}
.postheader h1{
padding: 10px 0px 0px 20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
.postcontent{
background-image:url(http://i216.photobucket.com/albums/cc174/ToxiCure/Post2Middle.jpg);
background-repeat: repeat-y;
padding-left: 5px;
}
.postfooter{
background-image:url(http://i216.photobucket.com/albums/cc174/ToxiCure/Post2Bottom.jpg);
background-repeat: no-repeat;
display:block;
width:600px;
height:50px;
}
/********************* header ****************************/
#header{
position:relative;
}
#header ul{
position:absolute;
top:18px;
display:block;
left:200px;
}
#header ul li{
display:inline;
text-align:center;
margin:auto;
width:auto;
}
#header ul li a{
display:inline;
text-align:center;
text-decoration:none;
padding: 0px 10px;
text-transform: uppercase;
}
#header ul li a:hover{
text-decoration:underline;
}
/********************* footer ****************************/
#footer{
width:850px;
}
#footer ul{
display:block;
margin-left:190px;
}
#footer ul li{
display:inline;
text-align:center;
margin:auto;
width:auto;
border-right: 1px solid #6b7272;
}
#footer ul li a{
display:inline;
text-align:center;
text-decoration:none;
padding: 0px 10px;
text-transform: uppercase;
}
#footer ul li a:hover{
text-decoration:underline;
}
#footer span{
color:#525757;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align:center;
width:850px;
display:block;
padding: 15px 0px;
}
/********************* menu members ****************************/
.menu ul{
list-style-position: inside;
list-style-type: disc;
padding: 0px 0px 0px 20px;
color:#666666;
}
.menu ul li{
padding-top: 5px;
color:#666666;
}
.menu ul li a{
text-decoration:none;
padding: 0px;
text-transform: uppercase;
}
.menu ul li a:hover{
text-decoration:underline;
text-transform: uppercase;
}
.member{
display:inline;
float:left;
margin-left:10px;
}
.member span{
display:block;
text-align:center;
padding: 2px 0px 13px 0px;
text-transform: uppercase;
}
.member img{
width:75px;
height:70px;
border: solid 2px #999999;
}
.clear{
clear:both;
}
</style><title>template</title>
</head>
<body>
<div id="container">
<div id="header">
<ul>
<li><a href="http://www.freewebsitetemplates.com">Join Now
<a href="NavArrow"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/NavArrow-1.png"></a> </a></li>
<li><a href="http://www.freewebsitetemplates.com">Links
<a href="NavArrow"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/NavArrow-1.png"></a> </a></li>
<li><a href="http://www.freewebsitetemplates.com">Login
<a href="NavArrow"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/NavArrow-1.png"></a> </a></li>
<li><a href="http://www.freewebsitetemplates.com">Forums
<a href="NavArrow"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/NavArrow-1.png"></a> </a></li>
<li><a href="http://www.freewebsitetemplates.com">News
<a href="NavArrow"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/NavArrow-1.png"></a> </a></li>
<li><a href="http://www.freewebsitetemplates.com">Download
<a href="NavArrow"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/NavArrow-1.png"></a> </a></li>
<li class="last"><a href="http://www.freewebsitetemplates.com">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="left">
<div class="menu">
<div class="menuheader">
<h3>Menu</h3>
</div>
<div class="menucontent">
<ul>
<li><a href="http://www.freewebsitetemplates.com">Home</a></li>
<li><a href="http://www.freewebsitetemplates.com">Donations</a></li>
<li><a href="http://www.freewebsitetemplates.com">Downloads</a></li>
<li><a href="http://www.freewebsitetemplates.com">Feedback</a></li>
<li><a href="http://www.freewebsitetemplates.com">Shout_Box</a></li>
<li><a href="http://www.freewebsitetemplates.com">Surveys</a></li>
<li><a href="http://www.freewebsitetemplates.com">Ventrilo</a></li>
<li><a href="http://www.freewebsitetemplates.com">Web
Links</a></li>
<li><a href="http://www.freewebsitetemplates.com">Your
Account</a></li>
</ul>
</div>
<div class="menufooter"></div>
</div>
<div class="menu">
<div class="menuheader">
<h3>Menu</h3>
</div>
<div class="menucontent">
<p>If you're looking for beautiful and professionally made
templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
<p>If you're looking for beautiful and professionally made
templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
<p>If you're looking for beautiful and professionally made
templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
</div>
<div class="menufooter"></div>
</div>
</div>
<div id="right">
<div class="menuright">
<div class="menurightheader">
<h3>Team</h3>
</div>
<div class="menurightcontent">
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member1.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 1</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member2.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 2</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member3.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 3</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member4.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 4</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member5.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 5</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member6.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 6</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member7.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 7</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member8.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 8</a></span>
</div>
<div class="clear"></div>
</div>
<div class="menurightfooter"></div>
</div>
</div>
<div id="right">
<div class="menuright">
<div class="menurightheader">
<h3>Team</h3>
</div>
<div class="menurightcontent">
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member1.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 1</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member2.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 2</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member3.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 3</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member4.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 4</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member5.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 5</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member6.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 6</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member7.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 7</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="http://i216.photobucket.com/albums/cc174/ToxiCure/member8.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 8</a></span>
</div>
<div class="clear"></div>
</div>
<div class="menurightfooter"></div>
</div>
</div>
<div id="middle">
<div class="post">
<div class="postheader">
<h1>Post title</h1>
</div>
<div class="postcontent">
<p>Don't forgot to check <a href="http://www.freewebsitetemplates.com">free website
templates</a> every day, because we add at least one free website
template daily.</p>
<p>This is a template designed by free website templates for you
for free you can replace all the text by your own text. This is just a
place holder so you can see how the site would look like.</p>
<p>You can remove any link to our websites from this template
you're free to use the template without linking back to us. Don't want
your boss to know you used a free website template ;) .</p>
<p>If you're having problems editing the template please don't
hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forum/">forum</a>.</p>
<p>If you're looking for beautiful and professionally made
templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
<p>Don't forgot to check <a href="http://www.freewebsitetemplates.com">free website
templates</a> every day, because we add at least one free website
template daily.</p>
<p>This is a template designed by free website templates for you
for free you can replace all the text by your own text. This is just a
place holder so you can see how the site would look like.</p>
<p>You can remove any link to our websites from this template
you're free to use the template without linking back to us. Don't want
your boss to know you used a free website template ;) .</p>
<p>If you're having problems editing the template please don't
hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forum/">forum</a>.</p>
<p>If you're looking for beautiful and professionally made
templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
<p>Don't forgot to check <a href="http://www.freewebsitetemplates.com">free website
templates</a> every day, because we add at least one free website
template daily.</p>
<p>This is a template designed by free website templates for you
for free you can replace all the text by your own text. This is just a
place holder so you can see how the site would look like.</p>
<p>You can remove any link to our websites from this template
you're free to use the template without linking back to us. Don't want
your boss to know you used a free website template ;) .</p>
<p>If you're having problems editing the template please don't
hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forum/">forum</a>.</p>
<p>If you're looking for beautiful and professionally made
templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
</div>
<div class="postfooter"></div>
</div>
</div>
<div id="footer">
<ul>
<li><a href="http://www.freewebsitetemplates.com">Join
now</a></li>
<li><a href="http://www.freewebsitetemplates.com">Links</a></li>
<li><a href="http://www.freewebsitetemplates.com">Login</a></li>
<li><a href="http://www.freewebsitetemplates.com">Forums</a></li>
<li><a href="http://www.freewebsitetemplates.com">News</a></li>
<li><a href="http://www.freewebsitetemplates.com">Download</a></li>
<li class="last"><a href="http://www.freewebsitetemplates.com">contact</a></li>
</ul>
<span>Copyright
2006 Supported by <a href="http://www.hosting24.com/" target="_blank">Hosting24.com</a></span> </div>
</div>
</body></html>
Last edited by CatherinaAndrea on July 7th 2012, 8:25 pm; edited 1 time in total
CatherinaAndrea- Forumember
-
Posts : 230
Reputation : 19
Language : English, Russian, Dutch -
CatherinaAndrea- Forumember
- Posts : 230
Reputation : 19
Language : English, Russian, Dutch -
Re: Different Font/Link Colors
by runawayhorses July 7th 2012, 5:12 pm
Put this code at the beginning of the text you want to turn black:
Put this code at the end of all the text you wanted black:
- Code:
<font color="#000000">
Put this code at the end of all the text you wanted black:
- Code:
</font>
runawayhorses- Hyperactive
-
Posts : 2537
Reputation : 166
Language : English
Location : United States -
Re: Different Font/Link Colors
by Mike July 7th 2012, 6:47 pm
you need this in css:
- Code:
.menu ul li a {
color: #fff !important;
}
.menucontent p {
color: #fff !important;
}
.postcontent p {
color: #000 !important;
}
.member span a {
color: #fff !important}
Mike- Hyperactive
- Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado
Re: Different Font/Link Colors
by CatherinaAndrea July 7th 2012, 8:25 pm
That worked nicely Drogba 
Thank you!
@ Runawayhorses: thank you for your time as well.
Solved
Thank you!@ Runawayhorses: thank you for your time as well.
Solved
CatherinaAndrea- Forumember
- Posts : 230
Reputation : 19
Language : English, Russian, Dutch -
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Similar topics» Welcome To The-EN!
» Halloween Font Added To The Font Drop Down Menu In The Forum?
» Global font change to imported Google font
» Insert new font in font button (punbb)
» How do I create a link where you hover over the link and it pops up some kinda text?
» Halloween Font Added To The Font Drop Down Menu In The Forum?
» Global font change to imported Google font
» Insert new font in font button (punbb)
» How do I create a link where you hover over the link and it pops up some kinda text?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
