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

[Gregor]

Hello,

Thanks to your help, my site (version 1.12 / www.uisge-beatha.eu) is running great! The logo1.gif on the left was changed ok. Now I'd like to have text on the right side. I'm using the following css "Layout: Left sidebar + 1 column". How can I get text on the right side? Perhaps in the nearby future, it might be a picture as well. I'd looked at the various posts, however I'm not able to translate it to my situation and wish...

Thanks for your help and reply!
G

[Dr.CSS]

You can add another in the header...

 
          Uisge Beatha
  your text
 
 
 

Then in your CSS...

#header h2 {your style}

[mike_taylor]

You can add another in the header...

   
           Uisge Beatha
   your text
   
   
   

Then in your CSS...

#header h2 {your style}

I've been trying to do something similar and have looked at various posts, but am still unsuccessful.

When I tried the suggestion above, the came out below the image, rather than to the right of the image.

I'm a bit confused about using tags for placing elements horizontally across the page.  Should I be using table cells instead?

Thanks for any help you can give.

Mike

[RonnyK]

Gregor, Mike,

I had the same issue you were having and solved it as follows:

First in the css create a second header div (header2 + header2 h4 a):

Code: Select all

div#header {
   height: 130px;    /* adjust according your image size */
   background: #99B3E5;           
}

div#header h2 a {
/* you can set your own image here */
   background: #99B3E5 url(images/logo.jpg) no-repeat 12px 12px;
   display: block;
   height: 130px;             /* 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 {
   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 */}
}

Second, add header2 with the needed content to your template:

Code: Select all

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

     <div id="header2">

     <h4>{cms_selflink dir="start" text="Line1<br/>Line2<br/>Line3<br/>Line4"}</h4>
     <hr class="accessibility" />
   </div>
   </div>
   <!-- End Header -->

I don't know if this is the best way to solve it, but it works for me.

P.S. For a reason not clear to me, i have to add an additional line-height to the "div#header2 h4 a" even though line-height was already in the "H4" itslf. If someone knows why it looses the line-height??? The other elements are correctly pulled from "H4" only line-height is gone.

Mike, maybe that is also the reason for your other post. You might try adding an additional line-height to the "DIV#header h1 a". I might have lost it there as well.

Ronny

[Gregor]

Thanks so far! Following Mark's suggestion, I see text on the right, but...

In my stylesheet "Layout: Left sidebar + 1 column":

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 */}
}


/* position for the search box */

In the template: "CSSMenu left + 1 column - nieuw"

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>
           <h2>...</h2>
   <hr class="accessibility" />
   </div>
   
   <!-- End Header -->


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

I see the text '...' on the right side below the header, and the search box is placed on the left. I feel we are getting close Would one tell me (us) what needs to be done to get the text inside the header?

Thanks again for your help!
Gregor

[RonnyK]

Gregor,

you might try my solution. posted just above your last post. That works for me, I've the address written on the right in the header.

I solved it by creating a new div header2 and nesting it inside the header-div in the template. This way you must create a header2 AND a header2 h4 div.

Ronny

[RonnyK]

Gregor,

you might check "www.terspille.nl" to see if this is what you mean with the text on the right. I checked your site and noticed the menu-behaviour (parents in IE7). If you hover over a parent menu-item in IE7 an extra line is visible below the menu-line.

You can solve that using some additional code in your template:

Change

Code: Select all

<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#primary-nav li {margin-bottom: -3px;}
#primary-nav li:hover {margin-bottom:-3px;} /* a HACK!!! for IE7 */
</style>
<![endif]-->

and additionally:

Code: Select all

<!--[if lte IE 6]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->

THe first code is to handle the fact that IE7 handles CSS differently, the second is to make sure that IE < 7 still works correctly.

Ronny

[Gregor]

Ronny,

That's is what I mean! How did you do that T
hanks for the tip on improving my site. I'll make the changes.

Thanks,
Gregor

[RonnyK]

Gregor,

I wrote the method in Reply#3, so scroll a little up to see the code. It is just above your first entry of today.

Ronny

[Gregor]

Oeps 

I checked my site in IE6 and noticed that the search bar is placed right where Firefox places it left... Also noticed that the coloured bar of the heading in IE6 is bigger than in Firefox. Any idea how that might be solved?

Gregor

[RonnyK]

Gregor,

can you post the code of the template and the css concerning the Header. I think you missed a DIV in the css, but if you show the code, its easier to see. Different header heights might be because you have to address the height twice in the CSS.

Ronny

[RonnyK]

Gregor,

I see you have the header with text in place now. I notice the same behaviour on my site as well with the search in FireFox. I'll heve to check that as well.

Ronny

[Gregor]

Ronny,

Nearly like chatting...

My CSS code:

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;
   color: #fff;
   line-height: 1.1em;
   text-decoration:none;   /* old firefox would have shown underline for the link, this explicitly hides it */}
   color: white;
}



/* position for the search box */

My template 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: 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 -->

SOLVED: I noticed that the text is unreadable due to the color. How can I change it to white?

Gregor

[RonnyK]

Gregor,

add
   color: white;

to the
"div#header2 h4 a"

Ronny

[Gregor]

Thanks Ronny!

It works

It seems that it is only working, displaying the text on the right, when it is acting as a link. Something I don't understand. Maybe higher CCS-knowledge required...

Gregor