nicht angemeldet
DIV Breite automatisch
Gunnar BittersmannHallo,
Ich habe eine Frage: Kann ich folgenden Code Mit div layer realisieren?
Wenn ja wie?
<table width = "100%">
<tr>
<td style = "background-image:url(bg.jpg);background-position:top right;"> </td>
<td style = "width:15px;background-image:url(rahmen_links.jpg);"></td>
<td style = "background-image:url(bg-mitte.jpg);width:960px;">Bla bla bla </td>
<td style = "width:15px;background-image:url(rahmen_rechts.jpg);"></td>
<td style = "background-image:url(bg.jpg);background-position:top left;"> </td>
</tr>
</table>
Es geht darum, dass im Hintergrundbild Buchstaben enthalten sind, und in der mitte läuft ein schatten in die bilder.
Darum muss in der linken spalte das hintergrundbild rechtsbündig sein.
Ich habe schon viel gegoogelt, aber leider nichts gefunden, draum bitte ich um Hilfe.
Lg bermar
-
<table width = "100%">
<tr>
<td style = "background-image:url(bg.jpg);background-position:top right;"> </td>
<td style = "width:15px;background-image:url(rahmen_links.jpg);"></td>
<td style = "background-image:url(bg-mitte.jpg);width:960px;">Bla bla bla </td>
<td style = "width:15px;background-image:url(rahmen_rechts.jpg);"></td>
<td style = "background-image:url(bg.jpg);background-position:top left;"> </td>
</tr>
</table>> Es geht darum, dass im Hintergrundbild Buchstaben enthalten sind, Also Inhalt? Dieser erwartet entweder als Text im HTML notiert zu werden, oder als Inhalt eines alt Attributes, ergi in einem <img> Element erwähnt zu werden. > und in der mitte läuft ein schatten in die bilder. > Darum muss in der linken spalte das hintergrundbild rechtsbündig sein. Schwer vorstellbar. Der Inhalt ohne die Hintergrund-Zeichen keinen Verlust erleidet, kannst du die CSS pseudoelemete :before und :after verwenden. IrgendEin Browser läuft dann halt nackt rum. mfg Beat -- ><o(((°> ><o(((°> <°)))o>< ><o(((°>o Der Valigator leibt diese Fische-
Hallo, du hast da was falsch verstanden.
Der einfachkeithalber ein Bild:
Also bild2 und bild3 haben 15px breite, Der inhalt 980px der rest soll automatisch gehen.
Bild 1 muss aber rechtsbündig positioniert werden, da sonst der abstand mit den bildern nicht passt.
Wie mache ich Bild 1 und Bild 4(also die div layer) dass diese automatisch mit der bildschirmgröße aufgehen, und das hintergrundbild anzeigen?Hat da jemand eine Lösung?
-
@@bermar:
nuqneH
Bild 1 muss aber rechtsbündig positioniert werden, da sonst der abstand mit den bildern nicht passt.
Nein. Du musst deine Bilder richtig planen.
Eins ist das Hintergrundbild, das den gesamte Breite des Viewports ausfüllt. Das Bild selber muss nur so breit sein von einem Schriftzug zum anderen (40 Pixel, wenn ich richtig gemessen habe), es wird horizontal wiederholt.
Die Bilder mit dem Schatteneffekt liegen darüber. Sie enthalten nichts von dem Hintergrundbild, sondern sind teiltransparent, so dass der Schriftzug durch den Schatten hindurchscheint. Dadurch kannst du den Container beliebig auf dem Schriftzug-Hintergrung positionieren.
Teiltransparenz bekommt man mit PNG-8 hin [GRAFIKFORMAT], dann funzt es auch im IE 6. Oder aber mit PNG-24 (und evtl. für IE 6 per '* html'-Hack ein GIF).
Dein Container hat eine feste Breite von 980 Pixel? Davon würde ich abraten, da Nutzer mit schmalerem Viewport horizontal scrollen müssen.
Wenn dein Container aber doch eine feste Breite hat, brauchst du für linken und rechten Rand keine getrennten Bilder, sondern nur eins, das über die ganze Breite des Containers geht. Es wird vertikal wiederholt, dessen Höhe sollte so bemessen sein, dass dies nicht allzuoft geschieht. [PERFORMANCE-BP1]
Oder du machst den Schatteneffekt gleich mit CSS, moderne Browser können das schon: '-moz-box-shadow', '-webkit-box-shadow'.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
Hallo,
Erstaml danke für deine Hilfe.
Die Idee mit PNGs hatte ich auch schon, wobei das Problem ist, dass in PNG 8 so ein Farbverlauf scheiße ausshieht, und PNG 24 kann man nicht verwenden wegen IE6.
Mit Tabellen kann man dieses ganz einfach mit JPGs lösen, darum war meine Frage ob dies so auch mit div layer machbar ist. Hat da sonst noch wer eine Idee?
-
@@bermar:
nuqneH
Die Idee mit PNGs hatte ich auch schon
Warum bist du vom rechten Weg wieder abgekommen?
wobei das Problem ist, dass in PNG 8 so ein Farbverlauf scheiße ausshieht
Dass die meisten Grafikprogamme teiltransparente PNG-8 nicht beherrschen und welche es doch tun, ist in dem bereits verlinkten Artikel nachzulesen.
und PNG 24 kann man nicht verwenden wegen IE6.
Das ist Quatsch. Dass es im IE 6 nicht optimal aussieht, ist irrelevant, davon fällt in China kein Sack Reis um. IE 6 ist mittlerweile irrelevant geworden – was die Darstellung betrifft; funktionieren sollte schon alles in ihm.
darum war meine Frage ob dies so auch mit div layer machbar ist.
Ja, ist es.
Hat da sonst noch wer eine Idee?
Du hast sie bereits.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
@Qapla
Das ist Quatsch. Dass es im IE 6 nicht optimal aussieht, ist irrelevant, davon fällt in China kein Sack Reis um. IE 6 ist mittlerweile irrelevant geworden – was die Darstellung betrifft; funktionieren sollte schon alles in ihm.
Da ist das Problem zuhause: Eine der Vorgaben ist es, dass die Seite im IE6 auch gut ausschaut, und darum muss man auf PNGs verzichten...
Darum die Frage ob das auch mit JPGs und Divs realisierbar ist...Lg bermar
-
@@bermar:
nuqneH
Da ist das Problem zuhause: Eine der Vorgaben ist es, dass die Seite im IE6 auch gut ausschaut
(1) Was heißt „gut“? Mit nichtteiltransparentem Schatten sähe die Seite immer noch gut genug aus, IMHO.
(2) Wer macht solche Vorgaben? Vielleicht sollte man dem/n/r Verantwortlichen mal Browserstatistiken unter die Nase halten, wie viele (sprich: wie Wenige) Nutzer noch mit IE < 7 unterwegs sind.
und darum muss man auf PNGs verzichten...
Welchen Teil von „Teiltransparenz bekommt man mit PNG-8 hin [GRAFIKFORMAT], dann funzt es auch im IE 6“ hast du nicht verstanden?
Darum die Frage ob das auch mit JPGs und Divs realisierbar ist...
JPEG (mit E!) ist dafür völlig ungeeignet. Auch das steht in dem verlinkten Artikel.
Ich würde dich doch bitten, diesen erstmal zu lesen.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
Erstmals danke für deine Hilfe.
Jedoch ist das Problem das wir das Design von einem Grafiker bekommen, als komplettes Screendesign.
Da kann (will, wegen massiven zeitaufwands) ich keine Transparenten PNGs machen, darum meine frage, ob man es mit nicht transparenten Grafiken auch machen kann...
Lg bermar
-
@@bermar:
nuqneH
Jedoch ist das Problem das wir das Design von einem Grafiker bekommen, als komplettes Screendesign.
Da kann (will, wegen massiven zeitaufwands) ich keine Transparenten PNGs machen, darum meine frage, ob man es mit nicht transparenten Grafiken auch machen kann...
Ja, wie du ursprünglich wolltest: den Container so zu positionieren, dass er wie gewollt auf der Hintergrundgrfik zu liegen kommt.
Das wäre aber unsinnig. Einerseits handelst du dir damit heute schon die Probleme von morgen ein. Andererseits ist der Zeitaufwand dafür um einiges höher als der für das Erstellen der teiltransparenten PNGs.
PNG-24 sollte kein Problem sein. Das sollte dir der Grafiker liefern, der hat schließlich die (Photoshop?)-Datei mit den getrennten Ebenen. Dann kann er es auch gleich noch als PNG-8 bzw. GIF für IE < 7 liefern (auf die Teiltransparenz sei geschi…).
Ansonsten ist doch in dem Artikel ein Tool verlinkt, das teiltransparente PNG-8 erstellen kann. (Ausprobiert hab ich das aber auch noch nicht.)
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
-
-
-
-
-
-