CSS Sliding doors Rahmen für Text und Bild

[Domino]

Hallo Forum

Ich bin neu bei Typolight und versuche eine scheinbar ambitionierte Seite umzusetzen. Hier der Link zur statischen HTML-Seite:

http://www.albertfrida.ch

Hingekriegt habe ich den Header, die Navi und das Mainframe. Aber den Artikel in der rechten Spalte bei Home, sowie die Listenboxen unter "Zimmer" kriege ich einfach nicht hin. Dasselbe mit den Bilderrahmen.

Alle diese Elemente habe ich mit dem Sliding door Prinzip umgesetzt. Dafür müsste ich aber ein Artikel-Modul mit den entsprechenden div-Tags erstellen können. Übe nun 2 Tage aber komme nicht drauf.

Fangen wir mal mit dem Bilderrahmen an:
Bilderrahmen.png

Die breite ist fix, die Höhe variabel. CSS-Code:

#fotobox280-top {
	width: 280px;
	height: 12px;
	background-image: url(/images/fotobox280-top.png);
	background-repeat: no-repeat;
	background-position: left top;
}
#fotobox280-bottom {
	background:url("/images/fotobox280-bottom.png") no-repeat left bottom;
	padding-bottom: 12px;
	text-align: center;
}

HTML-Code:

<div id="fotobox205">
	 <div id="fotobox205-top"></div>
        		<div id="fotobox205-bottom">
                		<img src="/images/albertfrida.jpg" width="179" height="136" />
		</div id="fotobox205-bottom">
</div id="fotobox">

Der Nutzer müsste jetzt einfach ein Bild einfügen müssen, der Rahmen sollte automatisch entstehen.

Das selbe mit der Zimmerliste:
Zimmerliste.jpg

Der Nutzer sollte nur pro Zimmer einen Artikel hinzufügen müssen. Die Formatierung folgte automatisch. Höhe ist übrigens variabel, breite fix. Bis jetzt hatte ich das so umgesetzt:

CSS:

#listbox {
	float:left;
	width: 860px;
	margin-left: 100px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-align: left;
}
#listbox-top {
	height:20px;
	background-image: url(/images/listbox-top.png);
	background-repeat: no-repeat;
	background-position: left top;
}
#listbox-bottom {
	background-image:url(/images/listbox-bottom.png);
	padding-bottom: 20px;
	background-repeat: no-repeat;
	background-position: left bottom;
	min-height:120px;
}

HTML:

 <div id="listbox">
      	<div id="listbox-top"></div>
        <div id="listbox-bottom">
          <div id="fotobox" style="width:280px; float:left; margin-left:20px;">
           	<div id="fotobox280-top"></div>
                	<div id="fotobox280-bottom">
                        <a href="/images/_high/einzelzimmerA.jpg" rel="lightbox" title="">
                        	<img src="/images/_thumb/einzelzimmerA.jpg" width="260" height="173" />                        </a>            </div id="fotobox280-bottom">
       	  </div id="fotobox">
             
                 <div id="textbox" style="float:left; width:500px; padding-left:20px; padding-right:0px">
                 <h2> Zimmer Comfort</h2>
                 <p>Zimmer mit privater Dusche und Toilette und TV.</p>
                 <p class="price">Als Doppelzimmer CHF 160.00 bis CHF 180.00 Zimmer/Nacht <br />
inkl. Frühstück, Service und Taxen<br />
<br />
Als Einzelzimmer CHF 110.00 bis CHF 130.00 Zimmer/Nacht <br />
inkl. Frühstück, Service und Taxen</p>
                 <div id="button" style="float:left">
                  	<div id="button-black-left"></div>
                  	<div id="button-black"><a href="https://secure.netzone.ch/landhausbern.ch/df_reservation.htm" target="_blank">Reservationsanfrage</a></div>
                  </div id="button">
          </div id="textbox">
                <div id="rowblocker" style="clear:both;"></div>
      </div id="listbox-bottom">

Kann mir jemand Tipps geben, wie vorgehen?

[Domino]

Vielen Dank Forum, dass Ihr mich als Anfänger so gut aufnimmt und mich auf meine erste Frage mit Antworten überschwemmt.

Bin nun seit 3 Tagen allein auf weiter Flur allein und versuche mit Workarounds mein Layout umzusetzen. Bisher habe ich die Sliding doors Funktion so umgesetzt:

Dem Artikel habe ich die ID #box-top zugewiesen und in CSS ein Hintergrundbild top left platziert. Dem Artikel-Element habe ich die ID #box-bottom zugewiesen und ebenfalls ein Hintergrundbild bottom left eingebunden. Damit das bottom-Bild das obere nicht überlagert habe ich der box-bottom-id eine top-margin von der Höhe des oberen Bildes gegeben.
Bildschirmfoto 2010-01-15 um 13.22.05.jpg
So funktioniert wenigstens die Box einigermassen. Ist aber sehr heikel, weil wenn ein User den Inhalt bearbeitet, und aus nichtwissen mit den Klassen etwas falsch macht, ist die Gestaltung hin.

Ausserdem muss man für jeden Kasten einen einzelnen Artikel anlegen.

Einen Bilderrahmen kann ich mit dieser Methode auch nicht umsetzen.

Gibt es denn keine Leute hier, die ein ähnliches Problem schon gelöst haben?

Kann ich denn nicht irgendwie per Template, das ich als Artikel auswählen kann die Sache umsetzen?

Für jeden nur so kleinen Tipp bin ich sehr dankbar. Domino.

[lucina]

Vielen Dank Forum, dass Ihr mich als Anfänger so gut aufnimmt und mich auf meine erste Frage mit Antworten überschwemmt.
[...]

Wir machen das hier alle so nebenher und teilweise steht dann doch die Erwerbsarbeit im Vordergrund. Für Sarkasmus ist also kein Platz, wie ich finde.

Für jeden nur so kleinen Tipp bin ich sehr dankbar. Domino.

Ich habe so etwas mal umgesetzt, indem ich das betreffende Ausgabetemplate um die benötigten Elemente ergänzt habe (also im Wesentlichen um Container für top-left, top-right, bottom-left und bottom-right, den Hintergrund kannst Du ja dem IMG applizieren).

Elegant ginge das vermutlich auch mit Overlays (transparente PNGs) nach dem Prinzip auf http://www.komodomedia.com/blog/2009...lbum-overlays/, wobei es da eine Festlegung der Standardgröße Deiner Bilder bräuchte (die ich aber nach den Screenshots ohnehin vermute).

MfG, Carolina.

[Domino]

Vielen Dank (ehrlichen, nicht zynischen) lucina!

Muss ich das so verstehen, dass Du die Datei
system>modules>frontend>templates>ce_image.tpl abgeändert hast?

Hab das mal versucht, brachte aber nichts:

<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<div id="fotobox-top205"></div>
<<div id="fotobox-bottom205">
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<div class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>
</div>
</div>

Habe ich das falsch verstanden?

[lucina]

Ja, so ungefähr (ist schon ein paar Tage her) ...

Im Grunde genommen:

<span>
   <span>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
   </span>
</span>

Carolina.

[Domino]

Wunderbar! Das hab ich jetzt mal geschafft, den Rahmen um das Bild zu generieren. Aber das Problem ist jetzt, dass dies bei allen Bildern der Fall ist. Das ist nicht erwünscht. Ich müsste jetzt wie ein eigenes Content Element generieren, das ich dann in der Liste unter Datensatz bearbeiten>Elementtyp auswählen könnte.

Weiss da jemand, wie ich das bewerkstelligen könnte?

[Domino]

Wäre toll, wenn ich diese Liste ergänzen könnte:

Bildschirmfoto 2010-01-15 um 18.15.54.png

Wo wird die denn generiert?

[Toflar]

Ja du musst ein eigenes CE schreiben.

Am besten schaust du dir da eine bestehende Erweiterung an, dann siehst du wie das abläuft

[Sebastian]

HI

einfacher wäre es aber wohl, in den Bildelementen eine Klasse anzugeben, wenn du einen Rahmen willst, und im Template dann das zusätzliche HTML nur auszugeben, wenn die Klasse vorhanden ist.

Sebastian

[Domino]

Habe die Anforderung nun widerwillig doch wie von Sebstian angegeben umgesetzt. Dem Artikeltext habe ich nun die Klasse "newsbox" zugewiesen. Den Code im File "ce_text_image.tpl" habe ich nun mit folgendem PHP-Code ergänzt:

<?php if ($this->class == 'ce_text newsbox'){ echo '<div class="newsbox-top"></div>';} ?>

<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>



<?php if ($this->addBefore): ?>


<div class="image_container"<?php if ($this->margin || $this->float): ?> style="<?php echo $this->margin . $this->float; ?>"<?php endif; ?>>

<?php if ($this->class == 'ce_text newsbox'){ echo '<div id="fotobox205-top"></div><div id="fotobox205-bottom">';} ?>

<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>

<?php if ($this->class == 'ce_text newsbox'){ echo '</div>'; } ?>
</div>
<?php endif; ?>



<?php echo $this->text; ?>

<?php if (!$this->addBefore): ?>

<div class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>

<?php endif; ?>
</div>

Besser als nix. Danke an alle, die mir geholfen haben.