Wiederholung eines Bildes?

-I-Chaos-I-1337 · 06.09.2006, 15:40

Hm, vielleicht wurde das schon 300.000 mal gefragt - jedenfals konnte ich über die Suchfunktion nichts finden : /

Meine Frage betrift folgendes: Ich habe eine Tabelle erstellt um dort ein Menü hineinzubasteln. Das Menue ist ein Menue oben, verläuft also auf der x-Achse...

so ungefär:

http://de.geocities.com/tost222/X.GIF

Code:
<body>
<div align="center"><img src="" alt="" name="Y" width="5" height="21" id="Y" style="background-color: #0000FF" /><img src="" name="X" width="98" height="21" id="X" /><img src="" alt="" name="XX" width="98" height="21" id="XX" style="background-color: #990000" /><img src="" alt="" name="XXX" width="98" height="21" id="XXX" /><img src="" alt="" name="XXXX" width="98" height="21" id="XXXX" style="background-color: #990000" /><img src="" alt="" name="XXXXX" width="98" height="21" id="XXXXX" /><img src="" alt="" name="XXXXXX" width="98" height="21" id="XXXXXX" style="background-color: #990000" /><img src="" alt="" name="XXXXXXX" width="98" height="21" id="XXXXXXX" style="background-color: #D4D0C8" /><img src="" name="YY" width="5" height="21" loop="-1" id="YY" style="background-color: #0000FF" /></div>
</body>

Nun möchte ich, dass sich die Bilder Y und YY (die Blauen) genau soweit wiederholen, dass wenn man mit einer Auflösung von 800 x 600 auf die Page geht, diese genau mit der richtigen Breite angezeigt wird. Also eine X-Achsen-Variable.

Sodass, egal ob mit 800 x 600 oder mit 1600 x 1200 die Homepage immer genau die Breite vom Browser hat...

Nun dachte ich, dass man vielleicht 2 Bildchen einfügen könnte die sich immer wiederholen - und zwar Horizontal (x-Achse) ...
Wie könnte ich das hinbekommen? Dass sich die besagten Blauen Bilder Y und YY genau gewünscht wiederholen?

Gegeb.falls siehts besser aus wenn sich nur ein Bildchen wiederholt und das Menü ganz nach Links und nicht mittig verschoben wird... Was würdet ihr denn empfehlen? : )

Achja: Des ist das beste Forum für Html weit und breit : )

Judi · 06.09.2006, 20:33

Hallo

warum legst Du Dir keine Hintergrundfarbe in das <div> mit der Farbe blau? Oder ein Hintergrundbild, was sich wiederholt?

Das mit den Bildchen rechts und links ist meines Erachtens Unsinn

His.Master's.Voice · 06.09.2006, 21:06

Hallo Stephan,

wie Judi schon angedeutet hat, weise dem DIV einfach folgendes zu:

Code:

<div style="background-color:#0000FF; height:21px; text-align:center;">

Die 5px breiten Grafiken (blau) brauchst du dann wirklich nicht mehr!
Noch besser wäre natürlich die style Anweisung mit einem externen Stylesheet einzubinden.

-I-Chaos-I-1337 · 06.09.2006, 21:50

hm... Wie könnt ich es denn machen, dass ein Umbruch einer Tabelle verhindert wird?

Ich würde nämlich gerne meine Buttons über den Hintergrund rüber machen, damit er damit verschmelzt --- > http://de.geocities.com/tost222/Seiten/Index.html

Sodass es aussieht, als ob sich nur das rote bewegt, wenn man ein Rollover macht... Der Übergang von Schwarz zu Weiß müsste exakt mit dem Hintergrund übereinstimmen...

Wüsstet ihr wie das zu machen wäre? : /

Und wie ich gerade feststelle - der Schwarzweiß-Übergang wiederholt sich schon in der mitleren Tabelle, obwohl er die exakte Höher der tabelle hat : (

Achja: Wie bekomm ich den Abstand weg der zwischen dem Linken Abschluss und dem Mittelteil ist? Die Tabelle, hat keine Linienbreite...

His.Master's.Voice · 06.09.2006, 22:54

Stephan,

deine Fragestellung ist nicht so verständlich.

Zitat:

- Tabellenumbruch
- damit er damit verschmelzt
- nur das rote bewegt
- Der Übergang von Schwarz zu Weiß

Momentan kann ich nicht nachvollziehen was du meinst.

-I-Chaos-I-1337 · 07.09.2006, 14:45

Zitat:

Zitat von -I-Chaos-I-1337

hm... Wie könnt ich es denn machen, dass ein Umbruch einer Tabelle verhindert wird?

Ich würde nämlich gerne meine Buttons über den Hintergrund rüber machen, damit er damit verschmelzt --- > http://de.geocities.com/tost222/Seiten/Index.html

Sodass es aussieht, als ob sich nur das rote bewegt, wenn man ein Rollover macht... Der Übergang von Schwarz zu Weiß müsste exakt mit dem Hintergrund übereinstimmen...

Wüsstet ihr wie das zu machen wäre? : /

Und wie ich gerade feststelle - der Schwarzweiß-Übergang wiederholt sich schon in der mitleren Tabelle, obwohl er die exakte Höher der tabelle hat : (

Achja: Wie bekomm ich den Abstand weg der zwischen dem Linken Abschluss und dem Mittelteil ist? Die Tabelle, hat keine Linienbreite...

- Tabellenumbruch
- damit er damit verschmelzt
- nur das rote bewegt
- Der Übergang von Schwarz zu Weiß

Hier --> http://de.geocities.com/tost222/erklaerung.GIFversuch ich es nocheinmal zu erklären : )

Wenn das Button-Bild, wie auf dem ErklärungsBild zu sehen ist, nun exakt auf dem Schwarz zu Weiß und wieder Weiß zu Schwarz Übergang vom Hintergrund iist, sieht es aus als ob sich nur das rote vom Button-Bild bewegt - sofern man ein Rollover daraus macht...

Ich kann schlecht erklären : (

His.Master's.Voice · 07.09.2006, 17:00

Den Übergang (Schwarz/Weis-Grafik) hast du zwar mit background eingebunden, diese wird dann natürlich in alle Richtungen horizontal wie vertikal wiederholt.

Du müsstest die Wiederholung mit repeat-x einschränken, siehe hier. D.h. der Übergang kommt in den Hintergrund, die Rollovergrafik (rot) musst du dann in die gleiche Mittelzeile setzen.

Zu den kleinen 1px Abständen rechts und links: Die Tabellenformatierung mischst du sehr stark, mal mit th mal mit td. th ist für den Tabellenkopf vorgesehen. Ersetze mal alle th durch td. Unten sind auch nur zwei Spalten definiert. Das solltest du erst mal bereinigen. Dann habe ich nach dem img Tag für den Schwarz/Weis Übergang noch ein Leerzeichen   gesehen.

-I-Chaos-I-1337 · 07.09.2006, 21:35

Das mit der X-Achse wusste ich schon, allerdings wusste ich nur wie ich das für den Homepagehintergrund im Dremweaver einstelle, aber nicht für eine einzelne Tabelle. Ich habe mir daran versucht - es klappt irgendwie nicht : (

<td height="21" align="center" valign="middle" nowrap="nowrap" background="../Bilder/MenueBilderOben/Normal/OMenueAbstandLinks.png"><div style="background-image: url(../Bilder/MenueBilderOben/Normal/OMenueAbLinks.png);
background-repeat:repeat-x;float:left;"></td>

Was habe ich schon wieder alles falsch gemacht? : )

zu dem td und th - das habe ich nun, wie ich denke verbessert.
Hat das eigendlich irgendwelche negativen Auswirkungen auf die Homepage?

Gruß Stephan

His.Master's.Voice · 07.09.2006, 22:41

Zitat:

Zitat von -I-Chaos-I-1337

Was habe ich schon wieder alles falsch gemacht? : )

Mehrere Sachen...!

1. Du hast den Hintergrund jetzt zweimal eingebunden, im td Tag und nochmal im div Tag.
2. Es würde auch der End-Tag </div> für den Container fehlen und du hast nicht mit width und height gesagt wie gross der Container werden soll. Da auch erstmal nichts im Container enthalten ist, schrumpft dieser auf eine Nullgröße. Somit sieht man den Hintergrund aus dem td Tag, der natürlich noch die ganz normale Wiederholung in x und y Richtung hat.
3. Den <div> Container brauchst du nicht unbedingt, setze die style Anweisung in den td Tag.

Bsp:

Code:

<td height="21" align="center" valign="middle" nowrap="nowrap" style="background-image: url(../Bilder/MenueBilderOben/Normal/OMenueAbLinks.png);
background-repeat:repeat-x;">
...
...
hier kommt jetzt die <img Anweisung für die Rollovergrafik
...
...
</td>

Alternativ kannst du denn <div> Container auch stehen lassen, dann aber möglichst mit width und height. Float:left brauchst du auch nicht weil die Rollovergrafik zentriert werden soll. Aus dem td Tag müsste dann aber die background Anweisung raus.

-I-Chaos-I-1337 · 08.09.2006, 12:36

Zitat:

Zitat von ngc4594

Mehrere Sachen...!

1. Du hast den Hintergrund jetzt zweimal eingebunden, im td Tag und nochmal im div Tag.
2. Es würde auch der End-Tag </div> für den Container fehlen und du hast nicht mit width und height gesagt wie gross der Container werden soll. Da auch erstmal nichts im Container enthalten ist, schrumpft dieser auf eine Nullgröße. Somit sieht man den Hintergrund aus dem td Tag, der natürlich noch die ganz normale Wiederholung in x und y Richtung hat.
3. Den <div> Container brauchst du nicht unbedingt, setze die style Anweisung in den td Tag.

Bsp:

Code:

<td height="21" align="center" valign="middle" nowrap="nowrap" style="background-image: url(../Bilder/MenueBilderOben/Normal/OMenueAbLinks.png);
background-repeat:repeat-x;">
...
...
hier kommt jetzt die <img Anweisung für die Rollovergrafik
...
...
</td>

Alternativ kannst du denn <div> Container auch stehen lassen, dann aber möglichst mit width und height. Float:left brauchst du auch nicht weil die Rollovergrafik zentriert werden soll. Aus dem td Tag müsste dann aber die background Anweisung raus.

Ich habe es zwar jetzt hinbekommen, dass das Linke Abschlussbild von dem Menü mit dem sich wiederholenden Bild der Mitte von dem Menü verschmilzt, allerdings habe ich das mit dem rechten Abschluss nicht hinbekommen...

Das ist die Homepage bis jetzt:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SunOfDarkness</title>
<style type="text/css">
<!--
body,td,th {
	color: #FFFFFF;
}
body {
	background-color: #000000;
	background-repeat: repeat-x;
}
-->
</style></head>

<body>
<table width="1030" border="0" cellspacing="0">
  <tr>
    <td width="111" scope="col"></td>
    <td width="787" scope="col"><div align="center"><img src="../Bilder/Logo/LogoDummy.png" alt="" name="Logo" width="232" height="96" id="Logo" /></div></td>
  </tr>
  <tr>
    <td nowrap="nowrap" style="background-image: url(../Bilder/MenueBilderOben/Normal/OMenueAbLinks.png);
background-repeat:no-repeat;"></td>
    <td height="21" nowrap="nowrap" style="background-image: url(../Bilder/MenueBilderOben/Normal/OMenueAbstandLinks.png);
background-repeat:repeat-x;"><div align="center"><img src="../Bilder/MenueBilderOben/Normal/OMenueHome.png" width="98" height="21" /></div></td>
    <td width="126" nowrap="nowrap" style="background-image: url(../Bilder/MenueBilderOben/Normal/OMenueAbRechts.png);
background-repeat:no-repeat;"><div align="left"></div></td>
  </tr>
  <tr>
    <td rowspan="2" align="left" valign="top"><div align="center"><img src="../Bilder/MenueBilderOben/Normal/OMenueHome.png" width="98" height="21" /></div></td>
    <td></td>
  </tr>
  <tr>
    <td height="626"></td>
  </tr>
</table>
</body>
</html>

Und warscheinlich enthält der Code eine Menge Fehler, da er so aussieht:

http://de.geocities.com/tost222/Seiten/Index.html

Und ich komme einfach nicht weiter : (

Dass, wie oben erwähnt, der Rolloverbutton mit dem Tabellenhintergrund verschmilzt habe ich immer noch nicht geschaft...

His.Master's.Voice · 08.09.2006, 19:05

Habe den Code mal bereinigt: Die linke Grafik hast du nicht richtig gesliced. Oben fehlt 1px Linie, unten 1px Linie wegnehmen.
Der Rolloverbutton ist zwar jetzt genau in der Mitte, an den Seiten ist der Übergang jedoch auch nicht ganz sauber.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SunOfDarkness</title>
<style type="text/css">
body, td, tr, table, div {
	color: #FFFFFF;
	margin:0; padding:0;
	background-color: #000000;
	border:none;
}

div#logo {
	text-align:center;
}
</style>

</head>

<body>

<table width="1024" cellspacing="0" cellpadding="0">
  <tr>
    <td width="111"></td>
    <td width="787"><div id="logo"><img src="../Bilder/Logo/LogoDummy.png" width="232" height="96" alt="Logo" /></div></td>
    <td width="126"></td>
  </tr>
  <tr>
    <td height="21" style="background-image: url(../Bilder/MenueBilderOben/Normal/OMenueAbLinks.png); background-repeat:no-repeat"></td>
    <td height="21" style="background-image: url(../Bilder/MenueBilderOben/Normal/OMenueAbstandLinks.png); background-repeat:repeat-x; text-align:center;"><img src="OMenueHome.png" width="98" height="21" alt="" /></td>
    <td height="21" style="background-image: url(../Bilder/MenueBilderOben/Normal/OMenueAbRechts.png); background-repeat:no-repeat"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

</body>
</html>

-I-Chaos-I-1337 · 08.09.2006, 21:11

Sowas blödes - ich wusste, dass es soetwas sein musste : )
Das button Bild und der echte Abschluss waren verkehrt von mir gemacht : ))

Herzlichen Dank für eure und vorallem deine Mühen Uwe!!!
Ich hoffe ich habe nicht allzuviele Umstände gemacht : D