Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „CS6 Dreamweaver Galerie in fließendes Rasterlayout einbinden“

beyou

Nicht mehr ganz neu hier

Moin mitanand,

folgende Aufgabenstellung:

ich habe ein fließendes Rasterlayout, das sowohl auf Smartphone, Tablet als auch Mac/PC richtig angezeigt werden soll.

Teil des Layouts ist ein Banner mit Überblendungen, dessen Grafiken mithilfe einer Imagemap verlinkt sind - ich kann mittels iframe oder object das Ding zwar anzeigen, aber ich würde es gern skaliert hinbekommen - also daß der Inhalt sowohl bei Smartphone, Tablet als auch Mac/PC richtig angezeigt wird (mit einer 100-%-Weite).

Ich komme da noch nicht so recht weiter - und bitte daher um Hilfe.
 

Niksda

Designgrieche

AW: CS6 Dreamweaver Galerie in fließendes Rasterlayout einbinden

Dann zeig uns mal deinen Code. Es können hier nur die Admins hellsehen ;)

oder hast du vllt einen Testserver zum veranschaulichen?

-Niksda.
 

beyou

Nicht mehr ganz neu hier

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;
}
 

beyou

Nicht mehr ganz neu hier

AW: CS6 Dreamweaver Galerie in fließendes Rasterlayout einbinden

Desweiteren gibts da noch eine boilerplate.css... .
 

Niksda

Designgrieche

AW: CS6 Dreamweaver Galerie in fließendes Rasterlayout einbinden

Also, bisschen übersichtlicher hättest dus schon machen können ;). Ich hab noch keinen Fehler gefunden, vermute aber dass es mit dem <object> tag zusammenhängt.

probier mal die höhe und breite im html rauszunehmen dafür aber im css3 eine class="obj"
obj{
width: 100%;
}

zu machen.

Was für einen Browser benutzt du? Hast du auch die Scrollbalken drinne?
 
Zuletzt bearbeitet:

Niksda

Designgrieche

AW: CS6 Dreamweaver Galerie in fließendes Rasterlayout einbinden

Check mal auch die max-width deines containers. die ist bei 800 px. deine Bilder sind aber 870px im Slider. Mach mal 900 draus und guck ob was passiert.
 

beyou

Nicht mehr ganz neu hier

AW: CS6 Dreamweaver Galerie in fließendes Rasterlayout einbinden

Ich hab hier in der Arbeit einen PC-Firefox. Ich hab's aber schon gefunden, es lag an einem Image-Tag:

img {
max-width: 100%;
height: auto;
}

Das hatte im CSS-Sheet gefehlt, jetzt funktionierts.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben