Dreamweaver übernimmt plötzlich keine Einstellung mehr...

**SWISSPILOT** · 17.04.2010 17:52

Hallo zusammen

Für meine Webseite habe ich zwei Vorlagen erstellt: eine Hauptvorlage, und eine sog. "Subvorlage". Beide sind grafisch identisch, unterscheiden sich jedoch dadurch, dass die Subvorlage für Unterseiten mit einer zusätzlichen Navigation in der Sidebar ausgestattet ist.

Ganz allgemein stellt man ja beispielsweise das Verhalten der Hyperlinks wie folgt ein:
> Im Eigenschaftsinspektor (Registerkarte HTML) auf "Seiteneigenschaften" klicken
> Dann auf "Hyperlinks (CSS)"
> Dann kann man das Verhalten (d.h. Farben, unterstrichen, etc.) einstellen.
> Anschliessend auf ANWENDEN und OK klicken

Dies hat bisher immer gut geklappt. Als ich jedoch bei der Hauptvorlage die Formatierung für "Überschrift 3" ändern wollte, übernahm Dreamweaver einfach nicht meine Einstelllungen.
Dasselbe nun auch in der Subvorlage: dort wollte ich die Hyperlinks dem gleichen Farbschema bzw. Farbverhalten wie jene Hyperlinks der Hauptvorlage anpassen. Ich nahm also die nötigen Einstellungen (siehe oben) vor und klickte anschliessend auf ANWENDEN und OK. Die Hyperlinks färbten sich in die korrekte Farbe, jedoch fehlt das Verhalten beim aktiven und rollover Hyperlink (also dann, wenn die Maus sich über dem Link befindet bzw. darauf geklickt hat) komplett. Auch nach diversem umstellen, diversem ausprobieren hat Dreamweaver einfach nicht die Farben dementsprechend übernommen!

>> Folgendes Bild verdeutlicht das Problem nochmals:

Hier sieht man, dass ich für die Hyperlinks (ein Beispiellink ist ebenfalls auf dem Bild erkennbar, als "Link" direkt über "Untertitel") wie wild irgendwelche Farben ausgewählt habe. Bei diesem Zustand habe ich bereits mehrmals auf ANWENDEN und anschliessend auf OK geklickt, keine Änderungen sind geschehen.

>> Wo liegt das Problem?

Herzlichen Dank für eure Hilfe

Tobias
- www.swiss-pilot.ch -

**Rinaldo** · 17.04.2010 22:20

Ohne einen Ausschnitt des Quelltextes - Verdacht: Der Link hat eine andere Klasse, als die, die Du gerade definieren willst?

**SWISSPILOT** · 18.04.2010 11:24

Hallo,

Den Quellcode für die Subvorlage sieht wie folgt aus:

HTML

Code:

<!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=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Unbenanntes Dokument</title>
<!-- TemplateEndEditable -->
<link href="../stylesheets/layout.css" rel="stylesheet" type="text/css" />
<link href="../stylesheets/sublayout.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
<style type="text/css"> 
/* Fügen Sie CSS-Box-Modell-Korrekturen für IE 5* in diesen bedingten Kommentar ein. */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* Fügen Sie CSS-Korrekturen für alle IE-Versionen in diesen bedingten Kommentar ein. */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* Mit der obigen proprietären Zoom-Eigenschaft wird IE die Eigenschaft hasLayout zugewiesen, die zur Verhinderung verschiedener Fehler erforderlich ist. */
</style>
<![endif]-->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /><style type="text/css">
<!--
a:link {
	color: #003577;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #003577;
}
a:hover {
	text-decoration: underline;
	color: #ee9911;
}
a:active {
	text-decoration: underline;
	color: #ee9911;
}
-->
</style></head>

<body class="twoColFixLtHdr">

<div id="container">
  <div id="header">
    <h1><img src="../images/swisspilot_logo.png" width="257" height="49" hspace="20" vspace="35" /></h1>
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="../index.html">Home</a></li>
      <li><a href="../ueber_mich.html">&Uuml;ber mich</a></li>
      <li><a href="../pilotenberuf.html">Pilotenberuf</a></li>
      <li><a href="../berichte.html">Erfahrungsbericht</a></li>
      <li><a href="../bilder_filme.html">Bilder und Filme</a></li>
      <li><a href="../downloads.html">Downloads</a></li>
      <li><a href="../kontakt.html">Kontakt</a></li>
    </ul>
  </div>
  <div id="sidebar1"><!-- TemplateBeginEditable name="Sidebar" -->
    <div>Navigation<br />
    </div>
    <p>Die Hintergrundfarbe f&uuml;r dieses div wird nur f&uuml;r die L&auml;nge des Inhalts angezeigt. Sollten Sie eine Trennlinie bevorzugen, f&uuml;gen Sie der CSS-Regel des entsprechenden Divs (#sidebar oder #mainContent) eine Rahmen-Eigenschaft hinzu.</p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
  <!-- TemplateEndEditable -->
  <!-- end #sidebar1 --></div>
  <div id="mainContent"><!-- TemplateBeginEditable name="Hauptinhalt" -->
    <h2> Inhalts&uuml;berschrift</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    <p><a href="../filme.html">Link</a></p>
    <h3>Untertitel</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
  <!-- TemplateEndEditable -->
  <!-- end #mainContent --></div>
	<!-- Dieses clear-Element sollte direkt auf das #mainContent-div folgen, um das #container-div anzuweisen, alle untergeordneten Floats aufzunehmen. --><br class="clearfloat" />
  <div id="footer">
    <p><a href="../kontakt.html"><strong>Kontakt</strong></a> | <a href="../impressum.html"><strong>Impressum</strong></a> | <a href="../disclaimer.html"><strong>Disclaimer</strong></a> | &copy;2010&nbsp;SWISSPILOT</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

subvorlage.css

Code:

@charset "iso-8859-1";
body {
	margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
	padding: 0;
	text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
	color: #000000;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 100%;
	background-color: #FFF;
	font-style: normal;
	font-variant: normal;
}
.twoColFixLtHdr #container {
	width: 1024px;
	text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
	background-image: url(../images/content.gif);
	background-repeat: repeat-y;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
} 
.twoColFixLtHdr #header {
	padding: 0;  /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die Auffüllung entfernen. */
	background-color: #DDDDDD;
	background-image: url(../images/header.gif);
	background-repeat: no-repeat;
	height: 115px;
} 
.twoColFixLtHdr #header h1 {
	margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
	padding: 10px 0; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */
}
.twoColFixLtHdr #mainContent {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 20px;
	text-align: justify;
	padding-top: 45px;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 20px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 225px;
} 
.twoColFixLtHdr #sidebar1 {
	float: left; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
	width: 185px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 20px;
	text-align: justify;
	padding-top: 30px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 30px;
	left: auto;
	clip: rect(auto,auto,auto,10px);
	top: auto;
	right: auto;
	bottom: auto;
	clear: left;
}
.twoColFixLtHdr #container #mainContent p a {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #003577;
}

.twoColFixLtHdr #footer {
	padding: 0;
	background-color: #FFF;
	background-image: url(../images/footer.png);
	background-repeat: no-repeat;
} 
.twoColFixLtHdr #footer p {
	margin: 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 75%;
	color: #777777;
	text-align: center;
	padding-top: 35px;
	padding-right: 0;
	padding-bottom: 10px;
}
.twoColFixLtHdr #container #header h1 a img {

}
.twoColFixLtHdr #container #mainContent h2 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	letter-spacing: 3.5px;
	color: #003577;
	font-weight: bolder;
}
.twoColFixLtHdr #container #footer p a {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #777777;
	text-decoration: none;
}
.twoColFixLtHdr #container #mainContent h3 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	letter-spacing: 3px;
	color: #000;
	font-weight: bold;
}
.twoColFixLtHdr #container #mainContent div {
	border: 1px solid #cccccc;
	margin: auto;
	width: 900px;
	background-color: #f4f4f4;
}

.twoColFixLtHdr #container #mainContent div table {
	text-align: justify;
}
.twoColFixLtHdr #container #sidebar1 div {
	width: 190px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #003577;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: normal;
	font-weight: bold;
	color: #003577;
}


.fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das floatende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

Nochmals als grafische Verdeutlichung:

Sieht alles etwas verwirrend aus, deshalb nochmals kurz erklärt:
BLAU: Wählt man den blauen Weg, so hat die Veränderung nur eine Auswirkung auf die Links in der Sidebar. In meinem Buch wird dieser Weg aber dafür verwendet, um Links auf der gesamten Homepage zu gestalten (im Buch wurde einfach keine Sidebar verwendet).
ROT: im Hauptbereich sieht der Link schon etwas anders aus (fett/bold). Jedoch verhält sich dieser Link nicht so, wie er sollte. Bei einem aktiven Link sollte z.B. die Farbe auf organge springen. Wie man aber sieht (auf dem Bild im roten Kasten rechts) ist die Farbe Orange durchgestrichen. Warum? Wie ändere ich das?

Herzlichen Dank für eure Hilfe,
Gruss Tobias

zur Startseite vom TP

Thema: Dreamweaver übernimmt plötzlich keine Einstellung mehr...

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Dreamweaver übernimmt plötzlich keine Einstellung mehr...

Ähnliche Themen

AE übernimmt keine GIF Transparenz?

Keine 2 Datei erweiterungen mehr im 2004 dreamweaver?

Plötzlich keine Netzwerkverbindung mehr/Airport

W2k Moz. Firebird hat plötzlich keine Bookmarks Toolbar mehr

Email übernimmt keine Formulardaten

Aktive Benutzer

Aktive Benutzer