Bestimmte Elemente besonders auszeichnen

Status
Nicht offen für weitere Antworten.
G

gelleneu

Grünschnabel
Also ich habe folgendes Problem: ich habe ein selbstgeschriebenes CMS und möchte einen Live-Modus einbauen, d.h. der Benutzer sieht die Seite und kann dort die dynamischen Elemente wie z.B. Menüpunkte etc. direkt anwählen.

Beim drüberfahren über ein solches dynamisches Element soll eine rote Border um das Element gezeichnet werden, ganz ähnlich wie beispielsweise auch beim Firefox.
Nun habe ich es schon so weit, das jedes dynamisch eingefügte Element durch das CMS von einem <div></div> umrandet wird. Das DIV selbst erhält die border=0 bzw. beim hover die rote Border.

Leider funktioniert das nicht. Ich umrande auf diese Weise verschiedene HTML Tags. So ist ein Menüpunkt z.B. ein "<LI>" welches dann nochmal von meinem DIV umrandet wird. Das LI selbst ist wiederum auch mit einem Standard-Hovereffekt versehen...

Kurzum: ich möchte meine Elemente so hervorheben können wie das z.B. der Firebug im Firefox tut. Nur nicht mit JEDEM beliebigen HTML Tag, sondern nur den Elementen, die wirklich dynamisch sind. Außerdem möchte ich nicht für jedes Element ein extra CSS mit den immer gleichen Editmodus-Styles verfassen..

Gibts da ne Lösung? Ein Beispiel DAS es gehen muß, zeigt das CMS Reddot, oder
dieses hier: http://www.toolpark.com/htm/220/de/CMS_Produktdemos.htm (Film: Arbeiten mit Layout Bausteinen)
 
Hi,

das Umschliessen der Elemente mit einem zusätzlichen DIV ist nicht erforderlich und dürfte an manchen Stellen im Markup zu invalidem Quellcode führen.

Vielmehr liessen sich diese Elemente mit einer CSS-Klasse auszeichnen (hier: .mark), um auf sie die :hover-Pseudoklasse mit der gewünschten CSS-Formatierung anzuwenden:

Code: 
.mark:hover {
border:1px solid red;
}
Code: 
<ul class="mark">
    <li>...</li>
    <li>...</li>
</ul>

...

<p class="mark">Ein Textabsatz</p>

<!-- usw. -->
Selbstverständlich können in dem class-Attribut auch mehrere Klassen angegeben werden, sofern die Elemente schon eine zugewiesen haben sollten:

Code: 
<ul class="nav mark">
    <li>...</li>
    <li>...</li>
</ul>

...

<p class="content mark">Ein Textabsatz</p>

<!-- usw. -->
 
Die Lösung von Maik wird nicht im Internet Explorer 6 funktionieren. Diese akzeptiert die Pseudo-Klasse :hover nur bei a-Tags. Eine Alternative wäre der JavaScript-Handler "onmouseover" und "onmouseout", der per "this.style.className='mark'" diese CSS-Klasse setzt. Dazu musst du aber auch (um deine Idee gerecht zu werden) jedem Element diese beiden Eventhandler mitgeben ..
 
Stimmt, die Vorgängerversionen des IE7, die sich nicht an die Webstandards halten, hab ich heute Morgen außen vor gelassen, aber darauf wären wir hier sicherlich noch zu sprechen gekommen, wenn die Entwicklungsarbeit vorangeschritten wäre.
 
Hallo,

erstmal vielen Dank für eure Antworten,

der Ansatz klingt schon mal gut. Neu war mir, das man unter "class" mehrere Klassen definieren kann.

Was als vorraussetzung vielleicht noch zu sagen ist:
es handelt sich bei den HTML Elementen um Templates, d.h. ich kann variabel an verschiedenen Stellen codes (klassen etc..) einfügen.

Der nächste Punkt ist, das ich einen HTML Modus (also die normale Anzeige des HTML) habe, und einen Edit Modus, in dem eben diese Hervorhebungen zu sehen sind.

Jetzt soll nach Möglichkeit jedes Template natürlich nur einmal vorliegen (müssen). Auch der Firebug fügt ja seinen Auszeichnungscode dynamisch in die bestehende Seitenstruktur ein. Ob dabei mit JavaScript gearbeitet wird oder ohne, spielt keine Rolle.

Gut ich setz mich heute abend mal an eine Umsetzung.

Wer oder was ist behaviour *neuland betret*
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück