Obere Grafik auf unterschiedliche Auflösungen kacheln...

Hypopotamus · 04.11.2007, 17:04

wahrscheinlich ist es ganz einfach, aber ich komme einfach nicht drauf. Habe seit ca. 3 Wochen ein Notebook und dabei ist mir aufgefallen,daß meine Homepage in 800x600 und 1024x768 gut aussieht. Aber bei 1280x800 hört der obere Balken irgendwo im Nichts auf. Nun ist es so daß die letzte Grafik 67 Pixel breit ist und problemlos gekachelt werden könnte.
Am besten Ihr schaut es Euch einmal an:
www.bunte-blumenwelt.de
Der Textframe unter dem Kopf macht keine Probleme, der gleicht sich der Bildschirmbreite variabel an.
Ich habe schon die letzte Tabelle im Kopf geändert und breiter gemacht. Momentan steht sie auf automatisch. Die Möglichkeit wäre sie auf feste Pixel zu stellen und breiter zu machen. Aber ist das wirklich sinnvoll? Zweite Frage: Mit welchen HTML-Code oder eventuell CSS kachle ich die Grafik am besten?
Danke für Eure Hilfe
claudia

Nele · 04.11.2007, 19:49

Moin Claudia,

so könntest du das machen.
Du musst einfach den rechten Teil der Grafik, der immer gleich bleibt, als 1px breites Bild speichern und dann kacheln.
Wenn du noch Fragen zum Beispiel hast, immer her damit.

Hypopotamus · 04.11.2007, 20:17

Hallo,
ja genauso will ich es haben. Weiß nur noch nicht wie ich es am besten anstellen soll.

Code:

<body bgcolor="F0F1EF">

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img border="0" src="images/ban_1.jpg" width="771" height="26"></td>
<td><img border="0" src="images/ban_2.jpg" width="67" height="26"></td>
</tr>
<tr>
<td><img border="0" src="images/ban_3_6.jpg" width="771" height="78"></td>

<td><img border="0" src="images/ban_4.jpg" width="67" height="78"></td>
</tr>
<tr>
<td><img border="0" src="images/ban_5.jpg" width="771" height="30"></td>
<td><img border="0" src="images/ban_6.jpg" width="67" height="30"></td>
</tr>
</table>

Weiß nur nicht wie ich es in diesem Code am besten ändere. Arbeite mit Adobe GoLive und da kann ich nichts über die Eingaben finden. Und mit HTML habe ich so meine Probleme. Kleiner Hinweis wäre super. Habe SELFHTML schon bereitliegen

Viele Grüße
Claudia

Nele · 04.11.2007, 20:28

Hi, hast du dir den Quelltext der Datei und deine abgeänderte CSS-Datei schon mal angeschaut?

HTML:

HTML-Code:

<div id="header"><img src="images/header.jpg" width="597" height="134" alt="Blumenwelt Header" /></div>

CSS:

Code:

#header{height:134px; background:url(../images/bg_head.gif) repeat-x}
#header img{display:block}

Im CSS-Teil siehst du, dass das div mit der id="header" angesprochen wird. Es wird ihm eine Höhe vergeben und ein Hintergrundbild (das 1px breite, siehe hier), das sich horizontal (auf der x-Achse) wiederholen soll.
Zusätzlich wird mit #header img das Bild, das direkt in der HTML-Datei eingebunden wird, angesprochen (also ein Bild, das innerhalb eines Elements mit der id="header" liegt). Es wird ihm mitgeteilt, dass es sich wie ein Blockelement verhalten soll, da es ansonsten noch etwas Raum nach unten einnehmen würde (es würde auf der Grundlinie eines imaginären Textes liegen, sich also wie ein Textelement verhalten).

Wie du es direkt in Golive machen kannst, weiß ich nicht, da ich es nicht benutze.

Hypopotamus · 04.11.2007, 20:31

Danke für die ausführliche Antwort. Werde mich gleich einmal eingehend damit beschäftigen.

Viele Grüße
Claudia