Sie sind hier:  » Tipps » Codevalidierung » Sprungmarkenlinks  » Sprungmarken in tabellenbasierenden Designs

Zur Übersicht

Tipps:

.htaccess

eMail-Adresse

Links im Text

Codeschnipsel

Codevalidierung

Abstimmung

FAQ

Flash-Galerie

Imagemaps

Inline Galerie

RSS-Feed

RSS-Reader

Sprungmarkenlinks

Tipp des Tages

Druckversion

Flash

Formular 6.0

Grafiken positionieren

Animiertes Gif

JavaScripte

Multilanguage

Quicktime

Sitemap

Tabellen

wmv valide einbinden

Farbvorschau

YouTube

Kontaktdaten

Webdesignconsult.de
39164 Wanzleben-Börde
Telefon:
039204 - 91 80 39


Worum geht es?

In den tabellenbasierenden w2d-Designs wurde die Absatzverknüpfung ( <a name="<cc:print value="&para.uid">"></a>) in eine Tabellenzeile gepackt, kombiniert mit der Anweisung, einen Absatztitel auszugeben.

Ist kein Absatztitel vorhanden, wird im Quellcode eine leere Überschriftenauszeichnung (<h1></h1> oder <h2></h2>) erzeugt, aus der auf der Seite ein unnötig großer Abstand zum nächsten angezeigten Inhalt resultiert.

Lösung:

Absatztitel nur falls vorhanden ausgeben,
leere Tabellenzeilen eliminieren,
Sprungmarkenverknüpfungen anpassen

Die Änderungen sind in der page.ccml durchzuführen.

Überflüssige Tabellenreihen für Überschriften eliminieren.
Nach der einleitenden Schleife zum Abarbeiten der Seiteninhalte (<cc:loop type="paragraph" obj="para">) folgt in den tabellenbasierenden Designs eine (je Design unterschiedlich aufgebaute) Tabellenreihe, die wie oben beschrieben, die Sprungmarke und den Ausgabecode für den Absatztitel enthält.

So oder ähnlich, sieht es aus:

Um den gesamten Code ansehen zu können, nutzen Sie bitte die Markierfunktion mit Hilfe der Maus.

<cc:loop type="paragraph" obj="para">
<tr>
<td></td>
<td colspan="3"><h2> <a name="<cc:print value="&para.uid">"></a><cc:print value="&para.caption"></h2></td>
<td></td>
</tr>
<cc:if cond="&para.sidepicture.uid">
<cc:picture uid="&para.sidepicture.uid" suffix="_150" width="150" height="150" obj="parapic" bordercolor="#000000">
<tr>
<td></td>
<td valign="top"><cc:print value="&para.text"></td>

Vorgehen

1. Die komplette Tabellenreihe (von <tr> bis </tr>) mit dem orange markierten Codeblock löschen:

<tr>
<td></td>
<td colspan="3"><h2>
<a name="<cc:print value="&para.uid">"></a><cc:print value="&para.caption"></h2></td>
<td></td>
</tr>

2. Die Sprungmarke in die Ausgabezeile für Text mit Marginalbild einpflegen. Zusätzlich eine Absatzüberschrift ausgeben lassen, falls vorhanden (grün markiert).

<cc:loop type="paragraph" obj="para">
<cc:if cond="&para.sidepicture.uid">
<cc:picture uid="&para.sidepicture.uid" suffix="_150" width="150" height="150" obj="parapic" bordercolor="#000000">
<tr>
<td></td>
<td valign="top"> <a name="title<cc:print value="&para.uid">"></a> <cc:if cond="&para.caption"><h2><cc:print value="&para.caption"></h2></cc:if><cc:print value="&para.text"></td>

3. Die Sprungmarke in die Ausgabezeile für Text ohne Marginalbild einpflegen. Zusätzlich eine Absatzüberschrift ausgeben lassen, falls vorhanden (grün markiert).

Suchen Sie die <cc:else>-Anweisung nach dem Durchlauf für die Abfrage der Bildverknüpfungen und ergänzen Sie diese wir hier gezeigt:

<cc:else>
<td valign="top" colspan="3"><a name="title<cc:print value="&para.uid">"></a> <cc:if cond="&para.caption"><h2><cc:print value="&para.caption"></h2></cc:if><cc:print value="&para.text"><br></td>
</cc:if>
</tr>
</cc:loop>

TIPP

Alternativ kann man die page.ccml durch den Austausch eines optimalen Codes von sämtlichem überflüsssigen Datenmüll bereinigen und dabei für validen Code sorgen. Zusätzlich sind hier Styleangaben in die jeweils vewendeten Stylesheets einzupflegen.



Sprungmarkenlinks


Validierte Elemente


aktualisiert am: 09.03.2012



© 2002 - 2012  W. K r a w i k   Stand: 09.03.2012