Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Watch Video

Posted February 2, 2015 6:07am by

how to remove the underline of a link when the page in index.php

Hello,

I have noticed that when we put in header.php, $section = "contact", and then in the li tag we have

<li class="shirts  <?php if($section == "shirts") {echo "on";}?>  ">

And you run the code and index.php appears, both the shirts and contact links are always underlined; however if you click on shirt link, then the pc takes you to shirts.php, and only the shirts link is underlined.

I feel in index.php the contact and shirt links should not be underlined at all until they are clicked. How can I prevent these links from being underlined when I run the index.php file.

thanks

<?php
$pageTitle ="Contact Mike";
$section = "contact";


<html>
<head>
    <title><?php echo $pageTitle ?></title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700" type="text/css">
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body>

    <div class="header">

        <div class="wrapper">

            <h1 class="branding-title"><a href="./">Shirts 4 Mike</a></h1>

            <ul class="nav">
                <li class="shirts  <?php if($section == "shirts") {echo "on";}?>  "><a href="shirts.php">Shirts</a></li>
                <li class="contact <?php if($section == "contact") {echo "on";}?> "><a href="contact.php">Contact</a></li>
                <li class="cart"><a href="#">Shopping Cart</a></li>
            </ul>

        </div>

    </div>

    <div id="content">





?>
<div class="section page">

    <h1>Contact </h1>

</div>

<?php
include('inc/footer.php');

?>

February 2, 2015 6:17am

Please post your index.php code.

15 Answers

February 2, 2015 7:36am

There's your problem. Your "inc/header.php" file is in a different directory(that directory being "inc"). So you should going up one level when linking to your css.

<link rel="stylesheet" href="../css/style.css" type="text/css">

February 2, 2015 8:58am

Let's say "xampp/htdocs/randy/" is a room. In this room we're making PHP punch. There's two doors, in this room, that go downstairs to another room. Above one of the doors there's a sign that says "inc" and above the other door it says "css". So we're making two different types of punches, right now we have contact.php and index.php. We realized that we're always using the same starter ingredients in our punch so we kept that in our "inc" room in a file called "header.php" BUT from time to time we spice it up a bit. We keep our spices in our "css" room in a file called "style.css". We can't just grab our spices from the "css" room while in the "inc" room, so we have to go up the steps "../" then go into the "css" room.

I hope this analogy makes sense.

February 3, 2015 2:03am

Sorry, I don't know how your brain can keep going at that of the morning, but ok, let me try to tackle this with a fresh head.

I love this analogy, but I let me see why nothing is still not working on my end:

1) Goal: To get rid of the white background in the shirt's link, so that it is orange just like contact and the cart picture, right

2) We are targeting <link rel="stylesheet" href="css/style.css" type="text/css"> in the file called header.php which in the folder called inc. This file is universally shared, through an include ,by all the pages in this program(index.php, shirts.php, contact.php..)

3) I guess the last stage to this is the file structure, so let see:

xampp/htdocs/randy Folder called CSS has a file called style.css Folder called Inc has a file called header.php Files outside Folder called randy are contact.php and index.php

Are you sure I should go to header.php and change the link to: <link rel="stylesheet" href="../css/style.css" type="text/css"> **When I do that, all the style get taken off from all the pages, but when I change it to this below, all the pages go back to normal with the css applied <link rel="stylesheet" href="css/style.css" type="text/css">

Oh, I am sorry for picking your brain, but could you please use all the files that I have posted and create the structure that I have explained, you will see that the changes you suggested don't apply. ** Please use the originally style.css from this class to test my code, if you do.

By using my code, you chould see two problems in index.php

1) a white background in the shirts link in the navigator, while all the other links are orange. 2) the links are underlined in index.php, even though they haven't been cliked on

Big Thanks!!!

February 2, 2015 6:40am

Hello Hugo,

Here is the index.php

<?php 
$pageTitle ="Main Page for Mike";
include('inc/header.php'); ?>
        <div class="section banner">

            <div class="wrapper">

                <img class="hero" src="img/mike-the-frog.png" alt="Mike the Frog says:">
                <div class="button">
                    <a href="#">
                        <h2>Hey, I&rsquo;m Mike!</h2>
                        <p>Check Out My Shirts</p>
                    </a>
                </div>
            </div>

        </div>

        <div class="section shirts latest">

            <div class="wrapper">

                <h2>Mike&rsquo;s Latest Shirts</h2>

                <ul class="products">
                    <li><a href="#">
                            <img src="img/shirts/shirt-108.jpg">
                            <p>View Details</p>
                        </a>
                    </li><li>
                        <a href="#">
                            <img src="img/shirts/shirt-107.jpg">
                            <p>View Details</p>
                        </a>
                    </li><li>
                        <a href="#">
                            <img src="img/shirts/shirt-106.jpg">
                            <p>View Details</p>
                        </a>
                    </li><li>
                        <a href="#">
                            <img src="img/shirts/shirt-105.jpg">
                            <p>View Details</p>
                        </a>
                    </li>                               
                </ul>

            </div>

        </div>
<?php

include('inc/footer.php');
?>

February 2, 2015 6:42am

Hello Hugo,

Can you please respond to this post by post your answer under "Add and Answer". It is way at the bottom of this page.

Cheers!

February 2, 2015 6:42am

You can target those links by using:

nav > li a{
text-decoration: none;
}

February 2, 2015 6:47am

Hello David,

here is the original css that comes with this entire code. We are not supposed to touch it, but as we code we make use of it.

/*! normalize.css - http://github.com/necolas/normalize.css */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects `block` display not defined in IE6/7/8/9 & FF3.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}

/*
 * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4.
 * Known issue: no IE6 support.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Addresses `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

/*
 * Addresses margins handled incorrectly in IE6/7.
 */

body {
    margin: 0;
}



/* ==========================================================================
   Links
   ========================================================================== */

/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 * people.opera.com/patrickl/experiments/keyboard/test
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/*
 * Addresses font sizes and margins set differently in IE6/7.
 * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

/*
 * Addresses styling not present in IE7/8/9, S5, Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in FF3+, S4/5, Chrome.
 */

b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

/*
 * Addresses styling not present in S5, Chrome.
 */

dfn {
    font-style: italic;
}

/*
 * Addresses styling not present in IE6/7/8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/*
 * Addresses margins set differently in IE6/7.
 */

p,
pre {
    margin: 1em 0;
}

/*
 * Corrects font family set oddly in IE6, S4/5, Chrome.
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * Addresses CSS quotes not supported in IE6/7.
 */

q {
    quotes: none;
}

/*
 * Addresses `quotes` property not supported in S4.
 */

q:before,
q:after {
    content: '';
    content: none;
}

small {
    font-size: 75%;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 * gist.github.com/413930
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Lists
   ========================================================================== */

/*
 * Addresses margins set differently in IE6/7.
 */

dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}

/*
 * Addresses paddings set differently in IE6/7.
 */

menu,
ol,
ul {
    padding: 0 0 0 40px;
}

/*
 * Corrects list images handled incorrectly in IE7.
 */

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Removes border when inside `a` element in IE6/7/8/9, FF3.
 * 2. Improves image quality when scaled in IE7.
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE6/7/8/9, S5, O11.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE6/7.
 */

form {
    margin: 0;
}

/*
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE6/7/8/9.
 * 2. Corrects text not wrapping in FF3.
 * 3. Corrects alignment displayed oddly in IE6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers.
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
 * 3. Improves appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/*
 * Addresses FF3/4 setting `line-height` on `input` using `!important` in the
 * UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Removes inner spacing in IE7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled],
input[disabled] {
    cursor: default;
}

/*
 * 1. Addresses box sizing set to content-box in IE8/9.
 * 2. Removes excess padding in IE8/9.
 * 3. Removes excess padding in IE7.
 *    Known issue: excess padding remains in IE6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
 *    to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in FF3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9.
 * 2. Improves readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/*
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}


html {overflow-y: scroll; overflow-x: hidden;}
body {font-family: 'Oswald', sans-serif; background:#f0eeed; color: #676767;}

html, body, .wrapper{
width:100%;

}
.wrapper {width: 980px; margin: 0 auto;}
.header:after {content:"";height:0;display:block;visibility:hidden;clear:both;}
.header {background: #ff8400; border-bottom: 5px solid #f16702;}
.header .branding-title {float: left; margin: 0 0 0 12px; font: 0/0 serif; text-shadow: none; color: transparent; width:122px;height:77px;background:url(../img/branding-title.png) 0 14px no-repeat;padding: 14px 0;}
.header .branding-title a {display: block; height: 77px; width: 122px;}
.header .nav {float: right; top: 0; right: 0; margin: 0; position: relative; left: 15px; z-index: 99999999;}
.header .nav li {display: inline-block; margin: 0; list-style: none;}
.header .nav li.cart {margin-left: 64px; border: 0 solid #f16702; border-width: 0 8px;}
.header .nav li a {
    color: white;
    text-decoration: none;
    display: block;
    line-height: 95px;
    padding: 10px 0 0;
    margin: 0 0 0 50px;
    width: 90px;
    text-align: right;
    background: url('../img/nav-sprite.png') no-repeat 0px 105px;
    text-transform: uppercase;
    white-space: nowrap; 
}
.header .nav li.on a {text-decoration: underline;}
.header .nav li a:hover, .header .nav li a:active {color: #FFE200;}
.header .nav li.shirts a {background-position: 0px 0px;}
.header .nav li.contact a {background-position: 0px -105px;}
.header .nav li.cart a {
    width: 122px;
    font-size: 0/95px serif;
    text-shadow: none;
    color: transparent;
    background-position: 16px -216px;
    margin: 0;
}
.header .nav li.cart a:hover {background-position: 16px -321px;}
#content {min-height: 400px; background: white;}
.section.banner {height: 290px; background: #3d3d3d url('../img/banner-background.jpg') center center no-repeat;}
.section.banner .wrapper {position: relative;}
.section.banner .hero {position: absolute; top: -89px; left: 177px; z-index: 999;}
.section.banner .button {
    display: block;
    position: absolute;
    top: 97px;
    left: 590px;
    margin: 0;
    background-image: linear-gradient(bottom, rgb(35,124,219) 0%, rgb(39,136,232) 16%, rgb(119,184,249) 100%);
    background-image: -o-linear-gradient(bottom, rgb(35,124,219) 0%, rgb(39,136,232) 16%, rgb(119,184,249) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(35,124,219) 0%, rgb(39,136,232) 16%, rgb(119,184,249) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(35,124,219) 0%, rgb(39,136,232) 16%, rgb(119,184,249) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(35,124,219) 0%, rgb(39,136,232) 16%, rgb(119,184,249) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(35,124,219)),
        color-stop(0.16, rgb(39,136,232)),
        color-stop(1, rgb(119,184,249))
    );
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 5px solid #029af1;
    z-index: 0;
}
.section.banner a {
    width: 200px;
    padding: 20px 20px 20px 50px;
    display: block;
    text-decoration: none;
    background: url(../img/banner-link-arrow.png) 100% 50% no-repeat;
    color: #FFF;
}
.section.banner a:hover {
    color: #ffe200;
}
.section.banner h2 {
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    line-height: 1.3;
}
.section.banner p {
    color: #ffe200;
    font-style: italic;
    font-size: 14px;
    margin: 0;
}
.section.page:after {content:"";display:block;visibility:hidden;height:0;clear:both;}
.section.page {padding: 34px 0; background: white;}
.section.page h1 {
    font-size: 24px; 
    text-align: center;
    text-transform: uppercase;
    line-height: 1.6;
    font-weight: normal;    
}
.section.page .shirt-details h1 {
    text-align: left;
}
.section.page p {width: 375px; margin-left: auto; margin-right: auto; }
.section.page .shirt-details h1 .price {color: #9d9f4e; padding-right: 10px; font-size: 34px;}
.section.shirts {padding-bottom: 42px; background: #fff;}
.section.shirts h2 {
    font-size: 24px; 
    color: #c0bfbe;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.6;
    font-weight: normal;
}
.section.shirts ul.products {margin: 0 0 -17px 0; padding: 0; width: 997px;}
.section.shirts ul.products li {
    display: inline-block;
    list-style: none;
    border: 1px solid #e3e1e0;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    width: 202px;
    text-align: center;
    text-transform: lowercase;
    padding: 14px;
    background: #f0eeed;
    margin: 0 0 17px 17px;
    position: relative;
    left: -17px;
}
.section.shirts ul.products li a:hover:after {
    content: '+';
    font-size: 50px; position: absolute; top: -10px; right: 25px; color: #f16702; vertical-align: top;    
}
.section.shirts ul.products li a {
    background: white;
    display: block;
    padding: 30px 0 10px;
    text-decoration: none;
    color: #999;
    opacity: .9;
}
.section.shirts ul.products li a:hover {
    opacity: 1;
    color: #666;
}
.section.shirts ul.products li img {
    width: 190px;
}
.section.shirts ul.products li p {
    margin-left: 0;
    margin-right: 0;
    width: auto;
}

.shirt-picture {
    float: left;
    width: 460px;
    text-align: center;
    border: 1px solid #d9d9d9;
    padding: 14px;
    background: #f0eeed;    
}
.shirt-picture span {
    background: white;
    display: block;
    width: 100%;
    padding: 36px 0 61px;
}
.shirt-picture img {width: 292px;}
.shirt-details {
    width: 460px;
    float: right;
}
.shirt-details form {
    margin-left: 0;
}
form {width: 375px; margin: 34px auto;}
form tr {
    border: 1px solid #CCC;
    background: #f4f3f2;
}
form table {width: 375px; margin-bottom: 16px;}
form th {
    width: 85px;
    border-right: 1px solid #CCC;
    vertical-align: middle;
    padding: 8px;
}
form td {
    padding: 15px 15px;
}
form td select,
form td input,
form td textarea {
    width: 100%;
}
form input[type="submit"] {
    width: 375px;
    text-align: center;
    border: 1px solid #8e8e46;
    background: #9c9f4e;
    color: #FFF;
    -webkit-border-radius: 2px;
    border-radius: 2px;    
    font-size: 14px;
    text-transform: uppercase;
    padding: 14px;
}
.breadcrumb {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    padding: 14px 0 48px;
}
.note-designer {
    font-family: Georgia, serif;
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
}

.footer {
    background: #f0eeed;
    padding: 42px 0;
    font-size: 12px;
    color: #a5a5a5;
    font-family: Helvetica, Arial, sans-serif;
}




.footer ul {margin: 0; padding: 0; float: left;}
.footer ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    text-transform: lowercase;
}
.footer ul li:after {content:" | "}
.footer ul li:last-child:after {content:"";}
.footer p {margin: 0; text-align: right; padding-right: 3px;}
.footer a {text-decoration: none; color: #539def; margin: 0 10px;}
.footer li:first-child a {margin-left: 4px;}
.footer a:hover, .footer a:active {text-decoration: underline;}

February 2, 2015 6:52am

I guess my question now is: Are you having problems with the challenge or you're looking for help with your syntax in general?

I just asking this so I know exactly what I'm on the lookout for.

February 2, 2015 6:55am

Yeah, it has just dawned on me that it is hard to know if a post is related to a quiz (challenge code) or the class itself.

In this case, I am following the class, and these funky things are happening, so yeah its a syntax question.

Cheers!

February 2, 2015 7:03am

I think I seen the problem. It could be with your includes. I noticed that in your index.php file that you didn't use an include but forgot to include any meta data.

February 2, 2015 7:10am

Not, sure if you look at this index.php, you will see the all the includes are there

<?php 
$pageTitle ="Main Page for Mike";
include('inc/header.php'); ?>
        <div class="section banner">

            <div class="wrapper">

                <img class="hero" src="img/mike-the-frog.png" alt="Mike the Frog says:">
                <div class="button">
                    <a href="#">
                        <h2>Hey, I&rsquo;m Mike!</h2>
                        <p>Check Out My Shirts</p>
                    </a>
                </div>
            </div>

        </div>

        <div class="section shirts latest">

            <div class="wrapper">

                <h2>Mike&rsquo;s Latest Shirts</h2>

                <ul class="products">
                    <li><a href="#">
                            <img src="img/shirts/shirt-108.jpg">
                            <p>View Details</p>
                        </a>
                    </li><li>
                        <a href="#">
                            <img src="img/shirts/shirt-107.jpg">
                            <p>View Details</p>
                        </a>
                    </li><li>
                        <a href="#">
                            <img src="img/shirts/shirt-106.jpg">
                            <p>View Details</p>
                        </a>
                    </li><li>
                        <a href="#">
                            <img src="img/shirts/shirt-105.jpg">
                            <p>View Details</p>
                        </a>
                    </li>                               
                </ul>

            </div>

        </div>
<?php

include('inc/footer.php');
?>

February 2, 2015 7:15am

Sorry, my mistake. It's 2:14am here, but I meant the contact page you coded above.

Look at your contact page above when you're linking directly to "css/style.css" so i'm pretty sure the problem is in your header include file. Could you post that code here?

February 2, 2015 7:15am

Also, the link shirt in the Navigation bar of index.php, appears as a big white square as opposed to orange like the rest of links in the navigation bar in index.php. I looked at what could be causing these underlines and this big white square around the shirt link, but I cant find the answer in the css. I wonder if these happened while the instructor was creating this course.

February 2, 2015 7:18am

No worries :) Thanks for the help though!!

<?php
$pageTitle ="Contact Mike";
$section = "contact";


include('inc/header.php');



?>
<div class="section page">

<div class="wrapper">
    <h1> Contact</h1>
     <p>I&rsquo;d love to hear from you! Complete the form to send me an email.</p>

                <form method="post" action="contact-process.php">

                    <table>
                        <tr>
                            <th>
                                <label for="name">Name</label>
                            </th>
                            <td>
                                <input type="text" name="name" id="name">
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label for="email">Email</label>
                            </th>
                            <td>
                                <input type="text" name="email" id="email">
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label for="message">Message</label>
                            </th>
                            <td>
                                <textarea name="message" id="message"></textarea>
                            </td>
                        </tr>                    
                    </table>
                    <input type="submit" value="Send">

                </form>

</div>

</div>

<?php
include('inc/footer.php');

?>

February 2, 2015 7:21am

And btw this isn't the code you initially posted above.

February 2, 2015 7:19am

I meant the code that's in your "inc/header.php"

February 2, 2015 7:32am

?? Here is inc/header.php, but I don't think we are supposed to include anything here. Ok, here ....

<html>
<head>
    <title><?php echo $pageTitle ?></title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700" type="text/css">
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body>

    <div class="header">

        <div class="wrapper">

            <h1 class="branding-title"><a href="./">Shirts 4 Mike</a></h1>

            <ul class="nav">
                <li class="shirts  <?php if($section == "shirts") {echo "on";}?>  "><a href="shirts.php">Shirts</a></li>
                <li class="contact <?php if($section =="contact") {echo "on";}?> "><a href="contact.php">Contact</a></li>
                <li class="cart"><a href="#">Shopping Cart</a></li>
            </ul>

        </div>

    </div>

    <div id="content">

February 2, 2015 7:36am

Hello David,

I am sorry about that. I have just been redoing this code over and over, but the original problem is always there.

Sorry about that!

February 2, 2015 7:42am

Oh, ok I have going back and forth. Can you please tell me which file I should fix the css problem.

**Amazing that you could pin point this problem with all those files I habe posted

THanks!

February 2, 2015 7:47am

If you fixed your include then adding this to your style.css file then you should be fine.

nav > li a{
text-decoration: none;
}

Edit: Asking you to post code and asking questions gives a mental picture, of your file structure, to whoever is trying to help with your syntax problems

February 2, 2015 8:01am

The only css that I see is the one in inc/header.php and I tried to change to this but ...

<html>
<head>
    <title><?php echo $pageTitle ?></title>
    <link rel="stylesheet" href="inc/css/style.css" type="text/css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700" type="text/css">
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body>

    <div class="header">

        <div class="wrapper">

            <h1 class="branding-title"><a href="./">Shirts 4 Mike</a></h1>

            <ul class="nav">
                <li class="shirts  <?php if($section == "shirts") {echo "on";}?>  "><a href="shirts.php">Shirts</a></li>
                <li class="contact <?php if($section =="contact") {echo "on";}?> "><a href="contact.php">Contact</a></li>
                <li class="cart"><a href="#">Shopping Cart</a></li>
            </ul>

        </div>

    </div>

    <div id="content">

February 2, 2015 8:11am

if you're already in your "inc/header.php" then why are you linking to your style.css file using

<link rel="stylesheet" href="inc/css/style.css" type="text/css">

it should be

<link rel="stylesheet" href="../css/style.css" type="text/css">

I'm guessing your file structure looks like

/---------
               |
               |
               |
               | -----inc---
               |                  |------header.php
               |
               |-----css-----
               |                   |------style.css
               |
               |---index.php
               |
               |---contact.php

February 2, 2015 8:28am

haha you are asking a great question; I cant wait for me to unconfuse myself, in the meantime please bear with me :)

Ok, here is my file structure in words:

xampp/htdocs/randy/

From here I have these folders and files in them:

Folder called CSS with a file called style.css Folder called Inc with 2 files called header.php and footer.php

I have some loose files in randy folder which are

contact.php indext.php shirts.php

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

orange sky

orange sky

how to remove the underline of a link when the page in index.php

Hugo Paz

Hugo Paz

15 Answers

David Tonge

David Tonge

David Tonge

David Tonge

orange sky

orange sky

orange sky

orange sky

orange sky

orange sky

David Tonge

David Tonge

orange sky

orange sky

David Tonge

David Tonge

orange sky

orange sky

David Tonge

David Tonge

orange sky

orange sky

David Tonge

David Tonge

orange sky

orange sky

orange sky

orange sky

David Tonge

David Tonge

David Tonge

David Tonge

orange sky

orange sky

orange sky

orange sky

orange sky

orange sky

David Tonge

David Tonge

orange sky

orange sky

David Tonge

David Tonge

orange sky

orange sky