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 5 of 5
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation Cannot find how to change text color?

    This code was introduced to me by one of the forum coders.

    I have been trying it out to see how it works, but I cannot find out how to alter the picture caption colours. Any help would be appreciated.

    The page can also be accessed from here as 'Test page'

    http://www.exitfegs.co.uk/thumbnails.htm

    effpeetee


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Centered thumbnails</title>
    <meta name="" content="authored by http://www.nopeople.com" />
    <style type="text/css">
    html, body {
    	margin: 0px;
    	padding: 0px;
    	display: block;
    	background-color: #CCCCCC;
    
    
    }
    .wrapper {
    	text-align: center;
    	background-color: #999999;
    	margin-top: 100px;
    
    }
    .wrapper p {
    	display: inline;
                font-size:smaller;
          
    }
    .wrapper span {
    	margin: 1em;
    	vertical-align: top;
    	width: 150px;
        height: 160px;
    	display: table-cell;
    	display: inline-table; 
    	display: inline-block;
    }
    .wrapper p>span {
    	vertical-align:top;
    }
    .wrapper p img {
    	margin-bottom: 5px;
    	border: none;
    	margin-top: 5px;
          
    }	
    .wrapper a {
    	text-decoration: none;
    }
    #disclaimer {
    	width: 400px;
    	margin: 0 auto;
    	padding: 20px 5px 5px 5px;
    	background-color: #999999;
    }
    .valid {
    	width: 200px;
    	float: right;
    	margin: 50px 20px 0 0;
    }
    .valid img {
    border: none;
    }
    
    </style>
    </head>
    
    <body>
    <div class="wrapper">
    <p><span><a href="first.html"><img src="first.jpg"   alt="Lilies" width="150" height="122" /> Steve at Mapperton.</a></span></p>
    <p><span><a href="2.html"><img src="1.jpg"   alt="sunset" width="150" height="121" /> Mark and Steven</a></span></p>
    <p><span><a href="3.html"><img src="2.jpg"   alt="beach" width="150" height="122" /> In the gardens at Mapperton.</a></span></p>
    <p><span><a href="4.html"><img src="3.jpg"   alt="fishing boat" width="150" height="122" /> The front of Mapperton House./a></span></p>
    <p><span><a href="5.html"><img src="4.jpg"   alt="Lilies" width="150" height="122" /> Higher Came farm.</a></span></p>
    <p><span><a href="6.html"><img src="5.jpg"   alt="sunset" width="150" height="121" /> Another view in Mapperton.</a></span></p>
    <p><span><a href="7.html"><img src="6.jpg"   alt="beach" width="150" height="122" /> A lawn at Mapperton.</a></span></p>
    <p><span><a href="8.html"><img src="7.jpg"   alt="fishing boat" width="150" height="122" /> A bridge in Japan.</a></span></p>
    
    <p><span><a href="1.html"><img src="0.jpg"   alt="Lilies" width="150" height="122" /> Steve at Mapperton.</a></span></p>
    <p><span><a href="2.html"><img src="1.jpg"   alt="sunset" width="150" height="121" /> Mark and Steven</a></span></p>
    <p><span><a href="3.html"><img src="2.jpg"   alt="beach" width="150" height="122" /> In the gardens at Mapperton.</a></span></p>
    <p><span><a href="4.html"><img src="3.jpg"   alt="fishing boat" width="150" height="122" /> a fishing boat in Cordova, Alaska</a></span></p>
    <p><span><a href="5.html"><img src="4.jpg"   alt="Lilies" width="150" height="122" /> a picture of lillies</a></span></p>
    <p><span><a href="6.html"><img src="5.jpg"   alt="sunset" width="150" height="121" /> an Alaska sunset</a></span></p>
    <p><span><a href="7.html"><img src="6.jpg"   alt="beach" width="150" height="122" /> a deserted beach in Costa Rica</a></span></p>
    <p><span><a href="8.html"><img src="7.jpg"   alt="fishing boat" width="150" height="122" /> a fishing boat in Cordova, Alaska</a></span></p>
    
    <p><span><a href="1.html"><img src="0.jpg"   alt="Lilies" width="150" height="122" /> a picture of lillies</a></span></p>
    <p><span><a href="2.html"><img src="1.jpg"   alt="sunset" width="150" height="121" /> an Alaska sunset</a></span></p>
    <p><span><a href="3.html"><img src="2.jpg"   alt="beach" width="150" height="122" /> a deserted beach in Costa Rica</a></span></p>
    <p><span><a href="4.html"><img src="3.jpg"   alt="fishing boat" width="150" height="122" /> a fishing boat in Cordova, Alaska</a></span></p>
    <p><span><a href="5.html"><img src="4.jpg"   alt="Lilies" width="150" height="122" /> a picture of lillies</a></span></p>
    <p><span><a href="6.html"><img src="5.jpg"   alt="sunset" width="150" height="121" /> an Alaska sunset</a></span></p>
    <p><span><a href="7.html"><img src="6.jpg"   alt="beach" width="150" height="122" /> a deserted beach in Costa Rica</a></span></p>
    <p><span><a href="8.html"><img src="7.jpg"   alt="fishing boat" width="150" height="122" /> a fishing boat in Cordova, Alaska</a></span></p>
    
    <p><span><a href="1.html"><img src="0.jpg"   alt="Lilies" width="150" height="122" /> a picture of lillies</a></span></p>
    <p><span><a href="2.html"><img src="1.jpg"   alt="sunset" width="150" height="121" /> an Alaska sunset</a></span></p>
    <p><span><a href="3.html"><img src="2.jpg"   alt="beach" width="150" height="122" /> a deserted beach in Costa Rica</a></span></p>
    <p><span><a href="4.html"><img src="3.jpg"   alt="fishing boat" width="150" height="122" /> a fishing boat in Cordova, Alaska</a></span></p>
    <p><span><a href="5.html"><img src="4.jpg"   alt="Lilies" width="150" height="122" /> a picture of lillies</a></span></p>
    <p><span><a href="6.html"><img src="5.jpg"   alt="sunset" width="150" height="121" /> an Alaska sunset</a></span></p>
    <p><span><a href="7.html"><img src="6.jpg"   alt="beach" width="150" height="122" /> a deserted beach in Costa Rica</a></span></p>
    <p><span><a href="8.html"><img src="7.jpg"   alt="fishing boat" width="150" height="122" /> a fishing boat in Cordova, Alaska</a></span></p>
    
    <p><span><a href="1.html"><img src="0.jpg"   alt="Lilies" width="150" height="122" /> a picture of lillies</a></span></p>
    <p><span><a href="2.html"><img src="1.jpg"   alt="sunset" width="150" height="121" /> an Alaska sunset</a></span></p>
    <p><span><a href="3.html"><img src="2.jpg"   alt="beach" width="150" height="122" /> a deserted beach in Costa Rica</a></span></p>
    <p><span><a href="4.html"><img src="3.jpg"   alt="fishing boat" width="150" height="122" /> a fishing boat in Cordova, Alaska</a></span></p>
    <p><span><a href="5.html"><img src="4.jpg"   alt="Lilies" width="150" height="122" /> a picture of lillies</a></span></p>
    <p><span><a href="6.html"><img src="5.jpg"   alt="sunset" width="150" height="121" /> an Alaska sunset</a></span></p>
    <p><span><a href="7.html"><img src="6.jpg"   alt="beach" width="150" height="122" /> a deserted beach in Costa Rica</a></span></p>
    <p><span><a href="8.html"><img src="7.jpg"   alt="fishing boat" width="150" height="122" /> a fishing boat in Cordova, Alaska</a></span></p>
    <!--closes wrapper --></div>/*
    <p class="valid">
    </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Whoops. Forget this post.

  • #3
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Hi effpeetee.

    If you just want to change the text color, see the code in bold below:

    Code:
    .wrapper a {
    	text-decoration: none;
            color: #000;
    }
    Technically, wherever you specify a color you should also specify a background color, and vice versa. The CSS validator will warn you about this, but not generate an error. So, it's really up to you.
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin Installatron Money-Back Guarantee 24/7 Support
    Providing "Service Above All Else" since 2005.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thank you kewlceo,

    I was trying to find where the initial text colour came from. Anyway, your solution works fine.

    effpeetee

  • #5
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by effpeetee View Post
    I was trying to find where the initial text colour came from. Anyway, your solution works fine.
    The initial text color will be provided by the user's browser default setting unless specified by the page author. So, you could make sure that the entire page is set to black by setting it in your body element, but the anchor tags would still be blue by default. If you want to affect all body text and all anchor text, you could do that as follows:

    Code:
    body {
        color: #000;
    }
    a {
        color: #000;
    }
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin Installatron Money-Back Guarantee 24/7 Support
    Providing "Service Above All Else" since 2005.


  •  

    Posting Permissions

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