Transparentes Logo (auf Flash Logo Diashow / rotator)

jpn · 18.12.2009, 22:00

Hallo,

auf einigen Beispielseiten (etwa hier) sieht man ein transparentes logo auf dem eigentlichen logo/eyecatcher (image rotator / Diashow). Denke mal das funktioniert, indem man sich quasi ein zweites logo definiert (in der navigations.ccml) und dieses dann in der style design positioniert. Richtig? Wie müßte die Position für das Design Pythagoras definiert werden? Hab diesbezüglich schon einiges ausprobiert, aber bisher ohne Erfolg ....

THX.

jpn · 18.12.2009, 22:08

Um noch etwas konkreter zu werden:

navigations ccml

Code:

<div id="headerwrap">
<div id="header">
</div>
</div>

<div id="mylogo">

<div id="logo">

Wäre dieser Ansatz ok????

Und dann in der design style.css positionieren:

Code:

#header
{
    width: 100%;
    background: <cc:print value="&usercolor.medium"> url(../images/<cc:print value="&pic.header.filename">) no-repeat center 10px;
    height: 80px;
}

#cumuluswolke
{
    position: absolute;
    left: 47%;
    margin-left: -450px;
    margin-top: 80px;
    width: 600px;
}

#mylogo 
{
    position: absolute;
    left: 50%;
    width: 178px;
    padding: 5px 20px;
    margin-left: -450px;
    top: 360px;
    filter:Alpha(opacity=90);
    -moz-opacity:0.90;
    opacity:90%;

#logo 
{
    width: 100%;
    height: 300px;
    background: <cc:print value="&usercolor.alt.medium"> url(../images/<cc:print value="&pic.logo.filename">) no-repeat top center;
}

Anm.: mir geht's erst mal um's Prinzip. :-)
Die Positionsangeben oben sind noch nicht ok - das weiß ich.

***voodoo36*** · 18.12.2009, 22:11

Hallo Jan,
1. zuerst das Bild in der Global.ccml definieren...
<cc:picture obj="mein_bild" src="mein_bild.gif" dst="mein_bild.gif">

2.Dann kopierst du dein Bild in dein Design Ordner

3.Dann in der style_design.css
#meinbild
{
position: absolute;
left: 50%;
margin-left: 240px;
margin-top: 300px;
width: 220px;
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity: 0.70;
}

4.dann in der navigation.ccml

<div id="meinbild">
<a href="http://www.meine-domain.de"><img title="meine Homepage" border="0" src="http://www.meine-domain.de/imagin/mein_bild.gif" idth="204" height="48"></a><br>
</div>

Evtl. muss noch angepasst werden!

jpn · 18.12.2009, 22:19

Hi! :-)
Hab' schon befürchtet, dass es wieder mal komplizierter ist, als gedacht. Aber dafür hat dieses Forum ja Dich! :-) Danke!!

Werde deinen Vorschlag umsetzen und dann berichten ... (kann bissle dauern).

EDIT: wo schreib ich das rein in die global.ccml? Ganz unten oder ... oder egal?

***voodoo36*** · 18.12.2009, 22:37

Nein, das ist ganz einfach... habe das mal schnell eingefügt!

jpn · 18.12.2009, 22:42

Hmmm.... W2D meldet mir beim Erstellen der Seite ein Problem:

[global.ccml] Zeile 72: Syntaxfehler im Ausdruck: src=pic_mylogo.gif dst=".

Was hab ich falsch gemacht?

Meine global.ccml sieht so aus:

Code:

<cc:*>
...
</cc:*>

<cc:picture obj="pic.bullet" dst="pbull.gif" src="pic_bullet.gif" incolor.a="#000000" 

outcolor.a="&usercolor.alt.dark">
<cc:picture obj="pic.search" dst="psearch.gif" src="pic_search.gif" incolor.a="#000000" outcolor.a="#444444">

<cc:button  name="button.s2d"
            fontname="Tahoma"
            fontsize="9"
            fontbold="0"
            smooth="0"
            textcolor="#444444"
            src="pic_button.gif">

<cc:makebutton    obj="pic.sendbutton" text="&site.ressource.submit" name="button.s2d" dst="w2dsbmt.gif">

<cc:if cond="&site.isshop">

<cc:picture obj="pic.trash" src="pic_trash.gif" dst="ptrsh.gif" incolor.a="#000000" outcolor.a="#666666">
<cc:picture obj="pic.status.red" src="pic_status_red.gif" dst="pstrd.gif">
<cc:picture obj="pic.status.yellow" src="pic_status_yellow.gif" dst="pstyl.gif">
<cc:picture obj="pic.status.green" src="pic_status_green.gif" dst="pstgr.gif">

<cc:if cond="&site.tsid">
    <cc:tslogo obj="pic.tslogo" width="170" color="#f5f5f5" dst="tslogo.gif">
    <cc:tslogo obj="pic.tsseal" width="90" color="#ffffff" dst="tsseal.gif">
</cc:if>

<cc:include src="shopincludes.ccml" common="1">

<cc:picture obj="pic.putsmallbutton"
            src="pic_putsmallbutton.gif"
            dst="bskt.gif"
            text="&site.ressource.basketput"
            textcolor="#444444"
            fontname="Tahoma"
            fontbold="0"
            textalign="left"
            textvalign="middle"
            fontsize="8"
            textleft="30"
            textright="15"
            crop="1"
            bordercolor="#DEDEDE">

</cc:if>

<cc:picture obj="pic.header"
            src="pic_header.gif"
            dst="phdr.gif"
            text="&site.caption"
            textcolor="#ffffff"
            textalign="left"
            textvalign="top"
            fontname="EuralDB"
            smooth="2"
            fontbold="0"
            fontsize="20"
            incolor.a="#000000"
            outcolor.a="&usercolor.medium">

<cc:picture obj="pic.background" src="pic_background.gif" dst="pbgr.gif">
<cc:picture obj="mylogo" src="pic_mylogo.gif  dst="pic_mylogo.gif">


<cc:asset src="&site.stylesheet" dst="sf.css" obj="myfontstyle">
<cc:asset src="style_content.css" dst="sc.css" obj="mycontentstyle">
<cc:asset src="style_design.css" dst="sd.css" obj="mydesignstyle">

<cc:picture obj="pic_logo_001" src="pic_logo_001.jpg">
<cc:picture obj="pic_logo_002" src="pic_logo_002.jpg">
<cc:picture obj="pic_logo_003" src="pic_logo_003.jpg">
<cc:picture obj="pic_logo_004" src="pic_logo_004.jpg">
<cc:picture obj="pic_logo_005" src="pic_logo_005.jpg">
<cc:picture obj="pic_logo_006" src="pic_logo_006.jpg">
<cc:picture obj="pic_logo_007" src="pic_logo_007.jpg">
<cc:picture obj="pic_logo_008" src="pic_logo_008.jpg">
<cc:picture obj="pic_logo_009" src="pic_logo_009.jpg">
<cc:picture obj="pic_logo_010" src="pic_logo_010.jpg">
<cc:picture obj="pic_logo_011" src="pic_logo_011.jpg">
<cc:picture obj="pic_logo_012" src="pic_logo_012.jpg">

<cc:asset src="kopf.xml" dst="kopf.xml" obj="kopf">

***voodoo36*** · 18.12.2009, 22:50

Du hast dort einen Fehler " fehlt...

Code:

<cc:picture obj="pic.status.green" src="pic_status_green.gif" dst="pstgr.gif">
<cc:picture obj="pic_logo" src="pic_logo.jpg" dst="pic_logo.jpg">

jpn · 18.12.2009, 23:12

OK - hab's weiter hoch geschoben und bin von engl. nach deutsch gewechselt (aus pic_mylogo.gif hab ich mein_bild.gif gemacht). :-)
Ergebnis: der Syntaxfehler ist weg und das logo ist jetzt auf der webseite (online) zu sehen. Allerdings an der falschen Position (ganz links außen) und zu klein (im Original ist die "mein_bild.gif" 155x300px groß). KLICK

global.ccml

Code:

<cc:picture obj="pic.bullet" dst="pbull.gif" src="pic_bullet.gif" incolor.a="#000000" 

outcolor.a="&usercolor.alt.dark">
<cc:picture obj="pic.search" dst="psearch.gif" src="pic_search.gif" incolor.a="#000000" outcolor.a="#444444">

<cc:button  name="button.s2d"
            fontname="Tahoma"
            fontsize="9"
            fontbold="0"
            smooth="0"
            textcolor="#444444"
            src="pic_button.gif">

<cc:makebutton    obj="pic.sendbutton" text="&site.ressource.submit" name="button.s2d" dst="w2dsbmt.gif">

<cc:if cond="&site.isshop">

<cc:picture obj="pic.trash" src="pic_trash.gif" dst="ptrsh.gif" incolor.a="#000000" outcolor.a="#666666">
<cc:picture obj="pic.status.red" src="pic_status_red.gif" dst="pstrd.gif">
<cc:picture obj="pic.status.yellow" src="pic_status_yellow.gif" dst="pstyl.gif">
<cc:picture obj="pic.status.green" src="pic_status_green.gif" dst="pstgr.gif">
<cc:picture obj="mein_bild" src="mein_bild.gif" dst="mein_bild.gif">

<cc:if cond="&site.tsid">
    <cc:tslogo obj="pic.tslogo" width="170" color="#f5f5f5" dst="tslogo.gif">
    <cc:tslogo obj="pic.tsseal" width="90" color="#ffffff" dst="tsseal.gif">
</cc:if>

<cc:include src="shopincludes.ccml" common="1">

<cc:picture obj="pic.putsmallbutton"
            src="pic_putsmallbutton.gif"
            dst="bskt.gif"
            text="&site.ressource.basketput"
            textcolor="#444444"
            fontname="Tahoma"
            fontbold="0"
            textalign="left"
            textvalign="middle"
            fontsize="8"
            textleft="30"
            textright="15"
            crop="1"
            bordercolor="#DEDEDE">

</cc:if>

<cc:picture obj="pic.header"
            src="pic_header.gif"
            dst="phdr.gif"
            text="&site.caption"
            textcolor="#ffffff"
            textalign="left"
            textvalign="top"
            fontname="EuralDB"
            smooth="2"
            fontbold="0"
            fontsize="20"
            incolor.a="#000000"
            outcolor.a="&usercolor.medium">

<cc:picture obj="pic.background" src="pic_background.gif" dst="pbgr.gif">

<cc:asset src="&site.stylesheet" dst="sf.css" obj="myfontstyle">
<cc:asset src="style_content.css" dst="sc.css" obj="mycontentstyle">
<cc:asset src="style_design.css" dst="sd.css" obj="mydesignstyle">

<cc:picture obj="pic_logo_001" src="pic_logo_001.jpg">
<cc:picture obj="pic_logo_002" src="pic_logo_002.jpg">
<cc:picture obj="pic_logo_003" src="pic_logo_003.jpg">
<cc:picture obj="pic_logo_004" src="pic_logo_004.jpg">
<cc:picture obj="pic_logo_005" src="pic_logo_005.jpg">
<cc:picture obj="pic_logo_006" src="pic_logo_006.jpg">
<cc:picture obj="pic_logo_007" src="pic_logo_007.jpg">
<cc:picture obj="pic_logo_008" src="pic_logo_008.jpg">
<cc:picture obj="pic_logo_009" src="pic_logo_009.jpg">
<cc:picture obj="pic_logo_010" src="pic_logo_010.jpg">
<cc:picture obj="pic_logo_011" src="pic_logo_011.jpg">
<cc:picture obj="pic_logo_012" src="pic_logo_012.jpg">

<cc:asset src="kopf.xml" dst="kopf.xml" obj="kopf">

style design.css

Code:

#cumuluswolke
{
    position: absolute;
    left: 47%;
    margin-left: -450px;
    margin-top: 80px;
    width: 600px;
}

#mein_bild
{
    position: absolute;
    left: 50%;
    margin-left: 240px;
    margin-top: 300px;
    width: 220px;
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    opacity: 0.70;
}

#logo 
{
    width: 100%;
    height: 300px;
    background: <cc:print value="&usercolor.alt.medium"> url(../images/<cc:print 

value="&pic.logo.filename">) no-repeat top center;
}

navigation.ccml

Code:

<cc:print value="&site.htmlheader">
<cc:if cond="&site.googleanalytics.accountnumber"><cc:include src="google_analytics.ccml" common="1"></cc:if>

<div id="headerwrap">
<div id="header">
</div>
</div>

<div id="meinbild">
<a href="http://www.jpnuesken.de"><img title="meine_homepage" border="0" 

src="http://www.jpnuesken.de/mypics/mein_bild.gif" idth="204" height="48"></a><br>
</div>

<div id="logo">

jpn · 18.12.2009, 23:20

Die Größe stimmt jetzt. :-) - Hab die werte in der navigation.ccml angepasst.
Allerdings hängt es noch etwas zu tief. .... Gleich haben wir's. :-)

***voodoo36*** · 18.12.2009, 23:21

OK so weit so gut... jetzt nur das nötigste... in #meinbild

#meinbild
{
position: absolute;
margin-top: 70px;
margin-left: 1193px;
filter:alpha(opacity=70);
opacity: 0.70;
}

navigation.ccml grün anpassen (wusste ich nicht?)

<div id="meinbild">
<a href="http://www.meine-domain.de"><img title="meine Homepage" border="0" src="http://www.meine-domain.de/imagin/mein_bild.gif" width="60" height="60""></a><br>
</div>

18.12.2009, 22:00	#1 (permalink)
jpn Benutzer Registriert seit: 12.11.2009 Ort: Düsseldorf Beiträge: 70	Transparentes Logo (auf Flash Logo Diashow / rotator) Hallo, auf einigen Beispielseiten (etwa hier) sieht man ein transparentes logo auf dem eigentlichen logo/eyecatcher (image rotator / Diashow). Denke mal das funktioniert, indem man sich quasi ein zweites logo definiert (in der navigations.ccml) und dieses dann in der style design positioniert. Richtig? Wie müßte die Position für das Design Pythagoras definiert werden? Hab diesbezüglich schon einiges ausprobiert, aber bisher ohne Erfolg .... THX. __________________ Gruß Jan Geändert von jpn (18.12.2009 um 22:11 Uhr)

18.12.2009, 22:11	#3 (permalink)
*voodoo36* Administrator Registriert seit: 17.04.2009 Ort: Regensburg Beiträge: 4.224	AW: Transparentes Logo (auf Flash Logo Diashow / rotator) Hallo Jan, 1. zuerst das Bild in der Global.ccml definieren... <cc:picture obj="mein_bild" src="mein_bild.gif" dst="mein_bild.gif"> 2.Dann kopierst du dein Bild in dein Design Ordner 3.Dann in der style_design.css #meinbild { position: absolute; left: 50%; margin-left: 240px; margin-top: 300px; width: 220px; filter:alpha(opacity=70); -moz-opacity:0.70; opacity: 0.70; } 4.dann in der navigation.ccml <div id="meinbild"> <a href="http://www.meine-domain.de"><img title="meine Homepage" border="0" src="http://www.meine-domain.de/imagin/mein_bild.gif" idth="204" height="48"></a><br> </div> Evtl. muss noch angepasst werden! __________________ Grüße aus Bayern www.ts-design4you.de - www.boogie-rabbits.de

18.12.2009, 22:19	#4 (permalink)
jpn Benutzer Registriert seit: 12.11.2009 Ort: Düsseldorf Beiträge: 70	AW: Transparentes Logo (auf Flash Logo Diashow / rotator) Hi! :-) Hab' schon befürchtet, dass es wieder mal komplizierter ist, als gedacht. Aber dafür hat dieses Forum ja Dich! :-) Danke!! Werde deinen Vorschlag umsetzen und dann berichten ... (kann bissle dauern). EDIT: wo schreib ich das rein in die global.ccml? Ganz unten oder ... oder egal? __________________ Gruß Jan

18.12.2009, 22:37	#5 (permalink)
*voodoo36* Administrator Registriert seit: 17.04.2009 Ort: Regensburg Beiträge: 4.224	AW: Transparentes Logo (auf Flash Logo Diashow / rotator) Nein, das ist ganz einfach... habe das mal schnell eingefügt! __________________ Grüße aus Bayern www.ts-design4you.de - www.boogie-rabbits.de Geändert von voodoo36 (18.12.2009 um 22:43 Uhr)

18.12.2009, 22:50	#7 (permalink)
*voodoo36* Administrator Registriert seit: 17.04.2009 Ort: Regensburg Beiträge: 4.224	AW: Transparentes Logo (auf Flash Logo Diashow / rotator) Du hast dort einen Fehler " fehlt... Code: <cc:picture obj="pic.status.green" src="pic_status_green.gif" dst="pstgr.gif"> <cc:picture obj="pic_logo" src="pic_logo.jpg" dst="pic_logo.jpg"> __________________ Grüße aus Bayern www.ts-design4you.de - www.boogie-rabbits.de Geändert von voodoo36 (18.12.2009 um 23:03 Uhr)

18.12.2009, 23:20	#9 (permalink)
jpn Benutzer Registriert seit: 12.11.2009 Ort: Düsseldorf Beiträge: 70	AW: Transparentes Logo (auf Flash Logo Diashow / rotator) Die Größe stimmt jetzt. :-) - Hab die werte in der navigation.ccml angepasst. Allerdings hängt es noch etwas zu tief. .... Gleich haben wir's. :-) __________________ Gruß Jan

18.12.2009, 23:21	#10 (permalink)
*voodoo36* Administrator Registriert seit: 17.04.2009 Ort: Regensburg Beiträge: 4.224	AW: Transparentes Logo (auf Flash Logo Diashow / rotator) OK so weit so gut... jetzt nur das nötigste... in #meinbild #meinbild { position: absolute; margin-top: 70px; margin-left: 1193px; filter:alpha(opacity=70); opacity: 0.70; } navigation.ccml grün anpassen (wusste ich nicht?) <div id="meinbild"> <a href="http://www.meine-domain.de"><img title="meine Homepage" border="0" src="http://www.meine-domain.de/imagin/mein_bild.gif" width="60" height="60""></a><br> </div> __________________ Grüße aus Bayern www.ts-design4you.de - www.boogie-rabbits.de

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Logo aus Design austauschen	olequappa	Web to Date allgemein	7	18.12.2009 23:37
Logo verlinken?	dirtyfrank	Web to Date 6.0	2	10.11.2009 13:07
eigenes Logo einbinden	labelloo	Web to Date 6.0	1	30.10.2009 10:03
logo in der startseite mittig	hunter	Web to Date 5.0	2	21.09.2009 22:05
Eigenes Logo je Hauptseite	Heinz	Web to Date 5.0	1	19.09.2009 09:49