Suche im Forum:
Suchen


Autor Nachricht
Beitrag31.05.2017 um 02:06 (UTC)    
Titel: Header Problem bei CSS Design

Hallo,

ich versuche schon seit stunden eine Lösung für mein Problem zu finden,
aber ich komme einfach nicht weiter..
Da ich meine Grafiken alle selbst erstelle und gerne etwas bewegung im Header möchte, habe ich dementsprechend zwei SWF-Animationen erstellt..
________________________________________________________________________
Header 1 Blau: https://www.homepage-baukasten-dateien.de/rpg-designs/BlauHeader.swf
Header 1 Blau darf nur auf folgender Seite zu sehen sein: http://jabbadehood.de.tl/News.htm
________________________________________________________________________
Header 2 Rot: https://www.homepage-baukasten-dateien.de/rpg-designs/HeaderRot.swf
Header 2 Rot darf nur auf folgender Seite zu sehen sein: http://jabbadehood.de.tl/About.htm
________________________________________________________________________

Mein Hauptproblem ist wirklich der CSS Design Code..
Ab hier wird es unverständlich.. Meine SWF-Animationen (Header) funktionieren einwandfrei aber nur wenn ich diese mit folgendem Code in das Feld "Text über dem Design" einfüge..

<div id="headergrafik">
<iframe style="width: 854px; height: 480px;" src="https://www.homepage-baukasten-dateien.de/rpg-designs/BlauHeader.swf" >
</iframe>
</div>
________________________________________________________________________
CSS Code - Design (Bubblegaming/Ombadesigns)
________________________________________________________________________
<style type="text/css">
#headergrafik {
background-color: #000000;
background-image: url("https://img.webme.com/pic/j/jabbadehood/ContainerBlauFin.png");
background-repeat: no-repeat;
height: 490px;
margin-bottom: 93px;
margin-left: auto;
margin-right: auto;
margin-top: 120px;
opacity: 0.88;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
width: 860px;}
</style>
________________________________________________________________________

Es ist auch egal ob ich seperate Bilder für beide der 2 Seiten benutze..
Sobald ich an dem Header versuche das anderst hinzubekommen,
verschiebt sich alles und das Design wird teilweise krum und schief..
Einen festen Header zu installieren habe ich zwar hinbekommen,
aber dass sich der Header automatisch wechselt wenn man auf eine andere Seite klickt,
entzieht sich leider meiner Kenntniss Sad
________________________________________________________________________
Es muss doch irgendwie möglich sein das seiten abhängig in den Quellcode mit einzubauen oder nicht?
Weiß jemand eine Lösung für dieses Problem?
Kann jemand helfen?


Zuletzt bearbeitet von jabbadehood am 31.05.2017, 03:09, insgesamt 2-mal bearbeitet
Beitrag31.05.2017 um 10:37 (UTC)    
Titel:

Muss es denn zwingend Flash sein? Das wird auf Handys und Tablets ohnehin nicht angezeigt und auf meinem Computer habe ich Flash z.B. auch nicht mehr installiert. (veraltete Technik, zahlreiche Sicherheitslücken,...) Ich denke, dass einige deiner Besucher das also eh nicht zu Gesicht bekommen würden.
Da ich deine Flash-Files dementsprechend auch nicht betrachten kann weiß ich nicht, wieviel Bewegung darin ist, aber evtl. könntest du das auch mit GIFs oder aPNGs lösen. Am modernsten wäre es die Animation mit CSS nachzubauen, das können alle modernen Browser darstellen.
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)


Zuletzt bearbeitet von freefunstuff am 31.05.2017, 11:38, insgesamt einmal bearbeitet
Beitrag05.06.2017 um 16:17 (UTC)    
Titel:

Moin,

du könntest versuchen, das über eine absolute Positionierung des SWF-Elements zu lösen.
Du fügst das SWF-Element auf der Unterseite ein, auf der es erscheinen soll und schreibst in den Style-Tag (oder besser den CSS-Code) Folgendes:
Zitat:
position: absolute; left: 50%; top: XXpx; margin-left: -YYpx;

XX = Abstand in Pixeln von oben,
YY = Halbe Breite des SWF-Elements.
Dieser Code bewirkt Folgendes: position: absolute; sorgt dafür, dass das Element aus dem normalen Elementfluss genommen wird und frei positioniert werden kann. top: XXpx; bewirkt, dass die obere Kante des Elements XX Pixel vom oberen Seitenrand entfernt ist. Mit left: 50%; wird die linke Kante des Elements in die Mitte der Seite gebracht. Das ist wichtig, weil die Seite bei jeder Bildschirmbreite etwas anders aussieht. Mit margin -XXpx; wird dann die linke Kante des Elements wieder nach links verschoben, sodass das Element am Ende mittig platziert ist. Wichtig ist das - (Minus) vor der Zahlenangabe!

Absolute Positionierung ist nicht besonders schön und nicht das Mittel der Wahl, eben weil es vorkommen kann, dass Webseiten sich je nach Auflösung und Bildschirmgröße ungewollt verschieben.

Gruß, TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de