Ein responsives Webdesign mit Typo3 (Teil 5): Bugfixing

Frontend

Im „Ein responsives Webdesign mit Typo3 (Teil 4)“ hatten wir bemerkt, dass die Spalten und die darunter befindlichen SVG Dateien miteinander skalieren und das zu einigen hässlichen Fehlern führt.

Hier müssen wir noch einmal Hand anlegen und das HTML Template etwas umschreiben.

Zunächst füge ich in die beiden Divs mit den Klassen „col span_2_of_3“ und „col span_1_of_3“ einen weiteren Div mit der Klasse „left“ oder „right“ ein.

<div class="col span_2_of_3">
 <div class="left"></div>
...
<div class="col span_1_of_3">
 <div class="right"></div>

In diese Divs kommt jetzt jeweils der Marker und die SVG Datei.

   <div class="col span_2_of_3">
	<div class="left">
      <article>###MIDDLE###</article>
	  	<object type="image/svg+xml" data="fileadmin/images/backgrounds/form.svg" class="box_form">
			Form <!-- fallback image in CSS -->
		</object>
	</div>
   </div>
   <div class="col span_1_of_3">
	 <div class="right"> 	  
	  <aside>
		###SIDE###
      </aside>
		<object type="image/svg+xml" data="fileadmin/images/backgrounds/form_inv.svg" class="box_form_inv">
			Form <!-- fallback image in CSS -->
		</object>
	  </div>
     </div>

Zusätzlich habe ich den Marker SIDE noch in einen Aside Tag gesteckt. Der Aside Tag ist neu in HTML5 und soll ergänzende Informationen zum Artikel haben.

Jetzt passe ich die CSS noch etwas an. Zuerst schmeiße ich die Angaben aus „span_1_of_3“ in die neue Klasse „right“ und die Angaben aus „span_2_of_3“ in „left“.

.right {
 	/*min-height: 300px;*/
	background-color: #fff;
	opacity: 0.8;
	-khtml-opacity: 0.8;
	-moz-opacity: 0.8;
	-webkit-opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	border-radius: 30px 30px 0px 0px;
	text-align: left;
	padding-top:25px;
}	
	
.span_1_of_3 {

	}

.left {
	min-height: 300px;
	background-color: #fff;
	opacity: 0.8;
	-khtml-opacity: 0.8;
	-moz-opacity: 0.8;
	-webkit-opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	border-radius: 30px 30px 0px 0px;
	text-align: left;
	}

	
.span_2_of_3 {

	}

Das Ergebnis im Frontend sieht nun so aus.

Frontend
image-264

Frontend

Der Angabe zum Article Tag in der CSS nehmen wir einfach das Parent weg:

article {
	padding: 30px 20px 10px 20px;
	}

Schon besser:

Frontend
image-265

Frontend

Problematisch sind aber nun die SVGs, die wir in Tutorial 3 ja mit Illustrator erstellt hatten. In der neuen Struktur werden diese ebenfalls mit einer 80% Transparenz versehen. Da die Dateien Original bereits 80% transparent sind, erscheinen diese nun noch transparenter:

Doppeltransparenz
image-266

Doppeltransparenz

Die SVGs müssen nun auf 100% gesetzt und neu abgespeichert werden:

SVG auf 100%
image-267

SVG auf 100%

Das Ergebnis:

Frontend
image-268

Frontend

Geben wir nun spaßenshalber mal etwas mehr Text in die linke Spalte:

Frontend
image-269

Frontend

Soweit so gut … scrollt man aber weiter runter hat man folgendes Phänomen:

Footer mit fehlendem Text
image-270

Footer mit fehlendem Text

Das lässt sich über die CSS regeln. In die Klasse „section“ kommt einfach noch ein „margin-bottom: 100px;“:

.section {
    top: 10px;
    margin: 0 auto;
    width: 1000px;
    padding-top: 20px;
    margin-bottom: 100px;
}

Und das Ergebnis:

Footer mit 100px Abstand zum unteren Rand
image-271

Footer mit 100px Abstand zum unteren Rand

Wenn wir jetzt noch abschließend den gesamten Quellcode in den W3C Validator schieben, sehen wir, dass wir sauber gearbeitet haben:

W3C Check
image-272

W3C Check

Schreiben Sie einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.