CSS body {} vs #maincontent {} vs #Nav{}

I can’t set a different font in the nav because the body{} and/or maincontent{} seems to be preventing it.


body 		{	background-color:  #0A1794;
	   		background: url(images/swirl.png) fixed;
			max-width:1200px;
			min-width:400px;
			font-family: Verdana, Geneva, sans-serif;
    		 	font-size:16px;
      		 	line-height:106%;
			color: #fff;
			margin: 0 auto;
			margin-top:20px;
			margin-right:.83%; /* 10 px */
			margin-left: .83%; /* 10 px */
}

#maincontent{	float:right;
			width:880px;
			position:relative;
			margin-left: 26.26%; /* 320px based on 880px maincontent*/
}

#nav 		{list-style: none;
			padding-left:0%;
			font-family: "resiling";
			line-height: 100%;
			color:#FFF;  						/* has no effect */
			font-size:190%; margin:0 0 5px;  	/* this allows the font to be flush left */
			src: url(/fonts/".eot");
			src: local('☺'),
    		 url("resiling.woff") format("woff"),
    		 url("resiling.otf") format("opentype"),
    		 url("resiling.svg#grablau") format("svg");
}

I read SteveD’s reply a few messages up regarding inheritance but I’m unable to correct it.

Thanks . . . Rick

There should be no inheritance issues with the way you have written your rules.

I don’t see the @font-face rule anywhere which might be the reason you can’t see the custom font.

And for the nav anchors to have the color of #fff, you’d need to set your #nav a color to it, not just the #nav.

I remember that @fontface thing somewhere but have no ideas on where to place it and how to use it for different fonts???

Rick

See the following for the issues i found and recommendations i have:

  1. When using custom web fonts you need to use the @font-face declaration as the src property is only unique to it
  2. I personally dislike using a percentage % for margins and widths as they are too inconsistent between browsers, it’s easier to just manage pixel values
  3. You had your margin property in your body selector set then you overwrote the left and right margin, doing this is redundant and makes things more complex then they need to be
  4. You attempted to overwrite the color and line-height properties in your #nav selector which isn’t needed as the values are inherited from the body selector
@font-face {
    font-family: 'resiling';
    src: url('fonts/resiling.eot');
    src: url('fonts/resiling.eot?#iefix') format('embedded-opentype'),
         url('fonts/resiling.woff') format('woff'),
         url('fonts/resiling.ttf') format('truetype'),
         url('fonts/resiling.svg#resiling') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    background: #0A1794 url('images/swirl.png') fixed;
    color: #fff;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 16px;
    line-height: 18px;
    margin: 20px 10px 0;
    max-width: 1200px;
    min-width: 400px;
}

#maincontent {
    float: right;
    margin-left: 320px;
    position: relative;
    width: 880px;
}

#nav {
    font-family: 'resiling', sans-serif;
    list-style: none;
    margin: 0 0 5px;
    padding-left: 0;
}

#nav a {
    color: #fff;
}

I don’t understand this part . . .

@font-face {etc, . . . I can’t use @font-face for a <div class=> name.

I was thinking

.tang to identify the font name tangerine font
.upe to identify the font name uppereastside font

you have @font-face{

I have multiple font-face types, ie. tengering, uppereastside, neoretro.

How do I call them in the html document. . . .@font-face what?

Shouldn’t the font be identified by a class name?

I’m hoping to set fonts and font colors for different elements in the html page, #nav, navli, navli1.

I’m sorry but this is confusing to me.

Thanks . . . Rick

WAIT ONE . . . I think I get it now.

I’ll be back . . . Rick

You just apply it as you would any other font.

e.g.
#nav{font-family:Arial, sans-serif}

So for your new font you would just say:


#nav {
   [B] font-family: 'resiling', sans-serif;
[/B]    list-style: none;
    margin: 0 0 5px;
    padding-left: 0;
}

Exactly as Chris gave to you :slight_smile:

CSS
*#navli1 {font-family: “ues”;
src: url(/fonts/“uppereastside.eot”);
src: local(‘:smiling_face:’),
url(“uppereastside.woff”) format(“woff”),
url(“uppereastside.otf”) format(“opentype”),
url(“uppereastside.svg#grablau”) format(“svg”);
line-height: 100%;
color:#FFF;
font-size:220%; margin:0 0 5px;
list-style:none;
} This Fails ?

At times I wish want to use the @font-family with different floats, font colors, font sizes, etc.

How many different CSS definitions do I need to accomplish this?

I’m so frustrated I could S C R E A M !

What am I missing?

Here is my CSS page as of now . . .


@charset "utf-8";
/* CSS Document */
/* mapsearch.css 01/03/2012 5:55pm */

@font-face	 {	font-family: "tang";
			 font-size:200%;
			 src: url(/fonts/"tangerine.eot");
			 src: local('&#9786;'),
    		 	 url("tangerine.woff") format("woff"),
    		 	  url("tangerine.otf") format("opentype"),
    		 	   url("tangerine.svg#grablau") format("svg");
			font-weight: normal;
			 font-style: normal;
			text-align:center;
			color: #0CF;
			float:right;
			width:73.33%;
			margin-bottom:12px;
			margin-top:12px;
			line-height:110%;
}

@font-face {	font-family: 'ues';
			src: url('uppereastside.eot');
			src: local('&#9786;'),
			 url('uppereastside.woff') format('woff'),
			  url('uppereastside.ttf') format('truetype'),
			   url('uppereastside.svg#webfont') format('svg');
			font-weight: normal;
			font-style: normal;
			color: #0CF;
			float:right;
			width:73.33%;
			margin-top:12px;
}

html, body 	{ 	margin:0;
			padding:0;
}

body 		{ 	background: url(images/swirl.png) fixed; /*url(images/newbkground.png) fixed;*/
			background-color: #0A1794;
			font-family: Verdana, Geneva, sans-serif;
			font-size:16px;
			line-height:18px;
    		  	max-width: 1200px;
			min-width: 400px;
			padding-left:10px;
			padding-right:10px;
			margin-top:10px;
}

#maincontent{	float: right;
			margin-left: 320px;
			position: relative;
			width: 880px;
			background-image: url(images/gray4b32.jpg);  /* background image for the iframe */
				
}


.header		{	float:right;
				display:block;
				position:relative;
				margin-bottom:6px;
				
}

h1,h2,h3,h4,h5,h6
			{	text-align:left;
				color:#1ec2f9;
}

p 			{	width:880px;
			 	height:auto;
				font-size:100%;
			 	color: #fff;
}

.pright		 {	text-align:center;
				color: #39C;
				float:right;
				width:73.33%;
				margin-bottom:4px;

}

.pleft 		{	float:left;    			
				font-size: 86%; 		
				position: fixed;
				margin-top:20px;
    			        margin-left:1.2%; 		
				padding:2px;
}

.psmaller	{	        margin-top:5%;
				margin-right:2%;
				margin-left:2%;
				font-size:62.50%;
			 	line-height: 110%;
			 	text-align: left;
			 	color: #000;
}

.txtright	{	font-size: 87.50%;
			display:block;
			float:right;
			width:880px;  			
			position:relative;
			margin-bottom:4px;
				
}




.plate  	{	float:right;
			display:block;
			position: relative;		/* IE bug fix*/
			margin-bottom:10px;
}



/* ---------------container for the navigation ---------------------- */

#nav  	{	margin:0; padding:0;
			font-family: 'ues' ,sans-serif;
			line-height: 100%;
			color:#FFF;  						
			font-size:100%; margin:0 0 5px;
			float:left;
			list-style: none;
   			font-style: none;
			line-height: 110%;
    			position: fixed;
}
				

* html #nav{        position:absolute;}				
	  #navli 	{font-size: 90%; margin:0 0 5px;
			 list-style: none;
}

*#navli1 	 	{font-family: 'ues', sans-serif;
			 line-height: 100%;
			 color:#FFF;  						
			 font-size:220%; margin:0 0 5px;
			 list-style: none;				
			 margin: 0 0 5px;
			 padding-left: 0;
}

#nav a,#nav a:link,#nav a:visited \\
		{	color: #FFF;
    			list-style: none;
			text-decoration: none;
			background-color: ; color: #0CF;	/* changes list text color;*/
}

#nav li a:hover{background-image:url(images/menubkrnd2.png);
			    width:260px;
				color: #FFF; 						/* hover text color */
}
/*************************************************NAVIGATION ENDS HERE***************/
#footer		{	clear:both;
				float:right;
			 	font-size:62.50%;
			 	font-style:normal;
			 	line-height: 110%;
			 	color: #000;
				margin-top:1%;			 	
				padding-right:1%;
				padding-left:1%;
}/* eND css*/

There is too much junk in my CSS page as a result of me trying to find S I M P L E reliable ways to code the approximately 6 or so elements on my pages.

It shouldn’t be so confusing.

Thanks Rick

Ok . . . I think I’ve got it.


@font-face {	font-family: 'TangerineRegular';
			 src: url('../css/fonts/Tangerine_Regular-webfont.eot');
			 src: local("&#9786;"),
 			 src: url('../css/fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
		         url('../css/fonts/Tangerine_Regular-webfont.woff') format('woff'),
 		        url('../css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
		         url('../css/fonts/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg');
    			font-weight: normal;
    			font-style: normal;

}

@font-face {   	font-family: 'UpperEastSideRegular';
    			src: url('../css/fonts/UpperEastSideRegular-webfont.eot');
			src: local("&#9786;"),
    			src: url('../css/fonts/UpperEastSide-webfont.eot?#iefix') format('embedded-opentype'),
			url('../css/fonts/UpperEastSide-webfont.woff') format('woff'),
			url('../css/fonts/UpperEastSide-webfont.ttf') format('truetype'),
			url('../css/fonts/UpperEastSide-webfont.svg#UpperEastSideRegular-webfont') format('svg');
    			font-weight: normal;
    			font-style: normal;

}

.mapname	{	font-family:'TangerineRegular', arial, san-serif;
			width:880px;
			float:right;
		 	text-align: center;
			font-size:220%;
			color:#6CF;
         		font-weight:normal;
		 	font-style: normal;
		 	margin-top:1%px;
			line-height:120%;
			margin-bottom:1%;
}


In the HTML page the Class=“mapname” using the TangeringRegular works fine.

However the following fails using the UpperEastSide.wobfont . . .

#nav { float:left;
position:fixed;
font-family:‘UpperEastSide-webfont’, arial, san-serif;
font-size: 100%;
width:320px;

}

If I can get this last piece in the #nav fixed I’m almost there.

I also have #navli1 where I wish to apply a DIFFERENT font-face.

In the past few days I have not been able to accomplish this.

Thanks . . . Rick

You likely just have the name wrong…

Instead of this:

#nav {    
float:left;
position:fixed;
font-family:'UpperEastSide-webfont', arial, san-serif;
font-size: 100%; 
width:320px;


}

It should be this:

#nav {    
float:left;
position:fixed;
font-family:'UpperEastSideRegular', arial, san-serif;
font-size: 100%; 
width:320px;


}

My Goodness. that worked!

Thanks much. Rick

I’m about finished with the mapsearch css page.

I’ve removed all of the code that was not being used and attempted to reduce what else I dared.

Like in a data base - less is more.

It’s all looking pretty well except the #nav portion of the menu is under the #navli1 portion of the menu - AND - I can’t get the menu to rise to the top of the visible screen. Very troublesome.

Do I need both the #navli and #navli1 portions of the menu?

Here is my full CSS page now.


@charset "utf-8";
/* CSS Document mapsearch.css 1/3/2012 */


html, body 	{ 	margin:0;
				padding:0;
}

@font-face {	font-family: 'TangerineRegular';
			    src: url('../css/fonts/Tangerine_Regular-webfont.eot');
				src: local("&#9786;"),
 			    src: url('../css/fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
		         	 url('../css/fonts/Tangerine_Regular-webfont.woff') format('woff'),
 		        	 url('../css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
		         	 url('../css/fonts/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg');
    			font-weight: normal;
    			font-style: normal;

}

@font-face {   	font-family: 'gabrielle';
    			src: url('../css/fonts/gabrielle-webfont.eot');
				src: local("&#9786;"),
    			src: url('../css/fonts/gabrielle-webfont.eot?#iefix') format('embedded-opentype'),
					 url('../css/fonts/gabrielle-webfont.woff') format('woff'),
					 url('../css/fonts/gabrielle-webfont.ttf') format('truetype'),
					 url('../css/fonts/gabrielle-webfont.svg#gabrielleRegular') format('svg');
    			font-weight: normal;
    			font-style: normal;

}

body 		{ 	background-color: #0A1794;
			  	background: url(images/swirl.png) fixed; /*newbkground.png)*/								
			  	max-width: 1200px;
				min-width: 400px;
			  	font-family: Verdana, Geneva, sans-serif;
			  	font-size:16px;							
				color:#fff;
    		  	line-height:106%;
				margin-top:10px;
}

#maincontent{	float:right;
				width:880px;
				position:relative;
				background-image: url(file:///D|/mydesign/css/images/gray4b32.jpg);  /* background image for the iframe */				
				margin-left:320px;
}

.header		{	float:right;
				display:block;
				position:relative; 				/* IE bug fix*/
				margin-bottom:5px;
				
}

h1,h2,h3,h4{	font-family:'TangerineRegular', arial, san-serif;
				text-align:left;
				font-size:80%;
				color: 3CF;
}

p 			{	height: auto;
				font-size:87.50%;
			 	color: #fff;
}

.txtright	{	font-size: 90%;
				color:#FFF;
				display: block;
				float:right;
				width:880px;
				position:relative;
}

.mapname	{	font-family:'TangerineRegular', arial, san-serif;
				width:880px;
				float:right;
		 		text-align: center;
				font-size:220%;
				color:#6CF;
				font-weight:normal;
		 		font-style: normal;
				line-height:160%;
}
/* ---------------container for the navigation ---------------------- */
ul 			{	list-style-type: none;}				/* removes list bullets! */

#nav 		{	position:fixed;
				float:left;
				font-family:'gabrielle', arial, san-serif;
				font-size: 116%;
				width:320px;
				line-height:110%;

}

html #nav	{ 	margin:0;
				padding:0;
				float:left;
				position: relative ;
				
}					

#navli 		{ 	list-style: none;
				float:left:;
				position:fixed;
				

}

#navli1	 	{	float:left;
				position:fixed;
				font-family:'gabrielle', arial, san-serif;
				font-size: 116%;
				line-height:105%;
				width:320px;
}		

#nav a,#nav a:link,#nav a:visited 	
			{	margin: 0; padding: 0; 				
				color: #3CF;
				list-style: none;
				text-decoration: none;
										
}

#nav li a:hover{	background-image: url(images/menubkrnd2.png);
					float:left;
					width:auto;
					color: #FFF; 					
					/*font-size: 100%;*/
}
/*************************************************NAVIGATION ENDS HERE***************/
#footer		{	clear:both;
				float:right;
			 	font-size:62.50%;
			 	font-style:normal;
			 	line-height: 110%;
			 	color: #000;
				margin-top:1%;			 	
				padding-right:1%;
				padding-left:1%;
}/* eND css*/

Thanks much for all of your hell on this.

Rick

Oops . . . see attachment :slight_smile:

Oops . . . I meant to say help!

Do you have an updated link?

It looks like you have corrupted the IE6 hack here:


html #nav	{ 	margin:0;
				padding:0;
				float:left;
				position: relative ;
				
}	

That should most likely be “* html” - although usually you would use position:absolute for IE6 to absolutely place it in stead of fixed.