Dreamwaver akzeptiert keien max-width

stylegangsta · 18. November 2010

Hallo Leute,

ich habe ein 2 spaltiges Layout. Links Bildegalerie mit Thumbnails und rechts fließtext. Zuerst habe ich gedacht Dreamweaver zeigt es einfach nicht an, aber im Browser wird es vielleicht übernommen. Von wegen. Ich bekomme zum Verrecken nicht weder den Zeileumbruch hin, noch die max-breite von 530px für den Text, noch wird der Zeilenabstand übernommen. Wenn ich im Text für den Zeilenumbruch Enter drücke kommt ein Megaabstand zwischen den Zeilen. Wenn der Zeilenumbruch bei 530px und der richtige zeilenabstand von alleine funktioneren würde, dann hätte es sich zum Testen mit der Entertaste ehe erledigt. Daher habe ich line-height im ;oment entfernt, weil es ehe nit geht. Hat jemand eine Idee.

So sieht mein Code aus:

HTML

<!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">
<html>
<head>
<style>
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:link {img-decoration: none}
A:visited {img-decoration: none}
.white_content {
text-align: center;
vertical-align: middle;
display: none;
position: relative;
width: 580px;
height: 600px;
padding: 0px;
border: 0px;
background-color: none;
z-index:1002;
overflow: hidden;
margin-top: -250px;
margin-left: -200px;
margin-bottom: 0px;
}
.thumbs {
	margin-bottom: 1px;
	width: 450px;
	float: inherit;
}
.description {
	margin-left: 460px;
	margin-top: inherit;
	float: right;
	position: absolute;
	max-width: 540px;
	left: 0px;
	top: 8px;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<div id="wrapper">
<div id="thumbs">
</div>
</div>
</div>

Alles anzeigen

Danke im Voraus

lauras · 18. November 2010

Guten Abend,
Valider Code wäre ne Idee.

Du hast:
-zwei html-Tags
-keinen body-Tag
-einen div zu viel geschlossen
-im css tw. etwas groß geschrieben.

Das nur mal so was ich auf die Schnelle sehe.

Zwei Tips mal:
-zum Lernen nicht Dreamweaver nehmen. Ist relativ klotzig und man kommt sehr leicht in die Versuchung, etwas was nicht klappt über WYSIWYG zu lösen. Das sollte man jedoch NUR tun, wenn man es grundlegend beherrscht um z.B. einfacher Texte schreiben zu können.
-erst Inhalt, dann Design. Erstelle deinen Inhalt (wenn du noch keinen hast nimm Blindtext) und zeichne ihn korrekt aus. Gruppiere dann wenn nötig mit divs und mach dann erst das CSS. Das sollte natürlich am besten komplett ausgelagert werden.

Gruß
Laura

stylegangsta · 19. November 2010

Hallo Lauras,

danke für die Antwort.

Zitat

Du hast:
-zwei html-Tags
-keinen body-Tag
-einen div zu viel geschlossen
-im css tw. etwas groß geschrieben.

Der body tag ist alles weiter unten, ich habe nur den Abschnitt hier rauskopiert. Ja es ist ein DIV zu viel drin. Das ist mir bewusst, aber diesen muss ich leider drin lassen, weil sich sonst alles verschiebt.
Aber na ja. Vielleicht kann man mir ja mit dem gesamten Code weiterhelfen. Denn ich bin da jetzt lange dran und hab keine Zeit und Lust in ein anderes Program als Dreamweavser einzusteigen, mal abgesehen davon, hab ich nur das. Aber Egal. Hier mal der Gesamte Code und mein Problem ist ja in meinem ersten Beitrag geschildert.

HTML

<!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">
<html>
<head>
<style>
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:link {img-decoration: none}
A:visited {img-decoration: none}
.white_content {
text-align: center;
vertical-align: middle;
display: none;
position: relative;
width: 580px;
height: 600px;
padding: 0px;
border: 0px;
background-color: none;
z-index:1002;
overflow: hidden;
margin-top: -250px;
margin-left: -200px;
margin-bottom: 0px;
}
.thumbs {
	margin-bottom: 1px;
	width: 450px;
	float: inherit;
}
.description {
	margin-left: 460px;
	margin-top: inherit;
	float: right;
	position: absolute;
	max-width: 540px;
	left: 0px;
	top: 8px;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<div id="wrapper">
<div id="thumbs">
</div>
</div>
</div>







<body><a href = "javascript:void(0)" onclick ="document.getElementById('light1').style.display='block';document.getElementById('fade').style.display='block'">
<div class="thumbs"><img src="http://www.polttech.de/koffer_klein.jpg" width="140px" height="140px" border="0"/> <a href = "javascript:void(0)" onclick ="document.getElementById('light2').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://www.polttech.de/dvd_klein.jpg" width="140px" height="140px" border="0"/> <a href = "javascript:void(0)" onclick ="document.getElementById('light3').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://www.polttech.de/griffe_klein.jpg" width="140px" height="140px" border="0"/><a>
<div class="description" id="description" dir="ltr" lang="af">
basdfköfsadgfffffffffffffffffffffgggggggggggggggggggggggggggggggggggggfffffffffffffffffffffffff</div></a>
</div><div class="thumbs"></div><div class="thumbs"><span class="thumbs"><a href = "javascript:void(0)" onclick ="document.getElementById('light4').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://www.polttech.de/led_klein.jpg" width="140px" height="140px" border="0"/></a></span>
  <a href = "javascript:void(0)" onclick ="document.getElementById('light5').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://www.polttech.de/maschinen_klein.jpg" width="140px" height="140px" border="0"/></a></div>
<p><div class="thumbs"></div><div class="thumbs"></div></p>
<div align="center"><div id="light1" class="white_content"><img src="http://www.polttech.de/koffer_gross.jpg" width="580px" height="575px" border="0" margin-bottom="0px"/><a href = "javascript:void(0)" onclick = "document.getElementById('light1').style.display='none';document.getElementById('fade').style.display='none'"><img src="http://www.polttech.de/close.png" width="580px" height="25px" border="0" align="center"/></a></div></div>
<div align="center"><div id="light2" class="white_content"><img src="http://www.polttech.de/dvd_gross.jpg" width="580px" height="575px" border="0"/><a href = "javascript:void(0)" onclick = "document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'"><img src="http://www.polttech.de/close.png" width="580px" height="25px" border="0" align="center"/></a></div></div><div align="center"><div id="light3" class="white_content"><img src="http://www.polttech.de/griffe_gross.jpg" width="580px" height="575px" border="0"/><a href = "javascript:void(0)" onclick = "document.getElementById('light3').style.display='none';document.getElementById('fade').style.display='none'"><img src="http://www.polttech.de/close.png" width="580px" height="25px" border="0" align="center"/></a></div></div><div align="center"><div id="light4" class="white_content"><img src="http://www.polttech.de/led_gross.jpg" width="580px" height="575px" border="0"/><a href = "javascript:void(0)" onclick = "document.getElementById('light4').style.display='none';document.getElementById('fade').style.display='none'"><img src="http://www.polttech.de/close.png" width="580px" height="25px" border="0" align="center"/></a></div></div>
<div align="center"><div id="light5" class="white_content"><img src="http://www.polttech.de/maschinen_gross.jpg" width="580px" height="575px" border="0"/><a href = "javascript:void(0)" onclick = "document.getElementById('light5').style.display='none';document.getElementById('fade').style.display='none'"><img src="http://www.polttech.de/close.png" width="580px" height="25px" border="0" align="center"/></a></div></div>
</body>
</html>

Alles anzeigen

Sarkkan · 19. November 2010

Zitat von "stylegangsta"

Ja es ist ein DIV zu viel drin. Das ist mir bewusst, aber diesen muss ich leider drin lassen, weil sich sonst alles verschiebt.

...

Denn ich bin da jetzt lange dran und hab keine Zeit und Lust in ein anderes Program als Dreamweavser einzusteigen, mal abgesehen davon, hab ich nur das.

Zum 1. Man baut mit keinem absichtlich Invaliden(also Fehlerhaften) Code! Weil sonst ist kann es nämlich gut sein, dass es zwar in einem Browser richtig angezeigt wird, 10 andere das aber komplett anders anzeigen
(Dafür sind die w3c-Richtlinien eingeführt worden, dass jeder Browserentwickler sich an diese hält, damit alles einheitlich aussieht.)

2. Dann downloaded man sich eben Scriptly fix
Das geht schnell, sind nur wenige Mb Und groß einarbeiten muss man sich da auch nicht
Bei Dreamwaver im Code-Bereich Strg+A und anschließend Strg+C drücken, zu Scriptly wechseln und in einer neuen Datei Strg+V drücken.
Scriptly ist einfach ein Editor, der dir die Sachen highlighted, in Elementen Vorschläge angibt, was du meinen könntest,..

3. Dein Code schaue ich mir gleich ein. Erstmal Frühstücken

Edit: Punkt 3 hatte ich vor, nur stieß ich an ein kleines Problem^^
Ich verstehe deinen Code nicht O_o Logische Gliederung?^^

stylegangsta · 19. November 2010

Zitat

Zum 1. Man baut mit keinem absichtlich Invaliden(also Fehlerhaften) Code! Weil sonst ist kann es nämlich gut sein, dass es zwar in einem Browser richtig angezeigt wird, 10 andere das aber komplett anders anzeigen

Hi Sarkkan, das it mir bekannt, aber da dies keine Internetseite wird, sondern in einem Online-Portal eingefügt wird (du weißt ja welches) spielt die Validierung keien Rolle. Denn das online portal stellt es in jedem Browser richtig dar. Warum auch immer.
Wie schon gesagft, mein Hauptproblem ist der Zeilenumbruch und der Zeielnabstand. Außerdem möchte ich rechts noch ein Spalte anlgene, für die Versandabwiucklung und links unter die Bilder noch zusätzliche Beschreibungen.

P.S. Mit diesem scripty klick ich nur blind durch die gegend

Greetz

Sören · 19. November 2010

Du hast das doch sicherlich nicht in allen Browsern ausgetestet oder? In einem Online-Portal wird dein Code aber auch eingefügt und der macht dann das Online-Portal invaldie.

stylegangsta · 19. November 2010

Zitat von "Sören"

Du hast das doch sicherlich nicht in allen Browsern ausgetestet oder? In einem Online-Portal wird dein Code aber auch eingefügt und der macht dann das Online-Portal invaldie.

Na ja, nicht wirklich, da das Online Portal dann meinen Artikel sogesehen als IFrame darstellt. Von daher ist Validierung auch relativ irrelevant dafür.
Das Problem an der ganzen Geschichte ist, dass ich in dem Online Portal weder JS, PHP, Iframe, cookies oder sonstiges verwenden darf. Also bleibt mir nur noch html bzw. css zur Auswahl übrig. Wenn ich den </div> der zu viel ist wegnehme, dann verschiebt sich alles. Warum auch immer. Daher muss ich den div der zu viel ist drin lassen. Ich bin echt am verzweifeln.

Greetz

lauras · 19. November 2010

Kannst du das ganze mal irgendwo hochladen, dass man es sich mal angucken kann?
Dein Code ist mir ehrlich gesagt zu unübersichtlich zum Durchgucken.

stylegangsta · 19. November 2010

Zitat von "lauras"

Kannst du das ganze mal irgendwo hochladen, dass man es sich mal angucken kann?
Dein Code ist mir ehrlich gesagt zu unübersichtlich zum Durchgucken.

Hallo Lauras,
hier ist die URL
http://www.polttech.de/test2

aber nur Mozilla stellt die Seite richtig dar. Explorer widerrum ganz anders, aber wie gesagt, die darstellung im Browser spielt keine grosse rolle, im Online portal wird es immer richtig dargestellt. Bis auf eine Kleinigkeit, die aber nicht so wichtig ist.

lauras · 19. November 2010

Du arbeitest im WYSIWYG Modus, deshalb sieht dein Code auch so unordentlich aus.
Arbeite doch lieber mit dem Code und benutze Scriptly, das ist übersichtlicher und du findest deine Fehler schneller als mit diesem Code.
Aus WYSIWYG kann keine guter Code werden, und solchen Code auf Fehler zu durchsuchen macht absolut keinen Spaß.

Gruß
Laura

stylegangsta · 19. November 2010

Hi Lauras,

danke für den Tipp. Ich habe einfach im dreamweaver html template angegeben und das wars. Und mit scriptly blick nit durch. Wie kann ich denn im Dreamweaver den Code umstellen nachträglich??

lauras · 20. November 2010

Indem du in den Code Bereich gehst und da reinschreibst...
Bei der Gelegenheit kannst du ihn gleich übersichtlicher machen und das CSS auslagern..

Gruß
Laura

stylegangsta · 23. November 2010

Hallo Zusammen,
der Aufbau usw. ist jetzt soweit korrekt und funktioniert.
Siehe hier:http://www.polttech.de/test2#
Wird in FF und IE auch korrekt dargestellt, aber das Problem ist. Man kann die Galeriebilder vergörßern, wenn man draufklickt. Wenn man aber mehrere hintereinander vergrößert ohne das vorherige zu schließen, öffnen sie sich alle übereinander. Ist ja eigentlich auch normal für CSS glaube ich. Aber gibt es einen Befehl zum Beispeil, dass das vorherige geöffnete Bild geschlossen wird, sobald man ein andere auswählt?

Danke

Sarkkan · 23. November 2010

Naja.. das ist normalerweise überhaupt nicht normal für CSS, da es in CSS nicht möglich ist, den Zustand eines Elementes dauerhaft (nach vollständigem Laden der Seite) zu verändern. Du verwendest hier JavaScript
Und theoretisch müsstest du eine Funktion schreiben, die überprüft, ob schon ein Bild offen is, wenn ja soll dieses geschlossen werden, wenn nein, dann kann direkt das nächste geöffnet werden.

So ungefähr müsste das dann ungefähr aussehen:

Code

var offen = false;




function openGalerie(Id){
    if(offen != false){
        document.getElementById(offen).style.display = "none";
        offen = false;
    }
    document.getElementById(Id).style.display = "block";
    offen = Id;
}

Alles anzeigen

Es wird eben überprüft, ob offen den Wert 'false' hat, wenn dem so ist, dann wird einfach das Objekt angezeigt und in dessen Id in die Variabel reingeschrieben, sollte er aber einen anderen Wert haben, so wird erst dieses geschlossen.
Musst dem entsprechen aber auch jedes X (zum schließen) mit einer Funktion versehen, durch die das Element verschwindet und der var offen der Wert false gegeben wird.

stylegangsta · 23. November 2010

Hi Sarkkan,
danke werds direkt probieren, aber wie soll ich denn das X mit der funktion versehen?

Greetz

stylegangsta · 23. November 2010

Tut sich noch nichts und der ganze Befehl wird als Fehler angezeigt.
Nur grüne zickzack linien darunter

Dreamwaver akzeptiert keien max-width

Jetzt mitmachen!

Teilen