Lay-out album [SOLVED]

[Gregor]

Hello,

I thought I solved the lay out of the photo album on another site. Copied all templates and css'n to the other site, however an album stays on the rights side instead of left and between two categories a number of white lines.

I counted all and They balance. Als removed the clear:both
http://www.uisge-beatha.eu/index.php?page=fotoalbum

If you look at the first category on the second row, the thumb stays right. With FF css-tool, I don't see a difference between the various thumbs. Neither something strange after the first category. Sorting the categories inside the page differently, does not help

Anyone who is willing to help me to solve this?

Thanks advance for your help,
Gregor

[Russ]

Hi Gregor, you have a lot of invalid HTML which I would sort out before you go any further. I would have thought you would need the clearing CSS after each gallery? Anyway trying to trouble shoot this problem with invalid code is going to be pointless, sort that out first.

[Gregor]

Thanks for your reply Russ. What I find difficult, is that a number of errors refer to the javascript of the cmotion-template, being javascript 'errors'. How can I solve these errors?

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.uisge-beatha.eu%2Findex.php%3Fpage%3Dfotoalbum&charset=(detect+automatically)&doctype=Inline&ss=1&group=0&st=1&user-agent=W3C_Validator%2F1.591

I wonder if I'm the only one with these issues, because the Album installation is out of the box, so to say.

What do you mean with:

I would have thought you would need the clearing CSS after each gallery?

Thanks,
Gregor

[Russ]

Try using a different template? I have not had much fun with the cmotion one, something like the thickbox one is a safe bet. This would get rid of the cmotion JS problems?

By "I would have thought you would need the clearing CSS after each gallery? "
I mean that many of the gallery templates in album, use a CSS 'float' often for the gallery and the individual images. If you do not 'clear' these floats they will persist and ruin your web page design. They are usually built into the album templates and the CSS if required.

But start with valid code first

[Gregor]

Thanks.

Little progression to add

Code: Select all

<__script__ type="text/javascript">
// <![CDATA[

...

// ]]>
</__script>

his reduced the number of errors and warning dramatically.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.uisge-beatha.eu%2Findex.php%3Fpage%3Dfotoalbum&charset=(detect+automatically)&doctype=Inline&ss=1&outline=1&group=0&No200=1&st=1&user-agent=W3C_Validator%2F1.591

See what the other errors mean. Have even thought about a whole new installation of the album module, however I can not overlook the work that would implicate (templates, css etc.)

[Russ]

It tells you what line the problems are on?

For the first one for example

Code: Select all

<p><!-- Displaying Comments Module -->
<div id="comments">

Lose the

and  at end of that section

Code: Select all

<!-- End Comments Display Template -->
<ul>
</ul>
</div></p> <br />
           <div style="clear:both"></div> <!-- voor Picasa -->

Lose the and the empty

I'm sorry Gregor I don't have the time to go through all of them with you.

[Gregor]

Thanks for your time so far Russ. I really appreciate it & I understand I have to do some homework

I removed the option to add comments after the pictures. It passed
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.uisge-beatha.eu%2Findex.php%3Fpage%3Dfotoalbum&charset=(detect+automatically)&doctype=Inline&ss=1&outline=1&group=0&No200=1&user-agent=W3C_Validator%2F1.591

But...... the lay out remains the same. I hoped it would solve the problem. I looked with cssedit (I'm on a Mac) to see the reason why the second row is aligned right, but it looks the same for the other thumbs. Ehh, any thoughts?

[Russ]

In the Album CSS
try this... works in Firefox (I would Check IE) and centres text better.

/* Album and Picture Lists */
.thumb
{
padding:0;
width:120px;
        height: 13em;
margin:0 0.5em 0.5em 0;
   
/* Thumbnail spacing */
text-decoration:none;
line-height:normal;
list-style-type:none;
text-align:center;
float:left;

}

[Gregor]

Thanks Russ! This solves the position of the thumbnails. Still a lot to learn on css I wonder if I'm the only one facing the lay out question regarding the album..

One thing left... do you have a solution to remove the white lines between the first and second category?

Gregor

[Russ]

Gregor, it looks like is it something to do with the sidebar, probably the adverts causing the problems, perhaps the width?
Anyway adding this to the ends of the CSS

div#sidebar {display: none;}

This CSS hides the sidebar and the gap disappears. Perhaps something todo with the sidebar or stuff in it either the HTML/JS or CSS?

Russ

[Gregor]

Russ, Thanks for your support. The css you mentioned removes the sidebar completly For a test ok, but have to do that at home. I used the adsense-tag and have that advert width set to 120px. In the stylesheet the width is set to a percentage. Maybe that causes the problem. I noticed that in IE6.0 there are no white lines. I checked it last night on my Mac width FF and saw the white line. Like I said, I'll check it tonight (working on a Windows pc during the day...)

Gregor

[Gregor]

It has to do with either the advert or with the weather GCB. At least I know where to look I'll try to make the sidebar wider.

First have to sort out why the lay out of the text is gone. Checked the P-element, seems ok, however the text lay out does not look as nice anymore.

Gregor

[Russ]

It is just font size and spacing. I have to say I do not use the standard CMSMS templates/styles but it just looks like a font and spacing issue. If you want anyone over 40 to be able to read your web site... and also give you a better selection for your base fonts on more paltforms.

In Uisge_Beatha_-Page_CSS.css

Set initial font styles
*/
body {
   text-align: left;
   font-family: "Lucida Grande",Verdana, Helvetica, "Bitstream Vera Sans", Arial,sans-serif;
   /*font-family: verdana, "trebuchet MS", helvetica, sans-serif;*/
   /* font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; */
   /* font-family: Palatino, "Times New Roman", Times, serif; */
   font-size: 100.01%;
   line-height: 1.5;
}

and remove this bit - it is already set above?
/*
set font size for all divs,
this overrides some body rules
*/
div {
   font-size: 1em;
}

Looks fine to me - but needs a bit more consistency between header (h2/3/4/5/6) sizes and a bit more on spacing?

Russ

[Gregor]

Thanks for your suggestions Russ. I put them in (removed them) except for the font size, because after a test I noticed that it effects the header as well. Have to work on that later.

Strange that the site looks fine to you, because previously there was some white space between the paragraphs. I only see an enter but no extra white line/space (margin). Eventually the headers also look different. They had the standard cmsms lay out. But for some unknown reason (at least to me) this has gone.

Just for a thought, could drop me one or more links from the sites you have build?

Gregor

[Russ]

Yes Gregor as I said, you would need to set the header (h1/h2/3/4/5/6) CSS again, relative to the main text size and each other.

Sure, here are some client ssites, I don't do that many anymore as I'm semi retired due to illness. (Please note that these are client sites so the contents and design code are copyrighted to the client. )

Friends of the John Rylands
http://www.friendsofthejohnrylands.org/

Andre Ainsworth Professional Weddings and Portrait Photography
http://www.weddingsandportraitphotography.co.uk/

A whole host of eBook sites for A.J. Hall (they are all linked form this one)
http://www.lop.shoesforindustry.net/