fehlerhafte Anzeige von DW oder bug bei flexible layer

atero · #1 (**permalink**) 12.09.2011, 23:58

Hallo, kann mir jemand helfen?
Im Dreamweaver bekomme ich in der Design-Ansicht eine fehlerhafte Ansicht:

Bin Ur-blutigster CSS-Anfänger.
Mir ist es als gelungen ein geslictes Bild in CSS mit einfachsten Mitteln zoombar zu machen. p.s.: So hoffe ich. ?!?!? Das nach der Richtigkeit des Quellcodes meine 2-te Frage.

Die zoobare Funktion funktioniert! In allen 4 gängigen Browser.
Getestet mit: FireFox6 , Chrome13, Opera11, IE8 und IE6.
Soweit so gut.
Ich bekomme jedoch im Dreamweaver in der „Design Ansicht“ eine vollkommen fehlerhafte Ansicht!!!
Ich habe die CS5.5 Version sowie den DW8.
Habe es mit beiden geprüft.
Das Ergebnis in der „Design View“ von DW8 ist genauso mies.

Die CS Version hat zusätzlich zu der "Design View" noch die Option: „Live View“.
Unter Live View ist wieder alles schick und verhält sich genauso wie in den 4 Browsern.
Die Validation nach W3C ist ebenfalls fehlerfrei.

Somit sollte der Quellcode eigentlich richtig sein.

„sollte“ , d.h., ich habe dazu eine Frage:
Da ich blutiger Anfänger bin, frage ich mich, ob vielleicht doch ein bug verborgen sein kann.
Kann mir hierzu Jemand etwas sagen?, "bitte".

Hier nun der Quellcode:
Zu Übungszwecken habe ich noch keine echten Bilder in die div-s eingefügt sondern die Bilder nur mit Farbe gefüllt, was an der Problemstellung aber nichts ändert.

Hinweis:
Mein ursprüngliches Problem war übrigens "ein größeres Bild z.B. mit einer orig. Größe von 766px mal 77px"
"in einen kleinen Rahmen % - gerecht hinein zu bekommen",
ohne dass der Bildinhalt über den Rahmen hinaus geht.
Dies denke ich mit der % - Angabe gelöst zu haben, oder?
Liegt hier ein bug verborgen?

Das aufgeführte Bild:
musterpic_no1_766px_77px.png hat eine orig. Größe von diesen 766px mal 77px.

Der Quellcode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flexible_scaling</title>
<style type="text/css">
#master {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
}
.top_pic_1 {
float: left;
width: 15%;
height:10%;
font-size: 0;
border:1px solid black;
}
.top_pic_2 {
float:left;
width:15%;
height:10%;
font-size: 0;
border: 1px solid black;
}
.top_pic_3 {
float:left;
width:25%;
height:10%;
clear:right;
font-size: 0;
border:1px solid black;
}
.top_pic_4 {
position:absolute;
left:0px;
top:10%;
width:25%;
height:10%;
font-size: 0;
border:1px solid red;
}
</style>
</head>

<body>
<div id="master">
<div class="top_pic_1"> <img src="Bilder/musterpic_no1_766px_77px.png" width="100%" height="100%" alt="pic1" /> </div>
<div class="top_pic_2"> <img src="Bilder/musterpic_no2_766px_77px.png" width="100%" height="100%" alt="pic2" /> </div>
<div class="top_pic_3"> <img src="Bilder/musterpic_no2_766px_77px.png" width="100%" height="100%" alt="pic3" /> </div>
<div class="top_pic_4"> <img src="Bilder/musterpic_no2_766px_77px.png" width="100%" height="100%" alt="pic4" /> </div>
</div> 

</body>
</html>

Meine Frage:
1. Kann mir jemand bitte sagen, wieso ich beim Dreamweaver in der Entwurfsansicht (Design View) ein anderes Ergebnis bekomme
als in allen 4 genannten Browsern?
2. Wäre der CSS Code soweit in Ordnung oder ist doch ein verborgener bug versteckt ?????

Gruß und many, many Danke schÖn für eine Antwort

atero=Hanno

MrMurphy · #2 (**permalink**) 13.09.2011, 07:24

Hallo,

ohne die Bilder ist das ganze schlecht nachzustellen. Außerdem ist es hilfreich und sinnvoll den Quelltext auch online zur Verfügung zu stellen. Dann haben alle den gleichen Wissensstand und fehlende Teile, wie in diesem Fall die Bilder, sind unwahrscheinlicher.

Allerdings sehe ich in deiner Konstruktion weder einen Sinn noch halte ich es für vernünftiges HTML / CSS was die Bilder angeht.

Sinnvollerweise werden Bilder mittels eines Bildbearbeitungsprogramms auf die Größe skaliert, mit der sie auch auf der Webseite angezeigt werden sollen. Die Größe wird ihnen dann im HTML auch direkt mitgegeben und die wird im Quelltext dann auch weder im HTML noch im CSS geändert.

Die Erfahrung zeigt, das es mit dieser Vorgehensweise am wenigsten Probleme gibt.

Zitat:

Soweit so gut.

Ein gern gemachter Fehler. Dabei wird übersehen, das die Browser so programmiert wurden, das sie in der Ansicht von HMTL/CSS sehr fehlertolertant sind. Kurz: Sie versuchen jeden Mist und Unsinn doch noch vernünftig anzuzeigen.

Von daher sind sie bzw. ihre Darstellung zur Beurteilung der Fehlerfreiheit vom Quelltext nun gar nicht geeignet.

Ob beim DW ein Fehler vorliegt ist schwer zu beurteilen. Er ist in erster Linie ein HTML-Editor, der versucht, die Browseransicht nach Wunsch während der Bearbeitung auch anzuzeigen. Im Gegensatz zu vielen anderen WYSIWYG-Editoren legt DW aber das Hauptaugenmerk immer noch auf einen vernünftigen Quellcode, über den der Seitenersteller zudem die volle Kontrolle behalten soll. Die bearbeitbare Vorschau ist eine zusätzliche Hilfe aber nicht der Hauptzweck.

Das scheint programmtechnisch nicht so einfach zu lösen zu sein, zumal HMTL / CSS immer mehr Möglichkeiten bieten. Deshalb haben die DW-Macher dann ja wohl auch in den neueren Versionen die Live-Vorschau eingebaut, die ähnlich den den Browsern fehlertoleranter arbeitet. Aber auch selbst wiederum ein rudimetärer Browser mit allen Nachteilen ist.

Gruss

MrMurphy

hubspe · #3 (**permalink**) 13.09.2011, 08:57

Moin,

sämtliche WYSTYG-Editoren, auch der teure Dreamweaver produzieren schlechten Quellcode. Das ist keine Meinung sondern leider eine Tatsache.

Deshalb arbeiten praktisch sämtliche Webdesigner auch ausschließlich in der HTML-Ansicht, d.h. auf der Codeseite.

Selbst wenn du nur auf der Ansichtsseite arbeiten willst kommst du nicht umhin dir XHTML/CSS-Kenntnisse anzueignen,
weil du den Schmarrn, den die Ansichtsseite produziert nicht bereinigen kannst.

Little Boxes verschafft dir diese Kenntnisse.

Praktikant · #4 (**permalink**) 13.09.2011, 09:30

Zu Klaus Ausführungen Ost noch hinzuzufügen, dass die Entwurfsansicht des DW nicht nur schlechten Code generiert, sondern beliebigen Code auch BVG sehr schlecht darstellt, egal ob der Code valide ist oder nicht.

Nutze zum ansehen und testen lieber einen normalen Browser. Firefox bietet sich dafür immer an.

MrMurphy · #5 (**permalink**) 13.09.2011, 10:54

Hallo

Zitat:

Das ist keine Meinung sondern leider eine Tatsache.

Das stimmt nicht, ist also doch Meinung.

Entweder hast du schon lange nicht mehr mit DW gearbeitet oder du hast von vernünftigen HTML-Code keine Ahnung. Wenn DW richtig genutzt wird, erstellt er auch in der WYSIWYG-Ansicht absolut sauberen Code.

Ohne zu wissen, wie DW funktioniert, ist es natürlich problemlos möglich, schrottigen Quellcode zu erstellen.

Zitat:

Deshalb arbeiten praktisch sämtliche Webdesigner auch ausschließlich in der HTML-Ansicht, d.h. auf der Codeseite.

Auch wieder so ein Vorurteil, das nicht stimmt, auch wenn es offensichtlich immer wieder gerne vorgetragen wird. Das Problem: Auch durch ständige Wiederholung wird es nicht wahr.

Um vernünftigen Quellcode zu erzeugen ist kein teurer Editor erforderlich. Aber kein produktiver Webseitenersteller wird eine Software ablehnen, die ihm Zeit und Arbeit erspart und damit Geld erwirtschaftet.

Gruss

MrMurphy

hubspe · #6 (**permalink**) 13.09.2011, 12:25

Zitat:

Zitat von MrMurphy

Hallo
Das stimmt nicht, ist also doch Meinung.
Entweder hast du schon lange nicht mehr mit DW gearbeitet oder du hast von vernünftigen HTML-Code keine Ahnung.

ich weiß jetzt nicht so genau, warum du hier so einen Unfug erzählst.

Habe länger mit Dreamweaver CS3 gearbeitet, aber der hat auf der Ansichtsseite einfach schlechten Code produziert.

Wie schon gesagt alle Kollegen, die ich kenne, arbeiten ausschließlich auf der Codeseite.
Jau es mag Kollegen geben, die auf der Ansichtsseite arbeiten, über die Seriösität dessen was dort produziert wird will ich lieber nicht nachdenken.

Praktikant · #7 (**permalink**) 13.09.2011, 12:32

Zitat:

Zitat von MrMurphy

Entweder hast du schon lange nicht mehr mit DW gearbeitet oder du hast von vernünftigen HTML-Code keine Ahnung. Wenn DW richtig genutzt wird, erstellt er auch in der WYSIWYG-Ansicht absolut sauberen Code.

Ich arbeite aktuell mit DW CS5. Ich kann deine Meinung absolut nicht stützen. Die Entwurfsansicht habe ich mir natürlich angesehen, ich will ja vorher wissen was ich nachher erzähle, der generierte Code war mehr als Schrott. Dazu sollte man allerdings beachten, dass valider Code und "guter" Code nicht gleichbedeutend ist

Wenn ich mir meinen selbstgeschriebenen Code in der Entwurfsansicht des DW ansehe sind da immer Fehler drinne, sobald es etwas komplexer wird.

Aber wie sagt man so schön: Jedem das seine. Wenn es deinem Anspruch genügt HTML-Code zu produzieren, der irgendwie funktioniert, dann viel Spaß. Meinem Anspruch würde das nicht annähernd genügen.

hubspe · #8 (**permalink**) 13.09.2011, 12:43

Zitat:

Zitat von Praktikant

Aber wie sagt man so schön: Jedem das seine. Wenn es deinem Anspruch genügt HTML-Code zu produzieren, der irgendwie funktioniert, dann viel Spaß. Meinem Anspruch würde das nicht annähernd genügen.

jep! Mann kannst du dich gewählt ausdrücken!

atero · #9 (**permalink**) 14.09.2011, 23:00

Hi,
ich möchte mich ganz toll bei allen bedanken für die vielen Beiträge.
Hatte gesteren beruflich zu wenig Zeit für Details.

Danke auch für den Link: little-boxes.de

Zur Info:
Ich habe 2 DVDs von TENTON bearbeited und bin danach an die Bearbeitung der Webseite gegangen. Bilderdarstellung für die Webseite, Slicing, Details und Texte,.. habe ich fertig. Jetzt soll die Webseite selber dran kommen.
Die TENTON DVDs die ich bearbeitet habe sind:
CSS Fundamentals und CSS Floating Layouts.

Am Wochende werde ich mir die genannte Seite little-boxes mal ansehen.
Danke auch für die vernichtende Kritik.
Einiges sehe ich anders, anderes ist OK.
Gegebenfalls melde ich mich, sobald ich weiter bin.
Ich will auch nicht der "super" Weltmeister mit Nobelpreisträgerverdacht in CSS werden. Die Seite soll von Seiten der Programmierung zunächst nur vertretbar OK sein. Alles andere später.
Ich sitze bereits - "neben dem Beruf , nachts zwischen 22 und 1 Uhr" - mit den Texten und der Bildbearbeitung seit realen 1 1/2 Jahren dadran und wollte eigentlich noch vor dem Jahre 2050 fertig sein.
Wie dem auch sei.

Besten Dank an Alle!

Ich melde mich, sobald ich neue Fragen habe.
atero

Praktikant · #10 (**permalink**) 14.09.2011, 23:12

In der Regel geht es schneller eine Seite zu bauen wenn der Quellcode valide und sematisch korrekt ist. Es ist einfach übersichtlicher und hat meistens weniger Code, was beides die Chance schnell zu finden deutlich erhöht.

Wir haben hier aber auch eine teilweise sehr extreme Meinung was die Erstellung von Websites angeht. Jedoch arbeiten die Meisten hier auch nach diesem Prinzip.

Desweiteren: Entschuldige bitte unseren Off-Topic!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Alternativ-Skript zu: Menü-Auswahl und Anzeige von Texten über Layer	zeitgeisth	Javascript & Ajax	0	04.03.2009 21:24
fehlerhafte anzeige eines elements im IE	ruven	CSS	3	06.11.2008 11:10
Infobox - fehlerhafte Anzeige bei Firefox	Jörgli	CSS	4	20.06.2008 10:35
Fehlerhafte Anzeige beim IE trotz bestandener Validierung	herb37	CSS	2	10.08.2007 19:31
Layer relativ positionieren - Anzeige im Firefox	Wolfgangehg	CSS	3	15.11.2004 15:52