Sitzt ihr nicht auch manchmal Abends am PC und seit am Programmieren, Designen oder am Spielen? Überkommt euch nicht manchmal auch einfach nur der Hunger? Mir ist es schon des öfteren passiert, leider passiert es genauso oft, dass ich kein Bar Geld in der Tasche habe und die nächste Sparkasse 10km weit entfernt ist. Und mal ehrlich, Abends noch in der Kälte zu der Sparkasse zu laufen? Das macht mir persönlich keinen Spaß. Bei Yourdelivery gibt man seine Postleizahl an und das System sucht den passenden Lieferdienst herraus. Eigentlich genauso wie die bekannte Lieferdienstseite Pizza.de, jeodoch hat yourdelivery eben den entscheidenen Vorteil: Nach der Bestellung kann man auswählen, ob man BAR, online mit Kreditkarte, oder mit seinem Paypal Account die Bestellung bezahlen möchte.

Ich habe es ausprobiert und es lief alles reibungslos. Bestellung ausgewählt, online Kreditkartennummer eingegeben und abgesendet. Eine halbe Stunde später, kam dann auch der Lieferdienst mit meiner heißen Pizza, mit dem kleinen Unterschied, dass ich diesmal kein Bares Geld zahlen musste

Zentrieren eines Layouts

Das zentrieren eines Elements ist warscheinlich etwas, dass jeder Webentwickler zu tun hat. Die einfachste und am meisten verbreiste Lösung ist wohl margin:auto; für das entsprechende Element. Diese Methode zentriert das Element, unabhängig von der Auflösung oder der Browser Breite.

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px auto;

}

Das Ergebniss was man erwartet:

Aber was der Internet Explorer ausgibt ist:

Das ist ein Fehler des Internet Explorer 6. Allerdings ist er zum Glück leicht zu beheben.

Der Fix

Der einfachste und sicherste Weg, ist dem Element ein text-align:center; zu geben. Das darauf folgende Element erhält dann ein text-align:left; um den Text natürlich wieder korrekt anzuzeigen.

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
	text-align: center;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px 0;
    	text-align: left;

}

Treppeneffekt

Normalerweise setzt jeder Webentwickler eine Navigation mit einer Liste um. Man erstellt eine Liste und darin ein paar Links. Normalerweise klappt es auch, doch der IE sieht das wohl anders.

ul {
    list-style: none;
}

ul li a {
   	display: block;
   	width: 130px;
	height: 30px;
   	text-align: center;
   	color: #fff;
   	float: left;
	background: #95CFEF;
	border: solid 1px #36F;
	margin: 30px 5px;
}

Ein standard-komformer Browser macht es zum Beispiel so:

Und der IE Screenshot:

Nicht sehr erfreut, wenn ihr mich fragt. Glücklicherweise gibt es auch hier einen 2 Fix`s.

Fix1

Der einfachste Weg ist, anstatt dem Anker Tag dem Listen Element ein float:left; zu geben.

ul li {
	float: left;
}

Fix2

Der zweite Weg ist, dem Listenelement ein display:inline zu geben. Neben der Behebung dieses Fehlers, behebt es auch den doppel margin Bug.

ul li {
	display: inline
}

Doppel margin bei floated Elementen

Dies ist wohl einer der ersten Fehler, die ein Webentwickler beheben sollte, sofern die Seite für den Internet Explorer 6 optimiert werden muss.

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
}

Das Ergebniss was man erwartet:

Aber was der Internet Explorer 6 ausgibt ist:

Der Fix

Für diesen speziellen Bug, muss man den zu floatenden Element ein display:inline; geben. Unser bisheriger Code ändert sich zu:

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
   	display: inline;
}

Auto Overflow und relativ positionierte Elemente.

Dieser Fehler passiert, wenn man in einem overflow:auto; Element ein weiteres Element plaziert, mit der Eigenschaft position: relative;. Lasst es mich anhand des Codes demonstrieren:

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;
	margin: 30px 0;
	overflow: auto;
}

#anotherelement{
	background: #555;
	width: 150px;
	height: 175px;
	position: relative;
	margin: 30px;
}

Die erwartete Ausgabe:

Die IE Ausgabe:

Der Fix

Der einfachste Weg ist, dass Eltern Element auch relativ zu positionieren:

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;
	margin: 30px 0;
	overflow: auto;
    	position: relative;
}

Eine mindest Höhe sowie Breite setzen

Der Internet Explorer ignoriert komplett die min-height Eigenschaft.

Der Fix

Dieser Fix ist von Dustin Diaz. Er benutzt die !importent Nachricht, damit es funktioniert:

#element {
  min-height:150px;
  height:auto !important;
  height:150px;
}

Abstand zwischen Listen Elementen

Der IE6 fügt einen vertikalen Abstand ein, wo garkeiner ist. Schauen wir es uns einmal an:

Link 1
Link 2
Link 3

ul {
	margin:0;
	padding:0;
	list-style:none;
}

li a {
	background: #95CFEF;
	display: block;
}

Wie es ausshen sollte:

Was der IE uns ausgibt:

Fix1

Der einfachste Fix ist, dem Anker Tag eine feste Breite zuzuweisen.

li a {
	background: #95CFEF;
	display: block;
    	width: 200px;
}

Fix 2

Die zweite Methode ist, dass Anker Tag links zu floaten und es danach ebenfalls links zu clearen.

li a {
	background: #95CFEF;
	float: left;
    	clear: left;
}

Fix 3

Die dritte Methode ist, dass zu schliessende Listen Element ein display:inline; zu geben. Das behebet ebenfalls den double margin bug wie oben beschrieben:

li {
	display: inline;
}

Scripte wie sIFR, Filr und natürlich Cufon machen es für jeden Webentwickler und Designer einfach,  jede Schriftart in seine Webseite zu integrieren wie z.B Myriad Pro oder HelveticaNeue. Seit ein paar Monaten sieht man immer mehr Blogs, die belibige Schriftarten als Überschriten und Titel benutzen. Unter anderem benutzt auch Dosonaro eine solche Schriftart in Verbindung mit Cufon.

In diesem Artikel zeige ich euch 10 Schrifarten, die ihr mit @font-face, sIFR, Filr oder Cufon lizenzfrei einbinden könnt.

Fertigo

Download

Delicious

Downloaden

Tallys

Downloaden

Museo Sans

Downloaden

CA BND Bold WEB

Downloaden

League Gothic

Downloaden

Chunk

Downloaden

Flaminia Type System

Downloaden

Junction

Downloaden

Andika

Downloaden

Beachtet bitte, dass Ihr die neuste jQuery Datei im head Bereich eures Dokumentes einbinden müsst, damit die Dialogbox funktioniert.

Die aktuellste Version könnt Ihr euch direkt über Google Code einbinden

.

Die Demo

Unser Ergbeniss wird in etwa so aussehen:

Da wir mit CSS3 arbeiten, wird unsere Dialox Box im Internet Explorer leider so dargestellt:

Das HTML Markup

Hierbei handelt es sich diesmal um recht wenig HTML Code. Der div Container mit der ID #dialog-overlay stellt den dunklen Hintergrund dar. Der div Container mit der ID #dialog-box stellt die eigentliche Dialogbox dar.

		Close
	

Die CSS Datei

Beachtet bitte, dass alle Kommentare im Code auf Englisch stehen. So weiss wirklich jeder Webentwickler, was gemeint ist.

#dialog-overlay {

	/* set it to fill the whil screen */
	width:100%;
	height:100%;

	/* transparency for different browsers */
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	background:#000; 

	/* make sure it appear behind the dialog box but above everything else */
	position:absolute;
	top:0; left:0;
	z-index:3000; 

	/* hide it by default */
	display:none;
}

#dialog-box {

	/* css3 drop shadow */
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

	/* css3 border radius */
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;

	background:#eee;
	/* styling of the dialog box, i have a fixed dimension for this demo */
	width:328px; 

	/* make sure it has the highest z-index */
	position:absolute;
	z-index:5000; 

	/* hide it by default */
	display:none;
}

#dialog-box .dialog-content {
	/* style the content */
	text-align:left;
	padding:10px;
	margin:13px;
	color:#666;
	font-family:arial;
	font-size:11px;
}

a.button {
	/* styles for button */
	margin:10px auto 0 auto;
	text-align:center;
	display: block;
	width:50px;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;

	/* button color */
	background-color: #e33100;

	/* css3 implementation */
	/* rounded corner */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;

	/* drop shadow */
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

	/* text shaow */
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;

}

a.button:hover {
	background-color: #c33100;
}

/* extra styling */
#dialog-box .dialog-content p {
	font-weight:700; margin:0;
}

#dialog-box .dialog-content ul {
	margin:10px 0 10px 20px;
	padding:0;
	height:50px;
}

Javascript

$(document).ready(function () {

	// if user clicked on button, the overlay layer or the dialogbox, close the dialog
	$('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {
		$('#dialog-overlay, #dialog-box').hide();
		return false;
	});

	// if user resize the window, call the same function again
	// to make sure the overlay fills the screen and dialogbox aligned to center
	$(window).resize(function () {

		//only do it if the dialog box is not hidden
		if (!$('#dialog-box').is(':hidden')) popup();
	});	

});

//Popup dialog
function popup(message) {

	// get the screen height and width
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();

	// calculate the values for center alignment
	var dialogTop =  (maskHeight/3) - ($('#dialog-box').height());
	var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 

	// assign values to the overlay and dialog box
	$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
	$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();

	// display the message
	$('#dialog-message').html(message);

}

Falls euch der Artikel gefallen hat, abonniert doch bitte unseren kostenlosen RSS Feed.

Der Freelance Webdesigner Brad Colbow, hat hierzu einen Comic erstellt, wo ich der Meinung bin, dass dieser auf jedenfall einen Artikel wert ist. Leider ist der Comic in Englisch gehalten, ich bin jedoch sicher, dass ihn soweit jeder verstehen kann.

Ihr könnt euch das Comic in voller Größe anschauen.

Die Demo

Das Markup

Unser Portfolio ist nicht mehr, als eine simple unsortierte Liste.

A List Apart
Apple
CNN
Digg
ESPN
Facebook
Google
Netflix
NETTUTS
Twitter
White House
YouTube

Portfolio kategorisieren

In diesem Beispiel gehen wir davon aus, dass unser Portfolio vier Kategorien beinhaltet.

• Design
• Development
• CMS
• Integration
• Information Architecture

Nun weisen wir dem Portfolio Elementen die class unserer jeweiligen Kategorie zu. Soll also Bild A in der Kategorie Development angezeigt werden, so weisen wir dem Listen Element von Bild A die class development zu. Achtet darauf, die class`s klein zu schreiben.

		A List Apart

		Apple

		CNN

		Digg

		ESPN

		Facebook

		Google

		Netflix

		NETTUTS

		Twitter

		White House

		YouTube

Die Kategorie Navigation

Da wir nun unsere Portfolio Einträge haben, benötigen wir natürlich noch die Navigation um diese zu sortieren. Wir erstellen also eine weitere unsortierte Liste.

All
Design
Development
CMS
Integration
Information Architecture

Die CSS Datei

Da es in diesen Tutorial nicht um CSS geht, gehe ich diesen Teil schnell durch.

Zu allerst möchten wir die Kategorien horizontal sowie mit einem Rahmen betrachten.

ul#filter {
	float: left;
	font-size: 16px;
	list-style: none;
	margin-left: 0;
	width: 100%;
}
ul#filter li {
	border-right: 1px solid #dedede;
	float: left;
	line-height: 16px;
	margin-right: 10px;
	padding-right: 10px;
}

Als nächstes möchten wir bei dem letzten Listen Element den Rahmen entfernen ( Für die Browser die es unterstützen ) sowie die Link Farbe ändern.

ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #999; text-decoration: none; }

Außerdem möchten wir das Aussehen der aktuellen Kategorie verändern

ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }
ul#filter li.current a { color: #333; font-weight: bold; }

Unsere Navigation wäre damit abgeschlossen. Setzen wir unseren Fokus nun auf das eigentliche Kategorie Layout. Wir möchten, dass immer drei Portfolio Elemente nebeneinand angezeigt werden. Außerdem soll jedes Portfolio Element einen Rahmen bekommen.

ul#portfolio {
	float: left;
	list-style: none;
	margin-left: 0;
	width: 672px;
}
ul#portfolio li {
	border: 1px solid #dedede;
	float: left;
	margin: 0 10px 10px 0;
	padding: 5px;
	width: 202px;
}

Zu guter letzt kommen noch einige Basis Eigenschaften für die Links und Bilder.

ul#portfolio a { display: block; width: 100%; }
ul#portfolio a:hover { text-decoration: none; }
ul#portfolio img { border: 1px solid #dedede; display: block; padding-bottom: 5px; }

Das geliebte jQuery

Ok, da wir nun unser Markup sowie unsere CSS Datei haben, kommen wir nun zum wichtigsten Teil dieses Tutorials: Dem Javascript
Wir starten mit dem einbinden der letzten jQuery Version in den Kopf Bereich unseres Dokumentes.

Als nächstes wollen wir unseren Code auszuführen, sobald das Dokument geladen ist.

$(document).ready(function() {

});

Wir möchten nichts tun, wenn keine Kategorie angeklickt ist. Außerdem wollen wir sicherstellen, dass wir nicht den Wert unseres href Links folgen. Wir benötigen also return false:

$('ul#filter a').click(function() {
	return false;
});

Sobald eine Kategorie geklickt ist, möchten wir ein paar Dinge machen: entferne die outline des geklickten Links, entferne die class des aktiven Listen Elements und füge die aktive class des geklickten Elternelements hinzu.

$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');

Als nächstes “nehmen” wir den text im geklickten Link, wandeln diesen in kleinbuchstaben um und ersetzen leerzeichen mit einem Bindestrich. ( Genau wie bei den Kategorien der Navigation )

var filterVal = $(this).text().toLowerCase().replace(' ','-');

Wenn der Navigations Link ALL geklickt ist, möchten wir alle Portfolio Elemente anzeigen sowie die class hidden entfernen.

if(filterVal == 'all') {
	$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
}

Nun kommt der wichtige Teil des Scriptes. Wir gehen durch jedes Portfolio Element und überprüfen ob die class gleich ist mit der Kategorie, die geklickt wurde. Wenn es nicht die class hat, dann möchten wir das Element ausblenden und die class hidden hinzufügen. Wenn es die class besitzt, möchten wir das Element einblenden und die class hidden entfernen.

else {
	$('ul#portfolio li').each(function() {
		if(!$(this).hasClass(filterVal)) {
			$(this).fadeOut('normal').addClass('hidden');
		} else {
			$(this).fadeIn('slow').removeClass('hidden');
		}
	});
}

Das fertige Script.

Werfen wir einen Blick auf unser fertiges Script.

$(document).ready(function() {
	$('ul#filter a').click(function() {
		$(this).css('outline','none');
		$('ul#filter .current').removeClass('current');
		$(this).parent().addClass('current');

		var filterVal = $(this).text().toLowerCase().replace(' ','-');

		if(filterVal == 'all') {
			$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
		} else {
			$('ul#portfolio li').each(function() {
				if(!$(this).hasClass(filterVal)) {
					$(this).fadeOut('normal').addClass('hidden');
				} else {
					$(this).fadeIn('slow').removeClass('hidden');
				}
			});
		}

		return false;
	});
});

Falls euch der Artikel gefallen hat, abonniert doch bitte unseren kostenlosen RSS Feed.

Schau dir die Demo an

Das HTML Markup

Most Recent Posts






Most Popular Posts

Was haben wir?

• Einen div Container, der den kompletten Inhalt enthält – #csstabs
• Zwei div Container, die den Tab Titel sowie den Inhalt enthalten – #tab1 #tab2
• h3 Tags für die Überschriften
• Tabinhalt als Liste ( Kann in div`s geändert werden, falls gewünscht )

Die CSS Datei

#csstabs{
position:relative;
width:300px;
height:290px;
}
#csstabs h3{
padding:5px;
height:30px;
text-align:center;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
}
.tabcontent{
padding:10px 0 0 40px;
width:100%;
background:#fff;
border:1px solid #000;
}

Wir geben den CSS Tabs eine relative Position, sodass wir in diesen Tabs Dinge absolut positionieren können um eine Höhe sowie Breite festzulegen. Dann geben wir den h3 Tags eine Höhe und einen Rahmen an drei Stellen. Außerdem geben wir dem Content einen Innenabstand inform der Padding Eigenschaft sowie einen Hintergrund und einen Rahmen.

#tab1 .tabcontent{
z-index:2;
position:absolute;
left:0;
top:42px;
background:#fff;
height:230px;
}
#tab1 h3{
z-index:3;
width:150px;
position:absolute;
left:0;
top:0;
background:#fff;
}

#tab2 .tabcontent{
z-index:1;
position:absolute;
left:0;
top:40px;
height:230px;
}
#tab2 h3{
width:150px;
position:absolute;
left:180px;
top:0;
}

Nun weisen wir den einzelnen Tabs die Werte zu.
Danach bekommen diese einen Hintergrund und eine Höhe.
Die h3 Tags bekommen einen z-index von drei, sodass wir sicher gehen können, dass sie immer über allen anderen stehen. Außerdem bekommen diese eine absolute Position, sodass sie immer über den Tabs stehen.

Nun kommen die Hover

#csstabs:hover h3,
#csstabs:focus h3,
#csstabs:active h3{
background:none;
}

#tab1:hover h3,
#tab1:focus h3,
#tab1:active h3{
z-index:4;
background:#fff;
}
#tab1:hover .tabcontent,
#tab1:focus .tabcontent,
#tab1:active .tabcontent{
z-index:3;
background:#fff;
}

#tab2:hover h3,
#tab2:focus h3,
#tab2:active h3{
z-index:4;
background:#fff;
}
#tab2:hover .tabcontent,
#tab2:focus .tabcontent,
#tab2:active .tabcontent{
z-index:3;
background:#fff;
}

Als erstes verlieren alle h3 Tags ihren Hintergrund, sobald wir über einen div Container mit der Maus fahren. Tab1 sowie Tab2 bekommen einen z-index von drei, sodass beide Elemente im Vordergrund stehen.

CSS3

Aber was ist das? Du hast einen webkit Browser? Wie wäre es mit ein paar CSS3 Tricks. Es ist nicht viel, aber ein kleiner Fade zwischen den einzelnen Tabs wäre doch super oder?

Als erstes geben wir jeden .tabcontent ein opacity:0 die zunächst nicht angezeigt werden.

#tab2 .tabcontent{
z-index:1;
position:absolute;
left:0;
top:42px;
height:230px;
opacity:0;
}

Dann füge diese Zeile unter der #csstabs:hover h3 ein.

#csstabs:hover .tabcontent,
#tabs:focus .tabcontent,
#tabs:active .tabcontent{
opacity:0;
-webkit-transition : opacity .75s ease-in;
}

Das wird den .tabcontent mit einem Fade Effekt von 0.75 Sekunden animieren.

Abschliessend benötigen wir für den .tabcontent noch ein Fade in.

#tab1:hover .tabcontent,
#tab1:focus .tabcontent,
#tab1:active .tabcontent{
z-index:3;
background:#fff;
opacity:1;
-webkit-transition : opacity 2s ease-in;
}

#tab2:hover .tabcontent,
#tab2:focus .tabcontent,
#tab2:active .tabcontent{
z-index:3;
background:#fff;
opacity:1;
-webkit-transition : opacity 2s ease-in;
}

Das wird den .tabcontent einblenden, während dieser innerhalb von zwei Sekunden verblasst.

Das wars, nun solltet Ihr einen funktionierenden Tab haben, der ohne Javascript funktioniert und die neuen CSS3 Techniken nutzt.

Oft kann es vorkommen, dass wir ein Layout haben, welches spezielle Modul Styles benötigt. Hier meine ich das Markup der Module. Joomla hat von Haus aus sechs verschiedene Modul Style Parameter mitgeliefert. Wir benötigen allerdings unseren eigenen Modul Style. Ich werde euch erklären, wie genau Ihr euren eigenen Modul Style für euer Joomla Template simpel und leicht selber erstellen könnt. Man kann natürlich soviele verschiedene Modul Styles erstellen, wie man möchte.

Die Struktur

Unsere wichtigste und einzige Datei hierbei ist die Datei modules.php. Wir erstellen in unserem Template Ordner einen neuen Ordner, den wir “html” nennen. In diesem Ordner legen wir nun unsere Datei “modules.php” an. Soweit sogut.

Das Markup

Nun kommt der wichtigste Teil. Der PHP sowie HTML Code natürlich. Zu allererst wollen wir natürlich verhindern, dass Joomla fremder Code ausgeführt wird.

< ?php
defined('_JEXEC') or die('Restricted access');
?>

Danach beginnt unser eigentlicher Code. Wir möchten unseren Style nun so formen, dass dieser mit mehreren div`s verschachtelt ist, die eine eigene class besitzen, sowie mit einer Überschrift im h3 format.
Ich werde nun einmal hier den kompletten Code schreiben und ihn später erläutern.

< ?php
defined('_JEXEC') or die('Restricted access');

function modChrome_changethis($module, &$params, &$attribs)
{
	$headerLevel = isset($attribs['headerLevel']) ? (int) $attribs['headerLevel'] : 3;
	if (!empty ($module->content)) : ?>

modChrome_changethis gibt indemfalle den Namen unseres Styles aus. Dieser wäre nun “changethis”
Nun folgt unser HTML Code:

< ?php echo $module->title; ?>


< ?php echo $module->content; ?>

module->content gibt indemfalle unseren Modul Inhalt aus und module->title gibt den Titel des Modules aus. Der params->get Befehl am Anfang gib den Modul Klassen Suffix aus, falls einer im Joomla Backend angegeben wurde.
Zu allerletzt schliessen wir noch die Klammern der Funktion und beenden unser PHP Script.

< ?php endif;
}
?>

Die Implementierung

Nun können wir unseren neuen Modul Style nutzen.
< jdoc:include … style=”changethis” / >

Wir werden also unserem Template sagen, gebe dem Content eine Breite von 800px, wenn die rechte Postition aktiviert ist, gebe dem Content eine breite von 600px.

Der Code Schnippsel

Um es so einfach wie möglich zu halten, erstellen wir einen DIV Container mit der Class “colfull” worin unser Content geladen wird.

Danach fügen wir die Eigenschaften für unseren DIV Container in die CSS Datei ein.

div.colfull {
	width:800px;
}

Unser Content hat jetzt eine Breite von 800px. Nun möchten wir sagen, wenn das rechte Modul aktiviert ist, ändere die Class von colfull auf nocolfull. Dies machen wir über einen einfach aber effektiven PHP Code. Wir gehen zurück zu unserem HTML Code und fügen folgenden PHP Code ein.

Was macht dieser PHP Code? Nun, wer ein wenig Englisch kann wird es sicherlich erraten. Wir sagen “Wenn das Modul auf der Position rechts aktiviert ist, dann gebe den Text no aus”. Da dieser Text in der Class steht bekommt das DIV nun die Class “nocolfull” anstatt wie vorher “colfull“. Das war es schon fast. Nun müssen wir in unser CSS Datei noch die Class nocollfull definieren:

/* Die Breite, wenn kein Modul auf der rechten Position aktiviert ist */
div.colfull {
	width:800px;
}
/* Die Breite, wenn ein Modul  auf der rechten Position aktiviert ist */
div.nocolfull {
	width:600px;
}

Ich hoffe ich konnte euch wieder ein wenig mehr über Joomla beibringen. Falls Ihr unsere Artikel gut findet, abonniert doch bitte unseren kostenlosen RSS Feed. So werdet Ihr immer benachrichtigt, wenn ein neuer Artikel veröfentlicht wurde.