6 replies [Last post]
maubast
Offline
Regular
Last seen: 17 years 8 weeks ago
Joined: 2003-07-31
Posts: 13
Points: 0

This is my page:
http://www.thedarknightofthesoul.com/test/index.html
(working on some other problems, as you can see here)

I'm really new to this, so this may be a dumb question. I'm trying to figure out how to give each of my div's different font properties. IE: maincontent div has different font properties and alignment than the subcontent div, the footer div, etc. Do I use a SPAN or is there something else I need to do.

I'm using ID's and I was also wondering if it would make a difference if I were using CLASSes instead. What is the most effective way to do this?

Thanks
T

jump
Offline
newbie
Melbourne. Australia
Last seen: 16 years 12 weeks ago
Melbourne. Australia
Timezone: GMT+10
Joined: 2004-06-30
Posts: 5
Points: 0

setting font properties in a div

I use div classes to control the fonts in my boxes.

Here is an example of an external stylesheet div class tag that controls the font.

div.content
{
font-size:12pt;
font-family:times new roman;
font-weight:bold;
font-style:italic;
color:#23238e;
}

jump
Offline
newbie
Melbourne. Australia
Last seen: 16 years 12 weeks ago
Melbourne. Australia
Timezone: GMT+10
Joined: 2004-06-30
Posts: 5
Points: 0

setting font properties in a div

jump wrote:
I use div classes to control the fonts in my boxes.

Here is an example of an external stylesheet div class tag that controls the font.

div.content
{
font-size:12pt;
font-family:times new roman;
font-weight:bold;
font-style:italic;
color:#23238e;
}

Sorry I should have said, these font attributes are included in the div class, they are not a class of there own.

div.content
{
background-color:transparent;
position: absolute;
top: 20px;
left:120px;
width: 300px;
z-index:+2;
font-size:12pt;
font-family:times new roman;
font-weight:bold;
font-style:italic;
color:#23238e;
}

maubast
Offline
Regular
Last seen: 17 years 8 weeks ago
Joined: 2003-07-31
Posts: 13
Points: 0

setting font properties in a div

Ok...and then I'm assuming that I should use div class instead of div id in my HTML...and that it shouldn't affect my layout.

Then if I wanted to create rollovers:
.mydiv a.hover:
??

Thanks! I'll try it!

---

I just tried it, and it's screwing my page up bigtime. This is my code:

HTML:

<HTML>
<HEAD>
<TITLE>TEST CSS</TITLE>
<link rel="stylesheet" href="css/styles.css" type="text/css">

</HEAD>

<BODY>

<div class="container">
	<div id="header_updates"></div>
		<ul id="menu_updates">
  		 <li id="panel1b"><a href="updates"></a></li>
  		 <li id="panel2b"><a href="about"></a></li>
  		 <li id="panel3b"><a href="pictures"></a></li>
  		 <li id="panel4b"><a href="words"></a></li>
  		 <li id="panel5b"><a href="art"></a></li>
  		 <li id="panel6b"><a href="downloads"></a></li>
  		 <li id="panel7b"><a href="tutorials"></a></li>
  		 <li id="panel8b"><a href="contact"></a></li>
 		</ul>
 		</div>
 		<div class="maincontents">
 		<img border=0 src="images/updates/updates_header.jpg"><p>
 		testing testing<p>
 		testing testing<p>
 		testing testing<p>
 		testing testing<p>
 		testing testing<p>
 		testing testing<p>
 		testing testing<p>
 		testing testing<p>
 		
		<div class="footer">
		<p>Footer Text</p>
		</div>
		
		<div class="subcontents">
		<img border=0 src="images/updates/welcome.jpg"><p>
		This is subcontents<p>
		<img border=0 src="images/updates/pagespecs.jpg"><p>
		This is page specs.<p>
		<img border=0 src="images/updates/inmemory.jpg"><p>
		This is in memory.<p>
		<img border=0 src="images/updates/friends.jpg"><p>
		This is friends.<p>
		This is friends.<p>
		This is friends.<p>
		This is friends.<p>
	</div>	
 		</div>

 	
</div>

</BODY>
</HTML>

CSS:

/* Overall Definitions */

 body {
    margin:0;
	padding:0;
	background: #666 url(../images/backgrounds/main_bg.gif) repeat top left scroll;
	width:100%;
	height:100%;
	font-family:verdana, arial, "sans-serif";
	} 
	
h3, p
	{
	margin: 0;
	}

/* Whole page container */



div.container {
    margin:0;
	padding:0;
	position: relative;
	width: 707px;
	text-align: left;
	background: #333 repeat-y;
}

/* divs */

#header_updates {
	position: relative;
	width: 707px;
	height: 184px;
	background: url(../images/headers/updates.jpg) no-repeat top left;
	border: 0px
}

div.maincontents {
	position: relative;
	width: 707px;
	background: #333 url(../images/backgrounds/contentbg.jpg) top left repeat-y;
}

div.subcontents {
	position: absolute;
	top: 5px;
	left: 503px;
	float: left;
	list-style: none
	width: 202px;	
}

div.footer
	{
	background: ccc url(../images/backgrounds/footer_bg.jpg) norepeat top left;
	width: 474px;
	height: 15px;
	font-size: 10px;
	margin: 20px 0 0;
	}
	

/* menu - thanx 2 A List Apart (http://www.alistapart.com) */

#menu_updates {
	position: relative;
	margin: 0px;
	padding: 0px;
 	width: 707px;
 	height: 13px;
 	background: url(../images/menu/updates.jpg) no-repeat top left;
 
}
#menu_updates li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#menu_updates li, #menu_updates a {height: 13px; display: block;}
#panel1b {left: 311px; width: 40px;}
#panel2b {left: 363px; width: 30px;}
#panel3b {left: 404px; width: 43px;}
#panel4b {left: 460px; width: 32px;}
#panel5b {left: 503px; width: 17px;}
#panel6b {left: 533px; width: 56px;}
#panel7b {left: 601px; width: 49px;}
#panel8b {left: 661px; width: 42px;}

#panel1b a:hover {background: transparent url(../images/menu/updates.jpg) -311px -13px no-repeat;}
#panel2b a:hover {background: transparent url(../images/menu/updates.jpg) -363px -13px no-repeat;}
#panel3b a:hover {background: transparent url(../images/menu/updates.jpg) -404px -13px no-repeat;}
#panel4b a:hover {background: transparent url(../images/menu/updates.jpg) -460px -13px no-repeat;}
#panel5b a:hover {background: transparent url(../images/menu/updates.jpg) -503px -13px no-repeat;}
#panel6b a:hover {background: transparent url(../images/menu/updates.jpg) -533px -13px no-repeat;}
#panel7b a:hover {background: transparent url(../images/menu/updates.jpg) -601px -13px no-repeat;}
#panel8b a:hover {background: transparent url(../images/menu/updates.jpg) -661px -13px no-repeat;}

This is the page using all ID's:
http://www.thedarknightofthesoul.com/test/index.html

Using the classes is throwing the whole page out of whack. I've tried using ALL classes, since I know that ID's trump classes, but it still doesn't work. I have NO IDEA why.

maubast
Offline
Regular
Last seen: 17 years 8 weeks ago
Joined: 2003-07-31
Posts: 13
Points: 0

setting font properties in a div

I'm also trying this:

CSS:

.sublinks a:link {
color: #000000;
text-decoration: underline;
background-color: #333333;
}

.sublinks a:visited {
color: #000000;
text-decoration: underline;
background-color: #333333;
}

.sublinks a:hover {
color: #FFFFFF;
text-decoration: underline overline line-through;
background-color: #333333;
}

.sublinks a:active {
color: #FFFFFF;
text-decoration: overline underline;
background-color: #333333;
}

HTML:

<a class="sublinks" href="">Test link</a><p>

And I'm just getting the standard "blue" link, none of my effects.

WTF?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

setting font properties in a div

Hi maubast,
Where you say

Quote:
.sublinks a:link
you are targeting a link within an element classed sublinks<a class="sublinks" href="#"><a class="within" href="#>this one</a></a> what you should be doing is
sublinks:link
or
a.sublinks:link

Hope that helps

maubast
Offline
Regular
Last seen: 17 years 8 weeks ago
Joined: 2003-07-31
Posts: 13
Points: 0

setting font properties in a div

Works!! Thanks!

That was simple!