Weekly Snap: CSS2 floats to AKCP converters, OSDC & NETWAYS Jobs

29 Mar – 3 Apr: sprang over Easter with CSS floating style, industrial sensor converters, OSDC early bird reminders, NETWAYS jobs and an April special for Nagios/Icinga voice notification services.
The development team kicked off with Marius’ CSS2 tip for floating page layouts. First in ‘clearfix’, inserting a ‘clear’ after a float, second with ‘overflow:hidden|auto’ for a new display context. This ensures that the ‘clear’ doesn’t creep into the entire page, staying in the desired area automatically without needing to create strange margins.
On the monitoring front we reflected on the March project of the month, while Martin showed us how to integrate third-party sensors for those tricky industrial monitoring needs. From temperature sensors for pipelines or outdoors, to absolute pressure measurement and CO ² sensors – all these industrial sensors can be converted into electricity or voltage so their results can be transmitted over long distances to an AKCP sensorProbe2 which then forwards them on via SNMP to any monitoring software such as Nagios and Icinga.
Following on, Manuela reminded early birds to snap up the last ticket specials for the OSDC coming up on 23 – 24 June, while Karo announced our search for 3 new enthusiastic professionals to join the NETWAYS team. Project managers, Linux consultants and bookkeepers are welcome to apply, as are any would-be apprentices for software development.
Of course, no April could begin without a fool on the 1st day of the month – check out the newest voice notification services we’re offering through our partner call center in India and enjoy!

Next generation floating in HTML

Wer floats in html mag, wird diese lieben.

Nach dem sich CSS2 mehr und mehr etabliert kann man gefloatete Seitenlayouts auf ganz neue Art und Weise durchführen.
Erstmal der Quelltext:

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.floatbox {
  overflow: hidden;
}
.col {
  float: left;
  width: 200px;
}
<div class="floatbox clearfix">
	<div class="col"><p>LINKS</p></div>
	<div class="col">
		<p>Lorem ipsum dolor sit amet, consectetue.</p>
		<p> Donec quam felis, ultricies nec, pellentesque.</p>
		<p> In enim justo, rhoncus ut, imperdiet a!</p>
	</div>
</div>

Das wichtigste befindet sich in den Klassen ‘clearfix’ und ‘floatbox’. Mit ‘clearfix’ bedienen wir uns CSS2 und fügen nach
einem float den clear gleich mit ein. Ein extra html Element, um den float abzuschließen,
wird hierfür nicht verwendet (die Pseudo-Klasse :after erledigt das für uns).
Als zweites schaffen wir uns einen neuen Anzeigekontext mit ‘overflow: hidden|auto’. Dieser Kontext bewirkt das ein ‘clear’ sich z.B. nicht Global auf die gesamte Seite auswirkt, sondern nur auf den gewollten Bereich. Auch richtet dieser Bereich die Inhalte neu aus. So muss ein float mit unterschiedlicher Länge, welcher auf der Folgeseite um fließt, nicht mit seltsamen margins auf Kurs gehalten werden (z.B. margin-left: 205px). Die weitere Positionierung und Abstandseinstellung verläuft so wie man es erwartet!
Mehr Informationen findet man hier:
Floats 1
Floats 2
Floats 3

Marius Hein
Marius Hein
Head of Development

Marius Hein ist schon seit 2003 bei NETWAYS. Er hat hier seine Ausbildung zum Fachinformatiker absolviert, dann als Application Developer gearbeitet und ist nun Leiter der Softwareentwicklung. Ausserdem ist er Mitglied im Icinga Team und verantwortet dort das Icinga Web.