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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing Individual Item in List

    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]

  • #2
    New Coder
    Join Date
    Dec 2007
    Posts
    43
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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; }
    http://anothera.net | New Era Art Group

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #4
    New Coder
    Join Date
    Dec 2007
    Posts
    43
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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
    Last edited by cixxy; 01-24-2012 at 11:25 PM.
    http://anothera.net | New Era Art Group

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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?
    Teed

  • #6
    New Coder
    Join Date
    Dec 2007
    Posts
    43
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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
    http://anothera.net | New Era Art Group


  •  

    Posting Permissions

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