div-Element mit float-Content

21. Februar 2011 von Sven Hamer [permalink]

Häufig wünscht sich der gewiefte Webentwickler einen div-Container, in dem diverse Elemente herum-floaten. Der Wunsch nach einer automatischen Höhenanpassung des umschließenden div führt gerne zu einem zusätzlichem Subelement, welches mit style="clear:both" das floating beendet und somit die umschließende Höhenberechnung anstößt. Doch es gibt da auch einen anderen Weg, denn dieses Problem ist komplett mit CSS und ohne ein solch semantisch sinnbefreites Element lösbar!

weiter lesen »

Tags: ,
Kategorie: Allgemein | keine Kommentare »

HTML forms mit definition lists strukturieren

13. Dezember 2010 von Martin Kartawijaya [permalink]

Wenn die Notwendigkeit besteht ein Webformular nach exakten Vorgaben zu stylen, steht man oft vor der Herausforderung Eingabefelder “pixelgenau” aneinander auszurichten, bspw. wenn mehrere Eingabefelder in einer Zeile dargestellt werden sollen. Ein leider immer noch zu oft eingeschlagener Weg ist ein table-basiertes layout, dies führt jedoch zu einem äußerst unübersichtlichem markup, das nur mühsam zu warten ist, daher sollte man nach Möglichkeit leichtgewichtigeres markup + CSS nutzen, um ein Formular mit dem gewünschten style zu versehen. Anstatt nun alle <input> Elemente inkl. deren labels in <div>s oder  <p>s zu verpacken, kann man als Alternative eine definition list verwenden. Der Vorteil gegenüber rein <div> basierten Ansätzen ist, dass die definition list strukturell bereits gute Angriffspunkte für CSS bietet, die ansonsten durch hinzufügen von CSS-Klassen geschaffen werden müssten.

weiter lesen »

Tags:
Kategorie: Softwareentwicklung | keine Kommentare »

Angetestet: jQTouch

9. Dezember 2010 von Sven Hamer [permalink]

Zum Entwickeln einer App fürs iPhone mit anschließender Endkundendistribution benötigt man für gewöhnlich eine kostenpflichtige Entwicklerlizenz. Hiermit bindet man sich ebenfalls an den unter umständen langwierigen App Approval-Prozess von Apple, bei dem jede neu eingereichte App (und sei es lediglich ein Bugfix-Update) durchleuchtet wird und erst bei wohlgefallen im AppStore landet.
Ein weiter Knackpunkt ist, dass für das Entwickeln fürs iPhone erst einmal ein Mac angeschaft werden muss, um die verpflichtende IDE XCode mit deren Build-Toolchain verwenden zu können. Auch ObjectiveC als Hauptprogrammiersprache bedarf einigen Lernaufwand und ist außer für die iOS/Mac-Entwicklung eher selten bis nicht anzutreffen.

Nun stellt sich die Frage, ob es nicht eine andere Möglichkeit gibt für den Smartphonemarkt zu entwickeln und das lediglich mit bereits existenten Hausmitteln ohne zusätzliche Anschaffungen. Heutige Smartphones/Handhelds verfügen gewöhnlicherweise über einen relativ standardkonformen Webbrowser und meist auch über eine Internetverbindung. Warum also nicht eine Webapplikation entwickeln, welche sich anfühlt wie eine native App? Als Toolkit dient hierbei eine Mischung aus HTML+JavaScript/AJAX für das Frontend.

Um nicht bei Null anfangen zu müssen gibt es einige Libraries, welche sich mit dieser Thematik beschäftigen. Dieser Blogbeitrag wird sich explizit jQTouch zur Brust nehmen, einer kostenfreien und unter MIT-Lizenz stehenden Bibliothek.

weiter lesen »

Tags: , , ,
Kategorie: Softwareentwicklung, iPhone | keine Kommentare »

Webseitengestaltung mit dem Blueprint CSS Framework

15. Juni 2009 von John Freytag [permalink]

Bei der (Neu-)Gestaltung von professionellen Webseiten steht man häufig vor dem Problem, immer wieder das CSS-Rad neu erfinden zu müssen: Es werden reihenweise Style-Klassen für das Layout generiert, um die immer wiederkehrenden Fragen zu klären:

Typographie, Anordnung von Elementen zueinander, Bündigkeit, Abstände .. selten ist die Arbeit mit CSS ein so richtig optischer Prozess, denn wenn man erstmal ein Ergebnis hat, das einigermaßen dem entspricht, was man sich vorgestellt hat, dann geht die Arbeit in der Regel erst los:
Wie sieht die Seite eigentlich im IE6 aus?
Browserkompatibilität sicherzustellen ist eine der aufwendigsten und lästigsten Arbeiten im Web-Design, denn zu kleinen aber sehr kritischen Darstellungsunterschieden, die vielleicht den einen Pixel zuviel bedeuten, gibt es gerade in der Familie der Interner Explorer auch haufenweise echte Bugs, die zu meist völlig nicht nachvollziehbaren Ergebnissen führen.

Wie toll wäre es also, wenn man sich diese Arbeit sparen könnte und es einfach eine fertige Lösung gäbe, die man nur zurechtschneiden müsste. weiter lesen »

Tags: , ,
Kategorie: Allgemein, PHP, Softwareentwicklung | keine Kommentare »

Element innerhalb eines divs nach unten bündig anordnen

30. April 2009 von John Freytag [permalink]

Da es in HTML/CSS kein richtiges Höhenkonzept gibt kann man, möchte man ein Objekt zu einem anderem nach unten bünding anordnen, eine Menge Spaß haben. Um das zu verdeutlichen, hier ein Beispiel:

<div id="container" >
	<div id="bottom_alignend_content"></div>
</div>

Eine beliebte Methode ist es nun, dem Content-Div eine absolute Position zu verleihen, so dass man es einfach mit CSS am Container ausrichten kann. weiter lesen »

Tags: ,
Kategorie: Softwareentwicklung | keine Kommentare »