CMS Made Simple Forums

Posted: **Tue Jul 17, 2007 12:04 am**

Could somebody please explain the best solution for adding multiple images into the header and aligning them correctly.

I have read all the information I can find on this subject and after days and days of experimenting I am now becoming extremely frustrated that nobody here can help me on this matter.

I have already started a thread on this in another section, but nobody seems to be able to assist me:
http://forum.cmsmadesimple.org/index.php/topic,13467.0.html

If I fully understood all the sections of code in the templates I would be able to figure it out, but unfortunately I don't which is why I am trying to learn.

Currently I have 2 images in my header, 1 on the left and 1 on the right, even this does not display correctly in Firefox and has disturbed the breadcrumbs and cause them to be squashed up to the bottom of the header.

I really would like to be able to add a 3rd image in the Center of my header.

Could somebody please help me out and explain the best method for adding multiple images and aligning them, I would be extremely grateful.

Posted: **Tue Jul 17, 2007 8:10 am**

hey man,

could yoo u post a link or a screen shot where one can look at it?

Posted: **Tue Jul 17, 2007 9:30 am**

http://forextrader36.ifastnet.com

It looks fine in Internet Explorer but does not display correctly in Firefox, but I really would like to add more images to the header and do not know how to achieve this.

Posted: **Tue Jul 17, 2007 9:33 am**

why dont you just put the images like in the header? that is the easiest way.

see as well here: http://forum.cmsmadesimple.org/index.ph ... 66543.html

Posted: **Tue Jul 17, 2007 11:10 am**

why dont you just put the images like in the header? that is the easiest way.

Could you give me an example please? I would do this if I knew how.

see as well here: http://forum.cmsmadesimple.org/index.ph ... 66543.html

This is my original thread that does not answer my question, so this doesn't help.

Posted: **Wed Jul 18, 2007 5:36 pm**

I have managed to resolve the display issue in Firefox using "" after the header.

Code: Select all

<!-- Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" -->
   <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>
   <!-- End Header -->

   <div style="clear:both;"></div>

   <!-- Start Search-->
   <div id="search">
          {search}
   </div>
   <!-- End Search -->

However, I still require assistance adding another image to the center of my header.

Posted: **Wed Jul 18, 2007 11:35 pm**

This has more than 2 images/boxes in the header, the next page shows 3 images working to make a flexible page header...

http://www.multiintech.com/Templates/in ... 3-col.html...

I have 3 divs in the header...

this is #1

this is #2These are some words to get you going, they are in the template.
this is #3

The css...

div#header{width: 100%;height:134px; margin:0px auto;padding:0px;}
div#hbox{position:absolute;width:197px;height:121px;top:24px;right:8px;margin:0px; padding: 0px}
*html body div#hbox{margin: 0; padding: 0px 0}
div#header h1{width:260px;height:46px;margin:40px 0 0;padding:0px}
#words{position:absolute; width:150px; border:1px solid;top:45px;left:40%}

and the images...

#header h1{background: url(uploads/images/thenis/logoMain.gif) no-repeat}
#hbox{background: url(uploads/images/thenis/monument.jpg) no-repeat;}

to put an image in the #2 box...

#words{background: url(uploads/images/thenis/monument.jpg) no-repeat;}

of course your image paths will be diff. and you will not want the border call in #words, and you can call your div/boxes what you want...

Posted: **Thu Jul 19, 2007 6:44 am**

what i have don is the following:

I made 3 Global Content Blocks:

Code: Select all

<table cellpadding="0" cellspacing="0" width="100%">
     <tbody>
         <tr>  
          <td style="background-image: url('uploads/images/image.gif')" height="5" width="100%"></td> 
        </tr> 
     </tbody> 
</table>

Header0 (for the nice space line)

Code: Select all

<table cellpadding="0" cellspacing="0" width="100%">
     <tbody> 
         <tr>
          <td align="center" width="25%">  
                <a href="http://www.toonkunst.org/" target="_blank" title="title">
                  <img src="uploads/images/image.gif" alt="title" height="100" width="100" />
                </a>
         </td>     
         <td style="background-image: url('uploads/images/images.jpg')" height="100" width="75%"> 
		{random_image folder='uploads/images/your folder/' width='25%' height='100'} 
		{random_image folder='uploads/images/your folder/' width='25%' height='100'} 	
	        {random_image folder='uploads/images/your folder/' width='25%' height='100'}   
         </td>
      </tr> 
    </tbody>
 </table>

header1 (the upper header with logo)

Code: Select all

<table cellpadding="0" cellspacing="0" width="100%">
  <tbody>
   <tr>
    <td align="center">
     {random_image folder='uploads/images/tka-images/algemeen/' width='24%' height='100'}
     {random_image folder='uploads/images/tka-images/algemeen/' width='24%' height='100'} 
     {random_image folder='uploads/images/tka-images/algemeen/' width='24%' height='100'}
     {random_image folder='uploads/images/tka-images/algemeen/' width='24%' height='100'}
   </td>
  </tr>
 </tbody>
</table>

header2 (the lower header under the horizotal menu bar)

then in the template I did the following:

I replace the next code:

Code: Select all

   <!-- Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Top menu + left submenu + 1 column" -->
   <div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <hr class="accessibility" />
   </div>
   <!-- End Header -->

   <!-- Start Navigation -->
   <div id="menu_horiz">
      <h2 class="accessibility">Navigation</h2>
        {menu template='simple_navigation.tpl' number_of_levels='1'}
      <hr class="accessibility" />
   </div>
   <!-- End Navigation -->

into the following code:

Code: Select all


 <!-- Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Top menu + left submenu + 1 column" -->

   <div id="header">

       {global_content name='Header1'}
       {global_content name='Header0'}

   <hr class="accessibility" />
   </div>

   <!-- End Header -->

   <!-- Start Horizontal Navigation -->
   <div id="menu_horiz">
      <h2 class="accessibility">Navigation</h2>
        {menu template='simple_navigation.tpl' number_of_levels='1'}
      <hr class="accessibility" />
   </div>
   <!-- End Horizontal Navigation -->

   <!-- Start Header2, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Top menu + left submenu + 1 column" -->
   
<div id="header2">

       {global_content name='Header0'}
       {global_content name='Header2'}

   <hr class="accessibility" />
   </div>

   <!-- End Header2-->

ready

see it in action? (still in test fase so by nice and have some comment if you want)

www.toonkunstalmelo.com/cms/

Posted: **Thu Jul 19, 2007 12:03 pm**

Thank you Mark for all your useful information and also for explaining it too, I am extremely grateful.

Rather than copying the code exactly I have tried to implement it myself and experimented a little with different combinations, this way I can fully understand and learn what the code is doing rather than just copying and pasting it.

I have not used the 'margin' or 'padding' as I do not fully understand their use and not really sure if they are necessary for my solution.

Here is the code I have now:

Template

Code: Select all

<!-- Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" -->
   <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>
   <div id="header3">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <hr class="accessibility" />
   </div>
   <!-- End Header -->

I'm not sure what the is for

CSS

Code: Select all

/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/

div#header {
   height: 150px;    /* adjust according your image size */
   background: #000000;           
}

div#header h1 a {
/* you can set your own image here */
   background: #000000 url(images/cms/logo1.gif) no-repeat 0 17px;
   display: block;
   height: 150px;             /* 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 */
}

div#header2 {
   height: 52px;    /* adjust according your image size */
   width: 200px;
   position:absolute;
   top:30px;
   left:40%;
   background: #000000;           
}

div#header2 h1 a {
/* you can set your own image here */
   background: #000000 url(images/cms/logo1.gif) no-repeat 0 0;
   display: block;
   height: 52px;             /* 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 */
}

div#header3 {
   height: 52px;    /* adjust according your image size */
   width: 200px;
   position:absolute;
   top: 30px;
   right: 30px;
   background: #000000;           
}

div#header3 h1 a {
/* you can set your own image here */
   background: #000000 url(images/cms/logo1.gif) no-repeat 0 0;
   display: block;
   height: 52px;             /* 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 */
}

Here is the result: http://forextrader36.ifastnet.com/

Ideally I would like the images to be stationary so that they do not move when the window is resized.

Thanks again Mark

Posted: **Thu Jul 19, 2007 12:10 pm**

forextrader36

your image are floting over the screen.

so please take a quick look at my selution.

nice day

Posted: **Thu Jul 19, 2007 4:39 pm**

my solution: not as background pics but should also help:

http://multiintech.com/CMSMSDemo/index. ... rpics.html

you are free to play around, its a demo page! more information on the 'home' page

Posted: **Thu Jul 19, 2007 7:16 pm**

You need to put all of them inside the header, if you look at what I did you will see that the for the header is at the bottom by doing this you may be able to contain the last one as it is picking up the position - right from the edge of the browser, if you look you will see every time you resize the browser it is always 30px from the right hand edge...

CMS Made Simple Site

This is really the end of header

CMS Made Simple Site

CMS Made Simple Site

Mine...

start header div
this is #1
start middle div
this is #2

end middle div
start last div
this is #3

end last div

end header div

Posted: **Fri Jul 20, 2007 5:29 pm**

RonnyK is my Saviour!

I am very grateful to RonnyK who kindly provided me with the exact solution I was looking for.

Template (includes an extra container inside the header):

Code: Select all

<!-- Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" -->
   <div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <div id="header2">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   </div>
   <hr class="accessibility" />
   </div>
   <!-- End Header -->

CSS:

Code: Select all

/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/

div#header {
   height: 150px;    /* adjust according your image size */
   background: #000000 url(images/cms/logo2.gif) no-repeat center center;
}

div#header h1 a {
/* you can set your own image here */
   background: #000000 url(images/cms/logo1.gif) no-repeat center left;
   width: 200px;               /*adjust to the width of the left floating image*/
   float: left;   
   display: block;
   height: 150px;             /* 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 */
}

div#header2 {
   height: 150px;    /* adjust according your image size */
}

div#header2 h1 a {
/* you can set your own image here */
   background: #000000 url(images/cms/logo3.gif) no-repeat center right;
   width: 200px;               /*adjust to the width of the right floating image*/
   float: right;   
   display: block;
   height: 150px;             /* 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 */
}

To ensure the images stay where I want them and do not move when the browser window is resized I had to amend the Pagewrapper. This has to be changed in 2 places to get the required results for both Mozilla Firefox and IE6.

Template (for IE6):

Code: Select all

</__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(950,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
<!-- The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Left sidebar + 1 column" -->

In CSS (for Mozilla Firefox):

Code: Select all

/* center wrapper, min max width */
div#pagewrapper {
   border: 1px solid black;
   margin: 0 auto;       /* this centers wrapper */
   max-width: 80em;   /* IE wont understand these, so we will use javascript magick */
   min-width: 80em;
   background-color: #fff;;
   color: black;
}

Posted: **Fri Jul 20, 2007 7:09 pm**

well, in this case the centered image is not a link but if this is ok for you, no prob. I i want to make this one a link, how can i don that? (i understand your solution very well!)

Posted: **Sat Jul 21, 2007 5:46 am**

If you want the center to be a link as well, you can create a new container with the logic of header2 (give it a new name, ) for the left image and put the center image back to the "header h1 a" block.

Ronny

CMS Made Simple Forums

[SOLVED] Put Multiple Images in Header and Align

[SOLVED] Put Multiple Images in Header and Align

Re: Put Multiple Images in Header and Align...... PLEASE HELP!

Re: Put Multiple Images in Header and Align...... PLEASE HELP!

Re: Put Multiple Images in Header and Align...... PLEASE HELP!

Re: Put Multiple Images in Header and Align...... PLEASE HELP!

Re: Put Multiple Images in Header and Align...... PLEASE HELP!

Re: Put Multiple Images in Header and Align...... PLEASE HELP!

Re: Put Multiple Images in Header and Align...... PLEASE HELP!

Re: Put Multiple Images in Header and Align...... PLEASE HELP!

Re: Put Multiple Images in Header and Align...... PLEASE HELP!

Re: Put Multiple Images in Header and Align...... PLEASE HELP!

Re: Put Multiple Images in Header and Align...... PLEASE HELP!

Re: [SOLVED] Put Multiple Images in Header and Align

Re: [SOLVED] Put Multiple Images in Header and Align

Re: [SOLVED] Put Multiple Images in Header and Align