format h2 using id [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : format h2 using id

Codeman0013

08-15-2006, 10:42 AM

hey i have a new task i have never done using the # sign and id on my ul i have to call it according to my boss and i have never done this here is the form i'm trying to format the h2 on :

<ul id="siteMap">
<h2><a href="/about/">ABOUT</a></h2>
<ul class="siteMapU2">
<li><a href="/about/research/">Research</a></li>
<p style="padding-left:20px;"><a href="/about/research/committee/">Illinois Soybean Association Research Committee</a></p>
<p style="padding-left:20px;"><a href="/about/research/managed-research-areas/">Managed Research Areas</a></p>
<p style="padding-left:20px;"><a href="/about/research/reports/">Research Reports</a></p>
<p style="padding-left:20px;"><a href="/about/research/specialty-contracts/">Specialty Contracts</a></p>
<li><a href="/about/legislature/">Legislature</a></li>
<li><a href="/about/international-marketing/">International Marketing</a></li>
<li><a href="/about/programs/">Programs</a></li>
<p style="padding-left:20px;"><a href="/about/programs/soybean-quality/">The Soybean Quality Rewards Program</a></p>
<p style="padding-left:20px;"><a href="/about/programs/rust-watchers/">Rust Watchers</a></p>
<p style="padding-left:20px;"><a href="/about/programs/soyleaders/">SoyLeaders</a></p>
<p style="padding-left:20px;"><a href="/about/programs/speakers-bureau/">Speakers Bureau</a></p>
</ul>

and here is my css where i call it

#ul.h2 {
color: #072B61;
}
he said something about a # sign and i'm lost any help would be greatly appreciated... ohhh also since the h2 is a link i think i cant just do the color i think i have to apply the link to it somehow...

RGL

08-15-2006, 10:47 AM

Your h2 is associated with the <a href="....</a> as in:

<h2><a href="/about/">ABOUT</a></h2>

It is not associated with the ul tag at all from what I see so your CSS is calling nothing.

Here is a good tutorial for CSS formating: http://www.yourhtmlsource.com/stylesheets/csslinks.html

Codeman0013

08-15-2006, 10:49 AM

yea so i need to modify would it be #a.h2 {
color: #072B61;
}

???

RGL

08-15-2006, 10:54 AM

Yes but you don't need the "#".

Codeman0013

08-15-2006, 10:55 AM

thats not working now either i hate being asked to change things i had this page perfect and he didnt like it any other suggestions?

The Little Guy

08-15-2006, 11:02 AM

4 ways to style this:
I reccomend using either the second or the third way.

#head_two{
color: #072B61;
}

<h2 id="head_two"><a href="/about/">ABOUT</a></h2>

.head_two{
color: #072B61;
}

<h2 class="head_two"><a href="/about/">ABOUT</a></h2>

h2{
color: #072B61;
}

<h2><a href="/about/">ABOUT</a></h2>

h2 a{
color: #072B61;
}

<h2><a href="/about/">ABOUT</a></h2>

RGL

08-15-2006, 11:03 AM

I can't see why it's not working. I tried it on one of my pages before posting and it worked fine.

Are you sure you saved and refreshed?

Codeman0013

08-15-2006, 11:13 AM

i must be a moron becuase i tried all 3 and the color doesnt change and i cleared my cache and history and still it didnt change i really wish i could have just left this page the way it way lol let me post it again and let you see maybe i screwed it up...

here is what i started with and he wanted reformatted and i'm havin problems fixing

ul.siteMapUl {
padding: 0 0 0 10px;
list-style-type: none;
line-height:1.5em;

}

ul.siteMapU2 {
padding: 0 0 0 15px;
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
line-height:1.5em;
}

and its called on this page...

<h1>Illinois Soybean Association Site Map</h1>
<ul class="siteMapUl">
<li><a href="/about/">ABOUT</a></li>
<ul class="siteMapU2">
<li><a href="/about/research/">Research</a></li>
<p style="padding-left:20px;"><a href="/about/research/committee/">Illinois Soybean Association Research Committee</a></p>
<p style="padding-left:20px;"><a href="/about/research/managed-research-areas/">Managed Research Areas</a></p>
<p style="padding-left:20px;"><a href="/about/research/reports/">Research Reports</a></p>
<p style="padding-left:20px;"><a href="/about/research/specialty-contracts/">Specialty Contracts</a></p>
<li><a href="/about/legislature/">Legislature</a></li>
<li><a href="/about/international-marketing/">International Marketing</a></li>
<li><a href="/about/programs/">Programs</a></li>
<p style="padding-left:20px;"><a href="/about/programs/soybean-quality/">The Soybean Quality Rewards Program</a></p>
<p style="padding-left:20px;"><a href="/about/programs/rust-watchers/">Rust Watchers</a></p>
<p style="padding-left:20px;"><a href="/about/programs/soyleaders/">SoyLeaders</a></p>
<p style="padding-left:20px;"><a href="/about/programs/speakers-bureau/">Speakers Bureau</a></p>
</ul>
<li><a href="/membership/">MEMBERSHIP</a></li>
<ul class="siteMapU2">
<li><a href="/membership/soy-connect/">SoyConnect</a></li>
<li><a href="/membership/application/">Membership Application</a></li></ul>

<li><a href="/soybean-uses/">SOYBEAN USES</a></li>
<ul class="siteMapU2">
<li><a href="/soybean-uses/soy-foods/">Soyfoods</a></li>
<li><a href="/soybean-uses/biodiesel/">Biodiesel</a></li>
<p style="padding-left:20px;"><a href="/soybean-uses/biodiesel/retailers/">Retailers</a></p>
<p style="padding-left:20px;"><a href="/soybean-uses/biodiesel/suppliers/">Suppliers</a></p>
<p style="padding-left:20px;"><a href="/soybean-uses/biodiesel/clean-school-bus-program/">Clean School Bus Program</a></p>
<p style="padding-left:20px;"><a href="/soybean-uses/biodiesel/tax-incentives/">Tax Incentives</a></p>
<li><a href="/soybean-uses/livestock-feed/">Livestock Feed</a></li>
<li><a href="/soybean-uses/new-uses/">New Uses</a></li></ul>

<li><a href="/education/">EDUCATION</a></li>
<li><a href="/soy-news/">SOY NEWS</a></li>
<li><a href="/resources/">RESOURCES</a></li>
<li><a href="/directors/">DIRECTORS</a></li>
<li><a href="/contact/">CONTACT</a></li>

he wants it changed so they are in id's and the p's are in the id and just cleaned up i guess and the ones that are in the ul class sitemapui he wants to be h2 and made blue and i'm lost on how to do this

The Little Guy

08-15-2006, 11:20 AM

try this:
<html>
<head>
<style type="text/css">
ul.siteMapUl {
padding: 0 0 0 10px;
list-style-type: none;
line-height:1.5em;

}

ul.siteMapU2 {
padding: 0 0 0 15px;
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
line-height:1.5em;
}
#head_h2{
color: #072B61;
}
</style>
</head>
<body>
<ul id="siteMap">
<h2><a id="head_h2" href="/about/">ABOUT</a></h2>
<ul class="siteMapU2">
<li><a href="/about/research/">Research</a></li>
<p style="padding-left:20px;"><a href="/about/research/committee/">Illinois Soybean Association Research Committee</a></p>
<p style="padding-left:20px;"><a href="/about/research/managed-research-areas/">Managed Research Areas</a></p>
<p style="padding-left:20px;"><a href="/about/research/reports/">Research Reports</a></p>
<p style="padding-left:20px;"><a href="/about/research/specialty-contracts/">Specialty Contracts</a></p>
<li><a href="/about/legislature/">Legislature</a></li>
<li><a href="/about/international-marketing/">International Marketing</a></li>
<li><a href="/about/programs/">Programs</a></li>
<p style="padding-left:20px;"><a href="/about/programs/soybean-quality/">The Soybean Quality Rewards Program</a></p>
<p style="padding-left:20px;"><a href="/about/programs/rust-watchers/">Rust Watchers</a></p>
<p style="padding-left:20px;"><a href="/about/programs/soyleaders/">SoyLeaders</a></p>
<p style="padding-left:20px;"><a href="/about/programs/speakers-bureau/">Speakers Bureau</a></p>
</ul>
</body>
</html>

Does he know Id's are only supposed to be used once per page?

Codeman0013

08-15-2006, 11:24 AM

that worked thanks man!

The Little Guy

08-15-2006, 11:25 AM

no problem

Codeman0013

08-15-2006, 12:15 PM

hey the little guy more changes here is the page now that how he wants it to look

<h1>Illinois Soybean Association Site Map</h1>
<ul id="siteMap">
<h2><a href="/about/">ABOUT</a></h2>
<li><a href="/about/research/">Research</a></li>
<p><a href="/about/research/committee/">Illinois Soybean Association Research Committee</a></p>
<p><a href="/about/research/managed-research-areas/">Managed Research Areas</a></p>
<p><a href="/about/research/reports/">Research Reports</a></p>
<p><a href="/about/research/specialty-contracts/">Specialty Contracts</a></p>
<li><a href="/about/legislature/">Legislature</a></li>
<li><a href="/about/international-marketing/">International Marketing</a></li>
<li><a href="/about/programs/">Programs</a></li>
<p><a href="/about/programs/soybean-quality/">The Soybean Quality Rewards Program</a></p>
<p><a href="/about/programs/rust-watchers/">Rust Watchers</a></p>
<p><a href="/about/programs/soyleaders/">SoyLeaders</a></p>
<p><a href="/about/programs/speakers-bureau/">Speakers Bureau</a></p>

<h2><a href="/membership/">MEMBERSHIP</a></h2>
<li><a href="/membership/soy-connect/">SoyConnect</a></li>
<li><a href="/membership/application/">Membership Application</a></li>
<h2><a href="/soybean-uses/">SOYBEAN USES</a></h2>
<li><a href="/soybean-uses/soy-foods/">Soyfoods</a></li>
<li><a href="/soybean-uses/biodiesel/">Biodiesel</a></li>
<p><a href="/soybean-uses/biodiesel/retailers/">Retailers</a></p>
<p><a href="/soybean-uses/biodiesel/suppliers/">Suppliers</a></p>
<p><a href="/soybean-uses/biodiesel/clean-school-bus-program/">Clean School Bus Program</a></p>
<p><a href="/soybean-uses/biodiesel/tax-incentives/">Tax Incentives</a></p>
<li><a href="/soybean-uses/livestock-feed/">Livestock Feed</a></li>
<li><a href="/soybean-uses/new-uses/">New Uses</a></li>

<h2><a href="/education/">EDUCATION</a></h2>
<h2><a href="/soy-news/">SOY NEWS</a></h2>
<h2><a href="/resources/">RESOURCES</a></h2>
<h2><a href="/directors/">DIRECTORS</a></h2>
<h2><a href="/contact/">CONTACT</a></h2>/

what he wants me to do and i have no idea how to do this is each of hte h2's inside the id have a color assigned to them without modifying that page since they are inside the id i guess it can be done somehow and then each of the paragraph's need to have padding left on them of 20px and made smaller and have bullets in them and thats what he wnats done with no changes to the form at all i just gave just in the css

The Little Guy

08-15-2006, 12:31 PM

Codeman0013

08-15-2006, 12:43 PM

thanks man that did the trick and he is happy now i really appreciate all the help!

The Little Guy

08-15-2006, 01:07 PM

no problem

ray326

08-15-2006, 01:17 PM

<ul id="siteMap">
<h2><a href="/about/">ABOUT</a></h2>
<li><a href="/about/research/">Research</a></li>

Invalid syntax. A UL can only contain LIs.