AW: CS6 Dreamweaver Galerie in fließendes Rasterlayout einbinden
-> wenn man den Browser auf Tablet- bzw. Smartphone-Größe zusammenschiebt, dann ändert sich die Größe des Headers ganz oben nicht. Das hätte ich gerne geändert.
HTML:
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Herder Brotmesser</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="cssflow.css" rel="stylesheet" type="text/css">
<!--
Weitere Erläuterungen zu bedingten Kommentaren, die die HTML-Tags am Anfang der Datei umschließen erhalten Sie hier:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Wenn Sie eine angepasste Version von modernizr (
http://www.modernizr.com/) verwenden, führen Sie die folgenden Schritte aus:
* Fügen Sie hier den Hyperlink zu js ein
* Entfernen Sie den unten stehenden Hyperlink auf html5shiv
* Fügen Sie in die HTML-Tags am Anfang der Datei die Klasse "no-js" ein
* Sie können auch den Link auf respond.min.js entfernen, wenn Sie in Ihre modernizr-Version die MQ-Polyfill eingefügt haben
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="overhead"><object data="http://bilder.olsenstore.com/html/slider2/DE/slider.html" style="overflow-x: hidden; overflow-y: hidden" height="180px" width="100%"></object><p style="text-align:center;color:#6f1d0f"><marquee scrollamount="2" scrolldelay="30">
***Weitere aktuelle Angebote finden Sie hier***
</marquee></p></div>
<div id="header">
<h2>Herder Brotmesser</h2>
</div>
<div id="image"><img src="http://bilder.olsenstore.com/herder/brotmesser.jpg" width="100%"></div>
<div id="content">
<p>Klinge mit Wellenschliff <br>
<br>
Griff aus Kirschbaumholz <br>
<br>
<strong>Klingenlänge</strong> 208 mm<br>
</p>
</div>
<div id="extra">
<h4>Beschreibung</h4>
<p>Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi. Die Tastempfindung geht auch ins Sexuelle. Das bedeutet nicht unbedingt, daß das Verhältnis zum Gummibärchen ein geschlechtliches wäre, denn prinzipiell sind diese geschlechtsneutral. Nun sind Gummibärchen weder wabbelig noch zäh; sie stehen genau an der Grenze. Auch das macht sie spannend. Gummibärchen sind auf eine aufreizende Art weich. Und da sie weich sind, kann man sie auch ziehen. Ich mache das sehr gerne. Ich sitze im dunklen Kino und ziehe meine Gummibärchen in die Länge, ganz ganz langsam. </p>
</div>
<div id="footer">
<h4>Specials</h4>
<p>Man will sie nicht kaputtmachen, und dann siegt doch die Neugier, wieviel Zug so ein Bärchen aushält. (Vorstellbar sind u.a. Gummibärchen-Expander für Kinder und Genesende). Forscherdrang und gleichzeitig das Böse im Menschen erreichen den Climax, wenn sich die Mitte des gezerrten Bärchens von Millionen Mikrorissen weiß färbt und gleich darauf das zweigeteilte Stück auf die Finger zurückschnappt. Man hat ein Gefühl der Macht über das hilflose, nette Gummibärchen. Und wie man damit umgeht: Mensch erkenne dich selbst! Jetzt ist es so, daß Gummibärchen ja nicht gleich Gummibärchen ist. Ich bevorzuge das klassische Gummibärchen, künstlich gefärbt und aromatisiert. Mag sein, daß es eine Sentimentalität ist. Jedenfalls halte ich nichts von neuartigen Alternativ-Gummibärchen ohne Farbstoff (»Mütter, mit viel Vitamin C«), und auch unter </p>
</div>
<div id="dhl"><img src="http://bilder.olsenstore.com/html/sand4/dhltouch.png" style="text-align:center" width="100%"></div>
<div id="ups"><img src="http://bilder.olsenstore.com/html/sand4/upstouch.png" style="text-align:center" width="100%"></div>
<div id="gls"><img src="http://bilder.olsenstore.com/html/sand4/glstouch.png" style="text-align:center" width="100%"></div>
<div id="paypal"><img src="http://bilder.olsenstore.com/html/sand4/paypal.png" style="text-align:center" width="100%"></div>
<div id="mail"><img src="http://bilder.olsenstore.com/html/sand4/phonetouch.png" style="text-align:center" width="100%"></div>
<div id="phone"><img src="http://bilder.olsenstore.com/html/sand4/mailtouch.png" style="text-align:center" width="100%"></div>
<div id="reserve2">
<p style="text-align:center">DHL | UPS | GLS | Paypal</p>
<p style="text-align:center">040 329 66 111 | <a href="mailto:info@olsenstore.com">info@olsenstore.com</a></p>
</div>
<div id="abschluss"></div>
<div id="reserve3"></div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* Einfache fließende Medien
Hinweis: Für fließende Medien müssen Sie die Attribute 'height' und 'width' des Medium aus dem HTML-Code entfernen
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
.ie6 img {
width:100%;
}
body {font-size:100%;}
h2 {
font-size:1.8em;
font-weight:bold; }
h4 {
font-size:1em;
font-weight:bold; }
p {
font-size:0.9em;
}
/*
Dreamweaver-Eigenschaften für fließende Raster
----------------------------------
dw-num-cols-mobile: 3;
dw-num-cols-tablet: 9;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 25;
Idee durch den Artikel "Responsive Web Design" von Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
und "Golden Grid System" von Joni Korpi
http://goldengridsystem.com/
*/
/* Layout für Mobilgeräte: 480 px oder weniger. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 84.9333%;
padding-left: 3.0333%;
padding-right: 3.0333%;
}
#overhead {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
margin-bottom:-20px;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#image {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#content {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#extra {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#dhl {
clear: both;
float: left;
margin-left: 0;
width: 28.5714%;
display: block;
margin-bottom:10px;
}
#ups {
clear: none;
float: left;
margin-left: 7.1428%;
width: 28.5714%;
display: block;
margin-bottom:10px;
}
#gls {
clear: none;
float: left;
margin-left: 7.1428%;
width: 28.5714%;
display: block;
margin-bottom:10px;
}
#paypal {
clear: both;
float: left;
margin-left: 0;
width: 28.5714%;
display: block;
margin-bottom:10px;
}
#mail {
clear: none;
float: left;
margin-left: 7.1428%;
width: 28.5714%;
display: block;
margin-bottom:10px;
}
#phone {
clear: none;
float: left;
margin-left: 7.1428%;
width: 28.5714%;
display: block;
margin-bottom:10px;
}
#abschluss {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#reserve1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
margin-top:10px;
}
#reserve2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
margin-top:10px;
}
#reserve3 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.9333%;
padding-left: 1.0333%;
padding-right: 1.0333%;
}
#overhead {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#image {
clear: both;
float: left;
margin-left: 0;
width: 54.5454%;
display: block;
}
#content {
clear: none;
float: left;
margin-left: 2.2727%;
width: 43.1818%;
display: block;
}
#extra {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#dhl {
clear: both;
float: left;
margin-left: 11.3636%;
width: 9.0909%;
display: block;
}
#ups {
clear: none;
float: left;
margin-left: 2.2727%;
width: 9.0909%;
display: block;
}
#gls {
clear: none;
float: left;
margin-left: 2.2727%;
width: 9.0909%;
display: block;
}
#paypal {
clear: none;
float: left;
margin-left: 13.6363%;
width: 9.0909%;
display: block;
}
#phone {
clear: none;
float: left;
margin-left: 2.2727%;
width: 9.0909%;
display: block;
}
#mail {
clear: none;
float: left;
margin-left: 2.2727%;
width: 9.0909%;
display: block;
}
#LayoutDiv13 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv14 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv15 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv16 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
/* Desktoplayout: 769 bis maximal 1232 px. Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 71.7833%;
max-width: 800px;
padding-left: 0.6083%;
padding-right: 0.6083%;
margin: auto;
}
#overhead {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#image {
clear: both;
float: left;
margin-left: 0;
width: 49.1525%;
display: block;
}
#content {
clear: none;
float: left;
margin-left: 1.6949%;
width: 49.1525%;
display: block;
}
#extra {
clear: both;
float: left;
margin-left: 0;
width: 49.1525%;
display: block;
}
#footer {
clear: none;
float: left;
margin-left: 1.6949%;
width: 49.1525%;
display: block;
}
#dhl {
clear: both;
float: left;
margin-left: 0;
width: 6.7796%;
display: block;
}
#ups {
clear: none;
float: left;
margin-left: 10.1694%;
width: 6.7796%;
display: block;
}
#gls {
clear: none;
float: left;
margin-left: 10.1694%;
width: 6.7796%;
display: block;
}
#paypal {
clear: none;
float: left;
margin-left: 10.1694%;
width: 6.7796%;
display: block;
}
#phone {
clear: none;
float: left;
margin-left: 10.1694%;
width: 6.7796%;
display: block;
}
#mail {
clear: none;
float: left;
margin-left: 10.1694%;
width: 6.7796%;
display: block;
}
#LayoutDiv13 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv14 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv15 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv16 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
