[HTML] Design mit Untermenu coden

Ponyhof

Halloe,

. funktioniert IE, AOLbroweser, MF
. HTML Kenntnisse
. Div-Design

Im Designcode kann man die Farbe der Scrollbalken einstellen und den Hintergrund, falls ein Bildschwirm größer als das Design.
Achtung: Im Internet Explorer werden die weißen Teile eines Bildes transparent.

Step 1:
Wir beginnen eine HTML Seite ganz normal, öffnet dazu am besten erstmal den normalen Windowseditor. In diesem Code bestimmt ihr erstmal nur den Namen eures Hofes, Seite oder anderes. Diesen erscheint dann oben, wo nun Gegen Bildeklau - ... steht.

code:
1: 2: 3: 4: 5: 6: 7:	<html> <head> <title>Name eures Hofes</title> </head> <body> </body> </html>

Step 2:
Jetzt fangen wir an das CSS in den Kopf ( <head></head> ) einzubauen. Ich baue es grundsätzlich unter dem Titel ein, es geht eigentlich aber auch drüber.
<style type="text/css"> damit gebt ihr an, was ihr jetzt machen wollt, dann beginnt der Code.

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

<style type="text/css">
<!--
body { scrollbar-highlight-color:#ffffff;
scrollbar-arrow-color:#ffffff;
scrollbar-3dlight-color:#ffffff;
scrollbar-base-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-shadow-color:#ffffff;
-->
</style>

Dieses fügt ihr dann in euren HTML Code ein und euer Scrollbalken wurde definiert.

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:

<html>
<head>
<title>Name eures Hofes</title>
<style type="text/css">
<!--
body { scrollbar-highlight-color:#ffffff;
scrollbar-arrow-color:#ffffff;
scrollbar-3dlight-color:#ffffff;
scrollbar-base-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-shadow-color:#ffffff;
-->
</style>
</head>
<body>
</body>
</html>

Step 3:
Weiter mit der Bestimmung des Hintergrundes mit CSS, auch des Designs und der Ausrichtung des Designs. Diesmal öffnen wir keine neue Angabe sondern fügen es einfach im schon Gemachten ein. Was ich in Klammern dazugeschrieben habe müsst ihr löschen.

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:

<html>
<head>
<title>Ponyhof Lysingur</title>
<style type="text/css">
<!--
body { scrollbar-highlight-color:#ffffff;
scrollbar-arrow-color:#ffffff;
scrollbar-3dlight-color:#92d648;
scrollbar-base-color:#92d648;
scrollbar-darkshadow-color:#92d648;
scrollbar-face-color:#92d648;
scrollbar-shadow-color:#92d648;

background-image:url("Adresse eures Designs");
background-position: top left; ( oben links, top right = oben rechts )
background-repeat: no-repeat; ( keine Wiederholung, repeat = Wiederholung )
background-color:#ffffff; }
-->
</style>
</head>
<body>
</body>
</html>

Step 3:
So, nun legt ihr die Frames fest. Menu, Untermenu, Main in diesem Fall.
Jetzt im DIV und iframe festlegen. Die <div> Zahlen left und top geben die Position an. Bitte einmal reingucken Rot umrandete Zahlen sind für den Div-tag. Die erste ist left, die zweite ist top. dann im iframe, als erstes Mal den Namen angeben. (Achtung: Taucht beim Verlinken wieder auf ) width ist die erste Zahl die blau umrandet ist, also die Breite des Frames. An der Breitseite steht es auch nochmal und height dann logischerweise die Höhe (= Dann fügt man Die ADRESSEDESMAINS ( Adresse der Mainseite ) ein und ansonsten lasst die Einstellung so. Unten noch Erläuterungen für Neugierige. Das macht ihr halt mit jedem Frame. So könnt ihr auch Newsframes einbauen.

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

<div style="left: 262px; top: 233px; position: absolute;">
<iframe name="main" width="632px" height="430px" src="ADRESSEDESMAINS" frameborder="0" scrolling="auto" align="top right" style="Filter: chroma (color=#ffffff)" ;> </iframe> </div>

<div style="left: 420px; top: 284px; position: absolute; ">
<iframe name="menu" width="526px" height="38px" src="ADRESSE DES MENUS" frameborder="0" scrolling="auto" align="top right" style="Filter: chroma (color=#ffffff)" ;> </iframe> </div>

<div style="left: 84px; top: 377px; position: absolute; ">
<iframe name="untermenu" width="162px" height="354px" src="ADRESSE DES UNTERMENUS" frameborder="0" scrolling="auto" align="top right" style="Filter: chroma (color=#ffffff)" ;> </iframe> </div>

Der gesamte Code:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:

<html>
<head>
<title>Ponyhof Lysingur</title>
<style type="text/css">
<!--
body { scrollbar-highlight-color:#ffffff;
scrollbar-arrow-color:#ffffff;
scrollbar-3dlight-color:#92d648;
scrollbar-base-color:#92d648;
scrollbar-darkshadow-color:#92d648;
scrollbar-face-color:#92d648;
scrollbar-shadow-color:#92d648;

background-image:url("Adresse eures Designs");
background-position: top left; ( oben links, top right = oben rechts )
background-repeat: no-repeat; ( keine Wiederholung, repeat = Wiederholung )
background-color:#ffffff; }
-->
</style>
</head>
<body>

<div style="left: 262px; top: 233px; position: absolute;">
<iframe name="main" width="632px" height="430px" src="ADRESSEDESMAINS" frameborder="0" scrolling="auto" align="top right" style="Filter: chroma (color=#ffffff)" ;> </iframe> </div>

<div style="left: 420px; top: 284px; position: absolute; ">
<iframe name="menu" width="526px" height="38px" src="ADRESSE DES MENUS" frameborder="0" scrolling="auto" align="top right" style="Filter: chroma (color=#ffffff)" ;> </iframe> </div>

<div style="left: 84px; top: 377px; position: absolute; ">
<iframe name="untermenu" width="162px" height="354px" src="ADRESSE DES UNTERMENUS" frameborder="0" scrolling="auto" align="top right" style="Filter: chroma (color=#ffffff)" ;> </iframe> </div>

</body>
</html>

scrolling: yes - Ja, no - Nein, auto - Automatisch, bei Bedarf
align: Sollte mit der oberen Angabe background-position: übereinstimmen, ansonsten verschieben sich die Frames. Möglich top right, top left, top center
style="Filter: chroma (color=#fffff)" steht dafür das eure Frames transparent sind. Im IE werden leider auch teile weißer Bilder transparent.

MfG;
Ponyhof

katt

geht das auch für Oyla ?

Ponyhof

Ähm, ich weiß nicht ob der den Code nimmt ^^

katt

Ich probiers mal smile

sag dir dan bescheid Augenzwinkern

Danke

-edit-

geht schon aber ich denke da muss ein profi ran Augenzwinkern

Kannst du es mir machen ?
Bitte ?

Ponyhof

Nee xp Sorry, weil ich das nichtmehr machen wollte steht ihr der Tutorial.

MfG;
Ponyhof

katt

schade

nathalie25

Hey, ich hatte auch am Anfang Probleme beim oyla coden, geht aba eigentl. ganz einfach!!! Wenn du weiterhin Hilfe brauchst, schreib mir per PN Augenzwinkern

Schatti

sunnygirl148

Hey!
Kann mir vllt. jemand helfen. Bei mir sieht das ganze so aus.

Das ist mein code:

<html>
<head>
<title>Gestüt Albershof</title>
<style type="text/css">

</style>

</head>
<body>
<div style="left: 60px; top: 300px; position: absolute;">
<iframe name="main" width="728px" height="418px" src="http://sunnygirl148.su.funpic.de/Main.PNG" frameborder="0" scrolling="auto" align="top right" style="Filter: chroma (color=#ffffff)" ;> </iframe> </div>

<div style="left: 806px; top: 236px; position: absolute; ">
<iframe name="menu" width="171px" height="293px" src="http://sunnygirl148.su.funpic.de/Menu.PNG" frameborder="0" scrolling="auto" align="top right" style="Filter: chroma (color=#ffffff)" ;> </iframe> </div>

<div style="left: 807px; top: 41px; position: absolute; ">
<iframe name="untermenu" width="168px" height="192px" src="http://sunnygirl148.su.funpic.de/Untermenu.PNG" frameborder="0" scrolling="auto" align="top right" style="Filter: chroma (color=#ffffff)" ;> </iframe> </div>

Wäre sehr, sehr dankbar, wenn mal irgendjemand drüberschauen würde, da es mein erster "professioneller" vrh ist und ich noch nicht direkt am Anfang aufgeben möchte.

LG,
sunnygirl148

AvrilLavigneForEver

also hier mal mein code:

<html>
<head>
<title>Gestüt Ammerland</title>
<style type="text/css">

</style>
</head>
<body>
<div style="left: 571px; top: 337px; position: absolute;">
<iframe name="main" width="632px" height="430px" src="http://vrhrsammerland.vr.funpic.de/home.html" frameborder="0" scrolling="auto" align="top right" style="Filter: chroma (color=#ffffff)" ;> </iframe> </div>

<div style="left: 119px; top: 199px; position: absolute; ">
<iframe name="menu" width="526px" height="38px" src="http://vrhrsammerland.vr.funpic.de/Menue.html" frameborder="0" scrolling="auto" align="top right" style="Filter: chroma (color=#ffffff)" ;> </iframe> </div>

<div style="left: 161px; top: 207px; position: absolute; ">
<iframe name="untermenu" width="162px" height="354px" src="http://vrhrsammerland.vr.funpic.de/dorf.html" frameborder="0" scrolling="auto" align="top right" style="Filter: chroma (color=#ffffff)" ;> </iframe> </div>
</body>
</html>

aber da kommt das: http://vrhrsammerland.vr.funpic.de/Unbenannt1.html

Kannst du mir vllt. helfen? Was hab hab ich da falsch gemacht?

Ponyhof

Die Seite geht nicht :3

background-image:url(http://vrhrsammerland.vr.funpic.de/10gfnzt.png);

() hat dir gefehlt ^^

MfG;
Ponyhof

Alex96

das mit dem Mainadesse und so verstehe ich nich...kan mir das irgend ein schlauer erklären???

LG Alexandra

Annika101

Das mit der Main adresse verstehe ich auch noch nicht so ganz genau also ja bitte nochmal alles ab stepp 3 für dumme fröhlich

Ponyfreak94

ich bracuh hiolfe beim coden eines unutermenüs

Ponyhof

Damit kann aber niemand was anfangen.
Entweder beschreibst du dein Problem oder lässt es mit dem Untermenu (;

Mainadresse ist die Startseite, die beim Besuch der Page als erstes geöffnet wird (: Oder nach dem Enterklick ^^

MfG;
Ponyhof

Alex96

Zitat:

Original von Ponyhof
Damit kann aber niemand was anfangen.
Entweder beschreibst du dein Problem oder lässt es mit dem Untermenu (;

Mainadresse ist die Startseite, die beim Besuch der Page als erstes geöffnet wird (: Oder nach dem Enterklick ^^

MfG;
Ponyhof

ah... das war auch für mich ferständlich... *bin der dümmste schlaubi achlupf Augenzwinkern

*

nun gleich nächste frage unglücklich

: woher weis der computer wann er was ins untermenü öfnen muss *krüme verwirrt

Ponyhof

durch die angaben target=untermenu, oder wie du es genannt hast.
Du legst ja eine eigene Seite für das Menu an, dort erstellst du die Links. Und das weiß nicht der PC, das ist HTML, das das weiß großes Grinsen

Hoffe das hast du auch verstanden.

MfG;
Ponyhof

Alex96

aso.. glaub schon... kuk mal PN

Nika

Zitat:

Original von Ponyhof
durch die angaben target=untermenu, oder wie du es genannt hast.
Du legst ja eine eigene Seite für das Menu an, dort erstellst du die Links. Und das weiß nicht der PC, das ist HTML, das das weiß großes Grinsen

Hoffe das hast du auch verstanden.

MfG;
Ponyhof

okee das habe ich jetzt verstanden ...

aber das mit der Adresse des Mains nicht so ganz. ich weiß nicht was damit gemeint ist (bitte einmal für ganz dumme)

Nika

hmm

ja oke hmm.

ich versuchs nochmal, dann schreib ich ob ich das verstanden hab oder nicht ^^

nächste Seite

Forensoftware: Burning Board, entwickelt von WoltLab GmbH