Dreamweaver 2 Gifs position

TommiH · 01.08.2012

Hallo,
ich habe folgendes Problem.
Auf eine gif Bild im Header, soll ganz rechts ein anderes gif (animiert)
liegen.
In Dreamweaver, wird es mir richtig angezeigt, im Browser steht es allerdings
in der Mitte.
Anbei noch ein Screen vom Browser

Vielen Dank für die Hilfe

Thomas

Eintrag in die index Datei
..
<body>
<div id="head">

<h1><span>Thomas</span> Reiseladen</h1>
<angif>
<img src="animation/Traumspruenge_work2_animiert.gif" width="150" height="90" />
</angif>
</div>
..

In der CSS dieses

body {
position:relative;
background:#ffffff url(images/body_bg_th.jpg) repeat-y;
width:1021px;
margin:0 auto;
text-align:center;
}

/* Header definieren */

div#head {
/*position:relative;
background:url(images/header_th.jpg) no-repeat;
width:1021px;
height:129px;
margin:0 auto;*/

background-image: url(images/header_th.jpg);

background-repeat: no-repeat;

width:1021px;

height:129px;
margin:0 auto
/*height: 90px;
padding: 0px;
margin: 0px;
text-align: right;
line-height: 1px;
font-size: 300%;
overflow: hidden;
letter-spacing: 5px;*/

}

angif {
text-align:right;
position:right;

}

Myhar · 01.08.2012

AW: Dreamweaver 2 Gifs position

Was soll angif für ein Element sein? Das gibt es nicht.
Nimm bitte das nächste mal auch die Code Funktion des Editors.:

Code:

<img src="animation/Traumspruenge_work2_animiert.gif" width="150" height="90" />

Das ist vollkommen ausreichend. Mittels floating von der h1 kannst du es neben dem anderen Element anzeigen lassen.

Du hast übrigens jetzt schon eine große Unordnung in deinem Code, ein wenig sauberer Arbeiten ist nie verkehrt.

Und als weiteren Hinweis: Die Vorschau von DW vergiss komplett, kein Mensch surft mit DW durch das Internet.

TommiH · 01.08.2012

AW: Dreamweaver 2 Gifs position

Sorry,

habe ich nicht ganz verstanden. angif habe ich in der css definiert. Ist wohl aber murks.
Was müsste ich denn genau machen? Der Code bringe ich noch in Form.

Danke

Thomas

Myhar · 01.08.2012

AW: Dreamweaver 2 Gifs position

Es ist egal, ob du angif in der css definiert hast. Wie kommst du überhaupt darauf?
Der Code, den ich gepostet habe, ist ausreichend für dein animiertes gif. Das angif drumherum lässt du also weg.

TommiH · 01.08.2012

AW: Dreamweaver 2 Gifs position

Also den Code in die <h1> </h> kopieren.
Das hatte ich versucht, dann ist aber das Gif weg (man sieht es nicht mehr).
ich glaube, da hänge ich etwas durch - sorry

Grüße

Thomas

Myhar · 01.08.2012

AW: Dreamweaver 2 Gifs position

Wo ist das gif weg? Im Browser?

Code:

<h1><span>Thomas</span> Reiseladen  <img src="animation/Traumspruenge_work2_animiert.gif" width="150" height="90" /> </h1>

oder auch so:

<h1><span>Thomas</span> Reiseladen  </h1>
<img src="animation/Traumspruenge_work2_animiert.gif" width="150" height="90" /> 

Je nachdem, was semantisch korrekt ist in deinem Zusammenhang.

Was sagt dir Firebug zu der Grafik? Wird sie nicht geladen? Dann stimmt der Pfad nicht. Oder wird sie geladen und nicht angezeigt? Dann stimmt das CSS nicht.

TommiH · 01.08.2012

AW: Dreamweaver 2 Gifs position

Also, wenn ich die erste Variante von Dir nehme, wird das gif nicht in Dreamweaver und im Browser Safari und Firefox angezeigt.
<h1><span>Thomas</span> Reiseladen <img src="animation/Traumspruenge_work2_animiert.gif" width="150" height="90" /> </h1>

Bei der zweiten Variante, wird das gif in die Mitte vom Kopf positioniert, so wie in dem Bild (erster Post von mir) zu sehen ist.
<h1><span>Thomas</span> Reiseladen </h1>
<img src="animation/Traumspruenge_work2_animiert.gif" width="150" height="90" />

Eine Fehlermeldung bekomme ich nicht

Sorry

Grüße
Thomas

Myhar · 01.08.2012

AW: Dreamweaver 2 Gifs position

Fehlermeldung wirst du auch nicht bekommen, da eine nicht verfügbare Ressource keine Fehlermeldung auslöst. Nimm dir Firebug und untersuch das Element. Beim drüberfahren wird dir das Bild angezeigt. Oder auch im Netzwerktab werden dir die Ressourcen angezeigt. Aber da es beim zweiten Versuch angezeigt wird, ist davon auszugehen, dass das Bild wohl geladen wird.
Hier wieder von mir die Bitte: Verwende doch die Code Werkzeuge des Forums, um Code zu posten.
Zu deinem Problem: Nimm dir Firebug und untersuch das Element. Wenn du Firebug nicht hast, dann schleunigst installieren. Das ist Grundvoraussetzung zum Entwerfen von Websites. Und vergiss die Vorschau im DW

Ich nehme an, dass du das Bild in der h1 durch dein CSS ausblendest.
Zu Lösung zwei kannst du auch meinen ersten Beitrag lesen: Du musst h1 floaten um das gewünschte Ergebnis zu erzielen.
h1 ist ein Blockelement, neben dem kann nichts stehen. Außer es wird gefloatet.

Ist das eine Seite, welche Kunden ansprechen soll? Oder nur ein Übungsprojekt zum erlernen von HTML/CSS?

TommiH · 01.08.2012

AW: Dreamweaver 2 Gifs position

ist nur eine Seite zum lernen.
hier noch das css von h1

h1 {
color:#c4af8e;
font:22px bold Verdana,Tahoma,Geneva;
text-transform:uppercase;
text-decoration:none;
padding:5px 35px 0 45px;
text-align:right;
float: right;
}

und das aus dem index
<h1><span>Thomas</span> Reiseladen </h1>
<img src="animation/Traumspruenge_work2_animiert.gif" width="150" height="90" />

</div>
Ups noch das div vom header in dem das ganze eingebunden ist

div#head {

background-image: url(images/header_th.jpg);
background-repeat: no-repeat;
width:1021px;
height:129px;
margin:0 auto;
margin-top: 20px;

}

werde mir Firebug mal besorgen, hoffe es gibt es für MAC

Echt Danke für Deine Mühe
Grüße
Thomas

Myhar · 01.08.2012

AW: Dreamweaver 2 Gifs position

Zum dritten Mal: Verwende die CODE Funktionen des Editors hier auf psd-Tutorials. So kann deinen Code keiner lesen. Bearbeite mal deine Beiträge, damit der Code leserlicher wird.

Und Firebug ist ein Plugin für Firefox. Das ist Betriebssystemunabhängig. Spiele dich mit Firebug um die Funktionsweise herauszufinden. Du kannst damit live CSS/HTML ändern und die Auswirkungen ansehen. Unverzichtbar.

TommiH · 01.08.2012

AW: Dreamweaver 2 Gifs position

OK,
aber was meinst Du mit den CODE Funktionen hier im psd???
Langsam zweifel ich an mir

ICH habe den Fehler gefunden

Ich habe den Text in h1 ausgeblendet und somit auch das gif!
Da der Text nur zur Dok zwecken sein sollte.
/* Header H1 Text ausblenden
div#head h1 {
display:none;
}*/
Wer richtig schaut, kommt weiter -

Thomas

Myhar · 01.08.2012

AW: Dreamweaver 2 Gifs position

Die Code Funktion gibt es, wenn man auf Antworten klickt. Alternativ kann man auch [ CODE ] und [ /CODE ] schreiben (ohne die Leerzeichen)
Dadurch wird Code lesbar formatiert, wie in meinem Post.
Warst du bis jetzt nur im Schnellantwort Fenster, dann siehst du diese Funktion wohl gar nicht.
Du blendest damit nicht nur den Text aus, sondern die gesamte h1. Display:none ist so, als wäre es gar nicht im Dokument vorhanden. Das berücksichtigt zB auch google.

Hast du den Fehler mittels Firebug gefunden? Wenn ja, sehr gut

TommiH · 01.08.2012

AW: Dreamweaver 2 Gifs position

Den Fehler habe ich gefunden,
als ich in der letzten Antwort den Code kopiert habe.
Da sah ich den Fehler.
Firebug suche ich nur, da Wetter ist einfach zu toll, um nur am PC zu hängen

Vielen Dank und Grüße

Thomas