How to change header, with additional data (better methods)

[RonnyK]

I've been creating different sites, and every time end up loosing some time on the header as, it allways requires additional data in the header, f.e. text on the right, while logo is on the left (standard template). Or with an additional logo included in the header.

If I look at the template "CSSMenu left + 1 column", the header is defined like:

Code: Select all

   <div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <hr class="accessibility" />
   </div>

And in the CSS by:

Code: Select all

div#header {
   height: 80px;    /* adjust according your image size */
   background: #385C72;           
}

div#header h1 a {
/* you can set your own image here */
   background: #385C72 url(images/cms/logo1.gif) no-repeat 0 12px; 
   display: block;
   height: 80px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

My question is, if I decide to add additional data to the header (left, center, right with images/text), is it best to create a header2 div, inside the header-div in the template, like:

   
     
     
   

or is:

   
   
     
     

the better method, or is there an easier/better way to have more image/text areas in the header? The latest site I did, I ended with header2, embedded in header, and copying, both CSS-blocks, to two new blocks with name header2, but I think there is a better way.

Ronny

[chema]

Hi Ronnyk,

Have you found a better method ?

Thanks 

[heatherfeuer]

In my first official cmsms website, I had to scrap the standard header altogether since I ended up needing to use *gasp* absolute positioning for the logo. So I just sort of scrapped everything and started from scratch with both template and stylesheet. 

The header stuff ended up looking like this in the template:

Code: Select all

<div id="pagewrapper">


	<div id="logo">
		<img src="images/ffgf_logo.png" height="230" width="198" alt="The FFGF Logo" />
	</div>
	
	<!-- start header -->
	<div id="header">
		<center><img src="images/ffgf_header.png" height="65" width="645" alt="The New Faith Full Gospel Fellowship" /></center>
		<br />
		<hr class="hr" />
		<p class="slogan">Building the Body of Christ in Love</p>
		<br />
		<p class="breadcrumbs">{breadcrumbs starttext='You are here' root='Home' delimiter='»'}</p>
	</div>
	<!-- end header -->

And the styles for that:

Code: Select all

/* Create the layout */
/* 
Define the containers for the page elements.
They are stated here in the order they appear on the page.
 */

 /* 
 The pagewrapper creates a container with a lighter background for the content.
 */
div#pagewrapper {
	background-color: #eddbff;
	color: #420060;
	padding: 5px;
	min-width: 60em;
	max-width: 80em;
	/* IE won't recognize min-max, so it's handled with javascript */
	margin: 0 auto; /* Centers the pagewrapper */
}

div#logo {
	float: left;
}

div#header {
	float: right;
	margin: 20px 0 0 0;
	padding: 5px;
	width: 70%;
	height: 230px;
}

Maybe that will give you some ideas?

[chema]

Very interesting. New ideas are coming ...

Many thanks

[RonnyK]

I found this quote from Mark in another post:

what you want is a 'liquid' / 'strechy' page so you need to do most of it in '%' .







#header{width:**%}
#left{float:left;width:**;height:**;margin:**;padding:**;}
#right{float:right; bla bla bla}

the widths for left & right can be **px, **%, margins can be same,, px, or %,
you may have to futz around for IE,,

  HTH
          mark

That is also some logic I used, but I could really find out how to handle the logic concerning the "h2 and a". In the original template, two-col-left-menu, there is a "div#header" and in the css also a "div#header h2 a".
I don't know if the accesibility needs to be put in every sub-div as well, or that I could go with putting it once in the main-div.

In short, should I go with

"div#header", "div#header h2 a", "div#left" and "div#right", or are additional "div#left h2 a " and "div#right h2 a" required.

Ronny

[heatherfeuer]

The only reason I can think of for defining a style for h2 a at all would be if the page title was going to be a link -- or if you were going to have an h2 header anywhere else.  What I did was to make an arbitrary decision that the only place I was going to use h2 was in the page titles which also would never be links to anywhere.  I made that decision based on the unique styling of that particular header.  I also don't use h1 anywhere else but in the main header where it is given a negative margin to move it off the page.

As for accessibility, I printed out the whole accessibility guideline section from W3C and I've been perusing that as well as checking out other documentation relating to accessibility.  As I work on my "testsite," I am going to try and work from those guidelines as much as possible.  For me, that is the best way for me to become familiar with recommended practice.  It's seemed to me that some of the accessibility uses in the stylesheet with CMSms uses some extraneous styling to try and be accessible and that just makes it harder to incorporate certain styles into the regular screen styling.

Okay, I'll stop now.

[contented]

Hi,
I'm trying to do a similar thing - to put a second image floating right in the header.
But my right hand image is coming out below the header instead of on top of it.
I think other people have had this problem but I can't work it out.

In my template is the following code:

Code: Select all

<div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <hr class="accessibility" />

   <div id="header2">
            <div align="right"><img src="uploads/images/header/logo3.gif" />
                           <hr class="accessibility" />
   </div>
   </div>

In my stylesheet is the following:

Code: Select all

div#header {
   height: 110px; /* adjust according your image size - Done for WFF */
   background: #660099;           
}

div#header h1 a {
/* you can set your own image here - Done for WFF */
   background: #660099 url(uploads/images/header/logo3.gif) no-repeat 0 12px; 
   background-position: 10px;
   display: block; 
   height: 110px;             /* adjust according your image size - Done for WFF */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#header2 {
   height: 110px; /* adjust according your image size - Done for WFF */
   background: #660099;           
}

div#header2 h1 a {
   background: #660099 url(uploads/images/header/logo3.gif) ;
	background-repeat: no-repeat;
	height: 110px;
	background-position: right;
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

Can anyone help please?

C

[heatherfeuer]

You are trying to place two different divs in the same space. What you need to do is style each div with a width of about 45%.  Style the left div to float left and set the background image to display left, with no-repeat.  Style the second div to float right with the background image to display right no repeat.  As long as the width for each div is just under 50%, they should display correctly.

[contented]

Many thanks for that. With your help I have now got it working!!
For completeness, and in case it may help anyone else this is my code now:

In my template:

Code: Select all

<div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <hr class="accessibility" />
   </div>

<div id="header2">
         <h1>{cms_selflink dir="start" text="$sitename"}</h1> 
        <hr class="accessibility" />
  </div>

and in my stylesheet

Code: Select all

div#header {
   height: 110px; /* adjust according your image size - Done for WFF */
   float: left;
   width: 40%;
   background: #660099;
   
   }

div#header h1 a {
/* you can set your own image here - Done for WFF */
   background: #660099 url(uploads/images/header/logo3.gif) no-repeat 0 12px; 
   background-position: 10px;
   display: block; 
   height: 110px;             /* adjust according your image size - Done for WFF */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#header2 {
   height: 110px; /* adjust according your image size - Done for WFF */
   float: right;
   width: 60%;
   background: #660099;
   
   }

div#header2 h1 a {
/* you can set your own image here - Done for WFF */
   background: #660099 url(uploads/images/header/wff_01.jpg) no-repeat 0 12px; 
   background-position: right;
   display: block; 
   height: 110px;             /* adjust according your image size - Done for WFF */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

This gives me 2 header images, one on the left and the other floating right. Delighted that it's now working and next time should be much quicker!

Cheers
C

[contented]

But now I see that I have a bit of a problem sometimes with IE 6. When I change the screen size sometimes part of my heading name appears repeated left under the header. It comes and goes depending on the screen size. Firefox seems fine.
You can see it on my website at www.welshfoodfestival.co.uk

Anyone know how I might fix this?

Cheers,

C

[heatherfeuer]

Did you get it fixed?  I opened up the site with both IE 6 and Avant (an IE shell).  In both instances no matter how I sized the window, the header images did not repeat or overlap; I just got scrollbars once I reduced the size beyond a certain point.

[contented]

Hi Heather,
Thanks for looking. No it's not fixed. It's not the actual image. What seems to happen is that the menu row drops down a bit leaving a gap, and in there on the left hand side you can see part of the letters VAL which must be the end of my website name, but I don't know how they are appearing there.

Maybe if you have time you could check again? Many thanks.


C

[heatherfeuer]

Hmmm... now that I looked for it, I see what you mean.  It's possible that with the extra header on the right has interfered somehow with the text offset.  In your h1 a css, try adding another 9 to the offset.  (-9999 rather than -999)  Just as an fyi, in the pagewrapper style, you have an extra ";" here:

background-color: #fff;;

You might want to fix that.  Otherwise, I'm not sure what to suggest.

[Nullig]

Instead of using 40% and 60% for the header widths, try using amounts that total less than 100%, like 38% and 58%.

Also, wrap both in a div with the proper background colour, as I see white gaps between the two when I resize the page. Perhaps have a header div with the background colour, the the header1 and header2 divs with the images inside it.

Nullig

[contented]

Many thanks to both.

Your suggestions have helped and after more experimentation I have now referenced both images in the template rather than in the stylesheet. And I've nested the 2 header image divs within another header div which defines the height and colour.This now seems to be working better:

In stylesheet:

Code: Select all

/*** header ****/

div#header {
    height: 120px;  
    background: #660099;
    
 }

div#header1 {
   height: 110px; 
   float: left; 
   width: 30%; 
   padding: 5px 0px 0px 5px;
   background: #660099;
 }

div#pics {
	margin: 0px;
	float: right;
	height: 110px;
        width: 65%;
	padding: 5px 5px 0px 0px;
	background-color: #660099;
}

/*** end header ****/

and in template:

Code: Select all

<!-- start Header -->

<div id="header"> <!-- This just provides height and colour for header1 and pics -->

  <div id="header1">
     <img src="uploads/images/header/logo3.gif" width="190" height="100" border="0" alt="Welsh Food Festival" />
  <hr class="accessibility" />
 
  <!--  Taken this piece of code out  <h1> {cms_selflink dir="start" text="$sitename"} </h1> -->
        
  </div>

  <div id="pics">   
    <img src="uploads/images/header/wff_01.jpg" width="500" height="96" align="right" border="0" alt="Welsh Food Festival" />
  </div>
  
</div>

<!-- End Header -->

Works fine in both. The only thing I don't much like is the way that if the page is made narrow, in IE 6 the header jumps down rather than just using a scrolling bar like it does in Firefox. IE can be such a pain, but I think I can live with this...unless you have any more ideas??

Many thanks

C