SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    font-style:italic;

    Is there a way to italisize all of the <li> under MICRO COMMUNITY SEARCH?

    <div id="nav">
    <ul id="navli">
    <li><a href="http://www.propertieswithstyle.com" title="HOME PAGE">OUR HOME PAGE</a></li>
    <br />
    <br />
    MICRO COMMUNITY SEARCH
    <li><a href="http://www." title="CAMEO SHORES">community name</a></li>
    <li><a href="http://www.com" title="EVENING CANYON">community name</a></li>
    <li><a href="http://www." title="FLOWER STREETS">community name</a></li>
    <li><a href="http://www." title="HARBOR VIEW HOMES">community name</a></li>
    <li><a href="http://www." title="IRVINE TERRACE">community name</a></li>
    <li><a href="http://www." title="PELICAN POINT">community name</a></li>
    </ul>
    </div><!--eND of Nav-->

    thanks . . . Rick

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    That is INVALID HTML. You can't have all the code that is not wrapped inside of <li> tags inside of the <ul> tag.

    How you get the subsequent ones the way you want will depend on how you fix the HTML.

    Please post the valid HTML once you fix it and then we'll be able to help.

    CSS will not work properly when the HTML is invalid.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Menu Theme

    Felgall - this is how it was originally suggested to me on this site before I started messing with it.

    Code:
           <div id="nav">
    	 	<ul id="navli">
          			<li><a href="http://www.propertieswithstyle.com" title="HOME PAGE">OUR HOME PAGE</a></li>
          			<li><a href="http://www." title="CAMEO SHORES">community name</a></li>
          			<li><a href="http://www.com" title="EVENING CANYON">community name</a></li>
          			<li><a href="http://www." title="FLOWER STREETS">community name</a></li>
          			<li><a href="http://www." title="HARBOR VIEW HOMES">community name</a></li>
          			<li><a href="http://www." title="IRVINE TERRACE">community name</a></li>
          		        <li><a href="http://www." title="PELICAN POINT">community name</a></li>
    		</ul>
           </div><!--eND of Nav-->


    What I wish to do is have a menu with . . .

    MAIN TITLE CSS{font-family size, style;margin-bottom:10px; etc.}
    HOME PAGE
    RETURN TO CHARTS
    RETURN TO CITIES

    Search Communities
    community-title CSS{font-family size, style; etc.}
    community-title
    community-title
    community-title
    community-title
    community-title
    community-title
    community-title
    community-title
    community-title
    community-title
    community-title

    What I was thinking was a menu within a menu with two separate css definitions.

    All this just to apply different to a menu

    Thanks felgall . . . Rick

  4. #4
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All this just to apply different styles to a menu

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    You could have
    HTML Code:
    <ul>...
    <li>Microcommunities
    <ul><li>...</li>
        <li>...</li>
        <li>...</li></ul></li>
    You can style ul ul so that it doesn't indent further, and so doesn't look like it's a sub-list, but this will then allow you to apply other styling just to ul ul without it messing up the rest of the navigation.

  6. #6
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ul ul

    Stevie D

    I was able to make this work.

    The <li>names</> show up well but each with a bullet and indented.

    I just don't know where to place the css part.

    You said "you can style ul ul so it doesn't indent further . . .

    This is what I tried . . . .

    #ul {margin:0;
    padding:0;
    float:left;
    text-indent:0;
    font-style: none;
    list-style: none;
    font-size: 87.50%;
    line-height: 115%;
    position: fixed;
    margin-top:12px;
    }

    and then this . . .

    #ulul {margin:0;
    padding:0;
    float:left;
    text-indent:0;
    font-style: none;
    list-style: none;
    font-size: 87.50%;
    line-height: 115%;
    position: fixed;
    margin-top:12px;
    }

    I'm sure you can tell from this that I don't get it!

    Thanks Stevie . . .

    Rick

  7. #7
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK . . . all is working except I cannot remove the bullets to the left and have the sub menu align to the left.

    If I could fix these I would have it.

    Thanks

    Rick

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    I don't have time to look at this in depth, but your code should read ul{whatever... not #ul{whatever... - unless you have a div or something with id="ul", which seems unlikely. In the second example, there should be a space and no hash sign i.e. ul ul not #ulul (again, unless you used id="ulul"). ul ul selects a ul which is the descendant of another ul, so the styles will only affect your sub-menu.

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I'd have to see visually what you are trying to do -- so far your code is gibberish, the 'advice' you got with that extra div around it for NOTHING shows you were getting advice from someone who doesn't understand HTML... even things like the TITLE attributes which frankly, if you have to use there's something wrong with the contents of the anchors...

    ... and as technobear pointed out you're newest post is also gibberish using those # to indicate ID's that don't even exist... "#" == ID, "." == class, nothing == tag. "#ulul" in CSS == id="ulul" in your HTML... "ul ul" == all ul that are child elements of other ul.

    Whatever it is you are trying to do, it looks like you are overthinking the CSS and completely missing how to even use HTML...

  10. #10
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Different Styles for NAV

    Okay - my business keeps me away so I'm trying to remember where I was.

    This must be simple - right!

    I wish to have the ability to set different styles the my menu text.

    Things like indents, italicize, font family, color etc.

    Thanks . . .

    Rick

  11. #11
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Okay - my business keeps me away so I'm trying to remember where I was.

    This must be simple - right!

    I wish to have the ability to set different styles the my menu text.

    Things like indents, italicize, font family, color etc.

    Thanks . . .

    Rick
    OK . . . I stopped and looked at the html part of it for a long time.

    Fixed it as pointed out I had improper use of <ul> etc.

    The only thing I can't seem to so it set the font color but I can live with that.

    Here is what I did . . .

    Code:
                    <ul id="navli">
          				<li><a href="http://www.propertieswithstyle.com" title="HOME PAGE">RETURN TO CHARTS PAGE</a></li>
    					<li><a href="http://www.propertieswithstyle.com" title="HOME PAGE">RETURN TO SEARCH HOMES</a></li>
    					<li><a href="http://www.propertieswithstyle.com" title="HOME PAGE">RETURN TO HOME PAGE</a></li>
    			</ul>
    
    			<ul id="navli1">	
    						<li><i>Search Local Communities</i></li>
    						<li><a href="http://www." title="CAMEO SHORES">Breakers Drive</a></li>
          						<li><a href="http://www.com" title="EVENING CANYON">Cameo Shores</a></li>
          						<li><a href="http://www." title="FLOWER STREETS">Cameo Highlands</a></li>
          						<li><a href="http://www." title="HARBOR VIEW HOMES">Channel Reef Condos</a></li>
          						<li><a href="http://www." title="IRVINE TERRACE">China Cove</a></li>
          						<li><a href="http://www." title="PELICAN POINT">Corona Highlands</a></li>
    			</ul>

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    The only thing I can't seem to so it set the font color but I can live with that.
    What's the CSS you have for that currently? Which text are you trying to color?

  13. #13
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The communities text names

    Here is where I'm having a problem setting the color of the navil1 text menu items.

    Code:
    <div id="nav">
      		  	<ul id="navli">
          			        <li><a href="http://www.propertieswithstyle.com" title="Value Charts">Return To Value Charts</a></li>
    				<li><a href="http://www.propertieswithstyle.com" title="Search Homes">Return To Search Homes</a></li>
    				<li><a href="http://www.propertieswithstyle.com" title="Site Home Page">Return To Home Page</a></li>
    			</ul>
    
    Below is the section I would like to set a different color for the text.
    
    			<ul id="navli1">	
    				<li><i>Search Local Communities</i></li>   /* I do not wish to change this line color from its current setting of white */
    				<li><a href="http://www." title="Breakers Drive">Breakers Drive</a></li>
          				<li><a href="http://www.com" title="Cameo Shore">Cameo Shores</a></li>
          				<li><a href="http://www." title="Cameo Highlands">Cameo Highlands</a></li>
          				<li><a href="http://www." title="Channel Reef Condos">Channel Reef Condos</a></li>
          				<li><a href="http://www." title="China Cove">China Cove</a></li>
          				<li><a href="http://www." title="Corona Highlands">Corona Highlands</a></li>
    				<li><a href="http://www." title="Harbor view Hills">Harbor View Hills</a></li>
    				<li><a href="http://www.propertieswithstyle.com/irvterrmapsearch.html" title="Irvine Terrace">Irvine Terrace</a></li>
    				<li><a href="http://www." title="Jasmine Park">Jasmine Park</a></li>
    				<li><a href="http://www." title="Shorecliffs">Shorecliffs</a></li>
    							
    			</ul>
    This is the CSS code for that portion for navil1

    #navli1 { list-style: square; /* this is for the communities search menu */
    font-size: 100%; margin:0 0 5px;
    margin-left:8px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#C5FFFF; /* only effects "Search Local Communities" */
    font-style: italic;
    line-height: 120%;
    margin-top:14px;
    }

    For some reason color: #C5FFFF has no effect?

    I think it has something to do with inheritance.

    I still find that difficult to understand, all of the intricacies of inheriting flow downward through the html document.

    Thanks

    Rick

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    color:#C5FFFF; [COLOR="#0000CD"]/* only effects "Search Local Communities" */ I still find that difficult to understand, all of the intricacies of inheriting flow downward through the html document.
    There's nothing difficult to understand here. Styling the LIs has no effect, because all the text inside them is for the <a>s, so you have to target them instead, as they have their own color.

    Code:
    #navli1 a {
      color:#C5FFFF;
    }

  15. #15
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <a>

    Good point.

    Thanks Ralph.

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Don't worry; I still get caught on this sometimes.

  17. #17
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    There's nothing difficult to understand here. Styling the LIs has no effect, because all the text inside them is for the <a>s, so you have to target them instead, as they have their own color.

    Code:
    #navli1 a {
      color:#C5FFFF;
    }
    Ralph . . . I've tried this every where I can think of in the css nav section but no results.

    The color does not change.

    Where is the exact placement of . . .

    #navli1 a {
    color:#C5FFFF;
    }

    belong?

    Thanks . . . Rick

  18. #18
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    It shouldn't really matter where it goes too much so put it underneath the other statement blocks and it will change those italicised links to your chosen colour, e.g. red or whatever.


Bookmarks

Posting Permissions

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