[GELÖST] Album-Probleme, Validierung nicht erfolgreich, Layout zerschossen

[derMarkus]

Hallo zusammen,
ich hoffe, die Frage wurde nicht schon x-mal beantwortet, aber ich hab über die Suche nix passendes gefunden.

First things first: CMSMS 1.2.3, PHP 5.2.5, mySQL 5.0.32, Album 0.9.3

So, ich hab also ein normales Template installiert und ein bisschen im Template verändert (vor allem überflüssige Menüs auskommentiert). Soweit läuft auch alles gut.

Wenn ich nun auf einer Page das neu installierte Album-Modul anspreche, zerschießt es mir das Layout im Firefox, im IE7 funktioniert's . Zu sehen z.B. hier http://pechart.de/index.php?page=Stroer im Gegensatz zu z.B. dem richtigen Layout hier http://pechart.de/index.php?page=Colida---Late-Enough.

Wenn ich die Page vor Einbinden des Module-Tags bei validator.w3.org validieren lasse, ist alles in Ordnung, nachher gibt es 2 Fehlermeldungen. D.h. doch (in meinem naiven Laiendenken), dass irgendwas am Album-CSS nicht stimmt, oder? Hab auch schon nach dem Fehler gesucht, kann ihn aber mit meinem wenigen Hintergrundwissen nicht finden.

Ich verwende im Album-Modul nur default-Einstellungen, die Bilder wurden über den Image-Manager hochgeladen. Die Thumbs werden ja auch korrekt angezeigt und die Box funktioniert auch.

Falls also jemand eine Idee hat, immer raus damit. Danke schonmal!

[cyberman]

Hmm, wollte gerade schnell mal drauf schauen - aber da werden keine Seiten generiert - da läuft nur die Eieruhr - und das seit mehreren Minuten und trotz mehrerer Versuche  ...

PS: Das Album-Modul sollte eigentlich "sauber" sein.

[derMarkus]

Huch, da war ich wohl gerade am basteln. Sollte wieder gehen.

[NaN]

Fehler Nummer 1:

Im HTML-Quelltext steht (bei mir in Zeile 85; ):

Für eine Imagekampagne der Stroer-Gruppe wurde ein DVD-Intro mit Special-Effects aufgewertet.

Das p-Tag wird nicht geschlossen. (Ist hier außerdem überflüssig)
Font-Tags sind soweit ich weiß nach XHTML1.0 auch nicht valide.

[NaN]

Auf der Seite wo alle ok aussieht steht in Zeile 99 (vor dem Menü)



Ist auch nicht schön.

[derMarkus]

Okay, die beiden Fehler sollten schonmal weg sein. Danke soweit.

[NaN]

Und weiter gehts:

Auf der Seite Stroer dort wo Special Effects von Markus Pech ... steht

wird im Quelltext irgendein Paragraph geschlossen. (Warscheinlich der, der vorhin Fehl am Platz war)
(Zeile 106)

Bevor das jetzt ewig so weiter geht, installier mal für den Firefox das Plugin HTML Tidy.

Und dann geh das mal Schritt für Schritt durch.

[derMarkus]

Und ich bin sicher, es würde so weitergehen. Danke für den Tip, ich werd's morgen mal versuchen aufzuräumen. Aber wird das etwas mit dem o.ä. Problem zu tun haben? Warscheinlich schon...

EDIT: Mir scheint, ich sollte schleunigst HTML-firm werden und auf den WYSIWYG-Editor verzichten. Damit müllt man sich ja alles zu.

EDIT 2: Hmm, okay. Jetzt ist alles schonmal einigermaßen aufgeräumt. Allerdings gibt es eine Menge Fehler, sobald ich das Album einbinde. Wie gesagt in den default-Einstellungen. An welcher Stelle könnten diese Fehler denn wohl produziert werden?

[derMarkus]

Ich denke, ich hab jetzt die groben Schnitzer ausgeräumt. Leider ist der Fehler immernoch der gleiche: Sobald ich das Album einfüge, ist das Layout kaputt. Noch jemand eine Idee?

[NaN]

Poste mal Dein Album-Template.

[derMarkus]

Das Template vom Album:

Code: Select all

{* Include JS files. You can move this to the head of your page template if you want *}
<!--Lightbox 2.0.2-->
<__script__ type="text/javascript" src="modules/Album/templates/db/lightbox/js/prototype.js"></__script>
<__script__ type="text/javascript" src="modules/Album/templates/db/lightbox/js/scriptaculous.js?load=effects"></__script>
<__script__ type="text/javascript" src="modules/Album/templates/db/lightbox/js/lightbox.js"></__script>
<__script__ language="javascript" type="text/javascript" src="modules/Album/templates/db/js/SMRcode.js"></__script>

{if $pictureid !=0}

{* Big Picture *}
<div style="text-align:center">
<p class="bigpicturecaption"><strong>{$picture->name}</strong><br />
{$picture->comment}<br />
<span class="bigpicturenav">
{if $link.picture.previous}<a href="{$link.picture.previous}" title="Previous picture">< Previous</a>{/if}
 <span class= "albumpicturecount">( Picture {$picturenumber}/{$picturecount} )</span> 
{if $link.picture.next}<a href="{$link.picture.next}" title="Next picture">Next ></a></span>{/if}
</p>
<a href="" onmouseover="SMR_setLink(this);" target="_blank"><img src="{$picture->picture}" alt="{$picture->name|escape:'html'} - {$picture->comment|escape:'html'}" onload="SMR_resize(this, {$max_image_size});" title="{$picture->name|escape:'html'}  - {$picture->comment|escape:'html'}" /></a>
</div>
{/if}

{* Album List *}
{if !$album}
<ul class="albumlist">
	{foreach from=$albums item=album}
	<li class="thumb">
 	<a href="{$album->link}">
<img src="{$album->thumbnail}" alt="{$album->name|escape:'html'}" title="{$album->name|escape:'html'} - {$album->comment|escape:'html'}"{$album->autothumbnailsize} /></a>

<p class="albumname">{$album->name}<br />
<span class="albumpicturecount">({$album->picturecount} images)</span><br />
<span class="albumcomment">{$album->comment}</span></p>
</li>
	{/foreach}
</ul>

{else}

{* Photo List *}
<p><strong>{$album->name}</strong><br />
{$album->comment}<br />
<span class="instructiontext">Click on a thumbnail to view a larger image. Click on the close button to close it. {if $returnlink}<a href="{$returnlink}">Return to the album index page</a>{/if}</span></p>

	{if $pagecount>1}
	<p class="albumnav">
		<a href="{$link.page.first}" title="first page"><< </a>
		{if $link.page.previous}<a href="{$link.page.previous}" title="previous page">< </a>{/if}
		page {$pagenumber}/{$pagecount}
		{if $link.page.next}<a href="{$link.page.next}" title="next page"> ></a>{/if}
		<a href="{$link.page.last}" title="last page"> >></a>
	</p>
	{/if}

<ul class="picturelist">
	{foreach from=$pictures item=picturesrow}
	    {foreach from=$picturesrow item=onepicture}
	    <li class="thumb"><a href="{$onepicture->picture}" rel="lightbox[{$album->name|escape:'html'}]" title="{$onepicture->name|escape:'html'} {if ($onepicture->comment != "")}- {$onepicture->comment|escape:'html'}{/if}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}" title="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}"{$onepicture->autothumbnailsize} /></a>
   	   </li>

      {if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
	    {/foreach}
	{/foreach}
</ul>
<div style="clear:both;"></div>
{if $picturecount==0}No image{/if}
{/if}

{if $picture->id>0}
{/if}

Ist das Standart-Lightbox-Template. Würde das Seiten-Template oder das Stylesheet auch noch weiterhelfen? (Ich wollte eigentlich niemandem zumuten, durch den Code suchen zu müssen.)
Danke für die Hilfe!

[NaN]

Also laut HTML Tidy steht bei Dir das Album in einem Absatz ().
Was natürlich nicht schlau ist, da im Album-Template weitere Blockelemente sind.
Es scheint mir also nicht am Album zu liegen, sondern entweder am Seiten-Template oder (je nachdem wie Du das Album einbindest) am Seiteninhalt (Stichwort WYSIWYG-Editor).

[derMarkus]

Ich bau das einfach über

Code: Select all

{cms_module module='album' albums='1'}

Sonst nix. Im HTML steht auch kein , nur das Tag.

Das Seitentemplate ist das hier:

Code: Select all

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{sitename} - {title}</title>
{stylesheet}
{metadata}
</head>

</__body>
<div class="maincontainer">
  <div class="topcontainer">
    <div class="tp_left">
      <div class="tp_left_logo">

<h1>{sitename}</h1>

      </div>
    </div>
    <div class="tp_spc_right"></div>
    <div class="tp_right_bottom">

<a href="http://www.pechart.de/" title="Home">Home</a> | <a href="http://pechart.de/index.php?page=kontakt" title="Kontakt">Kontakt</a> 

    </div>
  </div>
  <div class="contentholder">

    <div class="headerimgcontainer"></div>
    <div class="subcontentcontainer">
      <div class="subcontentholder">

{breadcrumbs initial="1" root="Home"}

      </div>
    </div>
    <div class="maincontentcontainer">
      <div class="mainc_left">
        <div class="mainc_left_f">

<h1>{title}</h1>
{content}

        </div>
      </div>
      <div class="mainc_right">
        <div class="mainc_right_box">

<!-- main side navigation menu, also top level items, but no limitation like the top menu -->
{cms_module module='menumanager' template='Sunset : hgSunset-sidemenu1'   number_of_levels='1' start_level='1'}

        </div>
        <div class="mainc_right_box">

<!-- 'section' menu, shows child pages, when present. this theme, as is, only supports up to 2 levels -->
{cms_module module='menumanager' template='Sunset : hgSunset-sidemenu2'   number_of_levels='2' start_level='2'}

        </div>
      </div>
    </div>
    

    <div class="thinfootercontainer">
      <div class="thinfooter_holder">

<!-- the default cmsms has a gcb called 'footer'; if you don't, replace with your own content -->
{global_content name='footer'}

      </div>
    </div>
  </div>
</div>
<__body>
</__html>

Und der Vollständigkeit halber auch noch das Stylesheet, hoffe, dass icst nicht zu viel Code in einem Post.

Code: Select all

body{background:#3C3C3C url(../uploads/sunset/bg.jpg) repeat;color:#FFF;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;margin:0}
a{color:#FFF;text-decoration:none}
a:hover{color:#FFF;text-decoration:underline}
h1{font-size:20px}
h2{color:#CB8034;font-size:17px}
h3,h4{font-size:14px}
h5,h6{font-size:12px}
div.maincontainer{display:table;margin:0 auto;width:900px}
div.topcontainer{display:table;height:75px;margin:0 auto;width:800px}
div.tp_left{display:table;float:left;height:75px;width:500px}
div.tp_left_logo{display:table;float:left;font-size:11px;height:50px;margin-top:25px;width:300px}
div.tp_spc_right{display:table;float:left;height:50px;width:300px}
div.tp_right_bottom{display:table;float:left;height:25px;text-align:right;width:300px}
div.tp_right_bottom a:active,div.tp_right_bottom a:visited,div.tp_right_bottom a:link{color:#FFF;font-weight:700;text-decoration:none}
div.tp_right_bottom a:hover{color:#CB8034}
div.contentholder{border-color:#1D1D1D;border-style:solid;border-width:10px 10px 20px;display:table;margin:0 auto;width:800px}
div.mainlinkcontainer{display:table;margin:0 auto;width:800px}
ul.topmenu{list-style-type:none;margin:0;padding:0}
ul.topmenu li{float:left}
ul.topmenu li a{border-top:3px solid #000;color:#CCC;display:block;height:auto;line-height:1.3em;margin-left:.5em;margin-right:.5em;padding:.6em 1em 1.5em;text-align:center;text-decoration:none;width:auto}
ul.topmenu li a:hover{background-color:#323232;border-top:3px solid #454545;color:#B4792D;text-decoration:none}
div.headerimgcontainer{background-color:#000;background-image:url(../uploads/images/tropfen_v001_banner.jpg);background-repeat:no-repeat;border-color:#000 #FFF;border-left-width:0;border-right-width:0;border-top-width:0;border-style:solid;display:table;height:100px;margin:0 auto;width:800px}
div.subcontentcontainer{background-color:#000;border:0 solid #999;color:#999;display:table;font-size:11px;line-height:130%;padding:0;width:800px}
div.subcontentholder{border-color:#999;border-style:solid;border-width:0;display:table;margin:5px}
div.maincontentcontainer{background-color:#1A1A1A;color:#999;display:table;margin-left:auto;margin-right:auto;padding:0;width:800px;height:500px}
div.mainc_left{border-color:#CCC;border-style:solid;border-width:0;color:#CCC;display:table;float:left;line-height:130%;padding:0;width:600px}
div.mainc_right{background-color:#000;color:#CCC;display:table;float:left;height:auto;padding:0 0 1em;width:200px}
div.mainc_right_box{background-color:#000;color:#CCC;display:table;float:left;margin:5px;padding:0}
div.mainc_left_f{color:#CCC;display:table;padding:5px}
div.mainc_left_s{color:#CCC;display:table;margin:0;width:600px}
div.mainfootercontainer{background-color:#333;border:0 dashed #CCC;color:#999;display:table;line-height:130%;width:800px}
div.mainfooter_holder{color:#999;display:table;height:auto;padding:5px}
div.thinfootercontainer{background-color:#000;color:#CCC;display:table;height:auto;padding:0;width:800px}
div.thinfooter_holder{color:#CCC;display:table;height:auto;padding:5px}
ul.sidemenu{display:table;list-style-type:none;margin:0;padding:0}
ul.sidemenu li{border-color:#666;border-style:dashed;border-width:0 0 1px;display:table;padding:0;width:160px}
ul.sidemenu li a{color:#999;display:block;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;font-weight:700;height:auto;padding:5px;text-decoration:none;width:150px}
ul.sidemenu li a:hover{background-color:#171717;color:#E6EEF7;text-decoration:none}
.mainc_right_box h2{color:#CB8034;display:block;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:18px;font-weight:700;height:auto;margin-bottom:0;padding:5px;width:150px}
ul.topmenu li a.currentpage,ul.sidemenu li a.currentpage{color:#fff}
ul.topmenu li a.activeparent,ul.sidemenu li a.activeparent{color:#ddd}
.NewsSummary{border-bottom:1px solid #232323;margin-bottom:1em}
.NewsSummaryPostdate{float:right;font-size:110%;font-weight:700;margin:0 2em 0 6em}
.NewsSummaryLink{font-size:125%;font-weight:700;margin-bottom:.8em}
.NewsSummaryCategory{clear:right;float:right;font-style:italic;margin:0 2em 0 6em}
.NewsSummaryAuthor{clear:right;float:right;font-style:italic;margin:0 2em 1.2em 6em}
.NewsSummaryContent{line-height:1.25em;margin-bottom:1.5em}
fieldset{color:#999}
label{font-size:115%}
textarea,input{background:#232323;color:#ccc;padding:.2em}
input.button{background:#323232;border:1px solid #000;color:#ccc;padding:.5em}
div#NewsPostDetailDate{color:#909090;float:right;font-weight:700;margin:0 3em 0 6em}
h3#NewsPostDetailTitle{font-size:125%}
hr#NewsPostDetailHorizRule{background:#333;border:0;height:2px;margin:0 0 1.5em;width:99%}
div#NewsPostDetailCategory{float:right;font-style:italic;margin:0 6em 0 3em;text-align:right}
div#NewsPostDetailAuthor{clear:right;float:right;font-style:italic;margin:0 6em 0 3em;text-align:right}
div#NewsPostDetailContent{margin-right:200px}
div#NewsPostDetailPrintLink{float:right;font-weight:700;margin:2em 200px 2em 0}
div#NewsPostDetailReturnLink{float:left;font-weight:700;margin:2em 0 2em 200px}

/* EOF */

Nochmal herzlichen Dank...

[NaN]

Also in Deinem Seiten-Template steht kein Album drin.
Rufst Du es im WYSIWYG-Editor auf?
Wenn ja, dann schau Dir den Inhalt der Seite nochmal im HTML-Modus an.
Da ist definitiv ein Absatz vor dem Album.

[derMarkus]

Ich rufe  das Album im Editor auf, ja. Der Absatz kam vom Album-Template (Lightbox), hab ihn rausgenommen. Jetzt sieht's zwar anders aus, aber noch lange nicht richtig.