#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    6
    Rep Power
    0

    Text indenting in drop down menu


    I am learning to do drop down menus and so far, so good. What I cannot figure out is that in the drop downs the text seems to be indented. For example, if the text said "New information", the "New" part starts what appears to be a few spaces to the right. I did, most recently, set the text to be centered but it still does this. The effect is that if the text wraps to a second line, then the second line is further to the left. Looks odd to me but I can't figure out how to fix it.

    Thanks for any help.

    Richard
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Without seeing your actual markup and css, we can't have a clue what's going on. Please either post the code, or give us a link to your test case.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    6
    Rep Power
    0

    My CSS code


    Here is the CSS code I am using for the navigation, drop down menus. I am new to this forum but don't see a way to post a picture or I would show you what it looks like at the web page menus.
    _____________________________
    body { color: black; text-align: left; font: 1em verdana, sans-serif, arial; padding: 0 0 0 12px; direction: ltr;
    background-color: #FDFFF6;
    }

    div#listmenu { width: 750px; float: left;
    font: .8em tahoma, arial, helvetica, sans-serif;
    }

    div#listmenu ul {
    margin: 5px 0 0 10px;
    }

    div#listmenu li { float: left; background-color: #F8C099; color: black; list-style-type: none; border-right: 1px solid #9c3200; position: relative; padding: 4px 5px !important;
    border-top: 1px solid #9c3200;
    border-bottom: 1px solid #9c3200;
    padding-top: 10px;
    text-align: center;
    }

    div#listmenu a {
    text-decoration: none;
    color: maroon;
    padding: 0 10px;

    }

    div#listmenu a:hover {
    color: #F33;
    }

    div#listmenu li:first-child { border-left: 1px solid #9c3200;
    }

    div#listmenu li:hover {
    background-color: #FFF2C4;
    }

    * html div#listmenu ul {
    float: left;
    border-left: 1px solid #9c3200;
    margin-left: 15px;
    }

    * html a {
    display: block;
    }

    div#listmenu ul li ul { margin: 4px; width: 12em; position: absolute; left: -5px; padding: 0; }

    div#listmenu ul li ul li {
    width: 100%;
    border-right: 1px solid #9c3200;
    border-left: 1px solid #9c3200;
    border-bottom: 1px solid #9c3200;
    border-top-style: none;
    }

    div#listmenu ul li ul li:first-child {
    border-top: 1px solid #9c3200;
    }

    body div#listmenu ul li ul {
    display: none;
    }

    div#listmenu ul li:hover ul, div#listmenu ul li:hover ul li ul:hover {
    display: block;
    }

    body div#listmenu ul li ul li ul {
    visibility: hidden;
    top: -3px;
    left: 12.6em;
    }

    div#listmenu ul li ul li:hover ul {
    visibility: visible;
    }
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    6
    Rep Power
    0

    HTML code


    Hmm, I am thinking when you say "actual markup" you mean the html part, right? If so, I tried to post the code but get a message I cannot post anything with url's included.
    Here is a little piece of it, edited, that is representative, all the rest of the listings in the same format.
    _____________________________

    <!--Start Navigations-->
    <Div Id="Listmenu">
    <Ul>
    <Li><A Href="#l" Id="Home" Name="Home" Title="">Home</A></Li>
    <Li><A Href="#" Id="Classes" Name="Classes" Title="Classes">Classes</A>
    <Ul > <!-- Drop Down Menus -->
    <Li><A Href="#" Id="Pccourse" Name="Pccourse" Title="">Veterinary Homeopathy Training</A></Li>
    <Li><A Href="#" Id="Webinar" Name="Webinar" Title="">Free Webinars</A></Li>
    </Ul>
    </Li>
    _____________________________
    Then next is another <li> and so on, finishing the section with closing </ul>
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Oh, wow! What a mess.

    Don't take that personally; it's a common affliction in newcomers to css. You're over thinking.

    First, to your problem: Lists are normally indented. Browsers use 40px padding on the ul. Older versions of IE and Opera use margin. To kill the indent:
    Code:
    ul {
      margin: 1em 0;
      padding: 0;
      }
    The 1 em top/bottom margin is the default. If you don't need it, or want a different value set the whole margin to zero, or set the top/bottom to what you want.

    You have a div as a container for the menu. You don't need it. The ul is already a container for the list.

    For the sake of your favorite deity, do not format your rulesets in a single line. Put each property on its own line, and indent it 2 or 3 spaces; do not tab. For example, not this,
    Code:
      body { color: black; text-align: left; font: 1em verdana, sans-serif, arial; padding: 0 0 0 12px; direction: ltr; background-color: #FDFFF6;}
    but this
    Code:
    body { 
      color: black; 
      text-align: left;   /*usually redundant*/
      font: 1em verdana, sans-serif, arial;   /*wrong order*/ 
      padding: 0 0 0 12px; 
      direction: ltr;   /*why? is the site's language Hebrew? (rtl)*/
      background-color: #FDFFF6;
      }
    It is good practice to use all lowercase for the markup and css.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    6
    Rep Power
    0
    Thanks for the reply. Sorry to ask likely simple or not-smart questions but when you say "what a mess" is it because I have too much coding in? Or something else?

    I will correct the ul code. Thanks for identifying it for me.

    Regarding rulesets in a line I am using CSSEdit software (Mac) which does it this way. I don't see a way to change settings and would have to edit manually. Is this important?

    Regarding the uppercase of the html code, in my page and program it is all lowercase. I don't know why it looks this way in the posting but when I pasted it in must have changed it.

    In the body code you have some comments.
    When you say font in wrong order I don't know what that means (well, I understand order but not why it is wrong). I am using CSSEdit software (Mac) and this is what it puts in when I select a font family. Does it matter?

    For the direction of text, ltr, I don't know if needed or not. Sounds like not but how do I know which of these things should be put in? Mind you I am an amateur at this, my main job being something else entirely.

    Thanks for your help and, I presume, patience.

    Richard
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    6
    Rep Power
    0
    Also I meant to add, regarding the use of div, that I took this code from the book "Stylin' With CSS: A Designer's Guide" by Charles Wyke-Smith. Seems a good book, clear, and it was suggested I do it this way. I don't know enough to do all this on my own.
  14. #8
  15. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Originally Posted by rpitcairn
    Thanks for the reply. Sorry to ask likely simple or not-smart questions but when you say "what a mess" is it because I have too much coding in? Or something else?
    Yes, both. There are unnecessary elements in the markup and unnecessary properties in the css. Additionally, the formatting is difficult to read.

    <snip>
    Regarding rulesets in a line I am using CSSEdit software (Mac) which does it this way. I don't see a way to change settings and would have to edit manually. Is this important?
    Yes, in my opinion it is very important. The eye scans down a column considerably better than across a row. It doesn't matter to the computer, but you or someone else down the road will have to debug or maintain these files. If they're formatted poorly, the debug/maintenance costs are increased and the maintainer becomes highly irritated. Code as if the maintainer will be a violent psychotic who knows where you live. I speak from experience on this; my primary job has been to fix pages that aren't working as desired. I have to read the client's disorganized, badly formatted excuse for a stylesheet or web page. Very often, once I've rewritten the files, the solution is obvious.

    If you can't configure CSSEdit to format properly, dump it. Use a plain old text editor.

    <snip>
    In the body code you have some comments.
    When you say font in wrong order I don't know what that means (well, I understand order but not why it is wrong). I am using CSSEdit software (Mac) and this is what it puts in when I select a font family. Does it matter?
    Very much so. Those font families are a list of options that the browser go down until reaching one it can supply. For this,
    Code:
    {font: 1em verdana, sans-serif, arial;}
    the order is to use verdana if possible. If not, try sans-serif. But there is always a generic available, so the browser never gets to arial.

    Again, junk the CSSEdit if it is screwing up, but in this case, I suspect user error .

    For the direction of text, ltr, I don't know if needed or not. Sounds like not but how do I know which of these things should be put in? Mind you I am an amateur at this, my main job being something else entirely.
    A good rule of thumb is to use only what you know you need, and nothing more. Browsers have built in style sheets which define the default presentation, so there's always a reasonable fallback. To see Firefox's, go to wherever you keep Firefox and in the res directory, view html.css. (In my Debian Gnu/Linux install, it's at file:///usr/lib/iceweasel/xulrunner/res/html.css.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  16. #9
  17. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Originally Posted by rpitcairn
    Also I meant to add, regarding the use of div, that I took this code from the book "Stylin' With CSS: A Designer's Guide" by Charles Wyke-Smith. Seems a good book, clear, and it was suggested I do it this way. I don't know enough to do all this on my own.
    I haven't read that book, so can't comment on its overall worth. I will say that even the most respected and knowledgeable web developers can have stupid moments. Web designers have a lot more of them.

    As with css properties, if you can't find a compelling reason to use an element, don't. This applies especially to the div and span elements. The other elements specifically define what their content is. That's semantic value. The div has no semantic value and is used to aggregate other block elements into a contextually defined structure. The span is another semantically neutral element and its purpose is to segregate inline content for special rendering.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    6
    Rep Power
    0
    Thanks for the guidance. I manually adjusted all the code and sent a message to the developer asking if it could be made default. I like the program because I can see the changes immediately as I make them. Good way for me to learn what the functions are.

IMN logo majestic logo threadwatch logo seochat tools logo