nicht angemeldet
Gernot BackHallo an alle,
Habe gerade etwas gebastelt, das ich euch nicht vorenthalten will:
Bei Content-Management-Systemen ist es ja sehr praktisch, wenn dem vom HTML-Code völlig unbeleckten Redakteur irgendwie angezeigt wird, welches HTML-Element er da gerade bearbeitet. Meine für die Einrichtung entsprechender Systeme zuständigen Kollegen machen das meist so, dass sie das zu bearbeitende Element im Redaktionsmodus mit einem weiteren (DIV-)Element umgeben, dem sie dann eine gestrichelte rote Linie verpassen.
Bei floatenden Elementen hat das aber wenig Effekt, es sei denn, man lässt das umgebende Border-Element ebenfalls floaten und/oder setzt es auf "overflow:hidden".
Die zusätzliche Border drumherum kann dann aber bewirken, dass der Platz nicht mehr ausreicht und der arme Redakteur unnötig in Panik versetzt wird, weil er im Redaktionsmodus den Eindruck gewinnt, sein floatender Inhalt bräche gottweißwohin um, wo er nicht hingehört.
Um das zu vermeiden, neigen CMS-Kollegen dann auch schnell mal dazu, wieder auf das gute alte Tabellenlayout umzusteigen, bei dem so etwas nicht passieren kann.
Ich habe nun eine Lösung gefunden, die es erlaubt, auch floatende Elemente mit einem weiteren Markierungselement zu umgeben, ohne dass das zu unschönen Umbrüchen führt.
Wichtig ist dabei, dass Eltern über die Besitztümer (insbesondere die Float-Property) ihrer Kinder Bescheid wissen und diese notfalls, wie im richtigen Leben, auch mal übernehmen können.
Meine Lösung funktioniert zwar nur im IE und bei aktiviertem JS, aber das setzen viele CMS-Systeme ja ohnehin beides voraus. Ob sich das Dokument dabei im Quirksmode befindet oder in einem CSS-kompatiblen Modus, sollte unerheblich sein.
Gruß Gernot
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Elementmarker</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style type="text/css">[code lang=css]
* { display:expression([code lang="javascript](this.currentStyle.styleFloat!='none') ? 'inline' : ''
~~~) !important; } /\* beugt im IE dem [Doubled-Margin-Bug](http://www.positioniseverything.net/explorer/doubled-margin.html) vor, falls mal vergessen wurde, zu float:left oder float:right auch display:inline zu setzen \*/
#MeinElement {
background-color:pink;
float:left;
margin:2px 1px 2px 5px;
padding:2px;
width:100px;
height:30px;
}
.nochEinElement {
background-color:lightgreen;
float:left;
margin:2px 1px 2px 5px;
padding:2px;
width:100px;
height:30px;
}
.marker {
position:relative;
border: dashed 1px red;
margin: expression(`((document.compatMode=='BackCompat') ? '-1px 0' : '-1px'`{:.language-"javascript});
float: expression(`(this.firstChild.currentStyle.styleFloat`{:.language-"javascript});
width: expression(~~~"javascript
(parseInt(this.firstChild.offsetWidth) +
parseInt(this.firstChild.currentStyle.marginRight) +
parseInt(this.firstChild.currentStyle.marginLeft
~~~) );
overflow:hidden;
}
[/code]
</style>
</head>
<body>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="marker">
<div id="MeinElement">Mein Element</div>
</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
<div class="nochEinElement">Noch'n Element</div>
</body>
</html>
[/code]