✔ Css und Bilder Grösse

[PeterCool]

ich habe ein Problem.
ich suche eine Möglichkeit bilder in der Gösse anzupassen
in einer CSS datei.
hier mal die Datei
"<!-- Fuß-Navi -->
<center>
<hr size="1" width="100%" align="LEFT" color="#ff9900">

<table width="100%" height="30" class="tab3bg" >
<tr><!--tab3bg definiert hintergrundgrafik sie ist 500x20 pix geross -->
<td>
<table >
<tr >
<td width="34%" rowspan="2"><center><A href="home.php?foot=impr&flash=<?= $flash ?>">&raquo;Impressum &amp; Disclaimer</A></center></td>
<td width="34%"><center><a href="home.php?foot=kont&flash=<?= $flash ?>">&raquo;Kontakt</A></center></td>
<td width="34%" rowspan="2"><center><a href="" target="_blank">&raquo;Gästebuch</a></center></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
<!-- Fuß-Navi Ende -->"

das ist der CSS dazu.
".tab3bg {
background-color: #131351;
background-image: url(../img/static/css1/title_right.gif);
background-repeat: no-repeat;
} "

wie bekomme ich die Grafik dazu immr 100 % angezeit zu werden.
da die Tabelle immer unterschiedlich gross ist.
auserdem soll wen eine Andere CSS geladen wird auch die Graffik Wechseln.

Lieben Gruss Peter

 

[sisela]

Hi!
Ich hoffe ich habe dich richtig verstanden!
Versuch mal bei der Tabellendefinition

width="100%" height="30"

wegzulassen und auch bei der Spalte nichts anzugeben. Wenn es keine festen Größen in gleicher Zeile oder Spalte gibt, müsste sich die Tabelle deinem Bild anpassen.
Du musst dich entscheiden, entweder willst du bestimmte Spalten- und Zeilengrößen oder nicht!

Aber ehrlich gesagt würde ich die Bildgröße deiner Tabelle anpassen...

 

[PeterCool]

Ja genau das ist ja mein Problem
wenn ich die Bild Grösse der Tabelle Anpasse und die Auflösung Ändere von 1024 auf 1280 ist sie seite Futsch weil das bild zu klein ist. andersrum aber genau so.
darum will ich dem background GIF sagen Passe dich der Tabelle an. aber ebend strecken und Zerren und nicht wiederholen.

 

[sisela]

Also ich würde mich einfach auf eine gewisse Breite der Website festlegen. Die Auflösung von 800x600 kann denke ich inzwischen jeder und 1024x768 dürfte Standard sein. (Seite muss natürlich kleiner sein, weil es ja noch Browserelemente gibt).
Aber design doch deine so, dass du teilweise feste Breiten hast, z.B Menuspalte links und rechts news oder irgendwas. Dort legst du sagen wir eine Breite von je 200pixel fest, Dann weißt du ganz genau, dein Hintergrundbild mit auch 200px passt auf jeden Fall. Die Mittelspalte, mit beispielsweise Textinhalt machst du entweder in einer Farbe oder mit einem Hintergrund den du kacheln kannst.
Genau diese Spalte machst du variabel z.B. 100%. Dann hast du links und rechts feste Werte und in der Mitte eine variable Breite.
Nun kannst du die Auflösung groß oder klein machen, die Anordnung bleibt die Gleiche nur die Mittelspalte ändert sich.

Oder

 

[hela]

Hallo PeterCool,

...darum will ich dem background GIF sagen Passe dich der Tabelle an. aber ebend strecken und Zerren und nicht wiederholen.

Ich kenne keine jetzt keine CSS-Eigenschaft, mit der ein Hintergrundbild in der Größe geändert wird.

Aber man könnte sicherlich das Bild als Blockelement mit einer Breite und einer Höhe von jeweils 100% vom BODY deklarieren und dann in der z-Ebene 0 (Basisebene) ablegen. Alle anderen Elemente legst du dann in höheren z-Ebenen über dieses Bild.
In diesem Zusammenhang wäre es vielleicht auch eine gute Idee, wenn du dich vom tabellenorientierten Design verabschiedest.

Eine weitere Möglichkeit wäre noch die Größenänderung über JavaScript vorzunehmen, aber das gehört m.E. in ein anderes Forum.

edit:
Das ist natürlich nicht nur für den gesamten BODY sondern auch für einzelne Blockelemente möglich. Zum Beispiel:

   <div id="fussNavi">
   <img src="../img/static/css1/title_right.gif" alt="">
   <div class="links"><A href="#">&raquo;Impressum &amp; Disclaimer</A></div>
   <div class="mitte"><a href="#">&raquo;Kontakt</A></div>
   <div class="rechts"><a href="#" target="_blank">&raquo;Gästebuch</a></div>
   </div>

und zugehörige Styles:

   html, body {
   	width: 100%;
   	height: 100%;
   }
   html, body, div {
   	margin: 0;
   	border: 0;
   	padding: 0;
   }
   #fussNavi {
   	position: relative;
   	height: 30px;
   }
   #fussNavi img {
   	position: absolute;
   	width: 100%;
   	height: 30px;
 	display: block;
   }
   #fussNavi .links {
   	position: relative;
   	top: 0;
   	left: 0;
   	width: 33%;
   	height: 30px;
   	text-align: center;
 	z-Index: 1;
   }
   #fussNavi .mitte {
   	position: relative;
   	top: -30px;
   	left: 33%;
   	width: 34%;
   	height: 30px;
   	text-align: center;
	z-Index: 1;
    }
   #fussNavi .rechts {
   	position: relative;
   	top: -60px;
   	left: 67%;
   	width: 33%;
   	height: 30px;
   	text-align: center;
	z-Index: 1;
    }

 

[PeterCool]

Hi hela & sisela

Danke Für eure Hilfe.
ja das mit den Tabellen stört mich auch ein wenig abe ich bin recht neu was das ganze Programieren an geht, sicher ist es besser in Ebnen zu arbeiten was ich ja auch schon gemacht habe nur wiess ich nicht wie sich das dann auch noch in PHP umsetzen Läst ist mir momentan zu hoch. da die gesamte webseite aus 20 einzelnen php Modulen besteht und recht Komplex ist.
aber ich habe jetzt ja eine Lösung die für mich ok ist.

Code
"<table align="center" width="100%" height="28" cellpadding="0" cellspacing="0">
<tr >
<td class="eckl1" width="18" >&nbsp;</td>
<td class="eckm1" width="373" ><center><A href="home.php?foot=impr&flash=<?= $flash ?>"><font class="box">&raquo;Impressum &amp; Disclaimer</font></A></center></td>
<td class="eckm1" width="248"><center><a href="home.php?foot=kont&flash=<?= $flash ?>"><font class="box">&raquo;Kontakt</font></A></center></td>
<td class="eckm1" width="384" ><center><a href="http://.php" target="_blank"><font class="box">&raquo;Gästebuch</font></a></center></td>
<td class="eckr1" width="17" >&nbsp;</td>
</tr>
</table>"

ich habe einfach vorn und hinten einen td eingebat und diese Grösse fest gemacht den mittelteil lasse ich sich wiederholen und schon passt es auf alle Grössen .
das eintige was halt nicht geht sind veräfe von rechts nach links aber damit kann ich leben;-)
schönen Gruss Peter Cool Berlin