Template 4float blue 1.5

Templatereihe 4float

Dieses Template unterliegt nicht der GNU/GPL Lizenz.

Ich stelle euch dieses Template kostenfrei zur Verfügung und als Gegenleistung erwarte ich, dass ihr einen Backlink setzt.

Dieser ist im Template verankert. Gegen eine Gebühr könnt ihr den Link entfernen. Setzt euch dazu bitte mit mir in Verbindung: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!.

Dieses Template besteht aus vier Containern die absolut positioniert werden. Die Breite ist in Prozentwerten angegeben. Dadurch passt sich das Layout an eine veränderte Breite automatisch an. Es ist nur darauf zu achten das Bilder unter Umständen bei geringen Breiten aus den Boxen herauslaufen können. Das Logo und das Topmenue werden ebenfalls absolute über den Containern positioniert. Hierbei ist der Abstand vom rechten Rand als Prozentwert angegeben und "schwimmt" somit mit der Browserbreite mit.

Bei diesem Beispiel muss man ein wenig Rechnen. Die Summe der Breiten ergibt 98%. Der Abstand vom Body-Rand zur ersten Box, plus ihre Breite plus den Abstand ergibt die left-position der nächsten Box. (alles in %).

Wenn Du nun also unterschiedlich breite Boxen oder mehr Abstand möchtest, brauchst Du diese Werte nur gegeneinander zu verschieben.

Die CSS Deklarationen sehen wie folgt aus:

#links { 
position: absolute;
left: 2%;
width: 19%;
top: 100px;
}

 

#mittelinks { 
position: absolute;
left: 22%;
width: 28%;
top: 100px;
}
#mitterechts { 
position: absolute;
left: 51%;
width: 28%;
top: 100px;
overflow: auto;
}
#rechts { 
position: absolute;
left: 80%;
width: 18%;
top: 100px;
}
#rechts,#mitterechts,#mittelinks,#links{ 
border: 3px solid #123456;
padding:0px;
margin:0px;
}

Das Logo-Image ist 343x90px und kann durch ersetzen einfach ausgetauscht werden. Die Breite kann maximal 50% des Browserfensters betragen, ohne das zu Überlagerungen kommt. Sonst müsste auch das Topmenue angepasst werden. Das Logo ist direkt in der index.php verankert. Solltet Ihr die Höhe verändern wollen braucht Ihr nur die vier Container und die ID #breadcrumb im top-Wert erhöhen.

Eine Besonderheit an diesem Template sind die Attributselektoren aus der CSS-3 Spezifikation. Diese ist zwar noch nicht Standard, jedoch werden diese von Firefox, SeaMonkey, Safari und IE7 unterstützt. Insofern ist das Risiko, dass diese Spezifikationen in die endgültige Version von CSS-3 übernommen werden relativ gering.

a[href^="http:"] {<br />padding-right:10px;<br />background: url(../images/externallinks.gif) no-repeat right top;<br />}<br />a[href^="http://www.babydo.de"], a[href^="http://babydo.de"]{<br />padding-right:0;<br />background-image:none;<br />}<br />a[href^="mailto:"] {<br />padding-right:10px;<br />background: url(../images/email.gif) no-repeat right top;<br />}<br /></pre>
<p>Das Body-Image ist 40x300px und wird über:</p>
<pre>body {<br />background: url(../images/body.jpg) repeat-x bottom fixed;<br />font-size: 12px;<br />font-family: Tahoma, Arial, Helvetica, Sans-Serif;<br />color:#353D41;  <br />padding:0px;<br />margin:0px;<br />}<br /></pre>
<p>zugewiesen. Durch die Eigenschaft "fixed" bleibt es beim Scrollen immer am unteren Rand. Ausgetauscht werden kann es problemlos.

Warnhinweis - Diese Seiten benutzen bestimmte CSS-Definitionen, die von älteren Browsern nicht dargestellt werden können.

Akku Berechnung 1.6

Akku Leistung





Transfer Calc 1.6

Volumen, Bandbreite zu Zeit






Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.