[SOLVED] Multiple Images in Header and Align Images?

[forextrader36]

I am using 'Left simple navigation + 1 column' Template.

How can I insert more than 1 image in to the header and how do I align these images?

[RonnyK]

Check this topic, some methods are mentioned.

http://forum.cmsmadesimple.org/index.ph ... 705.0.html

Ronny

[forextrader36]

I am new to CMS and my knowledge is limited, but you have to start somewhere.

I have read the posts on the above link but much of it is Jargon to a beginner like me.  Many of the posts also were incomplete and didn't work correctly for the people involved, so I'm trying to piece it all together and have been experimenting and tweaking, but have still not got the final solution.

There must be a correct and proper way to achieve this.

All I need to do is put 'Logo1' on the left of the header and 'Logo2' on the right.

Here is what I have so far................

In 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>
   <!-- End Header -->

In Stylesheet:

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 */
   float: left;
   width: 50%;
   background: #000000;           
}

div#header h1 a {
/* you can set your own image here */
   background: #000000 url(images/cms/logo1.gif) no-repeat 0px 0px;
   background-position: 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 */
   float: right;
   width: 50%;
   background: #000000;           
}

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

It Seems to look OK in Internet Explorer, but in Firefox the breadcrumbs are too high  and it seems the whole page has moved up a fraction.

Would somebody please post the correct and proper method for inserting 2 or more images into the header?

[RonnyK]

Do you have a link to see?
Are both images not higher than 150px as that is the height you give to the header.

Ronny

[forextrader36]

Here is a link to show what I mean, In Internet Explorer it seems to look ok, but in Firefox the breadcrumbs etc seem to be squashed up.

http://forextrader36.ifastnet.com/

I really need to get my head round what each section of code does in order to fully understand and grasp what is needed.

Being told 'Do this and it will work' is not very helpful, I really need to understand the reason behind it.

I would like to add maybe 3 or 4 images to the header, which I could do if I fully understood what the code was doing.

A lot of the code in CMSMS seems to be used in a very unique way which also makes it very difficult for beginners to learn as there is no way of finding the correct answer and I just end up piecing together lots of different information and coming up with an incomplete solution.

I would be very greatful if somebody would take the time to explain the correct method rather than just sending me somewhere else.

I could spend hours and hours, maybe days, trying to figure this out, but I know that somebody who knows this stuff could explain it in 5 minutes.

[forextrader36]

I can not believe there is nobody here that can help me and provide a solution to my original question.

I am now also trying to add a 3rd image to my header with no success.

Also, even with only 2 images in the header it causes display issues in Firefox.  Somebody here must know how to add multiple images to the header correctly.

Please help!

[Deblus]

I have been trying to do this too

check out this other thread for some ideas

http://forum.cmsmadesimple.org/index.ph ... 705.0.html

[forextrader36]

I have already read that thread many times.  I seem to be banging my head against a brick wall here.

I would like to add another image to my header, displayed in the Center.  I have been experimenting and trying various combinations, but I am still unable to get the required results.

[Greg]

This article on A List Apart may help.

[forextrader36]

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.

[Dr.CSS]

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...

[Deblus]

excellent help Mark on this issue

but your website raises more questions

how did you set the width to be full screen?

[forextrader36]

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

[Dr.CSS]

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...

EDIT: you need to give the header div a position:relative then adjust the top setting as it will move them down, they will now take the header as top instead of the page...

Margin is the outside space, outside the div, padding is the inside space, inside the div...

http://www.multiintech.com/Templates/in ... wnews.html
on this page is an image of the Box Model... IEs biggest problem... This is what we call from to



 
          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


As far as full width it's actually 99%...



 

html,body{margin:0;padding:10px 0 5px}
div#box{width:99%;margin: 0px auto}
div#page{width: 100%;margin: 0px ;text-align: left}

[forextrader36]

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;
}