Hallo!
Ich habe eine Art Orgachart in HTML mithilfe von CSS benutzt. Für die einzelnen Elemente habe ich div-container verwendet, die ich im stylesheet mit float positioniere
<div class="deptName">Merchandise Systems 1</div>
<div class="subs">
<div class="sub">
<div class="subName">Cat</div>
<div class="subChild">Element</div>
</div>
<div class="sub">
<div class="subName">Cat</div>
<div class="subChild">Element</div>
</div>
</div>
Der Code ist so geschrieben, dass man ihn auch ohne Kenntnisse von HTML anpassen können solte.
body {
padding: 0px;
margin: 1em;
font-family: Tahoma;
font-size: 0.6em;
}
.deptName {
border: 1px;
background-color: #DDDDDD;
text-align: center;
border-style: solid;
padding: 1em;
font-weight: bold;
font-size: 1.25em;
}
.subs {
}
.sub {
float: left;
margin: 1em;
background-image: url('./line.gif');
background-repeat: repeat-y;
background-position: 1em 0em;
}
.subName {
border: 1px;
background-color: #EFEFEF;
border-style: solid;
padding: 1em;
font-weight: bold;
}
.subChild {
border: 1px;
border-style: solid;
padding: 1em;
margin-top: 1em;
margin-left: 1em;
}
#navigation {
border: 1px;
border-style: solid;
padding: 0.25em;
padding-left: 1em;
margin-bottom: 1em;
}
Ich habe auch schon eine Drucker-freundliche Variante in eine print.css definiert. Das Problem ist nun noch, dass es sicher Leute gibt die die Seite via Copy & Paste bei Word, Outlook, oder sonst wo einfügen wollen. Die sehen aber alle divs mit 100%iger weite und untereinander. Kann man da CSS-Seitig tricksen?
Wenn nicht, welche Ideen habt ihr sonst noch? Doch lieber Tables als Divs verwenden?
Danke!
Gruß
Sven