Page 4 of 5
Re: How can I put text on the right side of the header?
Posted: Tue Jan 23, 2007 8:50 pm
by 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
Re: How can I put text on the right side of the header?
Posted: Tue Jan 23, 2007 8:56 pm
by 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
Re: How can I put text on the right side of the header?
Posted: Wed Jan 24, 2007 7:01 am
by 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
Re: How can I put text on the right side of the header?
Posted: Wed Jan 24, 2007 8:55 am
by 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
Re: How can I put text on the right side of the header?
Posted: Wed Jan 24, 2007 9:00 am
by 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 -->
Re: How can I put text on the right side of the header?
Posted: Wed Jan 24, 2007 9:03 am
by 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
Re: How can I put text on the right side of the header?
Posted: Wed Jan 24, 2007 9:57 am
by 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
Re: How can I put text on the right side of the header?
Posted: Wed Jan 24, 2007 10:16 am
by Gregor
Ok Ronny.
Cheers,
Gregor
Re: How can I put text on the right side of the header?
Posted: Wed Jan 24, 2007 12:47 pm
by 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
Re: How can I put text on the right side of the header?
Posted: Wed Jan 24, 2007 2:44 pm
by 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
Re: How can I put text on the right side of the header?
Posted: Wed Jan 24, 2007 2:48 pm
by 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
Re: How can I put text on the right side of the header?
Posted: Wed Jan 24, 2007 2:59 pm
by 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
Re: How can I put text on the right side of the header?
Posted: Wed Jan 24, 2007 3:10 pm
by 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
Re: How can I put text on the right side of the header?
Posted: Wed Jan 24, 2007 3:48 pm
by 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
Re: How can I put text on the right side of the header?
Posted: Wed Jan 24, 2007 7:51 pm
by 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