How can I put text on the right side of the header?

[RonnyK]

Gregor,

in my site, the entire header is working as a self-link, this way you can use it to go "Home".
The code used for that is the one mentioned in Reply#3, so I don't know what you have differently now, compared to the code in the post for your header coming from the template and from the CSS.

Ronny

[RonnyK]

Gregor,

a quick fix for the search.

Code: Select all

   <!-- Start Search-->
   <div id="search">
      <div style="float: right;">          
      {search searchtext=""}
      </div>
   </div>
   <!-- End Search -->

Ronny

[Gregor]

Thanks Ronny, it works.

I re-used your code. I noticed, if I remove the link-tags, like

Code: Select all

<div id="header2">
           <h4>straks langs de kustlijn<br/>het schuim over de golven<br/>mooie heldere zee</h4>
           </div>

the text is displayed on the left side under the logo. That is something I don't understand, but I must admit that my knowledge of CSS-coding is very limited

Gregor

[RonnyK]

Gregor,

can you post the code currently running for the template and the css for the HEADER. Maybe i'll notice something differently.

Ronny

[RonnyK]

Gregor,

I fixed the issue with the search in FF. I don't know why but the added "header2" acts on the following element.so shifting it below DIV.search, made breadcrumbs react. I moved the 2 DIV-blocks all the way down and now it works.

Code: Select all

div#header2 {
   background: #99B3E5;   
}

div#header2 h4 a{
   margin-top:-100px;
   margin-right: 12px;
   float: right;
   line-height: 1.1em;
   text-decoration:none;   /* old firefox would have shown underline for the link, this explicitly hides it */}
}

If anyone has any ideas why these act in FF and not in IE ?

The code in the template is:

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">
     <h2>{cms_selflink dir="start" text="$sitename"}</h2>
     <hr class="accessibility" />
     <div id="header2">
     <h4>{cms_selflink dir="start" text="Text on the right"}</h4>
     <hr class="accessibility" />
   </div>
   </div>
   <!-- End Header -->

[Gregor]

Ronny,

The code in the template, without your latest movement of the two DIV-blocks, is:

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" />

           <!-- onderstaande toegevoegd -->   
           <div id="header2">
           <h4>{cms_selflink dir="start" text="straks langs de kustlijn<br/>het schuim over de golven<br/>mooie heldere zee"}</h4>
           <hr class="accessibility" />
           </div>
   </div>

   <!-- End Header -->


   <!-- Start Search-->
   <div id="search">
          <div style="float: right;">
          {search submit="Zoek" searchtext="naar..." lang='nl_NL'}
          </div>
   </div>
   <!-- End Search -->

The code in the CSS is:

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: 80px;    /* adjust according your image size */
   background: #61363C;
/*** #385C72;        originele kleur   ***/
}

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

/* div#header h2 {
   margin-top: 5px;
   margin-right: 12px;
   float: right;
   line-height: 1.1em;
   text-decoration:none;   /* old firefox would have shown underline for the link, this explicitly hides it */}
}
*/


/*
div#header h2 a {
/* you can set your own image here */
   background: #215E6F url(uploads/images/logo1.jpg) no-repeat 0px 0px;
   display: block;
   height: 80px;             /* adjust according your image size */
   width: 198px;
   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 {
   background: #215E6F;   
}

div#header2 h4 a{
   margin-top:-70px;
   margin-right: 12px;
   float: right;
   line-height: 1.1em;
   color: #fff;
   text-decoration:none;   /* old firefox would have shown underline for the link, this explicitly hides it */}
}



/* position for the search box */
div#search {
   float: right;
   width: 23em;    /* enough width for the search input box */
   text-align: right;
   padding: 0.1em 0 0.2em 0;
   margin: 0 1em;
}

Gregor

[RonnyK]

Gregor,

sorry for not being complete in my answer, my final fix (moving the 2 blocks to the bottom), make the quick fix unneccessary.

You can change back the search-call to:

Code: Select all

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

I'm now checking your header, or better said, why it is acting differently than mine.

Ronny

[RonnyK]

Gregor,

the issue with your header comes from the width-statement in "div#header h1 a". This makes the DIV act for only a width of 198 px, the width of the picture, you can leave it out, making the DIV react for the entire header in which the width of the picture is irrelevant as long as it is not wider than the page.

Ronny

[Gregor]

Ronny,

I comment out the with-statement (in 'header h1 a'). By moving the 2 DIV-blocks in the stylesheet to the bottom of the stylesheet puts lso the header at the bottom of the site page. Did I move the wrong DIV?? I put it back in it's originl place. At this point in time, I can not test it with FF. In IE6 it looks ok.

When moving the mouse over the header, the image flickers. Is that something that can be solved (or am I asking to much )

Gregor

[RonnyK]

Gregor,

you should only move the two header2 DIV's down. So the ones introduced today. "header" and "header h1 a" should remain above the "search"-div. Only "div#header2" and "div#header2 h4 a" should go all the way down.

Did you move them down in the stylesheet or in the template?

If you fixed it, I can check the FF.

Ronny

[Gregor]

Ronny,

Done so, moved the

Code: Select all

div#header2 {
   background: #61363C;
/* was #215E6F;   */
}

div#header2 h4 a{
   margin-top:-70px;
   margin-right: 12px;
   float: right;
   line-height: 1.1em;
   color: #fff;
   text-decoration:none;   /* old firefox would have shown underline for the link, this explicitly hides it */}
}

all the way done. In IE6, the search-option now shows left...

Something off topic, would you be so kind to click on 'Site-overzicht' in the menu and than move your mouse over one of the links that show up. In IE, the footer moves up. I created a new pages 'Site-overzicht' and added {sitemap}

Gregor

[RonnyK]

Gregor,

your sitemap issue might have to do with the fact that you have sub-pages active. I see pages in the sitemap that aren't visible in the menu. You'd better make all children of non-active pages non-active as well.

Ronny

[RonnyK]

Gregor,

can you post the header CSS and template again. I don't know what is running at the moment.

I think you might have misplaced something in your template. The footer is now outside of the container.

Ronny

[Gregor]

Ronny,

The 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: 80px;    /* adjust according your image size */
   background: #61363C;
/*** #385C72;        originele kleur   ***/
}

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

/* div#header h2 {
   margin-top: 5px;
   margin-right: 12px;
   float: right;
   line-height: 1.1em;
   text-decoration:none;   /* old firefox would have shown underline for the link, this explicitly hides it */}
}
*/


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





/* position for the search box */
div#search {
   float: right;
   width: 23em;    /* enough width for the search input box */
   text-align: right;
   padding: 0.1em 0 0.2em 0;
   margin: 0 1em;
}

At the bottom of the stylesheet you'll find:

Code: Select all

/* hiernaartoe verplaatst, zie cms-forum */
div#header2 {
   background: #61363C;
/* was #215E6F;   */
}

div#header2 h4 a{
   margin-top:-70px;
   margin-right: 12px;
   float: right;
   line-height: 1.1em;
   color: #fff;
   text-decoration:none;   /* old firefox would have shown underline for the link, this explicitly hides it */}
}


/* END LISTS */

The 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" />

           <!-- onderstaande toegevoegd -->   
           <div id="header2">
           <h4>{cms_selflink dir="start" text="straks langs de kustlijn<br/>het schuim over de golven<br/>mooie heldere zee"}</h4>
           <hr class="accessibility" />
           </div>
   </div>
   <!-- End Header -->


   <!-- Start Search-->
   <div id="search">
          {search submit="Zoek" searchtext="naar..." lang='nl_NL'}
   </div>
   <!-- End Search -->

I'll check the menu's. Thanks.

Gregor

[RonnyK]

Gregor,

your footer is out of the pagewrapper, if you check your template, the bottom lines should be something like:

Code: Select all

	  <!-- End Content Area -->


   </div>
   <!-- End Content -->


   <!-- Start Footer. Edit the footer in the Global Content Block called "footer" -->
   <div id="footer">
      {global_content name='footer'}
   </div>   
   <!-- End Footer  -->


</div><!-- end pagewrapper -->
<__body>
</__html>

Ronny