Tabelle läuft aus dem Gesamtcontainer

tiroler · 06.01.2009

Hi all,
kreiere gerade neue Layouts und habe das mal mit PSD ausprobiert.
Habe die Datei gesliced- und bin nun am coden:

Ein kleines Problemchen habe ich bereits:
meine Navi-habe ich gesliced und will die nun im div steuerung einbauen-
dabei rutscht mir das Bildergewerk jedoch aus der gesamten Breite raus:

So sollte es sein:

So sieht es tatsächlich aus:

hier der Code:

<!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" xml:lang="de" lang="de">

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>try it- in CSS</title>



<style type="text/css">

</style>

</head>

<body>

<div id="kopfbereich">
</div>

<div id="steuerung">

<TABLE WIDTH=940 CELLPADDING=0 CELLSPACING=0 >

<TR>
<TD>
<IMG SRC="Bilder/header2.jpg" WIDTH=440 HEIGHT=110 ALT=""></TD>
<TD>
<a href="home.html" target="_blank" ><IMG SRC="Bilder/home-button.jpg" WIDTH=100 HEIGHT=110 ALT=""></a></TD>
<TD>
<a href="CMS.html" target="_blank"><IMG SRC="Bilder/CMS-Button.jpg" WIDTH=100 HEIGHT=110 ALT=""></a></TD>
<TD>
<a href="hosting.html" target="_blank"><IMG SRC="Bilder/Hosting-Button.jpg" WIDTH=100 HEIGHT=110 ALT=""></a></TD>
<TD>
<a href="preise.html" target="_blank"><IMG SRC="Bilder/Preise-Button.jpg" WIDTH=100 HEIGHT=110 ALT=""></a></TD>
<TD>
<a href="trailer.html" target="_blank"><IMG SRC="Bilder/Trailer-Button.jpg" WIDTH=100 HEIGHT=110 ALT=""></a></TD>
</TR>

</TABLE>

</div>

<div id="schatten">

</div>

<div id="inhalt">
Schuhmacher und Schütze<br>

Ein Holzschuhmacher und ein Bogenschütze mit Brot- beziehungsweise Wassersack durchschritten eine Saccharose-Pfütze. Zwar war sie gottlos, aber zäh wie Lack. Der Schütze sprach: "Wir müssen sie entwässern. Nur so wird sie zu gutem Scheuersand. Jedoch kann ich sie schwerlich trockenbessern. Mein Sack enthält den falschen Gegenstand." Der Holzschuhmacher sprach: "Oh, ich vermute, du willst mein sittsam frommes Beutelbrot - auf dass es zuckernd sich zu Tode blute und selbstvergessen stirbt den Opfertod." "Mein Gott, du laberst wie ein schwuler Pfaffe, dem man den Wäschebeutel klauen will. Ist dir denn klar, dass ich es niemals schaffe? In deinem Sack ist Brot, in meinem Müll!" "Du bist ein Bösewicht, Sadist und Schlächter und willst mein Brot als süsses Opferlamm. Der ärgste Tempelräuber ist gerechter. Mein Brot, verdammt, ist heilig. Und kein Schwamm!" So zogen sie denn lauthals schreiend weiter, teils sakrosankt, teils niedersäbelnd schroff. Noch heute singen sie dem Anstaltsleiter das Lied vom Pfützlein mit dem Zuckerstoff.

</div>

<div id="footer">

</div>

</body>
</html>

bekomme das grad nicht gebacken ?- wahrscheinlich sitze ich schon zu lange ?!
Also please help me

sokie · 06.01.2009

AW: Tabelle läuft aus dem Gesamtcontainer

verwirf den unsäglichen Code aus dem Grafikprogramm einfach und setz die Bilder nach gewohnter xhtml/css methode ein, dann hast du die Probleme erst gar nicht.
sowas muss man nicht verschlimmbessern, sondern rausschmeissen.

waterwebdesign · 06.01.2009

AW: Tabelle läuft aus dem Gesamtcontainer

Definier in deiner CSS

Code:

#steuerung img{border:0;}

dann sollte es passen.

tiroler · 06.01.2009

AW: Tabelle läuft aus dem Gesamtcontainer

klar sokie- aber ich will die vielen Fragen welche hier im Forum nachdem die psd- gesliced wurde auch mal beantworten können: so probiere ich dies mal mit dem Einbau des codes, welcher mir Imageready liefert ( codeschnipsel zumindest ).

@ waterwebdesign: nö dat geht nicht

Top_Gun · 06.01.2009

AW: Tabelle läuft aus dem Gesamtcontainer

Die Ränder um die Bilder sorgen aber dafür, dass es nicht passt. Die müssen also weg...

eFoX · 06.01.2009

AW: Tabelle läuft aus dem Gesamtcontainer

auf die schnelle:

1) Tabelle keinen Rand geben
2) <a> keinen Rand geben
3) CSS Auslagern

sokie · 06.01.2009

AW: Tabelle läuft aus dem Gesamtcontainer

Dann solltest du auch deine Seite von image-ready kreiren lassen - so ein codeverriss bringt ja unter doctype xhtml strict einmal gar nichts ausser einer Menge Stress.
und wenn du dem vorschlag von waterwebdesign nachgehst, dann kannst du in der breite und höhe schon mal einige Pixel sparen.

tiroler · 06.01.2009

AW: Tabelle läuft aus dem Gesamtcontainer

sorry- hatte noch ne Klammer-
der no Frame für den Img- war OK !

Danke sehr.

so bins nochmal:

WIEDERAUFNAHME MEINER PROBIERSTÜCKCHEN

Das zeigt er an- sprich Fehler in der Höhenlage

gehe davon aus, dass es wieder der Rand um die Bilder ist

und das ist der code dazu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>wde-3-gesliced</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

</style>

</head>

<body style="background-color:#FDFAFA;">



<div id="Tabelle_01">



<div id="header1">
<img id="header1" src="Bilder/header1.jpg" width="940" height="70" alt="" />
</div>



<div id="header2">
<img id="header2" src="Bilder/header2.jpg" width="440" height="110" alt="" />
</div>



<div id="home-button_">
<a rel="nofollow" href="http://www.web-design-edenkoben.de/index.html">
<img src="Bilder/home-button.jpg" width="100" height="110" border="0" alt="Home" />
</div>


<div id="cms">
<a rel="nofollow" href="http://www.web-design-edenkoben.de/cms.html">
<img src="Bilder/CMS-Button.jpg" width="100" height="110" border="0" alt="Content Management System" />
</div>



<div id="hosting">
<a rel="nofollow" href="http://www.web-design-edenkoben.de/hosting.html">
<img src="Bilder/Hosting-Button.jpg" width="100" height="110" border="0" alt="Hosting Daten" />
</div>


<div id="preise">
<a rel="nofollow" href="http://www.web-design-edenkoben.de/preise.html">
<img src="Bilder/Preise-Button.jpg" width="100" height="110" border="0" alt="Kosten der Webseiten" />
</div>


<div id="trailer">
<a rel="nofollow" href="http://www.web-design-edenkoben.de/trailer.html">
<img src="Bilder/Trailer-Button.jpg" width="100" height="110" border="0" alt="Videos für Ihre Webseite" />
</div>



<div id="linie-1">
<img id="linie-1" src="Bilder/wde-3-gesliced_08.jpg" width="940" height="20" alt="" />
</div>



<div id="linie-2">
<img id="linie-2" src="Bilder/wde-3-gesliced_09.jpg" width="940" height="12" alt="" />
</div>



<div id="text-links">
<img id="text-links" src="Bilder/wde-3-gesliced_10.jpg" width="540" height="228" alt="" />

</div>



<div id="text-rechts">
<img id="text-rechts" src="Bilder/wde-3-gesliced_11.jpg" width="400" height="228" alt="" />

</div>


<div id="footer">
<img id="footer" src="Bilder/footer.jpg" width="940" height="60" alt="" />
</div>
</div> </div>


</body>
</html>

edit: slicebild angefügt

so sieht das slicen aus:

sokie · 16.02.2009

AW: Tabelle läuft aus dem Gesamtcontainer

Warum denn so kompliziert slicen?
mit 2-3 slices und einer liste für die navigation sollte es doch ausreichen.
zB:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>wde-3-gesliced</title>
</head>

<body>
<div id="wrapper">
  <div id="header">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">CMS</a></li>
      <li><a href="">Hosting</a></li>
      <li><a href="">Preise</a></li>
      <li><a href="">Trailer</a></li>
    </ul>
  </div>
  <div id="content">
    Als Krönung von Gutenbergs Druckkunst ist die 42zeilige Bibel (B 42) anzusehen... 
  <div id="footer">
  
  </div>



</div>
</body>
</html>

css:

Code:

*{
   margin: 0;
   padding: 0;
}

#wrapper{
   width: 800px;
   margin: auto;
}
#header{
   height: 145px;
   position: relative;
   background: url(img/header.png) no-repeat;
}
#header ul{
   position: absolute;
   top: 70px;
   left: 298px;
}
#header li{
   float: left;
   list-style: none;
}
#header li a{
   text-decoration: none;
   text-align: center;
   display: block;
   color: white;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 18px;
   width: 91px;
   padding: 50px 0 5px 0;
}
#content{
   background: url(img/content.png) no-repeat;
   padding: 22px 12px 5px 12px;
}
#footer{
   height: 72px;
   background: url(img/footer.png) no-repeat;
}

nostra87 · 16.02.2009

AW: Tabelle läuft aus dem Gesamtcontainer

@

Du musst auch in jeder Spalte die Breite und Höhe angeben, anschließend
setzt du sicherheitshalber alles auf "Oben" anstatt auf "standart"

mfg nostra87

tiroler · 16.02.2009

AW: Tabelle läuft aus dem Gesamtcontainer

danke sokie- so funktioniert es.
Habe nur 3 slices-header, content, footer.

Wenn ich nun jedoch für den body eine BG Farbe definieren möchte- legt sich diese Farbe auch über die Navi, das heisst, meine Farbbuttons werden abgedeckt-
wie kann ich das vermeiden ?

sokie · 17.02.2009

AW: Tabelle läuft aus dem Gesamtcontainer

eigentlich sollte der body hinter den ganzen inhalten liegen...?!

dem header (und anderen Elementen) kannst du doch die background: #ffffff zusätzlich geben... hast du mit transparenten png/gif gearbeitet?

tiroler · 17.02.2009

AW: Tabelle läuft aus dem Gesamtcontainer

sokie schrieb:
eigentlich sollte der body hinter den ganzen inhalten liegen...?!
dem header (und anderen Elementen) kannst du doch die background: #ffffff zusätzlich geben... hast du mit transparenten png/gif gearbeitet?

Nein - nichts transparentes. Bei der Navi ist im css ja nur die Farbe, Stil und die Position definiert.