Template validation help

TomWhitson · **Joined:** Wed Feb 01, 2006 10:21 pm **Posts:** 34

Hi,

I'm trying to do three things with the template for my site.

1. Center the banner in the header area

This is probably really simple to fix but everything I seem to do causes something to breakout of the template. I've attatched the css files but they are pretty much identical to the ones from http://www.compassdesigns.net

Code:

body {
text-align:center; /*center hack*/
}
#wrap {
width:80%; /*center hack*/
margin:0 auto; /*center hack*/
text-align:left;
}
#header {
text-align:left;
}
#footer {
clear:both;
}
#main-body {
float:left;
width:80%;
}
#sidebar-2 {
float:right;
width:20%;
overflow:hidden;
margin-left:-3px;
}
#content {
float:right;
width:80%;
overflow:hidden;
}
#sidebar {
float:left;
width:20%;
overflow:hidden;
margin-right:-3px;
}
.inside {
padding:10px;
}
.floatleft
{
float: left;
margin: 0px 10px 10px 0px;
}

Code:

* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address{
margin:0.5em 0;
}
ul{
margin-left:2em;
}
fieldset{
padding:.5em;
}
body{
background: url(../images/bg.gif);
font-size:76.1%;
font-family:Verdana,Arial,Helvetica,sans-serif;
line-height:1.3em;
margin:1em 0;
}
#wrap{
border:1px solid #999;
background: #FFFFFF;
height:100% !Important;height:1%;
}
#wrap-inner {
background: none;
height:100% !Important;height:1%;
}
#header{
padding:10px;
background:#FFFFFF;
border-bottom: 1px solid #999;
}
#footer{
padding:5px;
background:#FFFFFF;
border-top: 1px solid #999;
}
a{
text-decoration:underline;
color: #000000;
}
a:hover{
text-decoration:none;
color: #000000;
}
.componentheading{
font-size:1.3em;
line-height:1.3em;
font-weight:bold;
}
.contentheading{
font-size:1.2em;
line-height:1.2em;
font-weight:bold;
}
h1{
font-size:1.7em;
line-height:1.7em;
}
h2{
font-size:1.5em;
line-height:1.5em;
}
h3{
font-size:1.3em;
line-height:1.3em;
}
h4{
font-size:1.2em;
line-height:1.2em;
}
h5{
font-size:1.1em;
line-height:1.1em;
}
h6{
font-size:1em;
line-height:1em;
font-weight:bold;
}
form {
margin: 0px;
 padding: 0px;
}
.inputbox{
margin: 0px;
padding: 0px;
}

#footer,.small,.createdate,.modifydate,.mosimage_caption{
font:0.8em Arial,Helvetica,sans-serif;
color:#000000;
}
.moduletable{
margin-bottom:1em;
padding:0 10px;/*padding for inside text*/
}
.moduletable h3{
/*Module Headers*/
background:#000000;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em -10px;/*negative padding to pull h3 back out from .moduletable padding*/
}
#navcontainer{
padding:0;
color: #333;
}
#navcontainer ul{
list-style: none;
margin: 0;
padding: 0;
}
#navcontainer li{
margin: 0;
}
#navcontainer li a{
display: block;
padding: 3px 5px;
background:#FFFFFF;
color: #000000;
text-decoration: none;
}
html>body #navcontainer li a { width: auto; }

#navcontainer li a:hover,a#active_menu:link,a#active_menu:visited{
text-decoration:none;
color: #000000;
}

2. Validate the site 100%

At the moment there are only 19 errors with my site as can be seen http://validator.w3.org/check?uri=http% ... ype=Inline these mostly seem to be caused by '&' characters used n the urls created by the phpBB component I'm using (component found here http://extensions.joomla.org/component/ ... Itemid,35/). The most likely culprit seems to be the login module I'm using.

3. I'm using Letterman to add users to the newsletter, but I wanted to add a checkbox to the register page so that users could agree or disagree to join the newsletter. I don't even know if this is possible but some advice would be great.

I don't know where to start fixing these problems and am asking more experienced members for there help. I;m assuming I need to modify the files in the login module and overwrite them on the server.

Thanks in advnace

toubkal · **Posted:** Fri Apr 07, 2006 3:04 pm

for No. 1

ammend the css for #header

#header {
text-align:left;
}

to

#header {
text-align: center;
}

2. yes most of the errors do look like the old & in url issue.

cannot say for sure without seeing the module but you can often solve these by finding the urls and replacing the

& with &

the file will most likely be in /modules/mod_the_name_of_the_module.php
make a backup first

3. is not so easy to acheive (can you not just add it to your privacy policy that one of the uses of their details may be to send newsletters - thay can unsubscribe from the newsletter or the site)

TomWhitson · **Joined:** Wed Feb 01, 2006 10:21 pm **Posts:** 34

toubkal wrote:

for No. 1

ammend the css for #header

#header {
text-align:left;
}

to

#header {
text-align: center;
}

2. yes most of the errors do look like the old & in url issue.

cannot say for sure without seeing the module but you can often solve these by finding the urls and replacing the

& with &

the file will most likely be in /modules/mod_the_name_of_the_module.php
make a backup first

3. is not so easy to acheive (can you not just add it to your privacy policy that one of the uses of their details may be to send newsletters - thay can unsubscribe from the newsletter or the site)

For 1. if I assign align center it makes the logo align centre too which I don't want. I'm looking for the logo to be on the left and the banner in the center.

For 2. that was what I thought, I guess i'll have to dig in and do a find and replace. Could get messy!!

For 3. that is an excellent idea. I'll have to get on that right away!

Thanks for the help, if you have any ideas for No 1. that would be awesome.

Cheers!

toubkal · **Posted:** Fri Apr 07, 2006 3:31 pm

well they are just two images in the same container #header

you could go into the index and add in another container for the banner

or with css you can isolate one by the fact that one is a link

and give the image a bit of left margin
#header a img {margin-left: 20px}

TomWhitson · **Joined:** Wed Feb 01, 2006 10:21 pm **Posts:** 34

toubkal wrote:

well they are just two images in the same container #header

you could go into the index and add in another container for the banner

or with css you can isolate one by the fact that one is a link

and give the image a bit of left margin
#header a img {margin-left: 20px}

I've added to the css making the margin 20px at the moment, but I'd really like to add that extra container and align it right in the center. How would I go about doing that. If I put the two images in separate div's and put one to align left and one right will they then siplay next to each other correctly? Do I have to do anymore than add a div, called banner, around the banner then in the css align that to center?

Thanks for the help.

TomWhitson · **Joined:** Wed Feb 01, 2006 10:21 pm **Posts:** 34

Hey,

I'm still looking for a way to center the banner module. I just don't know enough about CSS or joomla template design. I would be gratefull if someone knowledgable could help me out here. I'm using 468 and 792 banner in teh module so it would need to work with that. And I wanted the logo to remain onthe left side.

Cheers

Jenny · **Posted:** Thu Apr 20, 2006 2:13 am

One way you could do it is to put two divs inside your header div, one to hold your logo and one to hold the banner and then control the position and alignment of each through that.

TomWhitson · **Joined:** Wed Feb 01, 2006 10:21 pm **Posts:** 34

MMMedia wrote:

One way you could do it is to put two divs inside your header div, one to hold your logo and one to hold the banner and then control the position and alignment of each through that.

Hey,

Yeah I tried it out by using the following CSS;

#header{
padding:10px;
background:#FFFFFF;
border-bottom: 1px solid #999;
}
#logo {
text-align: left;
}
#banner{
text-align: center;
}

and html;

but as soon as i add the two extra divs the banner and logo go onto separate lines? Is there some code im missing?

Thanks for the help.

Jenny · **Posted:** Thu Apr 20, 2006 7:57 pm

Try adding a float statement to each:

Code:

#logo {
float: left;
text-align: left;
}
#banner{
float:right;
text-align: center;
}

TomWhitson · **Joined:** Wed Feb 01, 2006 10:21 pm **Posts:** 34

MMMedia wrote:

Try adding a float statement to each:

Code:

#logo {
float: left;
text-align: left;
}
#banner{
float:right;
text-align: center;
}

That broke something completely, the logo and banner weren't included in the header at all...

i tried display:block; and it almost works...the images are displayed centered and left, but still on different lines for some reason >:(

Maybe it has something to do with the way the banner is published...should the style be -1?

Jenny · **Posted:** Fri Apr 21, 2006 12:46 pm

You could try display:inline and one other thing to check is to make sure that the total width of the logo + banner divs is small enough to fit side by side in your header div.

TomWhitson · **Joined:** Wed Feb 01, 2006 10:21 pm **Posts:** 34

MMMedia wrote:

You could try display:inline and one other thing to check is to make sure that the total width of the logo + banner divs is small enough to fit side by side in your header div.

That seems to work on one front but not the other. It displays the logo and the banner on one line. But it doesn't center the banner for some reason???

Code:

#header{
padding:5px;
background:#FFFFFF;
border-bottom: 1px solid #999;
}
#logo {
display:inline;
text-align: left;
}
#banner{
display:inline;
text-align: center;
}

and

Code:

<div id="wrap">
<div id="wrap-inner">
<div id="header">
<div id="logo">
<img src="templates/<?php echo $cur_template; ?>/images/logo.png">
</div>
<div id="banner">
<?php mosLoadModules( 'banner', -1 ); ?>
</div>
</div>

Weird problem. Also the banner and logo should be fine to sit on one line. The logo is only 150px the banner is a maximum of 792 and there is 5px padding on the header div. The total size of the header is 940px. I think the problem might be elsewhere...after much playing I cannot fix it at all. I think it lies in the fact that other alignments are set that take preference over these ones. I.E the body is aligned center for an IE fix.

I've put the template css and such up at http://www.themusiczine.com/myspace/template.rar I would be eternally gratefull if you could take a look at it and see if you can find the problem. :-*

Thanks for your help

Joomla! Discussion Forums

Forum rules

Template validation help

Quick reply

Who is online