Text einblenden

J

julai

Grünschnabel
Hallo,
ich habe leider gar keine IT/ Programmiererfahrung, soll aber für meinen Chef etwas einrichten.
Und zwar soll ein Text mit Bild im Browser nur nach Wunsch eingeblendet werden. Also mit einem Klick auf ein "mehr" Feld o.ä. wodurch der Text dann dazwischen geschoben wird. Ich habe gelesen, dass geht mit CSS. Da ich aber absolut keine Ahnung davon habe brauche ich wirklich Hilfe, da ich zwar einige Sachen gefunden habe, aber nichts verstanden habe und auch keine Ahnung habe, WO z. B. ich diese ganze Sachen dann überhaupt eintragen muss, damit das Ganze funktioniert, das steht nämlich leider nie irgendwo :(
Ich hoffe ihr könnt mir helfen!
Und ja, mein Chef weiß, dass ich sowas nicht kann und er war der Meinung ich soll googlen wie es funktioniert usw. da alle anderen es auch nicht wüssten. Also bitte helft mir!

julai
 
Vielen Dank!
Ich finde nur das "Eigene Seiten editieren" auch nicht! Ich bin so Computer-Unfähig ._.
 
Was sind das für Seiten die du da ändern sollst?

Kennst du dich soweit damit aus das du uns vielleicht den Teil/die Teile des Quellcodes zeigen kannst die es betrifft (oder eventuell auch die Domain)?

Dann wäre es wesentlich einfacher dir zu helfen.
 
Super :D

Das mit "Eigene Seiten editieren" galt nur für die User von homepage-baukasten.de, aber der Code ist trotzdem brauchbar ;)
 
Hallo,

das lässt sich auch ohne die Javascript-Eventhandler realisieren, wenn man die CSS3-Pseudoklasse :checked verwendet.
Der Klapptext wird dazu mit einem DIV-Element umhüllt, das hinter eine INPUT-/LABEL-Kombination als nachfolgendes Geschwisterelement gesetzt wird. Das alles wird am besten noch mal in einen DIV-Block gepackt, der ein Klassenattribut erhält um den Inhalt entsprechend formatieren zu können:
HTML: 
<div class="klappText">
	<input id="inputID-1" type="checkbox" />
	<label for="inputID-1"></label>
	<div>
		<p> irgendwelcher Text ... </p>
		<p> usw.usf. </p>
	</div>
</div>
Das LABEL-Element ist leer und wird per CSS-Pseudoelement :before mit Inhalt versehen.
CSS: 
.klappText input {
	/* Ermöglicht Ansteuerung über Tastatur (HTab) */
	opacity: 0;
}
.klappText label {
	margin-left: -1.25em;
	color: blue;
	cursor: pointer;
}
.klappText input + label:before {
	content: '? mehr Text';
}
.klappText input:checked + label:before {
	content: '? weniger Text';
}
.klappText input:not(:checked) ~ div {
	display: none;
}
.klappText input:focus + label {
	/*  Markierung des fokussierten LABEL-Elements */
	background-color: blue;
	color: white;
}
Das INPUT-Element wird mit der OPACITY-Eigenschaft unsichtbar gemacht. Damit ist es im Markup noch vorhanden und kann somit noch über die Tastatur (Horizontaltabulator) angesteuert werden. Mit einem nagativen MARGIN-Wert kann dann das LABEL-Element über das unsichtbare INPUT-Element geschoben werden.

Entsprechend dem checked-Zustand des INPUT-Elements werden dann die nachfolgenden Geschwisterelemente (LABEL und DIV-Block mit Klapptext) formatiert.

Das funktioniert in allen modernen Browsern, im Internet-Explorer allerdings erst ab v9. Für alle Internet-Explorer mit kleinerer Versionsnummer kann mit Hilfe eines "Conditional Comment" das INPUT- und das LABEL-Element ausgeblendet werden, so dass in diesen Versionen der gesamte Text dargestellt wird. Gleiches sollte man übrigens auch für das Drucklayout realisieren.

Code: 
<!--[if lt IE 9]>
<style type="text/css">
	.klappText input,
	.klappText label {
		display: none;
	}
</style>
<![endif]-->
Hier ein Beispiel dazu: http://jsbin.com/enucas/3
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück