CMS Made Simple Forums

Posted: **Fri Jul 13, 2007 12:23 pm**

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?

Posted: **Fri Jul 13, 2007 8:03 pm**

Check this topic, some methods are mentioned.

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

Ronny

Posted: **Fri Jul 13, 2007 11:26 pm**

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?

Posted: **Sat Jul 14, 2007 6:19 am**

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

Posted: **Sat Jul 14, 2007 2:30 pm**

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.

Posted: **Mon Jul 16, 2007 5:47 pm**

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!

Posted: **Mon Jul 16, 2007 11:06 pm**

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

Posted: **Mon Jul 16, 2007 11:47 pm**

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.

Posted: **Tue Jul 17, 2007 6:06 pm**

This article on A List Apart may help.

Posted: **Wed Jul 18, 2007 5:34 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: **Thu Jul 19, 2007 2:32 am**

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 7:36 am**

excellent help Mark on this issue

but your website raises more questions

how did you set the width to be full screen?

Posted: **Thu Jul 19, 2007 12:07 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 7:35 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...

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}

Posted: **Fri Jul 20, 2007 5:33 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;
}

CMS Made Simple Forums

[SOLVED] Multiple Images in Header and Align Images?

[SOLVED] Multiple Images in Header and Align Images?

Re: Multiple Images in Header and Align Images?

Re: Multiple Images in Header and Align Images?

Re: Multiple Images in Header and Align Images?

Re: Multiple Images in Header and Align Images?

Re: Multiple Images in Header and Align Images?

Re: Multiple Images in Header and Align Images?

Re: Multiple Images in Header and Align Images?

Re: Multiple Images in Header and Align Images?

Re: Multiple Images in Header and Align Images?

Re: Multiple Images in Header and Align Images?

Re: Multiple Images in Header and Align Images?

Re: Multiple Images in Header and Align Images?

Re: Multiple Images in Header and Align Images?

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