Try this
h1 span:nth-of-type(2) {
margin: .33em 0 .5em auto; /* added .5em bottom margin*/
font-size: .75em;
font-family: tahoma;
font-weight: 500;
}
Now that you’ve moved Charisma Communications to the top of the banner it would look better to remove some of it’s top margin.
p.small {
display: table;
margin: .5em 0 1.5em auto;
font-size: .95em;
font-family: sans-serif;
font-weight: 700;
}
To have the header remaining the same height on pages that don’t have the second line of lower text you would need to put the second span back in the html and add a nbsp to it.
<div class="header">
<div class="logo"></div>
<div class="heading">
<p class="small">Charisma Communications</p>
<h1>
<span>Home</span>
<span> </span>
</h1>
</div>
</div><!--Header Ends -->
In the original design your <p class="small"> was containing byline text and your page titles were <h2> tags.
Things have changed now since you have removed the h2 from your main div.
I would consider reworking my H tags a little differently now. Perhaps something like this, but it will require changes to the CSS.
<div class="header">
<div class="logo"></div>
<div class="heading">
<h1>Charisma Communications</h1>
<h2>
<span>Home</span>
<span> </span>
</h2>
</div>
</div><!--Header Ends -->
I made the CSS change and I like it. Would it be harmful to leave the equipment tab and gallery tab the way they are.
http://www.charismacommunications.ca/
I assume you are referring to the header when you say “tab”.
On those two pages you still have the H2 headings in the .main div. That is okay, if that’s what your referring to.
I still see a bigger problem with “Charisma Communications” being in a P tag. It looks to me like it should be the H1 heading since this could be taking the shape of a business site.
Then your page titles would be an H2 heading, that’s what I was referring to with the second block of html in my last post.
I wouldn’t want search engines indexing an H1 tag that just says “Home”.
And if you don’t mind the header height changing with extra text then you can eliminate the second span on all pages that don’t have the “photographer” text. You could get the same effect as an empty span by increasing the bottom margin on the single span when the second span does not follow it. That may be complicated for you at this point though. You could also get the same effect by setting a min-height on the header.
I finally had time to make the changes @Ray.H. what do you think?
Hi,
That’s better with the h1 containing Charisma Communications. You can eliminate the span from the H1 now that everything is reversed.
Originally the spans were for creating a new line and styling the font different so the span serves no purpose in the H1 now.
As I mentioned in post#22 I would be inclined to set the html up like this.
<div class="header">
<div class="logo"></div>
<div class="heading">
<h1>Charisma Communications</h1>
<h2>Home</h2>
</div>
</div><!--Header Ends -->
Then on your photo and gallery page you can use spans in the H2 to format font styles and new lines like you had it before.
<div class="header">
<div class="logo"></div>
<div class="heading">
<h1>Charisma Communications</h1>
<h2>
<span>1 Finger Trigger</span>
<span>photographer</span>
</h2>
</div>
</div><!--Header Ends -->
And on those two pages you have another H2 in the .main div.
That’s fine, multiple H2 tags can still follow an H1 tag.
Your CSS rules are intact to make those changes, it’s just a matter of knowing where to change the selector names. I can help you later on with it if you need.
I took the Span out but I lost that nice style. lol.
Hi,
At some point you really need to learn the basics of html and css so you will be able to maintain your own site.
The css selectors work hand in hand with the html elements they target.
I have mentioned that it will require some adjustments.
So here is what you have in your css for the header h1…
.heading {
flex: 1 1 50%;
padding: 0 .8em 0 0;
font-size: 2em;
text-align: right;
}
.heading h1 {
margin: .65em 0 0;
font-size: inherit;
line-height: 1.1;
}
h1 span {
display: table; /*shrinkwrap text*/
margin-left: auto;/*push it to the right*/
}
h1 span:nth-of-type(1) {
font-size: 1.4em;
font-family: 'Kaushan Script', cursive;
font-weight: 500;
}
Since we do not need to target span styles on the h1 all those styles will simply merge into the actual h1 selector.
.heading {
flex: 1 1 50%;
padding: 0 .8em 0 0;
font-size: 2em;
text-align: right;
}
.heading h1 {
display: table; /*shrinkwrap text*/
margin-left: auto;/*push it to the right*/
margin-top: .65em;
line-height: 1.1;
font-size: 1.4em;
font-family: 'Kaushan Script', cursive;
font-weight: 500;
}
Now, try that edit to your css and remove the span from the html.
You will also need to remove the span from the h1 in your media query
/*.heading h1 span, p.small { delete this line*/
.heading h1 {
background: #fff;
padding: .25em;
opacity: .8;
border-radius: .25em;
}
Thank you very much. 
To be honnest. I find the
font-family: 'Kaushan Script', cursive;quite disturbing (this is maybe personal) But is takes away my interesst from the other content on the page. Is Kaushan Scrip the font you’re planning to use(or allready using) for your logo (businesscart, invoices) as well?
Maybe I should change it, after all some people with vision impairment may have trouble with .
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.