2 Bilder im Hintergrund sollen sich an Auflösung anpassen

Florian

Hallo

ich habe ein Problem mit HTML, das ich selber nicht lösen kann und nun hoffe ich auf eure Hilfe.

Meine Seite soll sich an die Bildschirmauflösung des Besuchers anpassen. Im Hintergrund sollen 2 bilder übereinander sein.

Das obere soll sich nur in der Breite wiederholen, die Höhe ändert sich aber nicht (das Bild ist z.B. 1px breit und 10px hoch).
Das untere der beiden soll sich in der Breite, sowie in der Höhe ändern (je nachdem wie lang eine Tabelle im <body>-Bereich ist. (dies Bild ist z.B. 4*4 Pixel groß)
Hier ein Bild zur Verdeutlichung.

Wie mache ich das?[/url]

Sleeme

Hm kann ich schon machen aber du weisst das 10px sehr wenig ist?

jau weiss ich. war auch einfach nur ein dahingeschriebener wert.
kann auch 200px oder sonst was sein.

Sleeme

Versuch mal so:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
<html>
<head>
<title></title>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<table cellspacing="0" height="100%" cellpadding="0" width="100%" bgcolor="#ffffff">
	<tr>
		<td style="height:10px; background-image:url(bildoben.jpg); background-repeat:repeat-x">
		</td>
	</tr>
	<tr>
		<td style="background-image:url(bildunten.jpg); background-repeat:repeat-all" >
		</td>
	</tr>
</table>
</body>
</html>

Alles anzeigen

Dass bildoben.jpg muss dann natürlich genau die höhe haben wie die Zelle, sonst bleibt da platz frei...

Florian

Wenn ich nun noch eine Tabelle einbauen möchte, die z.B. 1000px hoch ist, funktioniert das so doch aber nicht oder täusch ich mich da?
Die beiden Bilder sollen nämlich sozusagen das Hintergrundbild darstellen, und dadrüber soll der normale HTML-Inhalt erscheinen.

MyFavour

hallo,

eine image-skalierung ist mittels html+css meines wissens nicht möglich
mit JS würde es sich verwirklichen lassen, davon ist aber eher abzuraten

ansonsten mußt du zusehen, daß Du mittels background-repeat und -position und -attachment auskommst

Sleeme

doch eigentlich schon, dann gibts rechts n scrollbalken...

und wo würde ich meine tabelle einbauen?
Denn sie soll ja über den anderen beiden liegen

Sleeme

hm was? dachte du willst das das ganze über die ganze seite geht...wie willste dann noch eine Tabelle da reinbringen?

Florian

das ist ja grad mein problem.
oder vllt. haste ja eine andere möglichkeit.
ich soll einem bekannten den code für folgendes design schreiben:
http://img506.imageshack.us/my.php?image=portfolio245ps.png

nun soll sich der grüne balken im hintergrund automatisch verlängern, und zwar nur nach rechts soweit die bildschirmauflösung es zulässt.
Und die "scanlines" auf dem weissen hintergrund sollen den rest des bildschirms bedecken.
Auf dem ganzen Hintergrund soll die Seite liegen...halt so wie es auf dem Bild ist
Das Design in der Mitte, wo später der Inhalt rein kommt, verlängert sich je naach Länge des Inhalts. Und wenn es weiter nach unten reicht, sollen die scanlines natürlich auch weiter runter reichen.

Und das weiss ich nicht wie ich das umsetzen soll

Sleeme

Hm "bisschen" komplizierter als das oben und ich begreiff den zusammenhang nicht
Soll der Inhalt dann immernoch zentriert sein? also soll der grüne balken rechts und links jeweils verlängert werden?

Florian

aaalllsoooo:
Hintergrund
Soll genauso aussehen wie auf dem Bild.
D.h.
Oben: Von oben bis ca. 100px dadrunter soll der mit scanlines-versehene weisse hintergrund sein.
Mitte: Dadrunter kommt die grüne Leiste
Unten: Wiederrum dadrunter, und bis zum Ende der Seite (entweder Bildschirmauflösung oder Tabelle wo der Inhalt drin ist), soll wieder der scanlines-versehene weisse hintergrund kommen

Vordergrund
Hier kommt der eigentliche Inhalt hin.
Also würde reichen wenn ich da nur eine kleine tabelle oder sonst irgendwas sehe (Inhalts-tabelle)
Dort kommt dann das Design mit dem Header und den Inhalten.
Und dieser Teil liegt über dem Hintergrund.
Der Vordergrund beeinflusst den Hintergrund so, als dass bei Verlängerung der Inhalts-Tabelle sich der Teil unten, also die weissen scanlines, so weit verlängern, bis die Inhalts-Tabelle endet.

yeti66

So oder ähnlich??

Funktioniert momentan aber nur im Explorer.

Gruß yeti66

Florian

so ungefähr habe ich mir das vorgestellt.
nur da es nur im IE richtig funktioniert, reicht es mir leider nicht

yeti66

Mir auch nicht. Aber da muß halt noch dran gearbeitet werden.

Gruß yeti66

MyFavour

hallo,

ich hab' mal gestern schnell ein Konzept dafür geschrieben:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
<title>Design Studie Layout</title>
<meta name="copyright" content="Daniel Papst" />
<meta name="date" content="2005-12-02" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<style type="text/css">
* {
	margin: 0;
	padding: 0;
 }
 body {
 	font-size: 100.01%;
 }
 .bgbody {
 	background-color: blue;
	margin: 0 auto;
	text-align: center;
 }
 .bgdiv {
 	background-color: red;
	height: 80px;
	margin-top: 10%;
 }
 #main {
	margin-left: 5%;
	margin-right: 5%;
	margin-top: -15%;
	width: 90%;
	text-align: left;
	background-color: #ffc;
	border-left: 4px double lime;
	border-right: 4px double lime;
 }
 #header {
 	color: green;
	text-align: center;
	clear: both;
	border-top: 4px double lime;
	border-bottom: 4px double lime;
	padding: .3em;
 }
 #menue {
 	padding: 1em;
 	float: left;
	display: inline;
	width: 12em;
 }
 #maincont {
 	text-align: justify;
 	padding-top: 1em;
	float: left;
	display: inline;
 }
 #footer {
 	color: green;
	clear: both;
	text-align: center;
	border-top: 4px double lime;
	border-bottom: 4px double lime;
 }
 #menue h3 {
 	margin-top: .5em;
	padding-left: 1.2em;
 }
 #menue ul {
 	border-left: 1em solid blue;
 	list-style: disc outside none;
 }
 #menue ul li {
	margin-left: .3em;
 }
</style>
</head>
<body class="bgbody">
 <div class="bgdiv">
 </div>
 <div id="main">
  <div id="header">add a HEADER Text or an Image - what ever you want...</div>
  <div id="menue">
   <h3>MENUE 1</h3>
   <hr>
   <ul>
    [*]Menue Item 1.1
    [*]Menue Item 1.2
    [*]Menue Item 1.3
    [*]Menue Item 1.4
    [*]Menue Item 1.5
   [/list]
   <h3>MENUE 2</h3>
   <hr>
   <ul>
    [*]Menue Item 2.1
    [*]Menue Item 2.2
    [*]Menue Item 2.3
    [*]Menue Item 2.4
   [/list]
   <h3>LINKS</h3>
   <hr>
   <ul>
    [*]Link Item 01
    [*]Link Item 02
    [*]Link Item 03
   [/list]
   <h3>ADVERTS</h3>
   <hr>
   <ul>
    [*]Advert Item 01
    [*]Advert Item 02
   [/list]
  </div>
  <div id="maincont">
   <h3>MAIN CONTENT</h3>



Test
TEST
test
TEST</p>



Test
TEST
test
TEST</p>



Test
TEST
test
TEST</p>



Test
TEST
test
TEST</p>



Test
TEST
test
TEST</p>



Test
TEST
test
TEST</p>
  </div>
  <div id="footer">add your FOOTER (copyrights or similars)</div>
 </div>
</body>

Alles anzeigen

das ganze funkt. zumindest im IE5.5 u. IE6 sowie im F1.0

es ist bei weitem nicht optimiert und soll lediglich zeigen, wo man ansetzen kann - die farben sind katastrophal zusammengestellt und sind nur zur Veranschaulichung so extrem gewählt
wie man die Background-Images einbinden kann solltest Du ja bereits wissen

yeti66

Joh, das ist es.
Ich hatte es auch nur auf die schnelle mache wollen und dabei sind mir fast die Augen zu gefallen und denken konnte ich wohl auch nicht mehr.
Mein Respekt, sauber gemacht,

Das wird Florian aber freuen.

Gruß yeti66

Zitat von yeti66

Joh, das ist es.
Ich hatte es auch nur auf die schnelle mache wollen und dabei sind mir fast die Augen zu gefallen und denken konnte ich wohl auch nicht mehr.
Mein Respekt, sauber gemacht,

Das wird Florian aber freuen.

Gruß yeti66

Danke.. es wird für mich sein.. *freu*

Florian

Funktioniert genauso wie ich es mir vorstelle!
Vielen Danke

Eine kleine Frage hab ich noch.
Und zwar:
Unter jeder <table>-Tabelle entsteht ein 1-2px großer weisser Abstand zur nächsten Tabelle.
Woher kommt der? Ich möchte den nämlich weg haben.
[Blockierte Grafik: http://img10.imageshack.us/img10/9199/niodfas3ez.gif]

MyFavour

hallo,

da ist irgendwo ein margin oder padding gesetzt, ohne Code kann ich das aber nicht genauer sagen

Tags