• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Background Image verzieht Tabelle

Status
Für weitere Antworten geschlossen.
S

sharp

Neues Mitglied
Hallo,

ich habe mittels Photoshop ein Layout gebastelt, in Slices geschnitten und möchte diese nun mittels Tabelle anzeigen.

Hierbei wollte ich die Slices als Bilder einbinden und sie verlinken.
In einigen Zellen soll jedoch das Bild als Background eingefügt werden, da ich darüber Text ausgeben möchte. Doch sobald ich mit Background-image:url
arbeite, wird die Tabelle verzogen. Auch absolute Größenangeben (width, height) in den Zellen verhindern dies nicht.

Ich bin nun schon einige Zeit am rumprobieren, es will aber nicht gelingen.
Hat jemand von Euch vielleicht einen Tip für mich?

Viele Grüße,
Danny

Hier ein Link wo oben das Original zu sehen ist und darunter mit einem Slice als Background : www.toy-teufel.de

Hier der Quellcode :

HTML: 
<table id="Tabelle_01" width="980" height="130" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="3" rowspan="5">
            <img src="Bilder/header_bg.jpg" width="322" height="101" alt=""></td>
        <td rowspan="5" width="201" height="101">&nbsp;</td>
            
        <td width="200" height="101" colspan="2" rowspan="5" nowrap bgcolor="#FFFFFF"></td>
        <td colspan="3">
            <img src="Bilder/header_infoleiste.gif" width="257" height="22" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="Bilder/header_cart_logo.gif" width="47" height="38" alt="zum Warenkorb"></td>
        <td width="148" height="14" nowrap bgcolor="#FFFFFF"></td>
        <td rowspan="3">
            <img src="Bilder/header_cart_right.gif" width="62" height="56" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/header_cart_top.gif" width="148" height="24" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="Bilder/index1_09.gif" width="47" height="41" alt=""></td>
              <td style="background-image:url(Bilder/header_cart_items.gif);" nowrap align="center">&nbsp;</td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/header_cart_checkout.gif" width="148" height="23" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/header_trustedshops.gif" width="62" height="52" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/header_homepage.gif" width="158" height="29" alt="Startseite"></td>
        <td>
            <img src="Bilder/header_account.gif" width="159" height="29" alt="zum Kundenkonto"></td>
        <td colspan="2">
            <img src="Bilder/header_info.gif" width="206" height="29" alt="Info & Service"></td>
        <td>
            <img src="Bilder/header_contact.gif" width="142" height="29" alt="Kontakt"></td>
        <td colspan="3" width="253" height="29">&nbsp;</td>
            
    </tr>
    <tr>
        <td width="158" nowrap></td>
        <td width="159" nowrap></td>
        <td width="5" nowrap></td>
        <td width="201" nowrap></td>
        <td width="142" nowrap></td>
        <td width="58" nowrap></td>
        <td width="47" nowrap></td>
        <td width="148" nowrap></td>
        <td width="62" nowrap></td>
    </tr>
</table>
 
Dann mach's doch ned mit style="background-image: url/bild.jpg;"

Sondern:
background="url/bild.jpg"

Vielleicht gehts dann. Nur probieren.

Ansonsten machs mit CSS
 
Ich meinte eine Extern CSS Datei.

Hast wohl glaubs Bock auf die kleineren loszugehen. Tztztz
 
tztz.. ^^
Tja würd ich auch machen wüsste ich mehr wie du. :mrgreen:

edit:
Ihr habt hier noch einige Probleme mit der Zeit
 
Hallo,

habe es mal mit einer externen Stylesheet - Datei getestet.
Ich hiermit wird das Problem nicht gelöst.

siehe www.toy-teufel.de
Beispiel 2 rechts.

Externe CSS :

HTML: 
TD.bgtest {
background : url(Bilder/header_cart_items.gif);
}
Hat jemand eine Lösung parat oder kann die Ursache des Problems nennen ?
Würde mich sehr über Hilfe freuen.

Beste Grüße,
Danny
 
Puh......
habe gerade ca 30min daran gesessen und hatte 2 Lösungen
mit divs und css. Eine für den IE und eine für den FF ;) Aber
eine adäquate für beide zu finden war mir nicht möglich.

EIn kleiner Tipp im allgemeinen. Ich würde weniger Bildschnippsel
verwenden und dafür lieber (sofern man eh JS einsetzt) Nifty Corners
verwenden. In diesem Fall wäre das die definitiv einfachere Möglichkeit
 
Hallo Prostel,

Danke das Du das mal getestet hast.
Dieser Fall macht mich nachwievor stutzig, da geschnittene Grafiken
in Tables ja mittlerweile den Alltag im Web darstellen und ich keinen
Fehler finden kann.


Mich würden da alle 3 Varianten (IE, FF und "Nifty Corners")
interessieren.

Wärst Du wohl so nett und würdest diese preisgeben ? :)


Mit besten Grüßen,
Danny
 
sharp schrieb:
da geschnittene Grafiken in Tables ja mittlerweile den Alltag im Web darstellen
Zum Vergrößern anklicken....


Traurigerweise ja!
Tables sind für sowas aber nicht da, genausowenig sollte man sie für
große Seiten mit Texten etc verwenden, dafür sind divs gemacht worden.
Tables passen wunderbar zu echten Tabellen und um z.B. Formular-Felder
anzuordnen.

Den Vorschlag für den IE habe ich leider schon gelöscht. Für den FF klappt
folgendes (hässlich) :)
HTML: 
<style>
  div {
    margin:0px;
    padding:0px;
  }
  #down img {
    margin-top:18px;
  }
</style>
<div style="float:left; margin-right:-8px;">
  <div>
    <img src="header_cart_logo.gif"><img src="header_cart_top.gif" alt="">
  </div>
  <div style="float:left;">
    <img src="index1_09.gif" alt="">
  </div>
  <div id="down" style="margin-left:47px; background-image:url(header_cart_items.gif);background-repeat:no-repeat;">
    <img src="header_cart_checkout.gif" alt="">
  </div>
  <div style="margin-top:0px; padding-top:0px;">
  </div>
</div>
<div">
  <img src="header_cart_right.gif" alt=""><br><img src="header_trustedshops.gif" alt="">
</div>
Nifty Corner Beispiel:
http://www.html.it/articoli/nifty/nifty.zip
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nifty Corners: Javascript CSS rounded corners</title>
<link rel="stylesheet" type="text/css" href="nifty/niftyCorners.css">
<link rel="stylesheet" type="text/css" href="nifty/niftyPrint.css" media="print">
<script type="text/javascript" src="nifty/nifty.js"></script>
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
    return;
Rounded("div#content","#fff","#9DD4FF");
}
</script>
<style>
div#content{background: #9DD4FF;width:350px}
</style>
</head>
<body>
<div id="content" style="width:200px;">
  blabla<br>
  blabla<br>
  blabla<br>
  blabla<br>
  blabla<br>
  blabla  
</div>
</body>
</html>
 
Hallo Prostel,

vielen Dank für Deine Mühe.
Ich werde mal mit Divs ein wenig experimentieren,
habe noch eine alte Webseite mit absolut Div - Layern,
vielleicht hilft mir das.

Nifty Corners finde ich schlichtweg genial, nur habe ich da
ein paar Bedenken, zwecks Sicherheitseinstellungen im Browser
der Besucher.

Vielen Dank!

Grüße,
Danny
 
Hallo,

ich klinke mich mal einfach in die Frage ein.
Kann mir bitte jemand sagen wie ich über folgendes Bild
einen Text legen kann.

PHP: 
    <tr>
    <td colspan="7" rowspan="7">
    <img src="Bilder/Flossenschwimmen-links.jpg"
    alt="" height="273" width="303"></td>
Gibt es da eine für IE und FF gültige Lösung?

Wäre nett, wenn mir jemand die Codezeilen editiert damit ich weiß
wie ich es auch in der html Datei machen muß.

Danke
 
Scubamarco schrieb:
Hallo,

ich klinke mich mal einfach in die Frage ein.
Kann mir bitte jemand sagen wie ich über folgendes Bild
einen Text legen kann.

PHP: 
    <tr>
    <td colspan="7" rowspan="7">
    <img src="Bilder/Flossenschwimmen-links.jpg"
    alt="" height="273" width="303"></td>
Gibt es da eine für IE und FF gültige Lösung?

Wäre nett, wenn mir jemand die Codezeilen editiert damit ich weiß
wie ich es auch in der html Datei machen muß.

Danke
Zum Vergrößern anklicken....
Wow, wie hast du einen 5 Monate alten Thread gefunden :lol:

Naja, so müsste es gehen:
PHP: 
<tr>
  <td colspan="7" rowspan="7">
    <div style="background:URL('Bilder/Flossenschwimmen-links.jpg');height:273px;width:303px;">
      Hier der Text.
    </div>
  </td>
 
@ Scubamarco

Bitte grabe keine alten Themen mehr aus, sondern mach ein neues auf.

[highlight]Thema beendet - Grabschändung.[/highlight]
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben