pcdfan
Mitglied
Dabei seit: 24.01.2007
Beiträge: 3.291
Herkunft: ortenaukreis
 |
|
| Einfache IFrame-Layouts Coden mit PhotoFiltre o.ä. |
     |
Also, da viele ja immer noch nicht wissen wie man codet, beschreibe ich es hier jetzt mal möglichst ausführlich!
1. Öffne den Editor und dein Gafik-Programm (bei mir PhotoFiltre)
2. Kopiere den Text hier in deinen Editor (markieren -> rechtsklick ,,Kopieren" -> Editor öffnen und rechtsklick ,,Einfügen"):
<html>
<head>
<title>%titel%</title>
<style type="text/css">
<!--
body {
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;
}
a:link {
color: #0000ff;
text-decoration:none;
}
a:visited {color: #0000ff;
text-decoration:none;
}
a:active {color: #ffffff;
text-decoration:none;
}
a:hover {color: #000000;
text-decoration:none;
}
-->
</style>
</head>
<body bgcolor="#ffffff" topmargin="0" leftmargin="0">
<img border="0" src="http://img3.myimg.de/Bougainvilliae89.gif" scroll="no" bgproperties="fixed"
ALIGN="left" STYLE="position: absolute; top: 0; left: 0" width="1024" height="610">
<div style="overflow: auto; position: absolute; width: 597; height: 320; left: 84; top: 226">
<font face="Verdana" size="2"><font color="#000000">%content%</font></font>
</div>
<div style="overflow: auto; position: absolute; width: 156; height: 213; left: 789; top: 328">
<font face="Verdana" size="3" color="#000000">%navigation_v%</font>
</div>
So...also ich Teile den Code mal in 3 Teile! 1. Teil ist ganz oben, von den Scrollbalken bis zum Aussehen des Desis.
Der 2. Teil ist %content% was soviel wie Main heißt.
Der 3. Teil ist %navigation_v% was soviel wie Navigation heißt.
Am besten fängt man mit dem Main an, die Zahlen muss man dann auch im 2. Teil eintragen, wenn man sie im 1. oder 3. Teil einträgt steht im main entweder die Links oder es wird in irgendeiner Weise das Design verändert.
Das ist mein Code, den ich für mein Design mal gemacht habe.
3. Lade irgendwo (z.B. bei http://www.myimg.de) das Design hoch und schreibe den Direktlink im 2. Teil anstatt der bisherigen Bildaddresse
src="http://img3.myimg.de/Bougainvilliae89.gif"
aber lösche nur http://img3.myimg.de/Bougainvilliae89.gif!!!!!!!!!!!!
Dort musst du dann nämlich deine Direkt-Addresse eintragen!
3. Nun öffne dein Design in deinem Grafik-Programm (bei mir PF)
4. Ziehe in deinem Main einen Kasten, nicht direkt auf dem Rand bitte, sonst hängt der Text total am rand und das sieht blöd aus!
5. trage die Werte unten, bei mir ,,H" und ,,B" in deinem 2. Teil bei ,,Hight" und ,,Widht" ein. Das müsste dann so aussehen (ohne den 1. und 3. Teil)
<div style="overflow: auto; position: absolute; width: 599; height: 532; left: 84; top: 226">
<font face="Verdana" size="2"><font color="#000000">%content%</font></font>
</div>
6. Jetzt kommt der etwas kompliziertere Teil!
Ziehe nun vom oberen linken Rand des Mains einen weiteren Kasten bis zum Ende des Designs!
Doch vorsicht! Du darfst den Kasten soviel nach unten ziehen wie du willst, aber bloß NICHT NACH OBEN!!!!! Jetzt stehen unten wieder die Werte. Trage bei left: die Zahl ein die jetzt bei B= steht! Nun weißt du Left.
7. Ziehe nun vom oberen rechten Rand deines jetzigen Kastens wieder einen Kasten, diesmal von dort aus nach OBEN!
Ob du noch nach links oder rechts ziehst ist egal, du darfst NUR NICHT NACH UNTEN einen Kasten ziehen!!!
Der Wert der jetzt bei ,,H=" steht musst du bei top: eintragen!
8. Mache nun das gleiche mit der Navi, nur im 3. Teil eintragen.
Tipps:
Schriftart ändern: Wenn du deine Schriftart ändern willst, schreibe den Schriftart-Name in deinen Teil 2 oder 3 unten anstatt ,,Verdana".
Schriftgröße ändern: Wenn du deine Schriftgröße ändern willst, schreibe die Schriftgröße in deinen Teil 2 oder 3 unten anstatt 1,5 oder 2.
Scrollbalkenfarbe ändern: Wenn du deine Scrollbalkenfarbe ändern willst tippe mit der Pipette (am besten) auf den Hintergrund deines Mains/deiner Navi. Dann klicke auf die farbe und der Hexcode müsste da stehen, den setzt du dort beim rot-markierten ein:
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;
Achja, bevor ich es vergesse, du musst noch die richtige BILDGRÖßE angeben!
Schaue nach welche Größe dein Desi hat und trage die Größe dann bei:
<img border="0" src="http://img3.myimg.de/Bougainvilliae89.gif" scroll="no" bgproperties="fixed"
ALIGN="left" STYLE="position: absolute; top: 0; left: 0" width="1024" height="610
">
ein.
Ich hoffe das ich helfen konnte, lg pcdfan
__________________
|
|
28.05.2007 12:41 |
|
|
Arschkeks
Hehe x'DD
Dabei seit: 27.02.2007
Beiträge: 317
Herkunft: Saarland aus Saarbrücken
|
|
Cooles tut danke...jetzt hab ich es kappiert xD
__________________
...feel the Moment...
|
|
|
28.05.2007 17:59 |
|
|
pcdfan
Mitglied
Dabei seit: 24.01.2007
Beiträge: 3.291
Herkunft: ortenaukreis
Themenstarter 
|
|
Danke. Hab jetzt auch noch dazu gelernt und kann jetzt auch Scrollbalken ändern xD
__________________
|
|
|
29.05.2007 09:27 |
|
|
Tigerlilly
Mitglied
Dabei seit: 25.03.2005
Beiträge: 7.265
|
|
Gehört wohl eher in den Homepagebereich, ich verschiebe mal.
|
|
|
20.07.2007 14:04 |
|
|
Patricia
When I found you, my heart found a home.
Dabei seit: 01.07.2005
Beiträge: 10.325
Herkunft: Schleswig-Holstein
|
|
Btw, der Effekt mit den andersfarbigen Scrollbalken funktioniert nicht im Mozilla Firefox. Wollte ich nur mal schnell gesagt haben. 
. Ansonsten ist es aber ein schönes Tutorial, sehr gut verständlich. (=
__________________
Deine Community im Netz!
Mit großem Downloadbereich für deinen VRH/dein RPG und netten Usern.
Wir freuen uns auf Dich! 
|
|
|
21.07.2007 00:48 |
|
|
Alex96
Halllllloooooooooo
Dabei seit: 19.05.2007
Beiträge: 2.719
Herkunft: Bayern
|
|
he vielen vielen dank pcdfan für deine super hilfe beim coden mit Photo Filtersuper erklärt auser ein oder 2 sachen die man aber beim denken leicht raus krigen kann.
3 Frage:
1: Wen du codest und dem Besizter des gecodete Desinges gibst und der es einbaut passt das gleich auf den schlag oder muss man da noch a bissal basteln?
2: Wie macht man das coden mit der navi links?
3: Kann man mit Photo Filter auch 3 Frames coden?
LG Alex
__________________
>.klick.<
© http://www.shizoo-design.de
|
|
|
23.07.2007 13:05 |
|
|
|
pcdfan
Mitglied
Dabei seit: 24.01.2007
Beiträge: 3.291
Herkunft: ortenaukreis
Themenstarter
|
|
| Zitat: |
Original von Alex96
he vielen vielen dank pcdfan für deine super hilfe beim coden mit Photo Filtersuper erklärt auser ein oder 2 sachen die man aber beim denken leicht raus krigen kann.
3 Frage:
1: Wen du codest und dem Besizter des gecodete Desinges gibst und der es einbaut passt das gleich auf den schlag oder muss man da noch a bissal basteln? Meistens passts direkt
2: Wie macht man das coden mit der navi links? genau gleich^^
3: Kann man mit Photo Filter auch 3 Frames coden? Jap^^ aber ich kann nur noch News-Box, Untermenü kann ich nich
LG Alex |
| Zitat: |
Orginal von Amy_S
Hi!
Also zuerst super erklärt abe ri-wie hab ich es doch noch nicht wirklich hinbekommen...könntest du mir vll. helfen? ICh kam nicht weiter bis zu Punkt 6 udn jetzt kapier ich dort garnichts mehr.
So sieht mein Code aus:
<html>
<head>
<title>%titel%</title>
<style type="text/css">
<!--
body {
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;
}
a:link {
color: #0000ff;
text-decoration:none;
}
a:visited {color: #0000ff;
text-decoration:none;
}
a:active {color: #ffffff;
text-decoration:none;
}
a:hover {color: #000000;
text-decoration:none;
}
-->
</style>
</head>
<body bgcolor="#ffffff" topmargin="0" leftmargin="0">
<img border="0" src="http://img5.myimg.de/Herbsthintergrunde5331.jpg" scroll="no" bgproperties="fixed"
ALIGN="left" STYLE="position: absolute; top: 0; left: 0" width="566" height="459">
<div style="overflow: auto; position: absolute; width: 597; height: 320; left: 84; top: 226">
<font face="Verdana" size="2"><font color="#000000">%content%</font></font>
</div>
<div style="overflow: auto; position: absolute; width: 151; height: 230; left: 789; top: 328">
<font face="Verdana" size="3" color="#000000">%navigation_v%</font>
</div>
|
Also du musst .. du hast ja einen Main-Kasten gezogen, stimmts? Dann musst du einfach vom oberen, linken Eck des Kastens einen neuen Kasten bis zum linken Designrand ziehen
Dann steht da unten Left oder so und das musst du dann nehmen 
@Katjaa:
Das ist der vereinfachte Code, mit dem kann man z.B. keine Scrollbalken-Effects o.ä. einbauen <3
__________________
|
|
|
28.08.2007 10:10 |
|
|
|
Alex96
Halllllloooooooooo
Dabei seit: 19.05.2007
Beiträge: 2.719
Herkunft: Bayern
|
|
|
|
27.09.2007 15:57 |
|
|
Twister
HE'S THE ONE <3 #_________________________
Dabei seit: 28.06.2007
Beiträge: 2.837
|
|
Gut Erklärt aber stimmt dieser Code?
<html>
<head>
<title>%VRH Caracas%</title>
<style type="text/css">
<!--
body {
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;
}
a:link {
color: #0000ff;
text-decoration:none;
}
a:visited {color: #0000ff;
text-decoration:none;
}
a:active {color: #ffffff;
text-decoration:none;
}
a:hover {color: #000000;
text-decoration:none;
}
-->
</style>
</head>
<body bgcolor="#ffffff" topmargin="0" leftmargin="0">
<img border="0" src="http://i26.photobucket.com/albums/c110/MaraHonegger/Design.png" scroll="no" bgproperties="fixed"
ALIGN="left" STYLE="position: absolute; top: 0; left: 0" width="1024" height="610">
<div style="overflow: auto; position: absolute; width: 634; height: 593; left: 208; top: 263">
<font face="Verdana" size="2"><font color="#000000">%content%</font></font>
</div>
<div style="overflow: auto; position: absolute; width: 128; height: 572; left: 7; top: 279">
<font face="Verdana" size="3" color="#000000">%navigation_v%</font>
</div>
__________________
|
|
|
04.09.2007 20:33 |
|
|
pcdfan
Mitglied
Dabei seit: 24.01.2007
Beiträge: 3.291
Herkunft: ortenaukreis
Themenstarter
|
|
Also ich hab dir das Desi gecodet und in deinem anderen Frage-Thread steht die Antwort
__________________
|
|
|
04.09.2007 21:31 |
|
|
Lara*
ehemals VPGDaSilva
Dabei seit: 27.09.2006
Beiträge: 1.666
|
|
Ich liiiiebe diesen Tut
Kam mit der 1. Erklärung super zurecht!
Tausend Dank
__________________
|
|
|
12.09.2008 21:47 |
|
|
Lara*
ehemals VPGDaSilva
Dabei seit: 27.09.2006
Beiträge: 1.666
|
|
Kann vielleicht irgendwer das auch mit Untermenü?
Wäre super
__________________
|
|
|
16.09.2008 14:20 |
|
|
Jaysen
Mitglied
Dabei seit: 16.02.2009
Beiträge: 617
|
|
Hey ich habs hinbekommen und wollte mal fragen wie ich das jetzt hinbekomme das es genau im Frame bereich ist und nicht außerhalb oder so...
__________________
icon by Saraliebtpferde
|
|
|
17.02.2009 15:43 |
|
|
Impressum
|
