Zurück   PSD-Tutorials.de > Webbereich > Allgemeines
Seite neu laden Dreamweaver 2 Gifs position
Interessengemeinschaften Kostenlos registrieren Kalender Suchen Letzte 24h Alle Foren als gelesen markieren


Antwort
 
Themen-Optionen
Alt 01.08.2012, 13:08   #1 Nach oben scrollen
Newbie
Newbie
 

Registriert seit: 29.07.2010
Ort: Darmstadt
Beiträge: 88
Kamera: Nikon 3000
Verwendet: Adobe CS5 Web Suite

Dreamweaver 2 Gifs position

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;

}
  Mit Zitat antworten


Alt 01.08.2012, 13:20   #2 Nach oben scrollen
Powerposter
PowerposterPowerposterPowerposter
 

Registriert seit: 01.11.2007
Ort: Ö
Beiträge: 1.262
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.
  Mit Zitat antworten
Alt 01.08.2012, 14:38   #3 Nach oben scrollen
Newbie
Newbie
Themenstarter
 

Registriert seit: 29.07.2010
Ort: Darmstadt
Beiträge: 88
Kamera: Nikon 3000
Verwendet: Adobe CS5 Web Suite
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
  Mit Zitat antworten
Alt 01.08.2012, 15:12   #4 Nach oben scrollen
Powerposter
PowerposterPowerposterPowerposter
 

Registriert seit: 01.11.2007
Ort: Ö
Beiträge: 1.262
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.
  Mit Zitat antworten
Alt 01.08.2012, 15:22   #5 Nach oben scrollen
Newbie
Newbie
Themenstarter
 

Registriert seit: 29.07.2010
Ort: Darmstadt
Beiträge: 88
Kamera: Nikon 3000
Verwendet: Adobe CS5 Web Suite
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
  Mit Zitat antworten
Alt 01.08.2012, 15:34   #6 Nach oben scrollen
Powerposter
PowerposterPowerposterPowerposter
 

Registriert seit: 01.11.2007
Ort: Ö
Beiträge: 1.262
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.
  Mit Zitat antworten
Alt 01.08.2012, 15:47   #7 Nach oben scrollen
Newbie
Newbie
Themenstarter
 

Registriert seit: 29.07.2010
Ort: Darmstadt
Beiträge: 88
Kamera: Nikon 3000
Verwendet: Adobe CS5 Web Suite

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
Geändert von TommiH (01.08.2012 um 15:57 Uhr).
  Mit Zitat antworten
Alt 01.08.2012, 16:15   #8 Nach oben scrollen
Powerposter
PowerposterPowerposterPowerposter
 

Registriert seit: 01.11.2007
Ort: Ö
Beiträge: 1.262
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?
  Mit Zitat antworten
Alt 01.08.2012, 16:26   #9 Nach oben scrollen
Newbie
Newbie
Themenstarter
 

Registriert seit: 29.07.2010
Ort: Darmstadt
Beiträge: 88
Kamera: Nikon 3000
Verwendet: Adobe CS5 Web Suite
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
  Mit Zitat antworten
Alt 01.08.2012, 16:32   #10 Nach oben scrollen
Powerposter
PowerposterPowerposterPowerposter
 

Registriert seit: 01.11.2007
Ort: Ö
Beiträge: 1.262
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.
  Mit Zitat antworten
Alt 01.08.2012, 16:41   #11 Nach oben scrollen
Newbie
Newbie
Themenstarter
 

Registriert seit: 29.07.2010
Ort: Darmstadt
Beiträge: 88
Kamera: Nikon 3000
Verwendet: Adobe CS5 Web Suite
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
Geändert von TommiH (01.08.2012 um 16:46 Uhr).
  Mit Zitat antworten
Alt 01.08.2012, 17:03   #12 Nach oben scrollen
Powerposter
PowerposterPowerposterPowerposter
 

Registriert seit: 01.11.2007
Ort: Ö
Beiträge: 1.262
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
  Mit Zitat antworten
Alt 01.08.2012, 17:44   #13 Nach oben scrollen
Newbie
Newbie
Themenstarter
 

Registriert seit: 29.07.2010
Ort: Darmstadt
Beiträge: 88
Kamera: Nikon 3000
Verwendet: Adobe CS5 Web Suite
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
  Mit Zitat antworten
Antwort

« Vorheriges Thema | Nächstes Thema »

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 
Themen-Optionen


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
animierte Gifs bumble Photoshop 22 06.10.2011 09:21
3D Gifs Seppalot Photoshop 6 09.09.2011 10:38
[CSS] position absolute unter position relaitve JPS (X)HTML & CSS 3 21.02.2011 05:04
[Dreamweaver CS4] Absolute & Relative Position - Referenzpunkt und Probleme WebSite Tschisma Allgemeines 16 16.02.2010 13:19
CS3 und animierte GIFs Shiranai Photoshop 9 25.08.2007 01:05