3 replies [Last post]
gerard
Offline
Regular
Last seen: 12 years 28 weeks ago
Joined: 2005-08-19
Posts: 45
Points: 0

http://www.productinnovations.co.uk/aria2/

I'm trying to introduce a submenu class onto my menu which indents the text only. By giving a padding-left class to the relevent list items however, I'm also pushing the bottom border and the hover to the right. Is there a way I can just push the text over but not the whole of its surroundings? I tried doing a span class on the text within the li but that didn't work....

Aria

  • Intermediaries
  • Marketing
  • Literature
  • Top Story Tele

  • Product Centre
  • Funds
  • Advertising
  • How to Invest
  • Contact Us
  • Brochures
  • UK Retail
  • banner


    Text Here

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed libero massa, tristique id, suscipit sed, luctus id, magna. Phasellus bibendum imperdiet elit. Quisque blandit. Aenean sed quam. Mauris tempus sem et massa. Maecenas mollis purus. Donec sodales purus at libero. Morbi ut ante tempus nunc semper placerat. Integer libero neque, porttitor eu, laoreet sed, ornare et, purus. Vestibulum non ipsum ut dolor consequat vulputate. Donec hendrerit aliquet nisl. In id dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent tellus. Duis molestie, ante et congue condimentum, lectus mauris iaculis velit, bibendum condimentum ipsum velit sit amet pede. Duis sed enim. Nulla porttitor interdum urna. Praesent pellentesque risus vel ante.

    pic


    pic2




    Latest News

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed libero massa, tristique id, suscipit sed, luctus id, magna. Phasellus bibendum imperdiet elit. Quisque blandit. Aenean sed quam. Mauris tempus sem et massa. Maecenas mollis purus. Donec sodales purus at libero. Morbi ut ante tempus nunc semper placerat. Integer libero neque, porttitor eu, laoreet sed, ornare et, purus. Vestibulum non ipsum ut dolor consequat vulputate. Donec hendrerit aliquet nisl. In id dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent tellus. Duis molestie, ante et congue condimentum, lectus mauris iaculis velit, bibendum condimentum ipsum velit sit amet pede. Duis sed enim. Nulla porttitor interdum urna. Praesent pellentesque risus vel ante.




    Quick Links


    Lorem ipsum



    dolor sit amet,



    consectetuer adipiscing elit.



    Sed libero massa



    tristique id



    banner




    © 2007, All Rights Reserved                         Privacy Statement | Legal Information



    body {
    margin: 0;
    padding: 0;
    color: #000000;
    background-color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-image: url(images/stripe_back.gif);

    }

    a {
    text-decoration: underline;
    }

    a:hover {
    text-decoration: none;
    color: #990000;
    background-color: #FFFFFF;
    }

    h1 {
    color: #FE6700;
    font-size: 16px;
    background-color: #FFFFFF;
    }
    table {
    margin: 0;
    }
    h2 {
    font-weight: bold;
    color: #FFFFFF;
    margin: 0 1em;
    font-size: 12px;
    }

    #wrapper {
    width: 760px;
    margin: 20px;
    }

    #header {
    margin: 0;
    padding: 0;
    background-color: #2D6CB2;
    color: #FFFFFF;
    width: 100%;
    }
    #toplogo {
    background-color: #000000;
    color: #FFFFFF;
    }

    #content {
    color: #000000;
    background-color: #FFFFFF;
    margin: 0 0 0 220px;
    }

    #contactcontent {
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #8c0000;
    margin: 0 0px 0 220px;
    padding: 8px;
    }

    #main {
    margin-top: 10px;
    }

    #leftmenu {
    float: left;
    width: 180px;
    background-color: #FFFFFF;
    color: #343434;
    margin-bottom: 10px;
    }

    #leftmenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    #leftmenu a {
    display: block;
    color: #336699;
    background-color: #FFFFFF;
    width: 140px;
    padding: 4px 8px 4px 30px;
    text-decoration: none;
    font-weight: normal;
    border-bottom: 1px dashed #cccccc;
    font-size: 11px;
    }

    #leftmenu a:hover {
    background-color: #000000;
    color: #FFFFFF;
    }

    #leftmenu li
    {
    margin: 0 0 0 0;
    font-size: 14px;
    }

    #rightmenu {
    float: right;
    width: 180px;
    background-color: #34689A;
    margin-bottom: 10px;
    padding: 5px;
    color: #FFFFFF;
    background-repeat: repeat-x;
    }
    .submenu {
    padding-left: 12px;
    width: 168px;
    }

    .center {
    text-align: center;
    }

    #rightmenu a {
    color: #FFFF00;
    background-color: #34689A;
    }

    #rightmenu a:hover {
    color: #00FF00;
    background-color: #34689A;
    text-decoration: none;
    }

    #footer {
    min-height: 30px
    clear: both;
    color: #FFFFFF;
    background-color: #000000;
    border: 1px solid black;
    margin-top: 10px;
    text-align: center;
    font-size: 10px;
    }
    #footer a {
    color: #FFFFFF;
    background-color: #000000;
    }
    #footer td {
    color: #FFFFFF;
    background-color: #000000;
    }

    #wrapper #footer #center {
    text-align: center;
    }

    .leftfloat {
    float: left;
    border: 0;
    padding: 0 20px 10px 25px;
    }
    .noborder {
    border: 0;
    }
    .blackborder {
    border: 1px solid black;
    }

    #date {
    padding-left: 5px;
    position: absolute;
    top: 80px;
    right: 22px;
    background-color: #336699;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;

    }

    #phonenumber {
    padding-left: 5px;
    position: absolute;
    top: 80px;
    left: 22px;
    background-color: #336699;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;

    }

    .menudesc {
    font-size: 11px;
    }

    .rightfloat {
    float: right;
    margin: 0;
    padding: 0px 25px 10px 20px;
    }
    #clear {
    clear: both;
    }
    .lefttext {
    text-align: left;
    }
    .strong {
    font-weight: bold;
    }
    .bluetablerow {
    background-color: #34689A;
    color: #FFFFFF;
    }
    .darkbluetablerow {
    color: #FFFFFF;
    background: #003366;
    padding: 5px;
    }
    .calluback {
    font-size: 14px;
    color: #FFFFFF;
    font-weight: bold;
    background-color: #34689A;
    }
    .calluback a {
    color: #FFFF00;
    background-color: #34689A;
    }
    .calluback a:hover {
    color: #CCCCCC;
    background: #34689A;
    }
    .testimonials {
    text-align: left;
    display: block;
    width: 90%;
    border: 2px solid black;
    padding: 20px;
    background-color: #EFEFEF;
    color: #000000;
    }
    .nounderline {
    text-decoration: none;
    }
    h3 {
    font-size: 16px;
    font-weight: bold;
    color: #31639C;
    background-color: #FFFFFF;
    }
    #leftmenupadding {
    padding: 8px;
    font-size: 14px;
    }

    .blackborder {
    border: 1px solid #666666;
    }
    img {
    border: 0;
    }
    .textbox {
    border: 1px solid #cccccc;
    background-image: url(images/textboxbg.jpg);
    background-repeat: repeat-x;
    padding: 5px;
    }

    karinne
    karinne's picture
    Offline
    Enthusiast
    Aylmer, QC, Canada
    Last seen: 13 years 8 weeks ago
    Aylmer, QC, Canada
    Timezone: GMT-5
    Joined: 2004-01-14
    Posts: 291
    Points: 0

    Please use the <code> tag to

    Please use the <code> tag to wrap your code.

    Use the text-indent property. Replace:

    .submenu {
    padding-left: 12px;
    width: 168px;
    }

    with

    .submenu { text-indent: 12px; width: 168px; }

    gerard
    Offline
    Regular
    Last seen: 12 years 28 weeks ago
    Joined: 2005-08-19
    Posts: 45
    Points: 0

    Thats great Karinne - many

    Thats great Karinne - many thanks.

    karinne
    karinne's picture
    Offline
    Enthusiast
    Aylmer, QC, Canada
    Last seen: 13 years 8 weeks ago
    Aylmer, QC, Canada
    Timezone: GMT-5
    Joined: 2004-01-14
    Posts: 291
    Points: 0

    No problem.

    No problem.