Sidebar

[njw]

The sidebar on my front page (the only one where I'm using the sidebar so far) starts the data about 3" down the bar rather than at the top. As far as I know, I've not adjusted any of the settings. Any ideas how I can get the text to the top of the column?

Thanks

Neil

[shannah]

The sidebars use a "float: left" designation in the CSS.. I have had problems in the past with it wanting to go after the text in the left side of the page... a big pain in the neck..

You can try playing with the width of #main in the styles.css file to make it smaller... that could be affecting it.
Also, Aoirthoir posted a fix to the MainTemplate.html file a couple of weeks ago where there was an unclosed div tag... this could possibly affect it too.

Code: Select all

{translate id="site_menu"}Site menu{/translate}:

{foreach from=$ENV.APPLICATION.tabs item="label" key="url"}
   {translate id="site/tabs/`$label`"}{$label}{/translate} |
{/foreach}

   

Note the

[njw]

My sidebars are set to float right, if I've read the CSS correctly, and I've made the correction from Aoirthoir and I've made the main area smaller; no perceivable difference! When I get a free minute again, I'll try a few other things.

Neil

[Aoirthoir]

Mr. Neil,

Are you still having this issue? If not would you be willing to post the exact problem you had and how you solved it. If it is not solved, maybe we could take a look at what is going on if you post some of the data/code.

[njw]

Hi Joe

Still have the problem - to be honest I've not had time to look at it since Wednesday. The only real changes I've made have been to the css in terms of using a bit more screen space for the text. You can see the site at www.archomai.co.uk/website - very early days on the design and virtually no content!

Neil

[Aoirthoir]

Ok thank you. Are you opposed to me saving any part of it (mostly the CSS and generated html) so I can try to help with this?

[njw]

If you can copy it, how can I stop you! No problem, copy away.

Cheers

Neil

[njw]

Steve

The same kind of thng is also happeneing if you have more than one table in the main body. I've just had to put in 10 or more breaks to get the second table to display below the first table. Any chance you can have a look at why this is happening? It's stopping me from going live with the site - adding the content will be easy, but I've got to have the content displaying properly.

Thanks for any help / advice you can give.

Neil

[Aoirthoir]

Mr. Neil,

I believe I have found the cause of your issue. I downloaded the CSS and I simply saved a copy of the main page. In your CSS you have a couple of lines that read this:

width:930px; !was 730
(at the #container ID)

and

width:735px; !was 535
(at the #main ID)

You are using exclamation points to comment out the change. However in CSS the comments are done using /* at the beginning of the comment and */ at the end of the comment. So your comments are causing the CSS to become confused. Further there is a css rule !important that states to REALLY do what I just said. So if you change those to this:

width:930px; /*was 730*/
(at the #container ID)

and

width:735px; /*was 535*/
(at the #main ID)

Your problem should go away.

I tested it with my downloaded copy of your page and your style sheet and it worked fine.

If you have any further questions you can reach me at my email boscagarda-programming@yahoo.com

[Aoirthoir]

Also, I just looked at the table problem you are having. I will try to figure out a solution later if you really need to have two tables...however the code for the information that is in the second table should not really be a table at all. Here is some code that will work until I can look further into the issue.

On your main page simply replace this code ([[[ and ]]] are html tag replacement holders so I can post in here with issues):

Code: Select all

[[[table width="100%" cellspacing="1" cellpadding="1" border="0" align="center" summary=""]]]
    [[[tbody]]]
        [[[tr]]]
            [[[td]]]
            [[[div align="center"]]]             [[[/div]]]
            [[[p align="center"]]][[[font size="4"]]][[[strong]]]Global Network[[[/strong]]][[[/font]]][[[br /]]]
            [[[/p]]]
            [[[p align="center"]]]UK • Bahrain • Oman • Saudi Arabia • Qatar • UAE • China • South Africa • Argentina • Poland • Romania • Spain • Portugal • USA[[[/p]]]
            [[[/td]]]
        [[[/tr]]]
    [[[/tbody]]]
[[[/table]]]

with this code:

Code: Select all

[[[p align="center"]]][[[font size="4"]]][[[strong]]]Global Network[[[/strong]]][[[/font]]][[[/p]]]
[[[p align="center"]]]UK • Bahrain • Oman • Saudi Arabia • Qatar • UAE • China • South Africa • Argentina • Poland • Romania • Spain • Portugal • USA[[[/p]]]


[njw]

Many thanks Joe. Site now looking much smarter! The footer is still not centering itself, but I can live with that.

[Aoirthoir]

To get the footer to center you have to play around a little bit. First you want to set make sure you use clear; both; since that will force it into its own space right to left. Then you need to set your margins and/or padding. If you want it centered, simply set your right and left margins to be exactly the same. Like this:

margin: 0 10% 0 10%;
or
margin: 0 40px 0 40px;

From left to right it is margin: top right bottom left;
You can use several formats, inches, pixels, percentages etc. It really doesnt matter though, as long as you have the clear: both and the margins right/left exactly the same it will center. Using div-- align equals center doesnt work. Instead it acts as the old center tag used to do. So all your text will be centered.

Another neat trick you can use is text-align: justify; We are in the medical business so we have to follow lots of laws about privacy. So on our corporate website I have an entire paragraph about what can and cant be done with the information. That and all of the other areas on the page use the justify so it creates a nice look with all of the text lining up straight down both the left and right sides. I dont have that set for the sidebar since it is so tiny.

Anyhow here is my footer. I'm not using the left and right margins because I have the container id set for what I want and the footer is the full width of that..but I want to make sure there is a space around the bottom of the footer at the end of the page...creates a boxed in look. The padding settings cause my text inside the box to move away from the edges. The P tags already take care of that from the top and bottom.

Padding is between your object (usually text) and the border...margin is between the border of the object and the rest of the world.

Hope that helps.

#footer{
clear:both;
float:left;
font-size: .6em;
padding: 0 10px 0 10px;
margin: 2% 0 2% 0;
background:#286ea0;
color: #ffffff;
border: 1px solid black;
}