Problem design aus Photoshop in Html

Stormiiii · 16.01.2009

Hallo,

Hab folgendes Problem hab mir mit Psd eine Grafik erstellt die auf der Webseite als Linkliste gelten soll.

Mein Problem ist aber das es jetzt nicht mehr auf der Homepage eine Grafik ist sonder total verschoben alles weil ich es ja zuschneiden musste.

Wie bekomm ich das hin das alles wieder zusammen ist ohne die abstände ?? ich hänge ein screen des Bildes auf der HP an und denn quelltext bitte um Hilfe.

HTML:

<html>
<head>
<title>haus sicherung</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (haus sicherung.psd) -->
<table id="Tabelle_01" width="425" height="426" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td colspan="5">
   <img src="images/stories/haus-sicherung_01.gif" width="425" height="112" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/stories/haus-sicherung_02.gif" width="2" height="141" alt=""></td>
  <td>
   <a href="index.php?option=com_content&view=article&layout=form"><img src="images/stories/haus-sicherung_03.gif" width="150" height="141" alt="" border="0"></a></td>
  <td colspan="2">
   <a href="index.php?option=com_content&view=article&layout=form"><img src="images/stories/haus-sicherung_04.gif" width="139" height="141" alt="" border="0"></a></td>
  <td>
   <a href="index.php?option=com_content&view=article&layout=form"><img src="images/stories/haus-sicherung_05.gif" width="134" height="141" alt="" border="0"></a></td>
 </tr>
 <tr>
  <td colspan="2">
   <a href="index.php?option=com_content&view=article&layout=form"><img src="images/stories/haus-sicherung_06.gif" width="152" height="172" alt="" border="0"></a></td>
  <td>
   <a href="index.php?option=com_content&view=frontpage"><img src="images/stories/haus-sicherung_07.gif" width="123" height="172" alt="" border="0"></a></td>
  <td colspan="2">
   <a href="index.php?option=com_content&view=article&layout=form"><img src="images/stories/haus-sicherung_08.gif" width="150" height="172" alt="" border="0"></a></td>
 </tr>
 <tr>
  <td>
   <img src="images/stories/Abstandhalter.gif" width="2" height="1" alt=""></td>
  <td>
   <img src="images/stories/Abstandhalter.gif" width="150" height="1" alt=""></td>
  <td>
   <img src="images/stories/Abstandhalter.gif" width="123" height="1" alt=""></td>
  <td>
   <img src="images/stories/Abstandhalter.gif" width="16" height="1" alt=""></td>
  <td>
   <img src="images/stories/Abstandhalter.gif" width="134" height="1" alt=""></td>
 </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Chickenshooter · 16.01.2009

AW: Problem design aus Photoshop in Html

Hä??

das es jetzt nicht mehr auf der Homepage eine Grafik ist sonder total verschoben alles weil ich es ja zuschneiden musste

Drück Dich bitte klarer aus.

MfG Chick

MainAngler · 16.01.2009

AW: Problem design aus Photoshop in Html

Hmm, so ganz verstehe ich dein Problem auch nicht. :rolleyes:

Warum extra zuschneiden? So wie es aus PS kommt, sollte es passen - mal abgesehen davon, dass es ein Tabellenlayout ist.

toxictoon · 16.01.2009

AW: Problem design aus Photoshop in Html

hab jetzt nichht genau gekuckt, aber schau dir mal deine ganzen verschiedenen "width" weiten der bilder an...

desweiteren könntest du für deine "abstadhalter" eine einfach hintergrundfarbe nehmen anstelle der bilder! ... da es ja eh einfarbig ist, sie ich vermute?

Stormiiii · 16.01.2009

AW: Problem design aus Photoshop in Html

Also nochmal sorry wenn ich mich falsch ausgedrückt habe

Ich habe über Photoshop eine grafik erstellt und geschnitten dann für web gespeichert.

jetzt hab ich das Problem das die Grafik total verschoben ist wie auf dem screen zu sehen ist.

und ich leider nicht mehr auf die Lösung komme wie ich die lerr räume zwischen denn einzelnen Bildern wieder weg bekomme :'(

Kann mir da einer sagen wie ich das jetzt machen muss verzweifel gerade ein bisschen.

Chickenshooter · 16.01.2009

AW: Problem design aus Photoshop in Html

Soweit ich das noch weis ist das mit dem Slicen unter Photoshop

richtig gut gelöst.

Da sind dann auch keine "Freiräume"

räume zwischen denn einzelnen Bildern

Wenn wieder erwarten doch Platz zwischen den Grafiken sein sollte

cellpadding und cellspacing auf 0 border auf 0 und dafür sorgen das

nicht in einem verknüpften css-file eine Formatierung statt findet.

MfG Chick

Stormiiii · 16.01.2009

AW: Problem design aus Photoshop in Html

Ist leider alles schon auf 0 gestellt also werd ich mir was anderes einfallen lassen müssen :'( trotzdem danke.

MainAngler · 16.01.2009

AW: Problem design aus Photoshop in Html

Also als ich mal das Problem hatte:uhm::rot: half:

Code:

a img { display:block; }
html,body {
margin:0;
padding:0;}

Stormiiii · 21.01.2009

AW: Problem design aus Photoshop in Html

Wenn du mir jetzt noch erklärst wo ich das einfügen soll bitte denn code hab ich noch nie gesehen

MainAngler · 21.01.2009

AW: Problem design aus Photoshop in Html

Falls du eine *.css verlinkt hast dann da rein, falls du css-code direkt in der html verwendest, dann zw. <style> und </style> da wo normal css-code rein kommt.

Stormiiii · 21.01.2009

AW: Problem design aus Photoshop in Html

Also erstmal dank an MainAngler leider haben wir keine Lösung für das Problem gefunden daher wieder zum Ursprung.

Also um es nochmal ganz klar darzustellen,

Ich habe über adobe eine Grafik erstellt die geschnitten und dann denn Html Code eingefügt und weitgehend bearbeitet.

Jetzt zum Problem ich habe die Grafik im Editor der Homepage in einem stück allerdings wird es auf der Seite zerpflückt.

Habe mit MainAngler auch schon die css datei bearbeitet allerdings auch das ohne Ergebniss.

Wenn noch wer eine Idee hätte immer raus damit.

sub_hero92 · 21.01.2009

AW: Problem design aus Photoshop in Html

welches der bilder ist es denn?

Chickenshooter · 22.01.2009

AW: Problem design aus Photoshop in Html

Moin,

geschnitten

mit Slices??

und dann denn Html Code eingefügt

mit DreamWeaver??

Eine Ausgabe mit PS als HTML mit einem "gesliceten" Bild erstellt automatisch

HTML!!

weitgehend bearbeitet.

und wieso das???

Editor der Homepage

Dreamweaver???

Grafik in einem stück

also doch nicht "gesliced"???

Also Du siehst Fragen über Fragen drück Dich bitte klarer aus oder zeig

Deine Seite mal wenn Sie on line ist.

Stormiiii · 22.01.2009

AW: Problem design aus Photoshop in Html

ok ich mach es jetzt ganz einfach hier der Link zur seite die ich meine schaut es euch an.

Spielzeuge

ich dreh durch überalle sind die abstände weg (Private webspace) nur da eben nicht :'(

sub_hero92 · 22.01.2009

AW: Problem design aus Photoshop in Html

passen die img's denn auch zu 100% in die tabelle rein?
img width=td width?!

JayPi · 22.01.2009

AW: Problem design aus Photoshop in Html

Du solltest dir auf jeden Fall mal im CSS die folgenden beiden Klassen anschauen (bzw. gleich löschen):

Code:

.contentpaneopen img {
    margin: 5px;
}
.contentpane img {
    margin: 5px;
}

Wenn du das machst werden die Kästen schonmal ein wenig zusammengeschoben, es stimmt aber trotzdem noch irgendwo etwas nicht.

Stormiiii · 22.01.2009

AW: Problem design aus Photoshop in Html

Die letze idee hab ich gemacht mit dem raus löschen und siehe da wir kommen der sache ein bisschen näher.

Spielzeuge

bis dahin schonmal tausend dank an alle die mir helfen bei meinem Problem.

JayPi · 22.01.2009

AW: Problem design aus Photoshop in Html

Wenn du jetzt noch die Höhe der Tabelle um einen Pixel korrigierst isses fast perfekt:

Code:

<table border="0" cellspacing="0" cellpadding="0" width="425" height="[B]425[/B]" id="Tabelle_01">

Ich hab keine Ahnung was du da gemacht hast, aber irgendwas ist da beim Slicen schiefgelaufen. Deswegen ist der letzte Kasten noch verschoben. Die Tabellenzellen sehen nämlich so aus:

Wenn du da noch ein bisschen an den Grafiken rumbastelst, müsste alles so aussehen wie du es dir vorstellst.

Noch ein Tipp: Füge folgende CSS-Regel in die CSS-Datei ein, dann verschwinden die unschönen Aufzählungszeichen bei der Navigation

:

Code:

#left ul {
   list-style-type:none;
}

Stormiiii · 22.01.2009

AW: Problem design aus Photoshop in Html

So tausend dank Leute es passt ich hab selber noch was gefunden womit es dann auch endlich alles passt

Die Abstandhalter waren eingestellt auf

height="1" und ich hab die umgeschrieben auf "0" damit ist alles passend naja die kleinsten fehler sieht man eben nicht wenn sie vor einem sind

trotzdem danke.

MIKNE · 22.01.2009

AW: Problem design aus Photoshop in Html

Da kommt mir etwas mit dem splitten komisch vor

laut deinem html Code ist dein Bild im obersten Layout 425 px breit
im der Mitte setzt es sich aus 3 Bildern mit 150px 139px 134px = 423px
und unten aus 3 Bildern mit 152px 123 px 150px = 425px

das kann doch nie zusammenstimmen, die Pixel in der Breite müssen immer gleich sein