4 replies [Last post]
opap
Offline
newbie
Last seen: 8 years 27 weeks ago
Timezone: GMT+2
Joined: 2012-01-20
Posts: 2
Points: 3

Consider that you have a web site with the following 5 pages: html.html, css.html, php.html, mysql.html and js.html. In each of these pages you only have the following html code inside the body:
Suppose that all pages link to the same external css stylesheet, called styles.css.

<ul>
<li id="a1"><a href="html.html">HTML</a></li>
<li id="a2"><a href="css.html">CSS</a></li>
<li id="a3"><a href="php.html">PHP</a></li>
<li id="a4"><a href="mysql.html">MySQL</a></li>
<li id="a5"><a href="js.html">JavaScript</a></li>
</ul>

Define appropriate css styles for styles.css, so that in each page, the link to itself does not appear. What else would you need define in each page? Note that you are not allowed to change the above code inside the body of the pages.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 4 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Naughty, naughty!

You're supposed to stay awake in class (I know it's difficult with some lecturers), so you are able to do your assignments on your own. Wink

For starters, your instructor does not inspire confidence in his understanding of semantic markup. The use of id tokens such as "a1, a2, a3" etc. does not reflect any information about the particular list item. The file names being linked are hardly better. Such names lead to confusion; it is better to use either real-world examples or commonly used placeholders such as foo.html, or bar.php.

One simple way to do the assignment is to use an id token on the body element that reflects in which file the document lives. For example, for the php.php page:

<body id="php-page">
  <ul>
    <li id="a1"><a href="html.html">HTML</a></li>
    <li id="a2"><a href="css.html">CSS</a></li>
    <li id="a3"><a href="php.html">PHP</a></li>
    <li id="a4"><a href="mysql.html">MySQL</a></li>
    <li id="a5"><a href="js.html">JavaScript</a></li>
  </ul>
</body>
=====================
#html-page #a1,
#css-page #a2,
#php-page #a3,
#mysql-page #a4,
#js-page #a5 {
    display: none;
    }

Build a truth table to test the combinations.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

opap
Offline
newbie
Last seen: 8 years 27 weeks ago
Timezone: GMT+2
Joined: 2012-01-20
Posts: 2
Points: 3

gary.turner wrote:You're

gary.turner wrote:

You're supposed to stay awake in class (I know it's difficult with some lecturers), so you are able to do your assignments on your own. Wink

For starters, your instructor does not inspire confidence in his understanding of semantic markup. The use of id tokens such as "a1, a2, a3" etc. does not reflect any information about the particular list item. The file names being linked are hardly better. Such names lead to confusion; it is better to use either real-world examples or commonly used placeholders such as foo.html, or bar.php.

One simple way to do the assignment is to use an id token on the body element that reflects in which file the document lives. For example, for the php.php page:

<body id="php-page">
  <ul>
    <li id="a1"><a href="html.html">HTML</a></li>
    <li id="a2"><a href="css.html">CSS</a></li>
    <li id="a3"><a href="php.html">PHP</a></li>
    <li id="a4"><a href="mysql.html">MySQL</a></li>
    <li id="a5"><a href="js.html">JavaScript</a></li>
  </ul>
</body>
=====================
#html-page #a1,
#css-page #a2,
#php-page #a3,
#mysql-page #a4,
#js-page #a5 {
    display: none;
    }

Build a truth table to test the combinations.

cheers,

gary

Quote:

OK, first i totally agree with your first comments Smile
After saying that, i have to admit I dont fully understand your solution...how will we, with one common .css file hide the link to the page displayed itself only?

OK SORRY I DID try it, you right, its so simple Smile Thank you!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 29 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Could have found the answer

Could have found the answer to this if you had looked through the 'How To' section, the technique is outlined there.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

extraperson1988
extraperson1988's picture
Offline
newbie
Last seen: 8 years 27 weeks ago
Timezone: GMT-8
Joined: 2012-01-24
Posts: 3
Points: 3

Lol so the answer was to add

Lol so the answer was to add a container div, and then display none the corresponding id? Cool. I was confused with the wording of the question, hah.

"What else would you need define in each page?" Container div, duh...