The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Different Font/Link Colors

View previous topic View next topic Go down

Solved Different Font/Link Colors

Post by CatherinaAndrea on 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 ) :
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

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: Different Font/Link Colors

Post by CatherinaAndrea on July 7th 2012, 4:35 pm

Bump beu

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: Different Font/Link Colors

Post by runawayhorses on July 7th 2012, 5:12 pm

Put this code at the beginning of the text you want to turn black:
Code:
<font color="#000000">


Put this code at the end of all the text you wanted black:
Code:
</font>

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Different Font/Link Colors

Post by Mike on 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

Male Posts : 4242
Reputation : 466
Language : English, HTML, CSS
Location : Bozeman, Montana

Back to top Go down

Solved Re: Different Font/Link Colors

Post by CatherinaAndrea on July 7th 2012, 8:25 pm

That worked nicely Drogba Very Happy Thank you!
@ Runawayhorses: thank you for your time as well. Wink

Solved

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: Different Font/Link Colors

Post by Sanket on July 7th 2012, 8:31 pm

Topic Solved & Locked

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum