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

[RonnyK]

Gregor,

I would go for a header3 in the bottom of the css and nest it in the header in the template.

If you can't un-attach forms, what if you only comment out the code I said that was the cause for the shifting.

Ronny

[Gregor]

Ronny,

Changed the code to:

Code: Select all

	form div,
	form p {
		font-size: 1em;
		/* margin: 0 0 1em 0; zie cms-forum 23-1-07 */
		/* padding: 0; */
	}

This seems to be working fine

I'll give header3 a try.

Gregor

[Gregor]

Ronny,

Ater struckling for a while, I managed to display a logo in the header center. However, it is placed to low. The css looks like this:

Code: Select all

/* aanvullende headers 23-1-07 */

div#header3 {
   background: #61363C url(uploads/images/Hanse_Logo_klein.jpg) no-repeat center center;
}

div#header h3 a{
   margin-top:-70px;
   /* height: 80px;            adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   line-height: 1.1em;     /* fixes top and bottom of text being cut off by IE6.0 */
   color: #fff;
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

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

div#header2 h4 a{

The template looks like this:

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 - nieuw" -->
   <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 id="header3">
           <h5>{cms_selflink dir="start" text="Hanse"}</h5>
           <hr class="accessibility" />
           </div>
   </div>
   <!-- End Header -->

Good you give me a clue?

Thanks,
Gregor

[RonnyK]

Gregor,

you use "header3" "h5" and "a" in the template, but the css isn't setup that way.

div#header h3 a{ should be div#header3 h5 a{

meaning you talk about header3, h5 as heading.

Ronny

[RonnyK]

Gregor,

maybe it is also good to embed all in the main header div.

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 - nieuw" -->
   <div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
           <hr class="accessibility" />
                      <div id="header3">
           <h5>{cms_selflink dir="start" text="Hanse"}</h5>
           <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>
   </div>
   <!-- End Header -->

[Gregor]

Ronny,

Oeps, overlooked that one. Perhaps not do these things at six in the morning

Changed the css to

Code: Select all

/* aanvullende headers 23-1-07 */

div#header3 {
   background: #61363C url(uploads/images/Hanse_Logo_klein.jpg) no-repeat center center;
}

div#header3 h5 a{
   margin-top:-70px;
   /* height: 80px;            adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   /* line-height: 1.1em;     fixes top and bottom of text being cut off by IE6.0 */
   color: #fff;
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

/* hiernaartoe verplaatst, zie cms-forum */

Meanwhile also changed the template. Thanks.

The site still looks the same. This means that heading3 is not used???

Gregor

[RonnyK]

Gregor,

Í'll have to check this evening. After work I'll check the logic. Maybe you'll better comment-out the code in the template until it is fixed. If its in the css, there is no problem.

Ronny

[Gregor]

Ok Ronny.

Cheers,
Gregor

[RonnyK]

Gregor,

changing css for div#header:

Code: Select all

DIV#header {
	background: url(http://www.uisge-beatha.eu/uploads/images/Hanse_Logo_klein.jpg) #61363c no-repeat center center; HEIGHT: 80px
}

solves it. You don't need header3 than. So from css and template you can delete header3 and only include the new picture in the css.

Ronny

[Gregor]

Ronny,

Thanks, for the suggestion. I removed header3 and applied your 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   */
   background: url(uploads/images/Hanse_Logo_klein.jpg) #61363c no-repeat center center; HEIGHT: 80px 
}

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


/* position for the search box */

I'm not sure if HEIGHT is correct, so I tried your post and tried to remove it, because it is already declared.

If you look at the site, than the Hanse....jpg does not show up, and it seems that the header more flickers when you hover the mouse over it.

Gregor

[RonnyK]

Gregor,

the first 2 lines of div#header need to be replaced with 2 last one, so only that line remains.

Code: Select all

div#header {
   background: url(uploads/images/Hanse_Logo_klein.jpg) #61363c no-repeat center center; 
   HEIGHT: 80px 
}

Ronny

[Gregor]

Sorry Ronny, this does not work. If I look at the source of the site, than the picture for the center of the header, does not appear in this source

Gregor

[RonnyK]

Gregor,

I missed a change I did locally.

delete the #color from the div "header h1 a", just behind the image, this is putting color over your new image:

Code: Select all

DIV#header H1 A {
	DISPLAY: block; BACKGROUND: url(http://www.uisge-beatha.eu/uploads/images/logo1.gif) no-repeat 0px 0px; TEXT-INDENT: -999em; HEIGHT: 80px; TEXT-DECORATION: none
}

Ronny

[Gregor]

Ronny,

Can happen. It works The flickering is also gone! Pff, what a job you did man. Thanks very much!!

The image is not finished yet, because I have to make it without white background.

Thanks again,
Gregor

[RonnyK]

Gregor,

no thanks, it was a pleasure to work on the challenges. Good luck with your site and off course with the boat or should I say ship. I don't know what but there seems to be a difference between the two .

Ronny