Font-style:italic;

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

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

thanks . . . Rick

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.

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


       <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

All this just to apply different styles to a menu

You could have

<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.

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

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

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.

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…

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 . . .

                <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>

What’s the CSS you have for that currently? Which text are you trying to color?

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


<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>

[COLOR="#0000CD"]Below is the section I would like to set a different color for the text.[/COLOR]

			<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; [COLOR=“#0000CD”]/
only effects “Search Local Communities” */[/COLOR]
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

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.

#navli1 [COLOR="#FF0000"]a[/COLOR] {
  color:#C5FFFF;
}

Good point.

Thanks Ralph.

Don’t worry; I still get caught on this sometimes. :slight_smile:

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

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.