CSS HTML Displays

Auch hier wieder die Information, dass mit einer externen CSS Datei gearbeitet wird.

<link href=”css/ style.css” rel=”stylesheet” type=”text/css”>

Für diese Art von Displayblock benutzen wir 2 Frames. In diesem Fall werden 3 Webseiten benötigt.
Eine Indexseite. In der Indexseite werden nur die beiden Frames-Seiten eingebunden.
In jeder Seite ist auch die Adresse der CSS Datei einzutragen.

Bei Displayblocks erscheint auf der linken Seite der Webseite, der Informationstext. Klickt man diesen an, erscheint rechts daneben der detailierte Text, oder Bild, oder wie auch immer.
Auch hier gilt, dass jeweils eigene Werte eingesetzt werden können.
Hier eine Erklärung für Displayblock:

Dies sieht dann so aus:

———————————————————————————————————————

Index-Seite:

<frameset cols=”300,*” border=”0? frameborder=”0? framespacing=”0?>
<frame frameborder=”0? marginheight=”0? marginwidth=”0? noresize name=”links” scrolling=”auto” src=”navigation.php”>
<frame frameborder=”0? marginheight=”0? marginwidth=”0? noresize name=”rechts” scrolling=”no” src=”rechts.php”>
<noframes>
<body>
<? echo $frame_noframe; ?></body>
</noframes>

</frameset>

Erklärung:

Die linke Frame-Seite nennen wir zum besseren Verständnis “navigation.php”
Die rechte Frame-Seite nennen wir “rechts.php”

——————————————————————————————————————————

CSS Definition:

#menubutton a
{
display:block; list-style-type:none; padding:0px; margin:0px;
}

#menubutton a:link, #menubutton a:visited, #menubutton a:active
{
border: solid 1px #990000;
background-color:#CC3300;
color:#EEC399;
text-decoration:none;
margin-bottom: 0px;
margin-top: 0px;
padding-left: 0px;
height: 18px;
line-height: 20px;
}

#menubutton a:hover
{
background-color:#EEC399;
color:#CC3300;
}

Html Definition:
<table border=”0? width=”100%” cellpadding=”0? cellspacing=”0?>
<tr>
<td id=”menubutton” align=”left” valign=”top”><a href=”www.domaine.de/test1.php” target=”rechts”>Test 1 </a></td>
</tr>

<tr>
<td id=”menubutton” align=”left”><a href=” www.domaine.de/test2.php ” target=”rechts”>Test 2</a></td>
</tr>
</table>

Die Seite “rechts.php” bleibt bis auf die Adressangabe der CSS Datei leer, da hier ja der Inhalt der Verweise angezeigt wird.

Hier noch ein Beispiel für einen Displayblock mit Javascript:
Dieses Beispiel hat jedoch nichts mit CSS zu tun.

Html Seite Eintrag, im Header:
<script type=”text/javascript” language=”JScript”>
<!–
var lastobj = “”;

function ShowDetail( objname )
{
var dfr;

if ( “” != lastobj )
{
dfr = document.getElementById( lastobj );
dfr.style.display = “none”;
}

dfr = document.getElementById( objname );

dfr.style.display = “block”;

lastobj = objname;
}
–>
</script>

Body Eintrag:

<table border=”0? width=”90%” class=”fett” cellspacing=”0? align=”center” onload=”javascript:ShowDetail(’det_vorwort’)”>
<tr>
<a onclick=”javascript:ShowDetail(’test 1?)” title=”Zu den Details” href=”#” class=”fett”>Der angezeigte Linktext</a>
<br>
<a onclick=”javascript:ShowDetail(’Test 2?)” title=”Zu den Details” href=”#” class=”fett”>Der angezeigte Linktext</a>
<br>
<br>

<div id=”det_frame”>
<div id=”Test 1? style=”display:none”>
<font class=”fett”>Wie finde ich…?</font><br>
<font class=”normal”>Test 1</font></div>

<div id=”test 1? style=”display:none”>
<font class=”fett”>Test 1</font><br> ? Die Überschrift = Der angezeigte Linkname
<font class=”normal”>Hier wird der detailierte Inhalt von Test 1 eingetragen, der in der offiziellen Webseite sichtbar ist.</font></div>

<div id=”test 2? style=”display:none”>
<font class=”fett”>Test 2</font><br>  ? Die Überschrift= Der angezeigte Linkname
<font class=”normal”> Hier wird der detailierte Inhalt von Test 2 eingetragen, der in der offiziellen Webseite sichtbar ist.</font></div>
</td>
</table>

Die Reihe der Linkverweise kann natürlich beliebig weiter geführt werden.
Zu vermerken ist noch, dass diese Displayblock Beispiele, also der detailierte Text hier nicht angezeigt werden kann, da die entsprechenden Seiten hier nicht eingebaut sind.

Comments are closed.