• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS: link not showing in colour and underlined

Evening everyone,

First proper post.

I am building a website which is based as a php site.

The css has been ok but I cannot get my links to show up as underlined and as a different colour (prefer blue - I'm traditional like that lol ) It is in the main body of the (in the centerColumn that is showing as black text). It links but just doesn't stand out. If someone looks at the page they won't see a link.

This is the css ... what am I missing?
CSS:
body {
margin:0;
padding:0;
background-color:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
}

a{text-decoration:underline; color:#2E3BB6;}

blockquote {
margin:1em;
padding:.5em;
font-size:.9em;
background-color:#F3F2ED;
border-top:1px solid #999999;
border-bottom:1px solid #999999;
}

blockquote p {
margin:.2em;
}

#header {
margin:2em 2em 0 2em;
padding:1em 1.5em;
height:5em;
background-color:#3C87DC;
border:1px solid #eeeeee;
}

#header h1 {
margin:0;
padding:0;
font-size:1.2em;
}

#header h3 {
margin:0;
padding:0;
font-size:.9em;
}

#leftColumn {
position:absolute;
left:2.25em;
top:10.3em;
width:14em;
margin:0;
padding:1em .5em 2em .5em;
background:#3C87DC;
border:1px solid #eeeeee;
font-size:.9em;
}

#leftColumn h2 {
margin:0 0 -1em 0;
padding:0;
font-size:1em;
letter-spacing:.1em;
}

#leftColumn ul {
margin:1.5em 0 0 0;
padding:0;
list-style:none;
}

#leftColumn li {
margin:0 0 .4em 0;
padding:0;
}

#leftColumn li a {
margin:0 0 0 .2em;
}

#centerColumn {
right:2.25em;
margin-top:.2em;
margin-left: 17.50em;
margin-right:2.25em;
voice-family: "\"}\"";
voice-family: inherit;
margin-left:17.50em;
margin-right:2.25em;
padding:1em .5em 2em .5em;
background:#FFFFFF;
font-size:.9em;
}

html>body #centerColumn {
margin-left:17.50em;
margin-right:2.25em;
}

#centerColumn h2 {
margin:0 0 -1em 0;
padding:0;
font-size:1em;
letter-spacing:.1em;
}


#tags {
margin:0 0 .5em 0;
width:10em;
float:left;
border:none;
text-align:left;
}

#tags img {
border:none;
}

#tags p {
margin:0 0 .25em 0;
}

#tags a {
font-size:.7em;
}


I can see the line - a{text-decoration:underline; color:#2E3BB6;} is there but it's just not working. :confused:

I want the active, used viewed etc. as the same colour.

EDIT: Sorry forgot to mention I only want the links like that for the centercolumn as the menu had links but these are ok just in black.

Thanks for any help you can give me.
 
Last edited by a moderator:
Hi,
Thanks.
This is a paragraph in the centercolumn

Code:
<p>
At Dungeness a quick look and photo of the old lighthouse before heading to the station. The station is modern and clean and the café looks really nice but as we didn't have long before the train but we had a very quick look in the shop. The <a href="https://www.rhdr.org.uk/timetables/" target="_blank">tickets are well priced</a> and the guide book is a steal at less than £4.00. It's a a lovely little book and comes with a DVD! Well worth the money in my eyes. Chris in the shop was polite, and friendly and a credit to the line. I've seen miniature/Narrow gauge railways before but the RHDR track looked tiny. It's a 15 inch (381mm) gauge track and travels for over 13 miles from Dungeness to Hythe.
</p>

I think the previous line "a{text-decoration:underline; color:#2E3BB6;}" will need to come out as if I am correct it'll make the Menu links also come up blue which is not wanted.
 
Last edited:

menator01

King Coder
Here is an example of a table with 3 columns. Each has it's own link format.

HTML:
<style>
    table {
        width: 100%;
        border:solid 1px black;
        padding: 1em;
        border-spacing: 1em;
    }

    td {
        border:solid 1px black;
    }

    /* All links are same */
    a:any-link {
        color:blue;
        text-decoration: underline;
        font-family: "comic sans ms";
        font-size: 1em;
    }

    /* links in left column are different */
    #leftcolumn a:any-link {
        color: tomato;
        font-size: 1.25em;
        font-weight: normal;
    }

    #leftcolumn a:hover {
        color: purple;
        font-size: 1.25em;
        text-decoration: line-through;
    }

    /* Right column links are different */
    #rightcolumn a:any-link {
        color: orange;
        font-size: 1.25em;
        text-decoration: none;
    }

    #rightcolumn a:hover {
        color: green;
        text-shadow: 1px 1px 2px black;
        text-decoration: overline;
    }
</style>

<table>
    <tr>
        <td id="leftcolumn"><a href="#"> Left Link</a></td>
        <td id="centercolumn"><a href="#">Center Link</a></td>
        <td id="rightcolumn"><a href="#">Right Link</a></td>
    </tr>
</table>
 
I have now changed to this in the hope it'd be right but still not working right.

I commented out the original link formatting.
The items I have added are in Bold Red

Code:
body {
margin:0;
padding:0;
background-color:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
}

/*a{text-decoration:underline; color:#2E3BB6;} */

blockquote {
margin:1em;
padding:.5em;
font-size:.9em;
background-color:#F3F2ED;
border-top:1px solid #999999;
border-bottom:1px solid #999999;
}

blockquote p {
margin:.2em;
}

#header {
margin:2em 2em 0 2em;
padding:1em 1.5em;
height:5em;
background-color:#3C87DC;
border:1px solid #eeeeee;
}

#header h1 {
margin:0;
padding:0;
font-size:1.2em;
}

#header h3 {
margin:0;
padding:0;
font-size:.9em;
}

#leftColumn {
position:absolute;
left:2.25em;
top:10.3em;
width:14em;
margin:0;
padding:1em .5em 2em .5em;
background:#3C87DC;
border:1px solid #eeeeee;
font-size:.9em;
}

#leftColumn h2 {
margin:0 0 -1em 0;
padding:0;
font-size:1em;
letter-spacing:.1em;
}

#leftColumn ul {
margin:1.5em 0 0 0;
padding:0;
list-style:none;
}

#leftColumn li {
margin:0 0 .4em 0;
padding:0;
}

#leftColumn li a {
margin:0 0 0 .2em;
}

#leftColumn a:any-link {
text-decoration:none; 
color:#000000;
}

#centerColumn {
right:2.25em;
margin-top:.2em;
margin-left: 17.50em;
margin-right:2.25em;
voice-family: "\"}\"";
voice-family: inherit;
margin-left:17.50em;
margin-right:2.25em;
padding:1em .5em 2em .5em;
background:#FFFFFF;
font-size:.9em;
}

html>body #centerColumn {
margin-left:17.50em;
margin-right:2.25em;
}

#centerColumn h2 {
margin:0 0 -1em 0;
padding:0;
font-size:1em;
letter-spacing:.1em;
}

#centercolumn a:any-link {
color: orange;
font-size: 1.25em;
text-decoration: none;
}

#tags {
margin:0 0 .5em 0;
width:10em;
float:left;
border:none;
text-align:left;
}

#tags img {
border:none;
}

#tags p {
margin:0 0 .25em 0;
}

#tags a {
font-size:.7em;
}
 
CSS:
body {
margin:0;
padding:0;
background-color:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
}

/*a{text-decoration:underline; color:#2E3BB6;} */

blockquote {
margin:1em;
padding:.5em;
font-size:.9em;
background-color:#F3F2ED;
border-top:1px solid #999999;
border-bottom:1px solid #999999;
}

blockquote p {
margin:.2em;
}

#header {
margin:2em 2em 0 2em;
padding:1em 1.5em;
height:5em;
background-color:#3C87DC;
border:1px solid #eeeeee;
}

#header h1 {
margin:0;
padding:0;
font-size:1.2em;
}

#header h3 {
margin:0;
padding:0;
font-size:.9em;
}

#leftColumn {
position:absolute;
left:2.25em;
top:10.3em;
width:14em;
margin:0;
padding:1em .5em 2em .5em;
background:#3C87DC;
border:1px solid #eeeeee;
font-size:.9em;
}

#leftColumn h2 {
margin:0 0 -1em 0;
padding:0;
font-size:1em;
letter-spacing:.1em;
}

#leftColumn ul {
margin:1.5em 0 0 0;
padding:0;
list-style:none;
}

#leftColumn li {
margin:0 0 .4em 0;
padding:0;
}
    
#leftColumn li a {
margin:0 0 0 .2em;
text-decoration: none;
colour:#00000;
}

#leftColumn a:active {
text-decoration:none;
color:#000000;
}
#leftColumn a:hover {
Colour:red;
text-decoration: none
}
#leftColumn a:visited {
colour:Blue;
text-decoration: none;
}

#centerColumn {
right:2.25em;
margin-top:.2em;
margin-left: 17.50em;
margin-right:2.25em;
voice-family: "\"}\"";
voice-family: inherit;
margin-left:17.50em;
margin-right:2.25em;
padding:1em .5em 2em .5em;
background:#FFFFFF;
font-size:.9em;
}

html>body #centerColumn {
margin-left:17.50em;
margin-right:2.25em;
}

#centerColumn h2 {
margin:0 0 -1em 0;
padding:0;
font-size:1em;
letter-spacing:.1em;
}

#centerColumn a:active {
text-decoration:none;
color:#000000;
}
#centerColumn a:hover {
Colour:red;
text-decoration: none
}
#centerColumn a:visited {
colour:Blue;
text-decoration: none;
}

#tags {
margin:0 0 .5em 0;
width:10em;
float:left;
border:none;
text-align:left;
}

#tags img {
border:none;
}

#tags p {
margin:0 0 .25em 0;
}

#tags a {
font-size:.7em;
}

Going to bed as my brain now hurts lol

Thanks to those helping :)
 
Last edited:

menator01

King Coder
Without seeing html layout kind of difficult to help but, with the example p tag you gave above,

HTML:
<style>
    p {
        font-family: tahoma;
        font-weight: 14px;
        /* any other formatting for the p's */
    }

    p a:any-link {
        color: blue;
        text-decoration: none; /* underline, linethrough or any other decorations */
    }

    /* Link will change color on hover and make bold text with a shadow */
    p a:hover {
        color: red;
        text-shadow: 1px 1px 2px black;
    }

    /* A link in the paragraph with a different format. Using an id */
    #mylink:any-link {
        color: steelblue;
        font-weight: 600;
        font-style: oblique;
    }

    #mylink:hover {
        color: skyblue;
        text-shadow: 0 0 1px rgb(10,10,10);
        cursor: crosshair;
    }
</style>

<p>
    This is a paragraph with a <a href="#">link</a>. All paragraphs will have this format unless otherwise specified.
</p>

<p>
    I'm going to change the format with this <a id="mylink" href="#">link</a> using an id.
</p>

<p>
    Back to the original <a href="#">link</a> format.
</p>
 
This is a sample of the page of the site with all the includes with it.

Main HTML page
HTML:
<!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">
<?php include('assets/variables.php'); ?>   
<title> <?php echo $PageTitle ?></title>   
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="assets/style.css" media="screen" />
</head>
<body>
<div id="header"> <?php include('assets/header.php'); ?> </div>
<!--//end #header//-->
<div id="leftColumn">
  <?php include('assets/menu.php'); ?>
 
</div>
<!--//end #leftColumn//-->
<div id="centerColumn">
  <h2>Plans and Ideas</h2>

  <p>I thought I'd post a few of the plans for trips I want to make. . <br />
I'll let you decide what you think each one is.</p>
  <blockquote>
    <p>“A good traveler has no fixed plans and is not intent on arriving.” - Lao Tzu</p>
  </blockquote>

  <h2>The To Do List</h2>
  <p>
  <ul>
    <li><a href="plana.php">Plan A - trip to Scotland Castle</a> </li>
    <li><a href="planb.php">Plan B - To be written</a></li>
    <li><a href="planc.php">Plan C - To be written</a></li>
    <li><a href="pland.php">Plan D - To be written</a></li>
    <li><a href="plane.php">Plan E - To be written</li>

  </ul>
    </p>

<hr />
<?php include('assets/footer.php'); ?>
</div>
<!--//end #centerColumn//-->
</body>
</html>

STYLE
CSS:
body {
margin:0;
padding:0;
background-color:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
}

/*a{text-decoration:underline; color:#2E3BB6;} */

blockquote {
margin:1em;
padding:.5em;
font-size:.9em;
background-color:#F3F2ED;
border-top:1px solid #999999;
border-bottom:1px solid #999999;
}

blockquote p {
margin:.2em;
}

#header {
margin:2em 2em 0 2em;
padding:1em 1.5em;
height:5em;
background-color:#3C87DC;
border:1px solid #eeeeee;
}

#header h1 {
margin:0;
padding:0;
font-size:1.2em;
}

#header h3 {
margin:0;
padding:0;
font-size:.9em;
}

#leftColumn {
position:absolute;
left:2.25em;
top:10.3em;
width:14em;
margin:0;
padding:1em .5em 2em .5em;
background:#3C87DC;
border:1px solid #eeeeee;
font-size:.9em;
}

#leftColumn h2 {
margin:0 0 -1em 0;
padding:0;
font-size:1em;
letter-spacing:.1em;
}

#leftColumn ul {
margin:1.5em 0 0 0;
padding:0;
list-style:none;
}

#leftColumn li {
margin:0 0 .4em 0;
padding:0;
}
    
#leftColumn li a {
margin:0 0 0 .2em;
text-decoration: none;
colour:#00000;
}

#leftColumn a:active {
text-decoration:none;
color:#000000;
}
#leftColumn a:hover {
Colour:red;
text-decoration: none
}
#leftColumn a:visited {
colour:Blue;
text-decoration: none;
}

#centerColumn {
right:2.25em;
margin-top:.2em;
margin-left: 17.50em;
margin-right:2.25em;
voice-family: "\"}\"";
voice-family: inherit;
margin-left:17.50em;
margin-right:2.25em;
padding:1em .5em 2em .5em;
background:#FFFFFF;
font-size:.9em;
}

html>body #centerColumn {
margin-left:17.50em;
margin-right:2.25em;
}

#centerColumn h2 {
margin:0 0 -1em 0;
padding:0;
font-size:1em;
letter-spacing:.1em;
}

#centerColumn a:active {
text-decoration:none;
color:#000000;
}
#centerColumn a:hover {
Colour:red;
text-decoration: none
}
#centerColumn a:visited {
colour:Blue;
text-decoration: none;
}

#tags {
margin:0 0 .5em 0;
width:10em;
float:left;
border:none;
text-align:left;
}

#tags img {
border:none;
}

#tags p {
margin:0 0 .25em 0;
}

#tags a {
font-size:.7em;
}

HEADER
PHP:
<div style="float: left"><a href="index.php"><img src="img/brlogo.png" width="150" height="69" /></a><br /></div>
<h1> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Travels with my self</h1>
<h3> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Reports, Articles, Plans
</h3>

FOOTER

PHP:
<div align="center" style="color:Red;"><?php echo $Update; ?></div>
<div align="center" style="color:black;"><?php echo $footer; ?></div>

MENU
PHP:
<h4 align="center"><strong>Menu</strong></h4>
<a href="index.php">Home</a><br />
<a href="reports.php"> Trip Reports</a><br />
<a href="plans.php">Trip Plans/Ideas</a><br />
<a href="articles.php">Articles</a><br />
<a href="reviews.php">Reviews</a><br />
<a href="about.php">About</a><br /><br>

</p>

Apart from the variables that is a complete page.
 

menator01

King Coder
So if you don't want the link colors to change after visiting just add this to your style.css
Then all links on the page will stay blue
CSS:
a :any-link {
    color: blue;
}
 

menator01

King Coder
Hope you don't mind but, I took a shot at your design:

index.php
HTML:
<!DOCTYPE html>
<html lang='us'>

<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/style2.css">
</head>

<body>
    <div id="header">
        <a href="index2.php"><img class="logo" src="images/ratt.svg" width="80px"></a>
        <h1>Travels with myself</h1>
        <h3>Reports, Articles, Plans</h3>
    </div>

    <div class="left">
        <h4>Menu</h4>
        <a href="#">Home</a><br>
        <a href="#">Trip Reports</a><br>
        <a href="#">Trip Plans/Ideas</a><br>
        <a href="#">Articals</a><br>
        <a href="#">Reviews</a><br>
        <a href="#">About</a>
    </div>

    <div id="center">
        <h2>Plans & Ideas</h2>
        <p>
            I thought I'd post a few of the plans for trips I want to make.<br />
            I'll let you decide what you think each one is.
        </p>

        <blockquote>
            <p>
                “A good traveler has no fixed plans and is not intent on arriving.” - Lao Tzu
            </p>
        </blockquote>

        <h2>The To Do List</h2>
        <ul>
            <li><a href="#">Plan A - trip to Scotland Castle</a> </li>
            <li><a href="#">Plan B - To be written</a></li>
            <li><a href="#">Plan C - To be written</a></li>
            <li><a href="#">Plan D - To be written</a></li>
            <li><a href="#">Plan E - To be written</li>
        </ul>
        <hr>

    </div>

</body>

</html>

style.css
CSS:
html, body {
    height: 100%;
}
a:any-link {
    color:blue;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: lightblue;
}

.logo {
    position: relative;
    top: 8px;
    left: 8px;
    float:left;
    z-index: 1;
}

#header {
    background-color: steelblue;
}

#header h1 {
    position: relative;
    top: 8px;
    left: 1em;
}

#header h3 {
    position: relative;
    top: -1em;
    left: 2em;
}



.left {
    background-color: steelblue;
    width: 15%;
    height: 26%;
    padding: 8px;
    margin-top: -.75em;
    margin-right: 12px;
    float: left;
}

.left h4 {
    text-align: center;
    background-color: lightsteelblue;
    font-size: 1.25em;
    position: relative;
    top: -.75em;
    padding: 4px;
    margin-bottom: -.25em;
}

.left br {
    margin-bottom: 4px;
}

h2 {
    font-size: 1em;
}

blockquote {
    background-color: lightgray;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    position: relative;
    width: 80%;
    left: 14.45%;
}

ul {
    display: block;
    position: relative;
    left: 1%;
}

li a:hover {
    color: red;
}


hr {
    color: lightgray;
    width: 80%;
    position: relative;
    left: -2%;
}
 

Attachments

  • Screenshot from 2022-11-06 12-46-32.png
    Screenshot from 2022-11-06 12-46-32.png
    114.5 KB · Views: 3
Top