Changing Individual Item in List

dignan · 01-24-2012, 10:46 PM

Hi, I have seen this issue discussed in other threads but I cannot properly apply the solutions. I have a horizontal list of four items. Three of the items are links and have low opacity, but I would like one of the items to not be a link and have full opacity. Once I take the link anchor away from one list item I wish to change it longer is part of the list and therefore the spacing of the list becomes asymmetrical. I have tried a number of things but, by golly, I cannot figure it out. The link is www.joybrother.com/joyliterature.html Any help is much appreciated!

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Joybrother</title>
<link rel="stylesheet" type="text/css" media="screen" href="joybrother2.css">

</head>

<body>
<div id="container">

<a class="joybrotherbanner" href="index.html"></a>

<div id="navcontainer">
<ul id="navlist">
<li><a href="ephemera.html">Ephemera</a></li>
<li><a href="learningtodraw.html">Learning to Draw</a></li>
<li>Literature</li>
<li><a href="photography.html">Photography</a></li>
</ul>

<h1 style="text-align: center">Prologue</h1>

<div id="navcontainer">
<ul id="navlist2">
<li><a href="kowalski.html">Kowalski.................2007-2009</a></li>
<li><a href="failedascetic.html">Failed Ascetic...........2010</a></li>

</ul>

<h1 style="text-align: center">Content</h1>

<div id="navcontainer">
<ul id="navlist2">
<li><a href="lhommedelarue.html">L'homme de la rue........2010-Present</a></li>
</ul>

<h1 style="text-align: center">Epilogue</h1>

</div>
</body>
</html>[CODE]

[CODE]3html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section

{font-size: 100%; font: inherit; vertical-align: baseline;
text-decoration: none;}

/* HTML5 display-role reset for older browsers */

#container {width: 800px; margin: auto;}

body {background-color: white;}

.joybrotherbanner
{display:block; width:500px; height:140px;
background-image:url(joybrotherbanner1.gif);
margin-left: 150px;
}

ul#navlist
{
margin-left: 90px;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 20px; }

#navlist a:link
{
font-family: monospace, "courier new";
color: black;
opacity:.5;
text-decoration: none;
}

#navlist a:hover
{
color: #2e8b57 ;
font-style: italic;
font-family: monospace, "courier new";
text-decoration: none;
}

{ color:red;
opacity:.9;

}

h1
{font-family: monospace, "courier new";
font-size:17px;
margin-top: 40px;}

ul#navlist2
{
margin-left: 200px;
padding-left: 0;
white-space: nowrap;
}

#navlist2 li
{
display: block;
list-style-type: none;
}

#navlist2 a { padding: 5px 10px }

#navlist2 a:link
{
font-family: monospace, "courier new";
color: black;
text-decoration: none;
}

#navlist2 a:hover
{
color: #2e8b57 ;
font-style: italic;
font-family: monospace, "courier new";
text-decoration: none;
}
[CODE]

cixxy · 01-24-2012, 10:51 PM

Its your #navlist a { padding: 3px 20px; } that has the padding and is a link. Therefore if you add <p> </p> to your unlinked text instead of <a> </a> and give your navlist p the same setting as the link it will fix it...
eg
#navlist p { padding: 3px 20px; }

dignan · 01-24-2012, 11:13 PM

Thanks for the reply. I have done as you suggested:

<li><p>Literature</p></li>

#navlist p { padding: 3px 20px; }

#navlist p
{
font-family: monospace, "courier new";
color: black;
text-decoration: none;
}

The result is this: http://joybrother.com/joyliterature.html

I'm not sure where I went wrong...

cixxy · 01-24-2012, 11:21 PM

ul#navlist {
margin-left: 90px;
padding-left: 0;
white-space: nowrap;
float: left;
width: 700px;
display: block;
height: 30px;
}

#navlist p {
padding: 0 20px;
margin-top: 0;
}

#navlist li {
display: inline;
list-style-type: none;
float: left;
}

Those are the changes you need to make. I also recommend buying a book on css or doing some tutorials to understand some of those alignment things like floats which are really basic

teedoff · 01-24-2012, 11:48 PM

I'm confused on what you're trying to acheive.

Not sure why you'd nest a <p> tag inside a list tag either.

Can you please explain in more detail what you're looking to do? If you just want the "Literature" link to not be linked to anything, why cant you just remove the <a> tag altogether?

cixxy · 01-24-2012, 11:52 PM

actually the p works but i guess it should be <span> if you want to be politically correct. also his padding should be inside the li element not the a or p or span
now if anyone can help my post that would be a miracle