I need to get all the H1 tags to be identical to the H1 tag for ‘Services’ and they’re not !!!
if its only for the services, you could create a class and then assign that to those h1 tags
Yes, so you could make a class called headline
and then here:
<div id="intro"></div>
<div id="Serv">
<p>The Creative Sheep offers these design services:</p>
<h1 class="headline">Services</h1>
<ul id="services_content">
<li>Character Design</li>
<li>Animation (Broadcast & Industrial)</li>
<li>Logo Design</li>
</ul>
<p><a href="#Contact">Contact</a>Christopher regarding the services offered</p>
</div>
<div id="Contact">
<h1 class="headline">Contact</h1>
</div>
<div id="Illus_3D">
<h1 class="headline">Illus & Stills</h1>
</div>
<div id="ThreeDMot">
<h1>3D Motion</h1>
</div>
<div id="DemoR">
<h1 class="headline">Demo Reel</h1>
</div>
</div>
Now you have to apply the styling to .headline so that all the h1 tags will be styled in said manner.
So since you said you wanted all h1 tags to be styled like the services h1 tag then, have this in the html or remove the style tags and put it in a stylehseet
<style type=“text/css”>
h1.headline{
/*styling that you want all of the above h1 elements to share */
}
</style>
I didn’t know you could put a h1 in a class, interesting. I’m going to hopefully style this as I want it !
You can’t.
Do you mean put a class in a h1? I am quite sure that one can assign classes and ids to all html elements
For completeness, you cannot apply the ID attribute to all elements (for example HEAD, HTML, META, SCRIPT, STYLE, TITLE) and cannot apply class to (HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE) and possibly a few others. Though for the majority of them that occur; they can either contain a class or ID value.
There’s no apparent need for classes on h1 elements here. Remove them and start by analysing the difference in positioning between the #Serv and #Contact divs.
NOTE: the below relates to your code without the class=“heading” you’ve applied since opening the topic.
#Serv has a fixed width of 576px. The position of the top edge is governed by:
- the paragraph, that is the first element in #Serv, which adds the following.
#content p {
margin: 40px 10px;
}
- The negative top margin of #Serv:
#Serv {
background: none repeat scroll 0 0 #800000;
height: 350px;
margin: -26px 0 0 268px; /* HERE */
width: 576px;
}
So the top edge of #Serv is 40px minus 26px below the preceding element. The equals a gap of 14px. There is also a left margin of 268px.
So the #Serv div is 576px x 350px, 14px down from the preceding element and 268px from the parent Content div.
Your global style for h1 specifies text-align:center; This means that the horizontal position of h1 is in the centre of a 350px wide box, 268px from the left. Therefore the middle point of the h1 will be 175px (half #Serv’s width) + 268px from the left = 443px.
Now #Contact. This has a fixed width of 650px.
There is no paragraph before the h1, so the top edge is only affected by the margin set on #Contact.
#Contact {
background: none repeat scroll 0 0 #C0C0C0;
margin: 40px 35px 0 300px; /* HERE */
overflow: hidden;
width: 650px;
}
So the top edge of #Contact is 40px below the preceding element.
The left margin is 300px. So the middle of the h1 in #Contact will be 325px (half #Contact’s width) + 300px from the left = 625px.
So the middle of the h1 is 443px from the left in #Serv and 625px in Contact.
To sum up, the differences in the horizontal position of h1 in #Serv and #Contact are due to the different width and left margin values. The vertical position is due to the different top margin values and the presence of the p before the h1 in #Serv.
To gain positioning consistency you need to either apply the same width and margin to #Serv, #Contact and the others, and ensure the h1 appears first in each, or else juggle and tweak widths and margins of until they look the way you want.
I strongly advise the former approach, else you’ll tie yourself in knots.
If you need to target specific h1s for any reason, you can specify #Serv h1 #Contact h1 etc as selector, instead of classes.
When I applied a H1 class it worked how I want it to look but the services H1 and the contact H1 do not appear in the same position !! I read your post victor but at some point you lost me 
Which brings me to another thing, all the ID except for ‘portfolio’ are basically going to have the same height and width although some will be larger in width then others, but that is turning out not as I want and each ID will have a unique background image. There will be a total of (4) scripts doing other tasks. My goal is that the page does not have even the slightest scrolling, the page will be anti-scroll The content will hit you BAM as soon as you click, no need for the eye to do much movement, in other words getting to the point with no fluff!
I want to get the ID and the class & scripts before laying down the graphics to top it all off.
There have been changes, Victor you should try to cut to the chance let me figure out or ask the middle channel !!!
Sorry, you’ve lost me there.
Edit - you mean “cut to the chase”? i.e. get to the point. I’ve already done that by explaining what is happening in your code in detail and summary. You can take the time to understand it at your leisure.
Or do you mean “give me completed code”? I don’t think that’s appropriate here.
As to what “ask the middle channel” means, I plead ignorance.
Edit - you mean “cut to the chase”? i.e. get to the point. I’ve already done that by explaining what is happening in your code in detail and summary. You can take the time to understand it at your leisure.
“cut to the chase” is what I meant. I didn’t understand your explanation, can you explain it while at the same time getting to the point, whatever holes are missing I can ask, it’s how I learn !
I’ve already explained how your code is working. If you want to understand, persevere with it.
In case you are unable to understand your code, here are instructions on how to position the h1 the same in each div. Note: when referring to “div” or “divs”, I mean the divs inside Content.
Aim: consistent positioning of h1.
HTML
In each div, make the h1 the first element and remove the class .headline from each h1. e.g.
<div id="Serv">
<h1>Services</h1>
...
</div>
CSS
Give all the divs the same margin values.
In the embedded CSS, set h1 to text-align:left; (or remove the text align altogether).
Result: the top and left position of the divs is the same. The position of the h1 in each div is the same.
If you don’t like the exact position of h1, add some left margin to the h1 selector.
If you insist upon centering the h1, and want them to appear in the same position in the viewport then something further will need to be done, but I’ll leave you to try the above first.
I think I somewhat got it, but I lost my frigging footer ! Your method causes me to have multiple style sheets to style multiple H1 tags within ID, wouldn’t it be simplier to just have a class this is throwing the page though a tsunami !!!
Yes that is why I originally suggesed having the class headline in all h1 elements and Then applying the styling to that.
I know you did, then victor told me to take it out of the class.
There needs to be some consistency in these threads it’s all well and good that everyone shares there knowledge of whatever the subject maybe, but it needs to make sense because all that happens is you get 50 messages that consist of everyones knowledge but the problem is not fixed, imagine 45 doctors poking and prying at you to solve it while you lie there in agony and pain, instead of one or two doctors going at it while the patient explains if the symptoms are easing up or getting worse, I hope that analogy was understood !
There is already an h1 style.
Is not applying a class to all h1 therefore redundant?
Also, take a close look at the OP’s code and what he is trying to achieve: he wants the h1 elements to have consistency. What makes the h1s inconsistent is that their containers have a variety of widths and margins.
What I am trying to achieve for the OP is a consistent top and left positioning of these containers which, with a consistent style applied to the main h1 selector will also allow them to display consistently.
Where have I said you need multiple stylesheets?
You have not lost your footer…
- You have given #wrapper a black background color.
- #footer has no background color, therefore you can’t see it.
- But you can see #gears. right?
- #gears is in #footer therefore #footer is not lost.
What you really need is for one person to assist with all aspects of your project.
This is often known as a “web developer”
There is already an h1 style.
Is not applying a class to all h1 therefore redundant?
Yes!
Also, take a close look at the OP’s code and what he is trying to achieve: he wants the h1 elements to have consistency. What makes the h1s inconsistent is that their containers have a variety of widths and margins.
That can be solved by taking it out of the containers, which I have done with #Serv…
What I am trying to achieve for the OP is a consistent top and left positioning of these containers which, with a consistent style applied to the main h1 selector will also allow them to display consistently.
I want the positioning bottom right.
Where have I said you need multiple stylesheets?
I meant multiple styles!
What you really need is for one person to assist with all aspects of your project.
This is often known as a “web developer”
I can solve this, but the problems is the information on how to solve being thrown at me doesn’t have a consistent flow. I am capable at getting this page built !
I think both Victorinox and team1504 gave you reasonable answers. To achieve the consistency you would like victor’s option is the best. When there are more than 1 <h1> tag per page (not advisable) that need styling, you indeed need to apply a class to the separate <h1> tags