Welcome, Guest
Username: Password: Remember me

TOPIC: Centralise Title but leave logo left aligned [Citronade Template]

Centralise Title but leave logo left aligned [Citronade Template] 1 year 10 months ago #89492

  • bedsingar
  • bedsingar's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 4
  • Karma: 0
Hi,

I'm trying to adjust the head section of my survey template so that the SiteName is centralised on the page but the logo stays left aligned.

I've modified teh Citronade template a little so here is the code from the startpage section:
<div id="head">
		<div class="wrapper">
			<img src="{TEMPLATEURL}nw_oys_logo_new.gif" alt="Logo" />
			<h1 id="sitename">{SURVEYNAME}</h1>
			</div>
<div id="title"><h2 id="surveytitle" class="wrapper">"At the heart of the business, maximising value for our customers"</h2></div>
 

& here is the code for the sitename tag from the CSS file:
 
/* Head decoration */
#head{
	border-bottom:2px solid #AAA;
	border-top:2px solid #CCC;
	color:#5670A1;
	background:#dbdbdb url(header-bkg.png) repeat-x center bottom;
	}
 
#head a#link-logo:hover,#head a#link-logo:focus,#head a#link-logo:active{background:transparent;}
#head a#link-logo {outline: 0;} /* remove the outline on logo click */

#sitename{line-height:3;margin:0;text-align:center;}
 

I've attached a screenshot of the current view.

Thanks
Attachments:
The administrator has disabled public write access.

Re: Centralise Title but leave logo left aligned [Citronade Template] 1 year 10 months ago #89493

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6451
  • Thank you received: 844
  • Karma: 249
quickly done:
#head img{float:left}
#head h1 {display: block;text-align:center}
Add to remove the inline style from #head h1 ... :whistle:
Last Edit: 1 year 10 months ago by DenisChenu.
The administrator has disabled public write access.

Re: Centralise Title but leave logo left aligned [Citronade Template] 1 year 10 months ago #89501

  • bedsingar
  • bedsingar's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 4
  • Karma: 0
Hi,

I've tried:
 
/* Head decoration */
#head{
	border-bottom:2px solid #AAA;
	border-top:2px solid #CCC;
	color:#5670A1;
	background:#dbdbdb url(header-bkg.png) repeat-x center bottom;
	}
 
#head img{float:left}
#head h1 {display: block;text-align:center}

#head a#link-logo:hover,#head a#link-logo:focus,#head a#link-logo:active{background:transparent;}
#head a#link-logo {outline: 0;} /* remove the outline on logo click */

#sitename{line-height:3;margin:0;text-align:center;}
 

But this hasn't changed the output - have I put it in the right place?

Thanks
The administrator has disabled public write access.

Re: Centralise Title but leave logo left aligned [Citronade Template] 1 year 10 months ago #89503

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6451
  • Thank you received: 844
  • Karma: 249
Did you clean your cache ?

Look if you have another #head h1 after.

Denis
The administrator has disabled public write access.

Re: Centralise Title but leave logo left aligned [Citronade Template] 1 year 10 months ago #89512

  • bedsingar
  • bedsingar's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 4
  • Karma: 0
Ah yes there was a second tag - which I've now removed.

The head section has updated & the text has moved although it is offset from the centre by the width of the logo image. - I guess one way to overcome this would be to add an equal size placeholder to the righthand side - but is there a better way?

Thanks for your help
Attachments:
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.256 seconds
Donation Image