Hintergrund

[Rabbi]

Hallo,

ich habe eine Frage zu einem Workshop von Jürgen. Ich meine den Workshop wo er erklärt wie man eine HP erstellt. So das hab ich jetzt gemacht, doch wenn ich jetzt den noch weißen hintergrund auch mit der Textur versehen will passiert nichts? Was muss ich machen das, es funktioniert? Noch eine Frage ist ich möchte oben links ein Logo einbauen:



Aber jetzt sieht es nicht merh stimmig aus. Was muss ich im Quelltext ändern?
Noch etwas^^. Wie kann ich den Button so ausrichten das er zwischen die zwei Linien passt? Ich hab die größe genommen wie sie im Queltext steht.

http://air24.ai.funpic.de/

[Kylee]

Du kannst das mit einem CSS definieren.

Füge im head tag folgende Zeilen ein :

Code:

<style type="text/css">
body {
    
    background-image: url(deinHintergrundbild.jpg);

}

</style>

du kannst das css auch auslagern (das ist nützlich wenn du mehrere seite in einem Stil machen möchtest und im nachhinein das style verändern willst)
css kannst du mit Dreamweaver oder mit Topstyle Lite umsetzen. Du müsstest dann in jeder Seite im Head tag folgendes schreiben :

Code:

<link rel="stylesheet" type="text/css" href="dein.css">

und im css würde dann stehen :

Code:

body {
    
    background-image: url(deinHintergrundbild.jpg);

}

Was du alles mit CSS machen kannst kannst du dir ja mal durchlesen eine der schönsten Beispiel Seiten die ich kenne findest du hier :

http://www.csszengarden.com/tr/deutsch/

Der Button muß um ihn verkleinern zu können getrennt von deiner anderen Graphik sein (sonst verkleinert sich die ebenfalls und ich denke nicht das du das möchtest). Ich empfehle dir dann das Bild mit einer % angabe statt einer fixen Größe zu versehen. Das hat den Vorteil das es nicht zu klein wird wenn ein User mit einer höheren Auflösung über deine Seite browst.

Code:

<img src="../deinbild.jpg" width="50%">

Du kannst jede X beliebige prozent zahl eingeben. Mit 50% wird die Graphik um die hälfte kleiner dargestellt. Mit 150% um die hälfte größer. Möchtest du fixe Werte zuweisen kannst du das mit :

Code:

]<img src="../deinbild.jpg" width="50px" height="50px">

Wobei "width" für die Breite steht und "height" für die höhe, "px" steht für Pixel.

Ich hoffe das hilft dir weiter.

LG
Kylee

[Rabbi]

Hallo,

danke für die Antwort, ich möchte den Button aber nicht verkleinern, sondern nur sein Position verändern so das er zwischen den Linien steht.

Wegen dem Logo, das gefällt mir eigentlich so ganz gut, nur die dritte Linie soll verschwinden, wie stelle ich das an?

Grüße :stinkig: Rabbi

[Helmut]

Hi,

Du solltest das Logo evtl. von vornherein mit in das Layout einbeziehen und die Grafiken danach schneiden. Hinterher dazubasteln wird das dann meist nur "Krampf". Wenn Du das jetzt dazwischen reinhaben willst musst Du das wohl verkleinern.

So auch mit den Texturen und den Runden Linien mit Schatten, das schaut etwas zerhackt aus.

Cu Helmut

[Kylee]

du kannst graphiken mit div tags fix positionieren. Das hat den nachteil das du jeden Teil der Seite fest positionieren musst, sonst kanns passieren das sich die teile überlappen. Der befehl dafür lautet :

Code:

<div style="z-index:1;position:absolute;top:150px;left:150px">Dein Bild oder Content hier rein</div>

Der Befehl bewirkt das das in den Div Tags eingeschlossene Element fest 150px von oben und 150px von links positioniert wird. Mit den richtigen werten musst du ein bisschen experementieren bis es genau dort sitzt wo du es auch haben möchtest.
Der Layer wird aufsteigend geschichtet. Das heißt z-index:1 liegt unter z-index:2. z-index:2 liegt unter z-index:3 usw.

Aber eins verstehe ich nicht ganz. Der Button ist doch schon fest in der Graphik eingebaut ?? Um den genau zwischen die Balken zu bekommen müsstest du ihn erst mit einem Graphik Programm freistellen oder habe ich da etwas falsch verstanden ???

LG
Kylee

[Rabbi]

Hi,

danke für die vielen antworten. Das hier war auch nur so eine art Testlauf. Wollte mal ausprobieren wie das so grob funzt. Die Linien haben mir sowiso nihct gefallen werde jetzt mal basteln und neues Layout machen.

[Rabbi]

Hallo,

so hab mich jetzt noch mal dran gesetzt und alles nochmal ganz neu gemacht. Jetzt hab ich aber ein neues Problem, ich hätte gerne auf der rechte Seite noch so einen Frame wie auf der Linken Seite(mit dem blauen Muster das). Was muss ich da schreiben? Die neue Adresse ist :

http://opmeer.op.funpic.de/

So hier noch der Quelltext wie er im moment aussieht ( is nur die roh Form):

Code:

<frameset cols="123,*,123" BORDER="0">
<frame name="libg" src="libg.html" marginWIDHT="1" marginHEIGHT="10" scrolling="no" frameBORDER="no">
<frameset rows="164,*">
<frame name="top" src="top.html" marginWIDHT="1" marginHEIGHT="10" scrolling="no" frameBORDER="no">
<frame name="unten" src="unten.html" marginWIDHT="1" marginHEIGHT="10" scrolling="no" frameBORDER="no">
<frame name="rebg" src="rebg.html" marginWIDHT="1" marginHEIGHT="10" scrolling="no" frameBORDER="no">
</frameset>

[Helmut]

Hi,

das müsste so aussehen (Maße musste selbst noch etwas anpassen)

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Homepage</title>
</head>
<!-- frames -->
<frameset cols="19%,62%,*" border="0">
<frame name="left" src="left.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
<frameset rows="21%,62%,*">
<frame name="top" src="top.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
<frame name="content" src="content.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
<frame name="bottom" src="bottom.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
</frameset>
<frame name="right" src="right.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
</frameset>
</html>[/HTML]

Cu Helmut

[Rabbi]

Hallo,

jo hat funktioniert.

Grüße :icon_bravo: Rabbi

[Rabbi]

Hi,

so hab mich wieder für ein anderes Layout für meine HP entschieden.^^ Jetzt brauch ich aber noch ein Frame der zwischen dem Header und dem Frame wo der Text steht liegt. Hoffe mir kann jemand helfen. Vielleicht kann mir ja auch noch jemand eine gute Seite mit Tut´s für Frames sagen.(Neue Grafiken werden dann später eingefügt. :erschreck: )

Adresse: http://opmeer.op.funpic.de/

Quelltext:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<frameset cols="123,*,96" BORDER="0">
<frame name="libg" src="libg.html" marginWIDHT="1" marginHEIGHT="10" scrolling="no" frameBORDER="no">
<frameset rows="192,*">
<frame name="top" src="top.html" marginWIDHT="1" marginHEIGHT="10" scrolling="no" frameBORDER="no">
<frame name="unten" src="unten.html" marginWIDHT="1" marginHEIGHT="10" scrolling="auto" frameBORDER="no">
<frame name="rebg" src="rebg.html" marginWIDHT="1" marginHEIGHT="10" scrolling="no" frameBORDER="no">
</frameset>
<frame name="rebg" src="rebg.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
</frameset>

Grüße :kruecke: Rabbi