Supportnet / Forum / Webseiten/HTML
Hintergrund für den Topframe strecken?
Frage
Ich bin Newbie, habe selfhtml heruntergeladen und trotzdem ein Problem.
In zweien meiner drei Frames (top und left) möchte ich einen Farbverlauf als Hintergrund, so daß oben Links Dunkelblau ist und nach rechts und unten zu hellblau wird. Der MainFrame bekommt bgcolor. Leider "kachelt" der Topframe mein .jpg - wie kann ich das verhindern ?
Antwort 1 von Viagra
Hi.
Es geht das JPG zu strecken, dass ist aber eine anstrengende Sache :o).
Wenn du dir viel Arbeit ersparen willst vergrößer das Bild einfach in irgend einem Graphikprogramm auf die richtigen Größen...
Oder ne, warte lieber auf Friedel, der hat vielleicht ne schönere Lösung parat.
@Friedel: Ich weiß, wir hatten das Thema schon mal... was hatten wir da für ne Lösung?
Bis denn dann
Der ich
Es geht das JPG zu strecken, dass ist aber eine anstrengende Sache :o).
Wenn du dir viel Arbeit ersparen willst vergrößer das Bild einfach in irgend einem Graphikprogramm auf die richtigen Größen...
Oder ne, warte lieber auf Friedel, der hat vielleicht ne schönere Lösung parat.
@Friedel: Ich weiß, wir hatten das Thema schon mal... was hatten wir da für ne Lösung?
Bis denn dann
Der ich
Antwort 2 von TruckingGrizzly
hmmm... hab ich schon versucht (Corel Draw), hat aber nicht so gefunzt. Dann hab ich mir gedacht, daß es Probleme mit den verschidenen Auflösungen geben könnte (Scrollbar für nen Background macht sich nicht gut, oder). Ich muß jetzt Arbeiten, checke aber morgen gegen 10 nochmal.
Antwort 3 von Friedel
Hab die Lösung vom letzten mal noch. Läßt sich dafür nicht anpassen. Ich laß mir was einfallen. Kann nicht so schwer sein.
Antwort 4 von Friedel
War wirklich nicht schwer. Sieh dir mal "http://www.friedels-home.com/temp/Farbverlaufhintergrund/farbverl2.htm" an. Ich nehm an, das ist so wie du es haben willst.
Für das Beispiel hab ich ein JPG mit 100x100 Pixel gemacht, das den gewünschten Farbverlauf hat. Je kleiner, desto schneller ist es geladen. Wenn es zu klein wird, kann es aber passieren, daß es später pixelig erscheint. Das Bild habe ich "bg.jpg" genannt.
Der Quellcode der Seite ist dann:
_______________________________________________________________________________________________________________
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Seitentitel</title>
<script language="JavaScript">
var a;
if(!window.saveInnerWidth)
{
window.onresize = resize;
window.saveInnerWidth = window.innerWidth;
window.saveInnerHeight = window.innerHeight;
}
function resize()
{
if (saveInnerWidth < window.innerWidth || saveInnerWidth > window.innerWidth ||
saveInnerHeight > window.innerHeight || saveInnerHeight < window.innerHeight)
{
window.history.go(0);
}
}
</script>
</head>
<body topmargin="0" leftmargin="0">
<p><img border="0" src="bg.jpg" width="100%" height="100%" name="ddd"></p>
<script language="JavaScript">
a=document.ddd.height;
document.write("<table border=0 cellpadding=1 cellspacing=1 width=100% style=margin-top:-" + a + "><tr><td width=100% valign=top>");
if (document.all)
{
if(!window.saveInnerWidth)
{
window.onresize = neuresize;
window.saveInnerWidth = document.body.offsetWidth;
window.saveInnerHeight = document.body.offsetHeight;
}
}
function neuresize()
{
if (saveInnerWidth < document.body.offsetWidth || saveInnerWidth > document.body.offsetWidth ||
saveInnerHeight > document.body.offsetHeight || saveInnerHeight < document.body.offsetHeight)
{
window.history.go(0);
}
}
</script>
<!-- Hier beginnt dein Seiteninhalt -->
*** *** *** Hier kommt der eigentliche Seiteninhalt hin. *** *** ***
<!-- Hier endet dein Seiteninhalt -->
<script language="JavaScript">
document.write("</tr></td></table>")
</script>
</body>
_______________________________________________________________________________________________________________
Die Zeile "*** *** *** Hier kommt der eigentliche Seiteninhalt hin. *** *** ***" mußt du löschen und statt dessen deinen Seiteninhalt einfügen.
Für das Beispiel hab ich ein JPG mit 100x100 Pixel gemacht, das den gewünschten Farbverlauf hat. Je kleiner, desto schneller ist es geladen. Wenn es zu klein wird, kann es aber passieren, daß es später pixelig erscheint. Das Bild habe ich "bg.jpg" genannt.
Der Quellcode der Seite ist dann:
_______________________________________________________________________________________________________________
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Seitentitel</title>
<script language="JavaScript">
var a;
if(!window.saveInnerWidth)
{
window.onresize = resize;
window.saveInnerWidth = window.innerWidth;
window.saveInnerHeight = window.innerHeight;
}
function resize()
{
if (saveInnerWidth < window.innerWidth || saveInnerWidth > window.innerWidth ||
saveInnerHeight > window.innerHeight || saveInnerHeight < window.innerHeight)
{
window.history.go(0);
}
}
</script>
</head>
<body topmargin="0" leftmargin="0">
<p><img border="0" src="bg.jpg" width="100%" height="100%" name="ddd"></p>
<script language="JavaScript">
a=document.ddd.height;
document.write("<table border=0 cellpadding=1 cellspacing=1 width=100% style=margin-top:-" + a + "><tr><td width=100% valign=top>");
if (document.all)
{
if(!window.saveInnerWidth)
{
window.onresize = neuresize;
window.saveInnerWidth = document.body.offsetWidth;
window.saveInnerHeight = document.body.offsetHeight;
}
}
function neuresize()
{
if (saveInnerWidth < document.body.offsetWidth || saveInnerWidth > document.body.offsetWidth ||
saveInnerHeight > document.body.offsetHeight || saveInnerHeight < document.body.offsetHeight)
{
window.history.go(0);
}
}
</script>
<!-- Hier beginnt dein Seiteninhalt -->
*** *** *** Hier kommt der eigentliche Seiteninhalt hin. *** *** ***
<!-- Hier endet dein Seiteninhalt -->
<script language="JavaScript">
document.write("</tr></td></table>")
</script>
</body>
_______________________________________________________________________________________________________________
Die Zeile "*** *** *** Hier kommt der eigentliche Seiteninhalt hin. *** *** ***" mußt du löschen und statt dessen deinen Seiteninhalt einfügen.
Antwort 5 von Viagra
Cool, Friedel :o)
Muß ich gleich mal ausprobieren, wenn ich wieder zu Hause bin.
Funktioniert das in allen 3 Browsern *g*?
Muß ich gleich mal ausprobieren, wenn ich wieder zu Hause bin.
Funktioniert das in allen 3 Browsern *g*?
Antwort 6 von TruckingGrizzly
Hmmm... das sieht klasse aus. Hab ich mir auf jeden fall erstmal gesichert. Da ich mich aber 1. mit Java nicht auskenne(Ich will ja lernen, aber eins nach dem anderen) und 2. ein etwas anderes Ergebniss erzielen wollte hilft es mir im Moment nicht weiter.
Ich habe das fehlerhafte Frameset mal hochgeladen (25 kb).
"http://mstengel.piranho.de/"
Grafiken strecken ist zwar eine Lösung, aber ich schau mir die HP in 800x an und bekomme bei 1024x Blitze :o(
Wenn ich bei HTML nur noch selten nachschauen muss, werd ich mich mit Java auseinandersetzen. Im Moment ist das "Perlen vor die Säue werfen"
der Faszinierte
Ich habe das fehlerhafte Frameset mal hochgeladen (25 kb).
"http://mstengel.piranho.de/"
Grafiken strecken ist zwar eine Lösung, aber ich schau mir die HP in 800x an und bekomme bei 1024x Blitze :o(
Wenn ich bei HTML nur noch selten nachschauen muss, werd ich mich mit Java auseinandersetzen. Im Moment ist das "Perlen vor die Säue werfen"
der Faszinierte
Antwort 7 von Linuxer
Warum nimmst du für den Farbverlauf ne Grafik, den Farbverlauf kannst du auch über JavaScript erzielen.
Und wenn du mal deine Grafik nicht kacheln willst, da gibts einen extra html tag, dazu benötigt man kein Script.
Und wenn du mal deine Grafik nicht kacheln willst, da gibts einen extra html tag, dazu benötigt man kein Script.
Antwort 8 von TruckingGrizzly
@linuxer
Ich möchte verstehen, was ich da programmiere, und da ich von JavaScript (noch) keinen Schimmer hab, muss ich eine Grafik nehmen, auch wenn das die schlechtere Lösung ist.
Ich such mir einen Wolf, aber ich finde den Befehl in HTML nicht, der das Kacheln verhindert und die Grafik auflösungsspezifisch streckt.
Bei Tabellen geht das doch auch mit width und so :-(
Ich möchte verstehen, was ich da programmiere, und da ich von JavaScript (noch) keinen Schimmer hab, muss ich eine Grafik nehmen, auch wenn das die schlechtere Lösung ist.
Ich such mir einen Wolf, aber ich finde den Befehl in HTML nicht, der das Kacheln verhindert und die Grafik auflösungsspezifisch streckt.
Bei Tabellen geht das doch auch mit width und so :-(
Antwort 9 von Linuxer
Dann nimm halt CSS (Cascading Style Sheets) da kannste genau die Größe definieren und ob der Hintergrund gekachelt werden soll oder nicht:-)
Antwort 10 von TruckingGrizzly
ooops, soweit bin ich noch nicht *g*
Da kann ich Grössen variabel (prozentual oder so) definieren? Na wenn das die einzige Möglichkeit ist... werd ich mich da wohl reinhängen müssen.
JavaScript oder CSS, ich wusel dann mal
thx fürs erste, wenn jemand noch ne Idee hat, ich schau regelmässig vorbei
TG
Da kann ich Grössen variabel (prozentual oder so) definieren? Na wenn das die einzige Möglichkeit ist... werd ich mich da wohl reinhängen müssen.
JavaScript oder CSS, ich wusel dann mal
thx fürs erste, wenn jemand noch ne Idee hat, ich schau regelmässig vorbei
TG
Antwort 11 von TruckingGrizzly
So, ich hab jetzt die Grafik vergrößert auf 1024x55. Ich hoffe, das sie jetzt nicht mehr gekachelt wird
Antwort 12 von Friedel
Das vergrößern der Grafik ist keine Lösung. Natürlich wird die Ladezeit dadurch sehr lange, und je nach Auflösung sieht man nur einen Teil des Bildes oder es wird gekachelt. Bei 55x1024 Pixel wird auf einem 21-Zöller mit 1600x1280 Pixel gekachelt. Andererseits hann man auf einem 14-Zöller fast keinen Farbverlauf sehen.
Es bringt nichts, in CSS oder in HTML zu bestimmen, daß der Hintergrund nicht wiederholt werden soll. Dann wird er nämlich nur einmal oben links dargestellt.
Der Farbverlauf ist mit reinem HTML machbar. Dazu machst du dir ein JPG mit dem entsprechenden Farbverlauf und etwa 100 Pixel Breite und 1 Pixel Höhe für den oberen Frame. Für den linken Frame machst du das selbe mit 100 Pixel Höhe und 1 Pixel Breite. Dieses Bild fügst du dann mittels ►<img border="0" src="deinBild.jpg" width="100%" height="100%">◄ gleich nach dem Bodytag ein. Dadurch hast du schon mal den Farbverlauf. Jetzt mußt du in den Head noch
►<style type="text/css">
body { margin-left:-0px; margin-right:-0px; margin-top:-0px; margin-bottom:-0px }
</style>◄
Einfügen, damit kein Seitenrand gelassen wird (Netscape 4.x läßt trotzdem einen kleinen weißen Rand, weil dieser Browser weder mit HTML noch mit CSS richtig klar kommt).Da du aber Scrollbars unterdrückst, kannst du den Rand auch bei Netscape entfernen. Dazu gibst für die Ränder negative Werte an (►margin-left:-10px; margin-right:0px; margin-top:-10px; margin-bottom:0px◄) und vergrßerst das Bild auf z.B. 110% Breite und 110% Höhe.
Naürlich erscheilt dein Seiteninhalt jetzt nach dem Bild statt an der selben Stelle. Um das zu ändern fügst du nach dem Bild erst mal einen Zielenumbruch mit ►<br clear="all">◄ ein. Danach machst du einen <dif>Bereich mit ►<div style="left: 0; top: 0; position: absolute">◄, den du mit ►</div>◄ wieder beendest. Der Inhalt dieses Bereiches wird also absolut positioniert und fängt ganz oben links an. In diesen Bereich machst du am besten eine Tabelle mit
►<table border="0" cellpadding="0" cellspacing="10" width="100%">
<tr>
<td width="100%">Dein eigentlicher Seiteninhalt</td>
</tr>
</table>◄
Bei ►cellpadding="x"◄ gibst du den Wert an, den du normalerweise als Seitenrand läßt.
Es bringt nichts, in CSS oder in HTML zu bestimmen, daß der Hintergrund nicht wiederholt werden soll. Dann wird er nämlich nur einmal oben links dargestellt.
Der Farbverlauf ist mit reinem HTML machbar. Dazu machst du dir ein JPG mit dem entsprechenden Farbverlauf und etwa 100 Pixel Breite und 1 Pixel Höhe für den oberen Frame. Für den linken Frame machst du das selbe mit 100 Pixel Höhe und 1 Pixel Breite. Dieses Bild fügst du dann mittels ►<img border="0" src="deinBild.jpg" width="100%" height="100%">◄ gleich nach dem Bodytag ein. Dadurch hast du schon mal den Farbverlauf. Jetzt mußt du in den Head noch
►<style type="text/css">
body { margin-left:-0px; margin-right:-0px; margin-top:-0px; margin-bottom:-0px }
</style>◄
Einfügen, damit kein Seitenrand gelassen wird (Netscape 4.x läßt trotzdem einen kleinen weißen Rand, weil dieser Browser weder mit HTML noch mit CSS richtig klar kommt).Da du aber Scrollbars unterdrückst, kannst du den Rand auch bei Netscape entfernen. Dazu gibst für die Ränder negative Werte an (►margin-left:-10px; margin-right:0px; margin-top:-10px; margin-bottom:0px◄) und vergrßerst das Bild auf z.B. 110% Breite und 110% Höhe.
Naürlich erscheilt dein Seiteninhalt jetzt nach dem Bild statt an der selben Stelle. Um das zu ändern fügst du nach dem Bild erst mal einen Zielenumbruch mit ►<br clear="all">◄ ein. Danach machst du einen <dif>Bereich mit ►<div style="left: 0; top: 0; position: absolute">◄, den du mit ►</div>◄ wieder beendest. Der Inhalt dieses Bereiches wird also absolut positioniert und fängt ganz oben links an. In diesen Bereich machst du am besten eine Tabelle mit
►<table border="0" cellpadding="0" cellspacing="10" width="100%">
<tr>
<td width="100%">Dein eigentlicher Seiteninhalt</td>
</tr>
</table>◄
Bei ►cellpadding="x"◄ gibst du den Wert an, den du normalerweise als Seitenrand läßt.
Antwort 13 von TruckingGrizzly
Genau so und nicht anders.
Danke für die Hilfe und die Erklärungen. Ich hatte mir schon gedacht, dass das Strecken der Grafik Probleme nach sich zieht und zwei oder mehr Versionen des Frameset zwar machbar sind (sind ja nur 13 kleine Dateien +8 .jpg bei 4 Auflösungen), aber das Gelbe vom Ei ist das nicht.
Das man bei Grafiken die % Definierung anwenden kann hab ich auch schon herausgefunden, aber der Rand hat mir Probleme gemacht.
Ich werd mich mit CSS auseinandersetzen, damit ich deine Lösung verstehe.
Der Dankbare
Danke für die Hilfe und die Erklärungen. Ich hatte mir schon gedacht, dass das Strecken der Grafik Probleme nach sich zieht und zwei oder mehr Versionen des Frameset zwar machbar sind (sind ja nur 13 kleine Dateien +8 .jpg bei 4 Auflösungen), aber das Gelbe vom Ei ist das nicht.
Das man bei Grafiken die % Definierung anwenden kann hab ich auch schon herausgefunden, aber der Rand hat mir Probleme gemacht.
Ich werd mich mit CSS auseinandersetzen, damit ich deine Lösung verstehe.
Der Dankbare
Antwort 14 von Friedel
Wenn du das CSS nicht verstehst, kannst du es auch weglassen und ohne CSS machen. Dann steht dir aber die beschriebene Möglichkeit den Rand auch beim NN ganz zu entfernen nicht mehr zur Verfügung. (Ist einer der vielen Bugs in NN. Bei richtiger Seitendarstellung gibt es keinen Rand.)
Dazu läßt du einfach
►<style type="text/css">
body { margin-left:-0px; margin-right:-0px; margin-top:-0px; margin-bottom:-0px }
</style>◄
im Head weg und erweiterst den Bodytag zu
►<body topmargin="0" leftmargin="0">◄
Das hat in etwa die gleiche Wirkung.
Dazu läßt du einfach
►<style type="text/css">
body { margin-left:-0px; margin-right:-0px; margin-top:-0px; margin-bottom:-0px }
</style>◄
im Head weg und erweiterst den Bodytag zu
►<body topmargin="0" leftmargin="0">◄
Das hat in etwa die gleiche Wirkung.